diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index aa8ba10..b597b59 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -13,7 +13,7 @@ export default function Home() {
         <div className="flex px-5 pt-16 pb-12 mb-12 lg:px-36 min-h-[calc(100vh-180px)]">
           <div className="flex flex-col gap-8 w-full xl:pr-32 lg:w-1/2">
             <div className="flex flex-col gap-0">
-              <p className=" text-[72px] lg:mt-40  leading-[70px] lg:text-[90px] bg-gradient-to-r from-red-600 via-red-200 to-emerald- 4 inline-block text-transparent bg-clip-text">
+              <p className=" text-[72px] lg:mt-40  leading-[70px] lg:text-[90px] bg-gradient-to-r dark:from-red-600 dark:via-red-200 to-emerald- 4 inline-block text-transparent bg-clip-text from-red-800 via-red-700">
                 Kurama-chat
                 <br /> anytime, anywhere
               </p>
diff --git a/frontend/src/components/Home/LoginForm.tsx b/frontend/src/components/Home/LoginForm.tsx
index 608c31b..7c1877f 100644
--- a/frontend/src/components/Home/LoginForm.tsx
+++ b/frontend/src/components/Home/LoginForm.tsx
@@ -55,7 +55,7 @@ function LoginForm() {
         <div className="flex  gap-5 items-center">
           <button
             type="submit"
-            className="flex hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 "
+            className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 "
           >
             {isLoading ? (
               <ClipLoader color="white" size={20} />
@@ -64,12 +64,12 @@ function LoginForm() {
             )}
           </button>
           <Link legacyBehavior href="signin">
-            <a className="flex  hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 ">
+            <a className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 ">
               Sign In
             </a>
           </Link>
           <Link legacyBehavior href="signup">
-            <a className="flex hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 ">
+            <a className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 ">
               Sign Up
             </a>
           </Link>
diff --git a/frontend/src/components/Home/Navbar.tsx b/frontend/src/components/Home/Navbar.tsx
index 00f04e5..72c3605 100644
--- a/frontend/src/components/Home/Navbar.tsx
+++ b/frontend/src/components/Home/Navbar.tsx
@@ -30,12 +30,14 @@ function Navbar() {
                 <>
                   <Link
                     id={`${label}${index}`}
-                    className="flex flex-col items-center"
+                    className="flex flex-col items-center dark:text-white"
                     href={link}
                     key={index}
                     target={externalPage ? "_blank" : "_self"}
                   >
-                    {React.createElement(icon, { className: "w-10 h-10" })}
+                    {React.createElement(icon, {
+                      className: "w-10 h-10 dark:text-white",
+                    })}{" "}
                     {label}
                   </Link>
                   {title && (
@@ -81,12 +83,14 @@ function Navbar() {
                   {icon ? (
                     <Link
                       id={`${label}${index}`}
-                      className="flex gap-5 items-center justify-center"
+                      className="flex gap-5 items-center justify-center dark:text-white"
                       href={link}
                       key={index}
                       target={externalPage ? "_blank" : "_self"}
                     >
-                      {React.createElement(icon, { className: "w-6 h-6" })}
+                      {React.createElement(icon, {
+                        className: "w-6 h-6 dark:text-white",
+                      })}{" "}
                       <span className="pt-1">{label}</span>
                     </Link>
                   ) : (