diff --git a/src/input.css b/src/input.css
index bd6213e..c5dd3d1 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+form label {
+    @apply dark:text-slate-400;
+}
+
+form input,select,textarea {
+    @apply dark:bg-slate-500 dark:border dark:border-slate-900 dark:text-slate-100;
+}
+
+form input[type=submit] {
+    @apply p-2 bg-purple-900;
+}
\ No newline at end of file
diff --git a/src/web/tracker/static/base.css b/src/web/tracker/static/base.css
index 5a48041..d5c4eb8 100644
--- a/src/web/tracker/static/base.css
+++ b/src/web/tracker/static/base.css
@@ -742,6 +742,10 @@ select {
   display: grid;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }
@@ -825,6 +829,10 @@ select {
   padding-right: 1rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -855,6 +863,27 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.dark form label {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.dark form input,.dark select,.dark textarea {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
+form input[type=submit] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -864,6 +893,11 @@ select {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.dark .dark\:bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -874,9 +908,9 @@ select {
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:text-slate-300 {
+.dark .dark\:text-white {
   --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .dark .dark\:text-slate-400 {
@@ -884,6 +918,11 @@ select {
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
 @media (min-width: 768px) {
   .md\:block {
     display: block;
diff --git a/src/web/tracker/templates/base.html b/src/web/tracker/templates/base.html
index c466683..c591f5e 100644
--- a/src/web/tracker/templates/base.html
+++ b/src/web/tracker/templates/base.html
@@ -12,6 +12,7 @@
 </head>
 
 <body class="dark">
+    <div class="dark:bg-gray-800 h-screen">
     <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
         <div class="container flex flex-wrap items-center justify-between mx-auto">
             <a href="#" class="flex items-center">
@@ -20,7 +21,7 @@
             </a>
             <div class="w-full md:block md:w-auto">
                 <ul
-                    class="flex flex-col md:flex-row p-4 mt-4">
+                        class="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
                     <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New Game</a></li>
                     <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_purchase' %}">New Purchase</a></li>
                     <li><a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_session' %}">New Session</a></li>
@@ -30,6 +31,7 @@
         </div>
     </nav>
     {% block content %}No content here.{% endblock %}
+    </div>
 </body>
 
 </html>
\ No newline at end of file
