diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs
index 9fb7502..91d3dcc 100644
--- a/src/Roux/Html.hs
+++ b/src/Roux/Html.hs
@@ -163,6 +163,12 @@ page title content =
                             , ".roux-header-links a:hover { color: var(--roux-accent); }"
                             , ".roux-header-links a.active { color: var(--roux-accent); }"
                             , ""
+                            , "/* Recipe filter tabs */"
+                            , ".roux-filter-tabs { display: flex; gap: 20px; margin-bottom: 1.25rem; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }"
+                            , ".roux-filter-tabs a { color: #6B5847; text-decoration: none; }"
+                            , ".roux-filter-tabs a:hover { color: var(--roux-accent); }"
+                            , ".roux-filter-tabs a.active { color: var(--roux-accent); }"
+                            , ""
                             , "/* Search input */"
                             , "input[type=search] { background: var(--roux-bg); color: var(--roux-text); border-color: rgba(61, 44, 30, 0.2); }"
                             , "input[type=search]:focus { border-color: var(--roux-accent); box-shadow: 0 0 0 1px var(--roux-accent); }"
@@ -422,7 +428,7 @@ searchJs =
         , "// Set active tab style based on hash"
         , "function updateActiveNav() {"
         , "  const mode = getSortMode();"
-        , "  document.querySelectorAll('.roux-header-links a').forEach(a => {"
+        , "  document.querySelectorAll('.roux-filter-tabs a').forEach(a => {"
         , "    a.classList.toggle('active', a.getAttribute('href') === '#' + mode);"
         , "  });"
         , "}"
@@ -757,12 +763,15 @@ indexPage _mode recipes =
     page "Roux — Recipes" $ do
         renderHeader
             [ ("/", "Home", False)
-            , ("#alpha", "A-Z", True)
-            , ("#tags", "By Tag", False)
-            , ("#course", "By Course", False)
+            , ("/recipes", "Recipes", True)
             , ("/import", "Import", False)
             , ("/cook-history", "Cook History", False)
             ]
+        -- Filter tabs
+        H.div ! A.class_ "roux-filter-tabs" $ do
+            H.a ! A.href "#alpha" $ "A-Z"
+            H.a ! A.href "#tags" $ "By Tag"
+            H.a ! A.href "#course" $ "By Course"
         -- Search input
         H.input
             ! A.type_ "search"