diff --git a/src/App.vue b/src/App.vue
index 12f8236..0a6186e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -152,7 +152,7 @@ onMounted(async () => {
   >
     info alert - Slot
   </button>
-  <div class="flex flex-col h-screen min-w-96">
+  <div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
     <header class="w-full text-center border-b p-4">
       <AppNav />
     </header>
@@ -173,11 +173,11 @@ onMounted(async () => {
 header,
 footer,
 main {
-  @apply min-w-96;
+  @apply min-w-96 bg-white dark:bg-gray-900;
 }
 header,
 footer {
-  @apply bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-600;
+  @apply border-gray-200 dark:border-gray-600 dark:text-white;
 }
 </style>
 
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index ecd5711..a80a225 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -66,7 +66,7 @@ onMounted(() => {
         </li>
         <li>
           <RouterLink
-            class="router-link block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            class="router-link block py-2 px-3 rounded text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
             to="/slots"
             >Slots</RouterLink
           >
@@ -78,11 +78,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-nav a.router-link {
-  @apply text-gray-900;
-}
 nav a.router-link-exact-active {
-  /* color: var(--color-text); */
   @apply text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500;
 }
 </style>