diff --git a/index.html b/index.html
index f3e5d8c..3a1302b 100644
--- a/index.html
+++ b/index.html
@@ -29,33 +29,6 @@
 	<link rel="stylesheet" href="/static/css/dtsel.css">
 </head>
 <body>
-<nav
-		class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
-		role="navigation"
-		aria-label="main navigation"
->
-	<div class="navbar-brand">
-		<a class="navbar-item" href="/">
-			<figure class="image">
-				<img width="28px" height="28px" src="/static/img/logo_nobg.webp" alt="Reminder Bot Logo">
-			</figure>
-		</a>
-
-		<p class="navbar-item pageTitle"></p>
-
-		<a
-			role="button"
-			class="dashboard-burger navbar-burger is-right"
-			aria-label="menu"
-			aria-expanded="false"
-			data-target="mobileSidebar"
-		>
-			<span aria-hidden="true"></span>
-			<span aria-hidden="true"></span>
-			<span aria-hidden="true"></span>
-		</a>
-	</div>
-</nav>
 	<div id="app"></div>
 	<script type="module" src="/src/index.tsx"></script>
 </body>
diff --git a/src/components/Sidebar/MobileSidebar.tsx b/src/components/Sidebar/MobileSidebar.tsx
index 8fad2f9..e8f0333 100644
--- a/src/components/Sidebar/MobileSidebar.tsx
+++ b/src/components/Sidebar/MobileSidebar.tsx
@@ -1,7 +1,54 @@
+import { useState } from "preact/hooks";
+
 export const MobileSidebar = ({ children }) => {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+
     return (
-        <div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar">
-            {children}
-        </div>
+        <>
+            <nav
+                class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
+                role="navigation"
+                aria-label="main navigation"
+            >
+                <div class="navbar-brand">
+                    <a class="navbar-item" href="/">
+                        <figure class="image">
+                            <img
+                                width="28px"
+                                height="28px"
+                                src="/static/img/logo_nobg.webp"
+                                alt="Reminder Bot Logo"
+                            />
+                        </figure>
+                    </a>
+
+                    <p class="navbar-item pageTitle"></p>
+
+                    <a
+                        role="button"
+                        class="dashboard-burger navbar-burger is-right"
+                        aria-label="menu"
+                        aria-expanded="false"
+                        data-target="mobileSidebar"
+                        onClick={() => {
+                            setSidebarOpen(!sidebarOpen);
+                        }}
+                    >
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                    </a>
+                </div>
+            </nav>
+            <div
+                class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
+                id="mobileSidebar"
+                style={{
+                    display: sidebarOpen ? "block" : "none",
+                }}
+            >
+                {children}
+            </div>
+        </>
     );
 };
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 780af2a..a77350c 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -5,7 +5,6 @@ import { Brand } from "./Brand";
 import { Wave } from "./Wave";
 import { GuildEntry } from "./GuildEntry";
 import { fetchUserGuilds, GuildInfo } from "../../api";
-import { useState } from "preact/hooks";
 import { TimezonePicker } from "../TimezonePicker";
 import { Import } from "../Import";
 
