diff --git a/src/pages/MailPage.vue b/src/pages/MailPage.vue
index b13f235..b752d08 100644
--- a/src/pages/MailPage.vue
+++ b/src/pages/MailPage.vue
@@ -215,13 +215,15 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   <!-- Normal UI -->
   <div v-else class="mail-container">
     <!-- Top toolbar -->
-    <v-app-bar class="mail-toolbar" elevation="0" density="compact">
-      <v-app-bar-nav-icon 
+    <v-toolbar class="mail-toolbar" elevation="0" density="compact">
+      <v-btn
         v-if="isMobile" 
+        icon="mdi-menu"
+        variant="text"
         @click="sidebarToggle"
       />
       
-      <v-app-bar-title>Mail</v-app-bar-title>
+      <v-toolbar-title>Mail</v-toolbar-title>
       
       <v-spacer />
       
@@ -255,13 +257,14 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
       >
         mdi-sync
       </v-icon>
-    </v-app-bar>
+    </v-toolbar>
 
     <!-- Main content area -->
     <div class="mail-content">
       <!-- Folder tree sidebar -->
       <v-navigation-drawer
         v-model="sidebarVisible"
+        contained
         :permanent="!isMobile"
         :temporary="isMobile"
         width="280"
@@ -411,7 +414,8 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   padding: 48px;
   text-align: center;
   width: 100%;
@@ -425,7 +429,8 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 .mail-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate;
 }
 
@@ -436,6 +441,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 .mail-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -447,6 +453,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 
 .mail-main {
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -454,6 +461,8 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 
 .mail-wrapper {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   display: flex;
   overflow: hidden;
 }
@@ -467,6 +476,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .mail-reader-panel {
diff --git a/src/routes.ts b/src/routes.ts
index 563b3ca..fff1795 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -5,7 +5,8 @@ const routes = [
     component: () => import('@/pages/MailPage.vue'),
     meta: {
       title: 'Mail',
-      requiresAuth: true
+      requiresAuth: true,
+      layout: 'fixed'
     }
   },
 ]
diff --git a/src/style.css b/src/style.css
index 6139876..817a03c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,7 +3,8 @@
 .mail-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate;
 }
 
@@ -14,6 +15,7 @@
 .mail-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -25,6 +27,7 @@
 
 .mail-main {
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -32,6 +35,8 @@
 
 .mail-wrapper {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   display: flex;
   overflow: hidden;
 }