diff --git a/components/header.tsx b/components/header.tsx
index c5617f1..3b648e5 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -13,27 +13,37 @@ export function Header() {
 
   const [bade, setBade] = useState(false);
   const [title, setTitle] = useState("...KOMPIS");
+  const [ending, setEnding] = useState("kompis");
+  const [bergenser, setBergenser] = useState(false);
 
+  // 🧠 Update ending when bergenser changes
+  useEffect(() => {
+    if (bergenser) {
+      setEnding("tjommi");
+    } else {
+      setEnding("kompis");
+    }
+  }, [bergenser]);
+
+  // 🧠 Update title and bade when pathname or ending changes
   useEffect(() => {
     if (pathname.startsWith("/hobbies/")) {
       const hobby = pathname.split("/")[2];
       const name = getInterestBySlug(hobby);
       console.log("Got hobby name:", name);
 
-      setTitle(`${name?.infinitiv?.toUpperCase()}kompis`);
-      if (name?.name == "Bading") {
-        setBade(true);
-      }
+      setTitle(`${name?.infinitiv?.toUpperCase()}${ending}`);
+      setBade(name?.name === "Bading");
     } else if (pathname.startsWith("/event/")) {
       const id = pathname.split("/")[2];
       const event = getEventById(parseInt(id));
-      setTitle(`${event?.hobby.infinitiv}kompis`);
+      setTitle(`${event?.hobby.infinitiv}${ending}`);
       setBade(false);
     } else {
-      setTitle("...KOMPIS");
+      setTitle(`...${ending.toUpperCase()}`);
       setBade(false);
     }
-  }, [pathname]);
+  }, [pathname, ending]);
 
   const headerContent = (
     <header className="w-full bg-black text-background px-4 py-12">
@@ -45,8 +55,17 @@ export function Header() {
           {title}
         </Link>
 
-        <div className="mt-4 md:mt-0 md:ml-auto">
+        <div className="mt-4 md:mt-0 md:ml-auto flex items-center gap-2 flex-col">
           <AuthButtons />
+          <label className="flex items-center gap-1 text-sm">
+            <input
+              type="checkbox"
+              id="toggle"
+              checked={bergenser}
+              onChange={() => setBergenser(!bergenser)}
+            />
+            Bergenser-modus
+          </label>
         </div>
       </div>
     </header>