diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index e002d05..a906231 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -12,42 +12,42 @@
       <!-- Center: Search input with tokens -->
       <div class="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
         <div
-          class="flex items-center gap-2 w-full px-3 py-1.5 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
+          class="flex items-center gap-3 w-full px-5 py-2.5 border border-base-300 rounded-full 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="16" class="text-base-content/50 flex-shrink-0" />
+          <Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
 
           <!-- Tokens + input inline -->
-          <div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
+          <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
             <!-- Active filter tokens -->
             <div
               v-for="token in activeTokens"
               :key="token.type"
-              class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
+              class="badge badge-md gap-1.5 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
               @click.stop="$emit('edit-token', token.type)"
             >
-              <Icon :name="token.icon" size="12" />
-              <span class="max-w-20 truncate">{{ token.label }}</span>
+              <Icon :name="token.icon" size="14" />
+              <span class="max-w-24 truncate">{{ token.label }}</span>
               <button
                 class="hover:text-error"
                 @click.stop="$emit('remove-token', token.type)"
               >
-                <Icon name="lucide:x" size="10" />
+                <Icon name="lucide:x" size="12" />
               </button>
             </div>
 
             <!-- Active selection mode indicator -->
             <div
               v-if="selectMode"
-              class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
+              class="badge badge-md badge-outline badge-primary gap-1.5 flex-shrink-0"
             >
-              <Icon :name="selectModeIcon" size="12" />
+              <Icon :name="selectModeIcon" size="14" />
               {{ selectModeLabel }}:
               <button
                 class="hover:text-error"
                 @click.stop="$emit('cancel-select')"
               >
-                <Icon name="lucide:x" size="10" />
+                <Icon name="lucide:x" size="12" />
               </button>
             </div>
 
@@ -57,7 +57,7 @@
               v-model="localSearchQuery"
               type="text"
               :placeholder="placeholder"
-              class="flex-1 min-w-24 bg-transparent outline-none text-sm"
+              class="flex-1 min-w-32 bg-transparent outline-none"
               @input="$emit('update:search-query', localSearchQuery)"
             />
           </div>
@@ -181,15 +181,15 @@
     <!-- Bottom row: Quick filter chips -->
     <div
       v-if="availableChips.length > 0"
-      class="flex items-center justify-center gap-2 px-4 py-1.5 border-t border-base-200"
+      class="flex items-center justify-center gap-3 px-4 py-2"
     >
       <button
         v-for="chip in availableChips"
         :key="chip.type"
-        class="btn btn-xs btn-ghost gap-1"
+        class="btn btn-sm btn-ghost gap-1.5"
         @click="$emit('start-select', chip.type)"
       >
-        <Icon name="lucide:plus" size="12" />
+        <Icon name="lucide:plus" size="14" />
         {{ chip.label }}
       </button>
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ac8c0d9..5c1fc43 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,122 @@
 <template>
