diff --git a/lib/music_library_web/controllers/session_html/new.html.heex b/lib/music_library_web/controllers/session_html/new.html.heex
index 3ec3491f..11ac2536 100644
--- a/lib/music_library_web/controllers/session_html/new.html.heex
+++ b/lib/music_library_web/controllers/session_html/new.html.heex
@@ -1,7 +1,7 @@
 <div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
   <div class="w-full max-w-sm space-y-10">
     <div>
-      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-200">
         <%= gettext("Welcome to your Music Library") %>
       </h2>
     </div>
@@ -15,7 +15,16 @@
             type="password"
             autocomplete="current-password"
             required
-            class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-100 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            class={[
+              "relative block w-full rounded-md border-0 py-1.5",
+              "sm:text-sm sm:leading-6",
+              "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
+              "text-gray-900 dark:text-gray-200",
+              "dark:bg-zinc-700",
+              "ring-gray-200 dark:ring-gray-400",
+              "placeholder:text-gray-400 dark:placeholder:text-gray-400",
+              "focus:ring-zinc-400 dark:focus:ring-zinc-300"
+            ]}
             placeholder="Password"
           />
         </div>
@@ -24,7 +33,13 @@
       <div>
         <button
           type="submit"
-          class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class={[
+            "flex w-full justify-center rounded-md",
+            "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
+            "px-3 py-1.5 text-sm font-semibold leading-6",
+            "text-white dark:text-gray-900",
+            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          ]}
         >
           <%= gettext("Login") %>
         </button>