diff --git a/src/routes/App.svelte b/src/routes/App.svelte
index d4b71af8..94bcc44d 100644
--- a/src/routes/App.svelte
+++ b/src/routes/App.svelte
@@ -229,24 +229,24 @@
         <nav class="desktop-nav">
             <ul class="nav-links">
                 <li class={activeTab === "acquireTokens" ? "active" : ""}>
-                    <a href="#" on:click={() => changeTab("acquireTokens")}>
+                    <button type="button" on:click={() => changeTab("acquireTokens") }>
                         Contribute to a Campaign
-                    </a>
+                    </button>
                 </li>
                 <li class={activeTab === "myContributions" ? "active" : ""}>
-                    <a href="#" on:click={() => changeTab("myContributions")}>
+                    <button type="button" on:click={() => changeTab("myContributions") }>
                         My Contributions
-                    </a>
+                    </button>
                 </li>
                 <li class={activeTab === "myProjects" ? "active" : ""}>
-                    <a href="#" on:click={() => changeTab("myProjects")}>
+                    <button type="button" on:click={() => changeTab("myProjects") }>
                         My Campaigns
-                    </a>
+                    </button>
                 </li>
                 <li class={activeTab === "submitProject" ? "active" : ""}>
-                    <a href="#" on:click={() => changeTab("submitProject")}>
+                    <button type="button" on:click={() => changeTab("submitProject") }>
                         New Campaign
-                    </a>
+                    </button>
                 </li>
             </ul>
         </nav>
@@ -319,24 +319,24 @@
     <div class="mobile-nav" transition:fade={{ duration: 200 }}>
         <ul class="mobile-nav-links">
             <li class={activeTab === "acquireTokens" ? "active" : ""}>
-                <a href="#" on:click={() => changeTab("acquireTokens")}>
+                <button type="button" on:click={() => changeTab("acquireTokens") }>
                     Contribute to a Campaign
-                </a>
+                </button>
             </li>
             <li class={activeTab === "myContributions" ? "active" : ""}>
-                <a href="#" on:click={() => changeTab("myContributions")}>
+                <button type="button" on:click={() => changeTab("myContributions") }>
                     My Contributions
-                </a>
+                </button>
             </li>
             <li class={activeTab === "myProjects" ? "active" : ""}>
-                <a href="#" on:click={() => changeTab("myProjects")}>
+                <button type="button" on:click={() => changeTab("myProjects") }>
                     My Campaigns
-                </a>
+                </button>
             </li>
             <li class={activeTab === "submitProject" ? "active" : ""}>
-                <a href="#" on:click={() => changeTab("submitProject")}>
+                <button type="button" on:click={() => changeTab("submitProject") }>
                     New Campaign
-                </a>
+                </button>
             </li>
         </ul>
     </div>
@@ -573,7 +573,7 @@
         position: relative;
     }
 
-    .nav-links li a {
+    .nav-links li a, .nav-links li button {
         color: inherit;
         text-decoration: none;
         font-weight: 500;
@@ -584,19 +584,33 @@
         border-bottom: 2px solid transparent;
     }
 
-    .nav-links li a:hover {
+    .nav-links li a:hover, .nav-links li button:hover {
         color: orange;
         background: rgba(255, 165, 0, 0.05);
         box-shadow: 0 0 10px rgba(255, 165, 0, 0.1);
     }
 
-    .nav-links li.active a {
+    .nav-links li.active a, .nav-links li.active button {
         border-bottom: 2px solid orange;
         color: orange;
         background: rgba(255, 165, 0, 0.1);
         box-shadow: 0 0 15px rgba(255, 165, 0, 0.15);
     }
 
+    /* Make nav buttons visually match links and remove default button chrome */
+    .nav-links li button,
+    .mobile-nav-links li button {
+        background: none;
+        border: none;
+        padding: 0.5rem 0.75rem;
+        font: inherit;
+        color: inherit;
+        display: block;
+        text-align: left;
+        cursor: pointer;
+        border-radius: 8px;
+    }
+
     /* User Section */
     .user-section {
         display: flex;
@@ -704,7 +718,7 @@
         gap: 0.5rem;
     }
 
-    .mobile-nav-links li a {
+    .mobile-nav-links li a, .mobile-nav-links li button {
         color: white;
         text-decoration: none;
         font-weight: 500;
@@ -714,12 +728,12 @@
         transition: all 0.2s ease;
     }
 
-    .mobile-nav-links li a:hover {
+    .mobile-nav-links li a:hover, .mobile-nav-links li button:hover {
         background-color: rgba(255, 165, 0, 0.1);
         box-shadow: 0 0 15px rgba(255, 165, 0, 0.1);
     }
 
-    .mobile-nav-links li.active a {
+    .mobile-nav-links li.active a, .mobile-nav-links li.active button {
         background-color: rgba(255, 165, 0, 0.2);
         color: orange;
         box-shadow: 0 0 15px rgba(255, 165, 0, 0.2);
diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte
index d6407ed2..d9e97e93 100644
--- a/src/routes/Theme.svelte
+++ b/src/routes/Theme.svelte
@@ -1,27 +1,42 @@
 <script lang="ts">
-    import Sun from "lucide-svelte/icons/sun";
-    import Moon from "lucide-svelte/icons/moon";
+  import { onMount } from "svelte";
+  import Sun from "lucide-svelte/icons/sun";
+  import Moon from "lucide-svelte/icons/moon";
 
-    import { resetMode, setMode } from "mode-watcher";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
+  import { setMode } from "mode-watcher";
+  import { Button } from "$lib/components/ui/button/index.js";
+
+  // track current visual state for aria/pressed
+  let isDark = false;
+
+  onMount(() => {
+    // read initial theme from document (mode-watcher applies 'dark' class)
+    isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+  });
+
+  function toggleTheme() {
+    isDark = !isDark;
+    setMode(isDark ? "dark" : "light");
+  }
 </script>
 
-<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline" size="icon">
-    <Sun
+<!-- Accessible single-button toggle -->
+<Button
+  on:click={toggleTheme}
+  variant="outline"
+  size="icon"
+  aria-pressed={isDark}
+  title={isDark ? "Switch to light theme" : "Switch to dark theme"}
+  class="relative"
+>
+  <!-- Sun / Moon icons with same transitions used previously -->
+  <Sun
     class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-    />
-    <Moon
+    aria-hidden="true"
+  />
+  <Moon
     class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-    />
-    <span class="sr-only">Toggle theme</span>
-    </Button>
-</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
-    <DropdownMenu.Item on:click={() => setMode("light")}>Light</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
-</DropdownMenu.Content>
-</DropdownMenu.Root>
+    aria-hidden="true"
+  />
+  <span class="sr-only">Toggle theme</span>
+</Button>
\ No newline at end of file