diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index cbd279e..b369bc4 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -1,7 +1,8 @@
 import { OverviewPage } from "./pages/Overview";
 import { MatchPage } from "./pages/MatchDetails";
 import { SettingsPage } from "./pages/Settings";
-import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
+import { BottomNav } from "./components/BottomNav";
+import { type ParentProps, onMount, onCleanup, createSignal, Show } from "solid-js";
 
 function Layout(props: ParentProps) {
   return (
@@ -68,15 +69,18 @@ function App() {
 
   return (
     <div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
-      <Show when={path() === "/"}>
-        <OverviewPage />
-      </Show>
-      <Show when={path() === "/einstellungen" || path() === "/settings"}>
-        <SettingsPage />
-      </Show>
-      <Show when={path().startsWith("/match/")}>
-        <MatchPage />
-      </Show>
+      <div class="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <Show when={path() === "/"}>
+          <OverviewPage />
+        </Show>
+        <Show when={path() === "/einstellungen" || path() === "/settings"}>
+          <SettingsPage />
+        </Show>
+        <Show when={path().startsWith("/match/")}>
+          <MatchPage />
+        </Show>
+      </div>
+      <BottomNav currentPath={path} />
     </div>
   );
 }
diff --git a/apps/frontend/src/components/BottomNav.tsx b/apps/frontend/src/components/BottomNav.tsx
new file mode 100644
index 0000000..ff360e5
--- /dev/null
+++ b/apps/frontend/src/components/BottomNav.tsx
@@ -0,0 +1,76 @@
+interface BottomNavProps {
+  currentPath: () => string;
+}
+
+function HomeIcon() {
+  return (
+    <svg
+      class="h-6 w-6"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+    >
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V21h5v-6h4v6h5V9.5" />
+    </svg>
+  );
+}
+
+function GearIcon() {
+  return (
+    <svg
+      class="h-6 w-6"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="3" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+      />
+    </svg>
+  );
+}
+
+export function BottomNav(props: BottomNavProps) {
+  const path = () => props.currentPath();
+
+  const isHome = () => path() === "/";
+  const isSettings = () =>
+    path().startsWith("/einstellungen") || path().startsWith("/settings");
+
+  return (
+    <nav
+      class="shrink-0 border-t border-line bg-surface/90 backdrop-blur-md flex"
+      style={{ paddingBlockEnd: "env(safe-area-inset-bottom)" }}
+    >
+      <a
+        href="/"
+        aria-label="Übersicht"
+        class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
+          isHome() ? "text-accent" : "text-ink-muted hover:text-ink"
+        }`}
+      >
+        <HomeIcon />
+        <span class="text-[10px] font-medium">Übersicht</span>
+      </a>
+
+      <a
+        href="/einstellungen"
+        aria-label="Einstellungen"
+        class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
+          isSettings() ? "text-accent" : "text-ink-muted hover:text-ink"
+        }`}
+      >
+        <GearIcon />
+        <span class="text-[10px] font-medium">Einstellungen</span>
+      </a>
+    </nav>
+  );
+}
diff --git a/apps/frontend/src/pages/Overview.tsx b/apps/frontend/src/pages/Overview.tsx
index 86c5c25..9123357 100644
--- a/apps/frontend/src/pages/Overview.tsx
+++ b/apps/frontend/src/pages/Overview.tsx
@@ -215,28 +215,6 @@ export function OverviewPage() {
               month: "long",
             })}
           </span>
-          <a href="/einstellungen" class="shrink-0">
-            <button
-              aria-label="Einstellungen"
-              class="p-1.5 -m-0.5 rounded-lg text-ink-muted hover:text-ink hover:bg-elevated/60 transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
-                />
-              </svg>
-            </button>
-          </a>
         </div>
       </div>
       <div