diff --git a/components/layouts/Footer.vue b/components/layouts/Footer.vue
index 064b06e..cac47d0 100644
--- a/components/layouts/Footer.vue
+++ b/components/layouts/Footer.vue
@@ -12,7 +12,7 @@ onMounted(() => {
     <div class="container flex flex-col items-center py-8 mx-auto sm:flex-row">
       <a
         href="/"
-        class="text-xl font-black leading-none text-gray-900 select-none logo"
+        class="text-xl font-black leading-none text-gray-900 dark:text-gray-100 select-none logo"
       >Sink</a>
       <a
         class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0"
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index f310fbf..e855acd 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -15,10 +15,10 @@ const showMenu = ref(false)
         <div class="flex items-center justify-start w-1/4 h-full pr-4">
           <a
             href="/"
-            class="flex items-center py-4 space-x-2 text-xl font-extrabold text-gray-900 md:py-0"
+            class="flex items-center py-4 space-x-2 text-xl font-black text-gray-900 dark:text-gray-100 md:py-0"
           >
             <span
-              class="flex items-center justify-center w-8 h-8 bg-gray-900 rounded-full"
+              class="flex items-center justify-center w-8 h-8 rounded-full"
             >
               <img
                 src="/sink.png"
@@ -36,12 +36,12 @@ const showMenu = ref(false)
           @touchmove.prevent
         >
           <div
-            class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg md:bg-transparent md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
+            class="flex-col w-full h-auto overflow-hidden bg-background rounded-lg md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
           >
             <a
               href="/"
               target="_blank"
-              class="inline-flex items-center w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 md:hidden"
+              class="inline-flex items-center w-auto h-16 px-4 text-xl font-black leading-none text-gray-900 dark:text-gray-100 md:hidden"
             >
               <span
                 class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"
@@ -59,7 +59,7 @@ const showMenu = ref(false)
               class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0"
             >
               <a
-                class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto"
+                class="w-full px-6 py-2 mr-0 text-gray-700 dark:text-gray-300 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto"
                 href="/dashboard"
               >Dashboard</a>
               <a
@@ -71,7 +71,7 @@ const showMenu = ref(false)
                   class="w-5 h-5 mr-1"
                 />
                 GitHub</a>
-              <span class="px-3 py-2">
+              <span class="px-2 py-2">
                 <SwitchTheme />
               </span>
             </div>