diff --git a/build_pages.py b/build_pages.py
index 4886130b..da8840cd 100755
--- a/build_pages.py
+++ b/build_pages.py
@@ -31,7 +31,7 @@ PAGES = [
 
 
 def buildPage(
-    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str
+    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str, lang: str
 ) -> str:
     template = template.replace("<!--TITLE-->", pageTitle)
     style = (
@@ -42,6 +42,13 @@ def buildPage(
     template = template.replace("<!--ADDITIONAL_STYLE-->", style)
     template = template.replace("PAGE_NAME", filename)
     template = template.replace("<!--MAIN-->", pageHtml)
+    
+    # Fix language switcher links
+    if lang == "en":
+        template = template.replace('href="/PAGE_NAME"', f'href="/en/{filename}"')
+    else:
+        template = template.replace('href="/en/PAGE_NAME"', f'href="/sr/{filename}"')
+    
     return template
 
 
@@ -57,7 +64,7 @@ def main():
                 pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>"
                 pageHtml += f.read()
                 html = buildPage(
-                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR
+                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR, "sr"
                 )
                 f = open(f'site/{page["name"]}.html', "w")
                 f.write(html)
@@ -66,7 +73,7 @@ def main():
                 pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Students found the bug' /></div>"
                 pageHtml += f.read()
                 html = buildPage(
-                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN
+                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN, "en"
                 )
                 f = open(f'site/en/{page["name"]}.html', "w")
                 f.write(html)
diff --git a/site/404.html b/site/404.html
index fec4eb60..c55af339 100644
--- a/site/404.html
+++ b/site/404.html
@@ -6,7 +6,6 @@
   <link rel="stylesheet" href="/styles/style.css">
   <link rel="stylesheet" href="/styles/404.css">
   <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
-  <script src="/scripts/main.js"></script>
   <title>404</title>
 </head>
 <body>
diff --git a/site/deconference.html b/site/deconference.html
index 4f9f7722..9cd239d9 100644
--- a/site/deconference.html
+++ b/site/deconference.html
@@ -32,17 +32,18 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <link rel="stylesheet" href="/styles/deconference.css">
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
     <title>Dekonferencija Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/deconference" />
   </head>
   <body>
+    <input type="checkbox" id="menu-toggle" />
+    <input type="checkbox" id="theme-toggle" />
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
         Decentrala
       </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
       <a class="lang" hreflang="en" href="/en/deconference">EN</a>
     </header>
     <main>
@@ -86,9 +87,9 @@
       </div>
     </main>
     <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
       <nav class="menu">
         <a href="/events">Događaji</a>
         <a href="/services">Servisi</a>
diff --git a/site/scripts/main.js b/site/scripts/main.js
deleted file mode 100644
index c6dffddf..00000000
--- a/site/scripts/main.js
+++ /dev/null
@@ -1,92 +0,0 @@
-(function () {
-  const theme = window.localStorage.getItem("theme");
-  const prefersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches;
-  const isDark = theme === "dark" || (!theme && prefersDark);
-
-  if (isDark) document.documentElement.classList.add("dark");
-
-  // Swap images as soon as DOM is ready (script runs in <head>, imgs not parsed yet)
-  if (isDark) {
-    window.addEventListener("DOMContentLoaded", () => {
-      document.querySelectorAll("img[src*='-light']").forEach((img) => {
-        img.src = img.src.replace("-light", "-dark");
-      });
-    }, { once: true });
-  }
-
-  window.changeTheme = (toDark) => {
-    if (toDark) {
-      window.localStorage.setItem("theme", "dark");
-      document.documentElement.classList.add("dark");
-      document.querySelectorAll("img[src*='-light']").forEach((img) => {
-        img.src = img.src.replace("-light", "-dark");
-      });
-    } else {
-      window.localStorage.setItem("theme", "light");
-      document.documentElement.classList.remove("dark");
-      document.querySelectorAll("img[src*='-dark']").forEach((img) => {
-        img.src = img.src.replace("-dark", "-light");
-      });
-    }
-  }
-})();
-
-window.addEventListener("DOMContentLoaded", () => {
-  const getById = (id) => document.getElementById(id);
-  const getByClass = (className) => document.getElementsByClassName(className)[0];
-
-  const themeBtn = getById("theme-switcher");
-  const hamburger = getByClass("hamburger");
-  const hamburgerIcon = hamburger?.children[0];
-  const menu = document.getElementsByTagName("nav")[0];
-  const main = document.getElementsByTagName("main")[0];
-  const isMenuOpen = () => hamburger?.classList.contains("open");
-
-  /* Functions */
-
-  const closeMenu = () => {
-    hamburger.classList = "hamburger closed"
-    hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
-    menu.classList = "menu closed";
-  }
-
-  const openMenu = () => {
-    hamburger.classList = "hamburger open"
-    hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
-    menu.classList = "menu open";
-  }
-
-  /* Listeners */
-
-  window.addEventListener("resize", () => isMenuOpen() && closeMenu());
-  if (main) main.addEventListener("click", () => isMenuOpen() && closeMenu());
-
-  /* Language persistence */
-  const currentLang = document.documentElement.lang || "sr";
-  const anchors = document.getElementsByTagName("a");
-  Array.from(anchors).forEach((a) => {
-    // Skip language switcher links
-    if (a.classList.contains("lang")) return;
-    const href = a.getAttribute("href");
-    if (!href) return;
-    if (href.startsWith("/")) {
-      // Replace existing language prefix or add one
-      if (href.startsWith("/sr") || href.startsWith("/en")) {
-        if (!href.startsWith(`/${currentLang}`)) {
-          a.setAttribute("href", `/${currentLang}${href.slice(3)}`);
-        }
-      } else if (currentLang !== "sr") {
-        // Only prepend language prefix for non-default languages
-        a.setAttribute("href", `/${currentLang}${href}`);
-      }
-    }
-  });
-  hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
-
-  if (themeBtn) {
-    themeBtn.addEventListener("click", () => {
-      const isDark = document.documentElement.classList.contains("dark");
-      changeTheme(!isDark);
-    });
-  }
-});
diff --git a/site/styles/style.css b/site/styles/style.css
index 686553d4..2fd7f639 100644
--- a/site/styles/style.css
+++ b/site/styles/style.css
@@ -11,12 +11,39 @@
   --bg: var(--light-bg);
 }
 
-html.dark {
+/* Theme toggle via checkbox hack */
+#theme-toggle {
+  display: none;
+}
+
+/* Use :has() selector to detect checkbox state */
+body:has(#theme-toggle:checked) {
   --border: var(--dark-border);
   --text: var(--dark-text);
   --bg: var(--dark-bg);
 }
 
+body:has(#theme-toggle:checked) header #theme-switcher {
+  background: linear-gradient(
+    90deg,
+    var(--dark-border) 0%,
+    var(--dark-border) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
+body:has(#theme-toggle:checked) header #theme-switcher:hover {
+  border-color: var(--hightlight);
+  background: linear-gradient(
+    90deg,
+    var(--hightlight) 0%,
+    var(--hightlight) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
 @font-face {
   font-family: "Iosevka";
   src: url("/font/iosevka-regular.woff") format("woff");
@@ -123,6 +150,7 @@ a:visited {
     var(--bg) 51%,
     var(--bg) 100%
   );
+  cursor: pointer;
 }
 
 #theme-switcher:hover {
@@ -136,6 +164,27 @@ a:visited {
   );
 }
 
+#theme-toggle:checked ~ body header #theme-switcher {
+  background: linear-gradient(
+    90deg,
+    var(--dark-border) 0%,
+    var(--dark-border) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
+#theme-toggle:checked ~ body header #theme-switcher:hover {
+  border-color: var(--hightlight);
+  background: linear-gradient(
+    90deg,
+    var(--hightlight) 0%,
+    var(--hightlight) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
 .lang {
   font-size: 2rem;
 }
@@ -212,6 +261,46 @@ button {
 
   .hamburger {
     display: block !important;
+    cursor: pointer;
+  }
+
+  #menu-toggle {
+    display: none;
+  }
+
+  #menu-toggle:checked ~ footer .menu {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger {
+    position: relative;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("/img/strelica-opened-light.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  /* Show hamburger icon on mobile */
+  .hamburger {
+    cursor: pointer;
+  }
+
+  .hamburger img {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger img {
+    opacity: 0;
   }
 }
 
diff --git a/template/page-en.html b/template/page-en.html
index 5dcdeb9d..9950e607 100644
--- a/template/page-en.html
+++ b/template/page-en.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <input type="checkbox" id="theme-toggle" />
 
     <!-- <pre>
 
@@ -32,16 +33,17 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <!--ADDITIONAL_STYLE-->
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
   </head>
   <body>
+    <input type="checkbox" id="theme-toggle" />
+    <input type="checkbox" id="menu-toggle" />
     <header>
       <a id="logo" href="/en/index">
         <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
       </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
       <a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a>
     </header>
     <main>
@@ -50,9 +52,9 @@
       </div>
     </main>
     <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
       <nav class="menu">
         <a href="/en/events">Events</a>
         <a href="/en/services">Services</a>
diff --git a/template/page-sr.html b/template/page-sr.html
index da0310ac..19f35c70 100644
--- a/template/page-sr.html
+++ b/template/page-sr.html
@@ -32,17 +32,18 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <!--ADDITIONAL_STYLE-->
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
   </head>
   <body>
+    <input type="checkbox" id="menu-toggle" />
+    <input type="checkbox" id="theme-toggle" />
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
         Decentrala
       </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
       <a class="lang" hreflang="en" href="/en/PAGE_NAME">EN</a>
     </header>
     <main>
@@ -51,9 +52,9 @@
       </div>
     </main>
     <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
       <nav class="menu">
         <a href="/events">Događaji</a>
         <a href="/services">Servisi</a>
