diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b1d2be0..f3ef750 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,7 @@
   import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
   import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
   import SearchLoader from '$lib/components/SearchLoader.svelte';
+  import SearchFilter from '$lib/components/SearchFilter.svelte';
   import UpdateToast from '$lib/components/UpdateToast.svelte';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
@@ -219,6 +220,7 @@
     {#if showHeaderSearch}
       <div class="nav-search-wrap" bind:this={navContainer}>
         <form class="nav-search" onsubmit={submitNav} role="search">
+          <SearchFilter inline />
           <input
             type="search"
             bind:value={navQuery}
@@ -412,21 +414,29 @@
   }
   .nav-search {
     display: flex;
-  }
-  .nav-search input {
-    width: 100%;
-    padding: 0.55rem 0.85rem;
-    font-size: 0.95rem;
+    align-items: stretch;
     border: 1px solid #cfd9d1;
     border-radius: 999px;
     background: #f4f8f5;
     min-height: 40px;
   }
-  .nav-search input:focus {
+  .nav-search:focus-within {
     outline: 2px solid #2b6a3d;
     outline-offset: 1px;
     background: white;
   }
+  .nav-search input {
+    flex: 1;
+    width: 100%;
+    padding: 0.55rem 0.85rem;
+    font-size: 0.95rem;
+    border: 0;
+    background: transparent;
+    min-width: 0;
+  }
+  .nav-search input:focus {
+    outline: none;
+  }
   .dropdown {
     position: absolute;
     top: calc(100% + 0.4rem);