diff --git a/src/app/lang-switcher/lang-switcher.tsx b/src/app/lang-switcher/lang-switcher.tsx
new file mode 100644
index 0000000..e1bd60a
--- /dev/null
+++ b/src/app/lang-switcher/lang-switcher.tsx
@@ -0,0 +1,41 @@
+import { NavLink, useLocation } from "react-router";
+import { PAGES, type PagePair } from "../seo-links";
+
+// Equivalent EN ↔ DE page pairs come from the single source of truth in
+// seo-links.ts, so a page added there automatically works in the switcher too.
+const pagePairs = Object.values(PAGES) as PagePair[];
+
+function equivalentPaths(pathname: string): PagePair {
+  return (
+    pagePairs.find((p) => p.en === pathname || p.de === pathname) ??
+    PAGES.home
+  );
+}
+
+export function LangSwitcher() {
+  const { pathname } = useLocation();
+  const { en, de } = equivalentPaths(pathname);
+
+  return (
+    <div className="lang">
+      <NavLink
+        className={({ isActive }) =>
+          isActive ? "lang-left" : "not-active lang-left"
+        }
+        to={en}
+        end
+      >
+        en
+      </NavLink>
+      <NavLink
+        className={({ isActive }) =>
+          isActive ? "lang-right" : "not-active lang-right"
+        }
+        to={de}
+        end
+      >
+        de
+      </NavLink>
+    </div>
+  );
+}
diff --git a/src/app/routes/layout-de.tsx b/src/app/routes/layout-de.tsx
index fd15d7e..e63469b 100644
--- a/src/app/routes/layout-de.tsx
+++ b/src/app/routes/layout-de.tsx
@@ -1,7 +1,8 @@
 import type { Route } from "./+types/layout";
 import { Imprint } from "../imprint/imprint";
-import { NavLink, Outlet } from "react-router";
+import { Outlet } from "react-router";
 import { Footer } from "../footer/footer";
+import { LangSwitcher } from "../lang-switcher/lang-switcher";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -11,10 +12,7 @@ export function meta({}: Route.MetaArgs) {
 
 export default function Layout() {
   return (<><div className="navbar navbar-inverse navbar-fixed-top">
-    <div className="lang">
-        <NavLink className={({ isActive }) => isActive ? "lang-left" : "not-active lang-left"} to="/">en</NavLink>
-        <NavLink className={({ isActive }) => isActive ? "lang-right" : "not-active lang-right"} to="/de">de</NavLink>
-    </div>
+    <LangSwitcher />
 </div>
   <div className="container main-content">
     <Outlet />
diff --git a/src/app/routes/layout.tsx b/src/app/routes/layout.tsx
index 152a5ce..b7e5273 100644
--- a/src/app/routes/layout.tsx
+++ b/src/app/routes/layout.tsx
@@ -1,7 +1,8 @@
 import type { Route } from "./+types/layout";
 import { Imprint } from "../imprint/imprint";
-import { NavLink, Outlet } from "react-router";
+import { Outlet } from "react-router";
 import { Footer } from "../footer/footer";
+import { LangSwitcher } from "../lang-switcher/lang-switcher";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -11,10 +12,7 @@ export function meta({}: Route.MetaArgs) {
 
 export default function Layout() {
   return (<><div className="navbar navbar-inverse navbar-fixed-top">
-    <div className="lang">
-        <NavLink className={({ isActive }) => isActive ? "lang-left" : "not-active lang-left"} to="/">en</NavLink>
-        <NavLink className={({ isActive }) => isActive ? "lang-right" : "not-active lang-right"} to="/de">de</NavLink>
-    </div>
+    <LangSwitcher />
 </div>
   <div className="container main-content">
     <Outlet />