diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c2fc460a..bdafc8ca 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -94,7 +94,7 @@ function navigateTo(label: string, destination: string) {
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.md ? 200 : 256"
+    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
   >
     <div
       class="column items-center justify-center q-pa-xl cursor-pointer"
@@ -152,4 +152,16 @@ function navigateTo(label: string, destination: string) {
     }
   }
 }
+
+:deep(.q-drawer) {
+  background-color: transparent;
+  padding: var(--size-4);
+  padding-right: 0;
+}
+
+:deep(.q-drawer__content) {
+  border-radius: var(--radius-2);
+  background: var(--surface-1);
+  border: 1px solid var(--border-color);
+}
 </style>