diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 3fa0d1a..c42bddf 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <portal-target name="dropdown" slim />
-    <div class="flex flex-col">
-      <div class="h-screen flex flex-col" @click="hideDropdownMenus">
-        <div class="md:flex flex-shrink-0">
+    <div class="md:flex md:flex-col">
+      <div class="md:h-screen md:flex md:flex-col" @click="hideDropdownMenus">
+        <div class="md:flex md:flex-shrink-0">
           <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link class="mt-1" href="/">
               <logo class="fill-white" width="120" height="28" />
@@ -33,9 +33,9 @@
             </dropdown>
           </div>
         </div>
-        <div class="flex flex-grow overflow-hidden">
-          <main-menu :url="url()" class="bg-indigo-800 flex-shrink-0 w-56 p-12 hidden md:block overflow-y-auto" />
-          <div class="flex-1 px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
+        <div class="md:flex md:flex-grow md:overflow-hidden">
+          <main-menu :url="url()" class="hidden md:block bg-indigo-800 flex-shrink-0 w-56 p-12 overflow-y-auto" />
+          <div class="md:flex-1 px-4 py-8 md:p-12 md:overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
           </div>