diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50b0bb7..e5a4f84 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -136,17 +136,13 @@
     void loadAllMore();
   });
 
-  // Sort-Change → liste zurücksetzen und neu laden.
-  $effect(() => {
-    const s = allSort;
-    if (typeof window === 'undefined') return;
-    localStorage.setItem('kochwas.allSort', s);
-    // Nur neu laden, wenn wir schon geladen hatten (sonst doppelter Initial-Call).
-    if (allRecipes.length > 0 || allExhausted) {
-      resetAllRecipes();
-      void loadAllMore();
-    }
-  });
+  function setAllSort(next: AllSort) {
+    if (next === allSort) return;
+    allSort = next;
+    if (typeof window !== 'undefined') localStorage.setItem('kochwas.allSort', next);
+    resetAllRecipes();
+    void loadAllMore();
+  }
 
   // IntersectionObserver an den Sentinel hängen — wenn sichtbar, nachladen.
   $effect(() => {
@@ -503,14 +499,20 @@
   <section class="listing">
     <div class="listing-head">
       <h2>Alle Rezepte</h2>
-      <label class="sort-select">
-        Sortieren:
-        <select bind:value={allSort}>
-          {#each ALL_SORTS as s (s.value)}
-            <option value={s.value}>{s.label}</option>
-          {/each}
-        </select>
-      </label>
+    </div>
+    <div class="sort-chips" role="tablist" aria-label="Sortierung">
+      {#each ALL_SORTS as s (s.value)}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={allSort === s.value}
+          class="chip"
+          class:active={allSort === s.value}
+          onclick={() => setAllSort(s.value)}
+        >
+          {s.label}
+        </button>
+      {/each}
     </div>
     {#if allRecipes.length === 0 && allExhausted}
       <p class="muted">Noch keine Rezepte gespeichert.</p>
@@ -617,20 +619,32 @@
   .listing-head h2 {
     margin: 0;
   }
-  .sort-select {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.85rem;
-    color: #666;
+  .sort-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin: 0 0 0.75rem;
   }
-  .sort-select select {
-    padding: 0.4rem 0.6rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
+  .chip {
+    padding: 0.4rem 0.85rem;
     background: white;
+    border: 1px solid #cfd9d1;
+    border-radius: 999px;
+    color: #2b6a3d;
+    font-size: 0.88rem;
+    cursor: pointer;
     min-height: 36px;
-    font-size: 0.9rem;
+    font-family: inherit;
+    white-space: nowrap;
+  }
+  .chip:hover {
+    background: #f4f8f5;
+  }
+  .chip.active {
+    background: #2b6a3d;
+    color: white;
+    border-color: #2b6a3d;
+    font-weight: 600;
   }
   .meta-line {
     display: flex;