diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 75210d0..54e03f5 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -10,13 +10,13 @@
       </div>
 
       <!-- Center: Search input + chips -->
-      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-1">
-        <!-- Pill input -->
+      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
+        <!-- Big pill input -->
         <div
-          class="flex items-center gap-3 w-full px-5 py-2.5 rounded-full border border-base-300 bg-base-100 hover:border-primary focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+          class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 shadow-sm hover:shadow-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
           @click="focusInput"
         >
-          <Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
+          <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
 
           <!-- Tokens + input inline -->
           <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -24,17 +24,17 @@
             <div
               v-for="token in activeTokens"
               :key="token.type"
-              class="badge badge-md gap-1 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
+              class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
               :style="{ backgroundColor: getTokenColor(token.type) }"
               @click.stop="$emit('edit-token', token.type)"
             >
-              <Icon :name="token.icon" size="12" />
-              <span class="max-w-24 truncate text-sm">{{ token.label }}</span>
+              <Icon :name="token.icon" size="14" />
+              <span class="max-w-28 truncate">{{ token.label }}</span>
               <button
                 class="hover:text-error"
                 @click.stop="$emit('remove-token', token.type)"
               >
-                <Icon name="lucide:x" size="12" />
+                <Icon name="lucide:x" size="14" />
               </button>
             </div>
 
@@ -44,7 +44,7 @@
               v-model="localSearchQuery"
               type="text"
               :placeholder="placeholder"
-              class="flex-1 min-w-32 bg-transparent outline-none"
+              class="flex-1 min-w-32 bg-transparent outline-none text-lg"
               @input="$emit('update:search-query', localSearchQuery)"
             />
           </div>
@@ -53,15 +53,15 @@
         <!-- Chips below -->
         <div
           v-if="availableChips.length > 0"
-          class="flex items-center justify-center gap-1.5"
+          class="flex items-center justify-center gap-2"
         >
           <button
             v-for="chip in availableChips"
             :key="chip.type"
-            class="text-xs text-base-content/60 hover:text-primary flex items-center gap-0.5 transition-colors"
+            class="btn btn-xs btn-ghost gap-1"
             @click="$emit('start-select', chip.type)"
           >
-            <Icon name="lucide:plus" size="10" />
+            <Icon name="lucide:plus" size="12" />
             {{ chip.label }}
           </button>
         </div>