diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 24991a8..5ab5f48 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="bg-base-100 border-b border-base-300">
+  <header class="bg-base-200 border-b border-base-300">
     <div class="relative flex items-center h-16 px-4 lg:px-6">
       <!-- Left: Logo -->
       <div class="flex items-center">
diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index 8a56b9d..b7c6704 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
+  <nav v-if="items.length > 0" class="bg-base-200 border-b border-base-300">
     <div class="flex items-center gap-1 py-2 px-4 lg:px-6 overflow-x-auto">
       <NuxtLink
         v-for="item in items"
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 09612b4..cb353d5 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -13,7 +13,7 @@
     <!-- Content -->
     <template v-else>
       <!-- Search bar slot (sticky third bar - like navigation) -->
-      <div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-100 border-b border-base-300" :style="searchBarStyle">
+      <div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-200 border-b border-base-300" :style="searchBarStyle">
         <div class="flex items-center gap-2 h-full">
           <!-- Expand button - appears when header collapsed -->
           <button