diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 64c1afd4..591c030a 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -32,5 +32,8 @@
     </section>
 
     @includeUnless(config('hyde.footer.enabled', true) && ($withoutNavigation ?? false), 'hyde::layouts.footer') 
+
+    <!-- The main app script -->
+    <script defer src="{{ Hyde::relativePath('media/app.js', $currentPage) }}"></script>
 </body>
 </html>
diff --git a/resources/views/layouts/docs.blade.php b/resources/views/layouts/docs.blade.php
index c8c7fc76..c0656dcc 100644
--- a/resources/views/layouts/docs.blade.php
+++ b/resources/views/layouts/docs.blade.php
@@ -12,51 +12,5 @@
 	@include('hyde::components.docs.content')
 </main>
 
-<script>
-	var sidebarOpen = screen.width >= 768;
-
-	const sidebar = document.getElementById("documentation-sidebar");
-	const main = document.getElementById("documentation-content");
-	const backdrop = document.getElementById("sidebar-backdrop");
-
-	const toggleButtons = document.querySelectorAll(".sidebar-button-wrapper");
-
-	function toggleSidebar() {
-		if (sidebarOpen) {
-			hideSidebar();
-		} else {
-			showSidebar();
-		}
-	}
-
-	function showSidebar() {
-		sidebar.classList.remove("hidden");
-		sidebar.classList.add("flex");
-		backdrop.classList.remove("hidden");
-		document.getElementById("app").style.overflow = "hidden";
-
-		toggleButtons.forEach((button) => {
-			button.classList.remove("open");
-			button.classList.add("closed");
-		});
-
-		sidebarOpen = true;
-	}
-
-	function hideSidebar() {
-		sidebar.classList.add("hidden");
-		sidebar.classList.remove("flex");
-		backdrop.classList.add("hidden");
-		document.getElementById("app").style.overflow = null;
-
-		toggleButtons.forEach((button) => {
-			button.classList.add("open");
-			button.classList.remove("closed");
-		});
-
-		sidebarOpen = false;
-	}
-
-</script>
 <div id="sidebar-backdrop" class="hidden" title="Click to close sidebar" onClick="hideSidebar()"></div>
 @endsection
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index eb675215..b1258f21 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -10,7 +10,7 @@
 		</a>
 	</header>
 
-	<button class="navigation-toggle-button md:hidden" title="Open navigation menu" onClick="showNavigation()">
+	<button class="navigation-toggle-button md:hidden px-4" title="Open navigation menu" onClick="showNavigation()">
 		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
 	</button>
 
@@ -35,7 +35,7 @@
 			</a>
 		</header>
 
-		<button class="navigation-toggle-button" title="Close navigation menu" onClick="hideNavigation()">
+		<button class="navigation-toggle-button px-4" title="Close navigation menu" onClick="hideNavigation()">
 			<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
 		</button>
 	</div>
@@ -56,33 +56,3 @@
 		@endforeach
 	</ul>
 </nav>
-
-
-<script>
-	const mainNavigation = document.getElementById("main-navigation");
-	const mobileNavigation = document.getElementById("mobile-navigation");
-	var navigationOpen = false;
-
-	function toggleNavigation() {
-		if (navigationOpen) {
-			hideNavigation();
-		} else {
-			showNavigation();
-		}
-	}
-
-	function showNavigation() {
-		mobileNavigation.classList.add("flex");
-		mobileNavigation.classList.remove("hidden");
-
-		navigationOpen = true;
-	}
-
-	function hideNavigation() {
-		mobileNavigation.classList.remove("flex");
-		mobileNavigation.classList.add("hidden");
-
-		navigationOpen = false;
-	}
-
-</script>