diff --git a/public/icons/chevrons-left.svg b/public/icons/chevrons-left.svg
new file mode 100644
index 0000000..97b25ba
--- /dev/null
+++ b/public/icons/chevrons-left.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 17L6 12L11 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 17L13 12L18 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/icons/chevrons-right.svg b/public/icons/chevrons-right.svg
new file mode 100644
index 0000000..be493be
--- /dev/null
+++ b/public/icons/chevrons-right.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 17L18 12L13 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 17L11 12L6 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/widgets/Navbar.astro b/src/components/widgets/Navbar.astro
index ee0a907..8032208 100644
--- a/src/components/widgets/Navbar.astro
+++ b/src/components/widgets/Navbar.astro
@@ -28,7 +28,7 @@ const navItems = [
         <a class="text-2xl font-extrabold" href="/">xHyroM</a>
         <nav>
             <ul
-                class="nav-links absolute top-0 left-0 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
+                class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
             >
                 {
                     navItems.map((item) => (
diff --git a/src/components/widgets/docs/Sidebar.astro b/src/components/widgets/docs/Sidebar.astro
index ce571e0..129bbb8 100644
--- a/src/components/widgets/docs/Sidebar.astro
+++ b/src/components/widgets/docs/Sidebar.astro
@@ -1,6 +1,9 @@
 ---
 import type { MarkdownInstance } from "astro";
 
+import leftArrow from "/icons/chevrons-left.svg";
+import rightArrow from "/icons/chevrons-right.svg";
+
 const files = await Astro.glob("../../../pages/docs/items/**/*.md");
 for (let i = 0; i < 100; i++) {
     files.push(files[0]);
@@ -19,8 +22,16 @@ const sections = files.reduce((acc, file) => {
 const categories = Object.keys(sections);
 ---
 
-<aside aria-label="Sidebar">
-    <nav class="mr-16 w-full py-4">
+<aside aria-label="Sidebar" class="">
+    <div class="absolute z-10 text-white md:hidden">
+        <button id="sidebar-show" class="p-4 pl-2">
+            <img src={rightArrow} alt="" id="open-arrow" class="duration-200" />
+        </button>
+    </div>
+    <nav
+        id="sidebar"
+        class="md:bg-transparentpy-4 invisible absolute mt-6 mr-16 w-full -translate-x-full bg-dark transition-transform duration-200 md:visible md:relative md:mt-0 md:inline md:translate-x-0"
+    >
         <ul class="overflow-y-auto overflow-x-visible">
             {
                 categories.map((category) => (
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c562fd5..12c2e58 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -57,7 +57,8 @@
         </div>
         <script>
             import "../scripts/menu.js";
-            import "../scripts/snow.js";
+            import "../scripts/sidebarToggle.js";
+            /* import "../scripts/snow.js"; */
 
             import { Fireworks } from "fireworks-js";
 
diff --git a/src/scripts/sidebarToggle.js b/src/scripts/sidebarToggle.js
new file mode 100644
index 0000000..4736f6e
--- /dev/null
+++ b/src/scripts/sidebarToggle.js
@@ -0,0 +1,6 @@
+document.getElementById("sidebar-show").addEventListener("click", () => {
+    document.getElementById("sidebar-show").classList.remove("hidden");
+    document.getElementById("sidebar").classList.toggle("translate-x-0");
+    document.getElementById("sidebar").classList.remove("invisible");
+    document.getElementById("open-arrow").classList.toggle("rotate-180");
+});
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b1cc516..724a4ed 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -13,7 +13,5 @@ module.exports = {
             },
         },
     },
-    plugins: [
-        require("@tailwindcss/typography")
-    ],
+    plugins: [require("@tailwindcss/typography")],
 };