-  <div class="flex-1 flex items-center justify-center py-8">
-    <CatalogHero @start-select="startSelect" />
-  </div>
+  <Stack gap="12">
+    <!-- Hero with search -->
+    <Section variant="plain">
+      <Stack gap="6" align="center">
+        <Heading :level="1">{{ $t('searchPage.hero.title') }}</Heading>
+        <Text tone="muted" align="center" class="max-w-lg">
+          {{ $t('searchPage.hero.subtitle') }}
+        </Text>
+        <div class="flex flex-wrap justify-center gap-4 mt-4">
+          <button
+            class="btn btn-lg btn-primary gap-2"
+            @click="startSelect('product')"
+          >
+            <Icon name="lucide:package" size="24" />
+            {{ $t('catalog.filters.product') }}
+          </button>
+          <button
+            class="btn btn-lg btn-outline gap-2"
+            @click="startSelect('supplier')"
+          >
+            <Icon name="lucide:factory" size="24" />
+            {{ $t('catalog.filters.supplier') }}
+          </button>
+          <button
+            class="btn btn-lg btn-outline gap-2"
+            @click="startSelect('hub')"
+          >
+            <Icon name="lucide:map-pin" size="24" />
+            {{ $t('catalog.filters.hub') }}
+          </button>
+        </div>
+      </Stack>
+    </Section>
+
+    <!-- How it works -->
+    <Section variant="plain">
+      <Stack gap="6" align="center">
+        <Heading :level="2">{{ $t('howto.title') }}</Heading>
+        <Grid :cols="1" :md="3" :gap="6">
+          <Card padding="lg">
+            <Stack gap="3" align="center">
+              <IconCircle tone="primary">🔍</IconCircle>
+              <Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
+            </Stack>
+          </Card>
+          <Card padding="lg">
+            <Stack gap="3" align="center">
+              <IconCircle tone="primary">🤝</IconCircle>
+              <Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
+            </Stack>
+          </Card>
+          <Card padding="lg">
+            <Stack gap="3" align="center">
+              <IconCircle tone="primary">⚡</IconCircle>
+              <Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
+            </Stack>
+          </Card>
+        </Grid>
+      </Stack>
+    </Section>
+
+    <!-- Who it's for -->
+    <Section variant="plain">
+      <Stack gap="8" align="center">
+        <Heading :level="2">{{ $t('roles.title') }}</Heading>
+
+        <Grid :cols="1" :md="3" :gap="6">
+          <Card padding="lg">
+            <Stack gap="4" align="center">
+              <IconCircle tone="primary">🏭</IconCircle>
+              <Heading :level="3">{{ $t('roles.producers.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('roles.producers.description') }}</Text>
+              <Stack tag="ul" gap="1">
+                <li>✓ {{ $t('roles.producers.benefit1') }}</li>
+                <li>✓ {{ $t('roles.producers.benefit2') }}</li>
+                <li>✓ {{ $t('roles.producers.benefit3') }}</li>
+                <li>✓ {{ $t('roles.producers.benefit4') }}</li>
+              </Stack>
+              <Button :full-width="true" variant="outline">{{ $t('roles.producers.cta') }}</Button>
+            </Stack>
+          </Card>
+
+          <Card padding="lg">
+            <Stack gap="4" align="center">
+              <IconCircle tone="primary">🏢</IconCircle>
+              <Heading :level="3">{{ $t('roles.buyers.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('roles.buyers.description') }}</Text>
+              <Stack tag="ul" gap="1">
+                <li>✓ {{ $t('roles.buyers.benefit1') }}</li>
+                <li>✓ {{ $t('roles.buyers.benefit2') }}</li>
+                <li>✓ {{ $t('roles.buyers.benefit3') }}</li>
+                <li>✓ {{ $t('roles.buyers.benefit4') }}</li>
+              </Stack>
+              <Button :full-width="true" variant="outline">{{ $t('roles.buyers.cta') }}</Button>
+            </Stack>
+          </Card>
+
+          <Card padding="lg">
+            <Stack gap="4" align="center">
+              <IconCircle tone="primary">⚙️</IconCircle>
+              <Heading :level="3">{{ $t('roles.services.title') }}</Heading>
+              <Text tone="muted" align="center">{{ $t('roles.services.description') }}</Text>
+              <Stack tag="ul" gap="1">
+                <li>✓ {{ $t('roles.services.benefit1') }}</li>
+                <li>✓ {{ $t('roles.services.benefit2') }}</li>
+                <li>✓ {{ $t('roles.services.benefit3') }}</li>
+                <li>✓ {{ $t('roles.services.benefit4') }}</li>
+              </Stack>
+              <Button :full-width="true" variant="outline">{{ $t('roles.services.cta') }}</Button>
+            </Stack>
+          </Card>
+        </Grid>
+      </Stack>
+    </Section>
+  </Stack>
 </template>
 
 <script setup lang="ts">