diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index d7b539f..751d8ee 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -2,3 +2,7 @@ body {
   font-family: 'DM Sans', sans-serif;
   @apply flex h-full flex-col bg-zinc-50 dark:bg-black;
 }
+
+.router-link-exact-active {
+  @apply bg-white/60 dark:bg-black
+}
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 8f4436a..562aa2e 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -11,11 +11,15 @@ defineProps({
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
     <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
         <Logo />
-        <NavBar v-if="navigation" />
+        <ClientOnly>
+          <NavBar v-if="navigation" />
+        </ClientOnly>
         <div class="flex gap-2">
           <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-            <ColorPicker />
-            <ColorModeButton />
+            <ClientOnly>
+              <ColorPicker />
+              <ColorModeButton />
+            </ClientOnly>
           </div>
           <MobileNavBar v-if="navigation" />
         </div>
diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue
index 108c364..c59d24f 100644
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -43,9 +43,3 @@ const items = [
     </div>
   </nav>
 </template>
-
-<style lang="scss" scoped>
-.router-link-exact-active {
-  @apply bg-white/60 dark:bg-black
-}
-</style>