diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c2894b10..c1ea0b41 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -159,6 +159,6 @@ function navigateTo(label: string, destination: string) {
 }
 
 :deep(.q-drawer) {
-  z-index: 5 !important;
+  z-index: 9999 !important;
 }
 </style>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 78def2b5..ac367402 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -173,7 +173,10 @@ onMounted(async () => {
 
     <q-page-container class="surface-1 q-pa-md">
       <!-- drawer control -->
-      <div style="position: relative; z-index: 10">
+      <div
+        style="position: relative"
+        :style="$q.screen.gt.xs ? 'z-index: 9999' : 'z-index: 9998'"
+      >
         <q-avatar
           size="36px"
           style="