diff --git a/templates/base.html b/templates/base.html
index 497af7b..40cb1a9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -59,7 +59,8 @@
             <div class="flex items-center justify-between">
                 <div class="flex items-center justify-start">
                     <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
-                        class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded">
+                        class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
+                        _="on click toggle .hidden on #sidebar then toggle .ml-64 on #main">
                         <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd"
@@ -135,7 +136,7 @@
             </div>
         </aside>
         <div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
-            <main>
+            <main id="main">
                 <div class="pt-6 px-4" id="container">
                     {% block content %}
                     {% endblock %}