diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index 92d00ed2..30beeb59 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -37,13 +37,17 @@
   }
 </script>
 
-<div class="form-control w-full max-w-2xl mb-2 {hidden ? 'hidden' : ''}">
+<div
+  class="form-control w-full max-w-2xl mb-2 text-muted dark:text-white {hidden
+    ? 'hidden'
+    : ''}"
+>
   <label for={id} class="label pb-1">
-    <span class="text-white label-text">{label}</span>
+    <span class="text-muted dark:label-text">{label}</span>
   </label>
   <div class="relative">
     <input
-      class=" input input-lg input-bordered border border-gray-600 focus:outline-none w-full bg-secondary placeholder-gray-300 text-white whitespace-normal"
+      class="input input-lg input-bordered border border-gray-600 focus:outline-none w-full bg-white dark:bg-secondary placeholder-gray-600 dark:placeholder-gray-300 whitespace-normal"
       {type}
       {placeholder}
       {required}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aa628263..dab77e72 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -901,7 +901,7 @@
             {:else}
               <a
                 href="/login"
-                class="inline-flex items-center justify-center rounded bg-[#fff] px-4 py-2 text-sm font-semibold text-black shadow-xs transition-all duration-150 sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
+                class="inline-flex items-center justify-center rounded bg-[#3B82F6] dark:bg-[#fff] px-4 py-2 text-sm font-semibold  shadow-xs transition-all duration-150 sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
               >
                 Login
               </a>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dfba3859..24686e0c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -74,11 +74,11 @@
     <div class="flex justify-center mb-5">
       <a
         href="/pricing"
-        class="cursor-pointer hidden sm:flex items-center gap-2 px-6 py-3.5 sm:px-3.5 sm:py-2.5 text-[1rem] font-medium text-indigo-300 bg-indigo-500/20 border border-indigo-500/30 rounded-lg transition-all duration-200 hover:bg-indigo-500/30"
+        class="cursor-pointer hidden sm:flex items-center gap-2 px-6 py-3.5 sm:px-3.5 sm:py-2.5 text-[1rem] font-medium dark:text-indigo-300 bg-blue-100 dark:bg-indigo-500/20 sm:hover:bg-indigo-500/30 border border-indigo-500/20 shadow dark:border-indigo-500/30 rounded-lg transition-all duration-100"
         tabindex="0"
       >
         <svg
-          class="w-5 h-5 text-zinc-300"
+          class="w-5 h-5 text-zinc-500 dark:text-zinc-300"
           fill="currentColor"
           viewBox="0 0 20 20"
           aria-hidden="true"
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 046024e3..244b6ad2 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -26,7 +26,7 @@
           {
             toast.success("Login successfully!", {
               style:
-                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
+                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px; ",
             });
             await update();
             break;
@@ -82,20 +82,18 @@
 />
 
 <div
-  class="relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading
+  class="text-muted dark:text-white relative w-full max-w-3xl mx-auto min-h-screen pb-40 sm:mt-10 {oauthLoading
     ? 'opacity-[0.2]'
     : ''}"
 >
   <div class="grid grid-cols-1 gap-4">
     <div class="relative">
-      <h1
-        class="text-center text-white text-2xl sm:text-3xl pt-10 sm:pt-0 font-bold"
-      >
+      <h1 class="text-center text-2xl sm:text-3xl pt-10 sm:pt-0 font-bold">
         Sign In
       </h1>
     </div>
 
-    <span class="text-gray-400 text-center"> Welcome back! </span>
+    <span class="dark:text-gray-400 text-center"> Welcome back! </span>
 
     <div class="relative w-full max-w-lg m-auto">
       <form
@@ -120,7 +118,7 @@
         <div class="w-full max-w-lg">
           <a
             href="/reset-password"
-            class="text-sm text-blue-400 sm:hover:text-white sm:hover:underline"
+            class="text-sm text-blue-500 dark:text-blue-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:underline"
             >Forgot Password?</a
           >
         </div>
@@ -129,13 +127,13 @@
           {#if !loading && !isClicked}
             <button
               type="submit"
-              class="cursor-pointer py-2.5 bg-[#fff] border-none sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+              class="cursor-pointer py-2.5 bg-[#3B82F6] dark:bg-[#fff] border-none sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
             >
               <span>Login</span>
             </button>
           {:else}
             <label
-              class="cursor-not-allowed btn bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+              class="cursor-not-allowed btn bg-[#3B82F6] dark:bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
             >
               <div class="flex flex-row m-auto items-center">
                 <span class="loading loading-infinity"></span>
@@ -145,8 +143,8 @@
           {/if}
         </div>
 
-        <div class="divider divider-[#fff] pt-5 pb-10">
-          <span class="text-white text-[1rem] z-10">Or login using</span>
+        <div class="divider dark:divider-[#fff] pt-5 pb-10">
+          <span class=" text-[1rem] z-10">Or login using</span>
         </div>
 
         <div class="flex flex-row items-center gap-x-5 pb-6">
@@ -157,7 +155,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverGoogle}
               on:mouseleave={handleHoverGoogle}
-              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
+              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary"
             >
               <svg
                 class="{isHoveredGoogle
@@ -207,7 +205,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverDiscord}
               on:mouseleave={handleHoverDiscord}
-              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
+              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary"
             >
               <svg
                 class="{isHoveredDiscord
@@ -742,7 +740,7 @@
               on:click={() => (oauthLoading = !oauthLoading)}
               on:mouseenter={handleHoverGithub}
               on:mouseleave={handleHoverGithub}
-              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary text-white"
+              class="cursor-pointer shrink-0 rounded-full w-12 h-12 relative bg-default flex items-center justify-center border border-gray-600 sm:hover:bg-secondary"
             >
               <svg
                 class="{isHoveredGithub
@@ -760,10 +758,12 @@
         </div>
 
         <p
-          class="pb-1 text-sm w-full max-w-lg text-white flex justify-center items-center"
+          class="pb-1 text-sm w-full max-w-lg flex justify-center items-center"
         >
           You don't have an account?
-          <a href="/register" class="text-blue-400 hover:underline ml-1"
+          <a
+            href="/register"
+            class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400 sm:hover:underline ml-1"
             >Sign up</a
           >
         </p>