diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index c255093..60b05fe 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -15,8 +15,8 @@
           v-for="tab in visibleTabs"
           :key="tab.key"
           :to="localePath(tab.path)"
-          class="tab-item"
-          :class="{ 'tab-active': isActiveTab(tab.key) }"
+          class="px-4 py-2 rounded-full font-medium text-sm transition-colors hover:bg-base-200"
+          :class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
         >
           <Icon v-if="tab.icon" :name="tab.icon" size="18" class="mr-1" />
           {{ tab.label }}
@@ -138,8 +138,8 @@
         v-for="tab in visibleTabs"
         :key="tab.key"
         :to="localePath(tab.path)"
-        class="tab-item-mobile"
-        :class="{ 'tab-active': isActiveTab(tab.key) }"
+        class="flex flex-col items-center gap-1 px-4 py-2 rounded-lg hover:bg-base-200"
+        :class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
       >
         <Icon v-if="tab.icon" :name="tab.icon" size="16" />
         <span class="text-xs">{{ tab.label }}</span>
@@ -196,24 +196,3 @@ const isActiveTab = (key: string) => {
 }
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.tab-item {
-  @apply px-4 py-2 rounded-full font-medium text-sm transition-colors;
-  @apply hover:bg-base-200;
-}
-
-.tab-item.tab-active {
-  @apply bg-base-200 text-primary;
-}
-
-.tab-item-mobile {
-  @apply flex flex-col items-center gap-1 px-4 py-2 rounded-lg;
-  @apply hover:bg-base-200;
-}
-
-.tab-item-mobile.tab-active {
-  @apply bg-base-200 text-primary;
-}
-</style>
diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index 1a430fe..737eae5 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -5,8 +5,8 @@
         v-for="item in items"
         :key="item.path"
         :to="localePath(item.path)"
-        class="subnav-item"
-        :class="{ active: isActive(item.path) }"
+        class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-200"
+        :class="{ 'text-primary bg-primary/10': isActive(item.path) }"
       >
         <Icon v-if="item.icon" :name="item.icon" size="16" class="mr-1.5" />
         {{ item.label }}
@@ -51,15 +51,3 @@ const isActive = (path: string) => {
 }
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.subnav-item {
-  @apply px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap;
-  @apply text-base-content/70 hover:text-base-content hover:bg-base-200;
-}
-
-.subnav-item.active {
-  @apply text-primary bg-primary/10;
-}
-</style>
diff --git a/app/components/search/GlobalSearchBar.vue b/app/components/search/GlobalSearchBar.vue
index c7442f6..829c633 100644
--- a/app/components/search/GlobalSearchBar.vue
+++ b/app/components/search/GlobalSearchBar.vue
@@ -6,7 +6,7 @@
         class="flex items-center bg-base-100 rounded-full border border-base-300 shadow-sm hover:shadow-md transition-shadow"
       >
         <!-- Product field -->
-        <div class="search-field border-r border-base-300">
+        <div class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.product') }}
           </label>
@@ -34,7 +34,7 @@
         </div>
 
         <!-- Quantity field -->
-        <div class="search-field border-r border-base-300">
+        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.quantity') }}
           </label>
@@ -54,7 +54,7 @@
         </div>
 
         <!-- Destination field -->
-        <div class="search-field">
+        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.destination') }}
           </label>
@@ -208,18 +208,3 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.search-field {
-  @apply flex flex-col px-4 py-2 min-w-32;
-}
-
-.search-field:first-child {
-  @apply pl-6 rounded-l-full;
-}
-
-.search-field:hover {
-  @apply bg-base-200/50;
-}
-</style>