diff --git a/src/pages/PeoplePage.vue b/src/pages/PeoplePage.vue
index debac8e..c261a1d 100644
--- a/src/pages/PeoplePage.vue
+++ b/src/pages/PeoplePage.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
 <template>
   <div class="people-container">
     <!-- Top Navigation Bar -->
-    <v-app-bar elevation="0" class="people-toolbar border-b">
+    <v-toolbar elevation="0" class="people-toolbar border-b">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -90,19 +90,20 @@ onMounted(async () => {
         ></v-btn>
       </template>
 
-      <v-app-bar-title class="d-flex align-center">
+      <v-toolbar-title class="d-flex align-center">
         <v-icon size="28" color="primary" class="mr-2">mdi-account-multiple</v-icon>
         <span class="text-h6 font-weight-bold">People Manager</span>
-      </v-app-bar-title>
+      </v-toolbar-title>
 
       <v-spacer></v-spacer>
-    </v-app-bar>
+    </v-toolbar>
 
     <!-- Main Content Area -->
     <div class="people-content">
       <!-- Sidebar Navigation Drawer -->
       <v-navigation-drawer
         v-model="sidebarVisible"
+        contained
         :permanent="display.mdAndUp.value"
         :temporary="display.smAndDown.value"
         width="280"
@@ -268,7 +269,8 @@ onMounted(async () => {
 .people-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate; /* Create stacking context to prevent style leakage */
 }
 
@@ -279,6 +281,7 @@ onMounted(async () => {
 .people-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -290,6 +293,8 @@ onMounted(async () => {
 
 .people-main {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -297,6 +302,8 @@ onMounted(async () => {
 
 .people-wrapper {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   display: flex;
   overflow: hidden;
 }
diff --git a/src/routes.ts b/src/routes.ts
index 7e8a52f..031fefb 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -3,6 +3,7 @@ const routes = [
     name: 'people',
     path: '/people',
     component: () => import('@/pages/PeoplePage.vue'),
+    meta: { layout: 'fixed' },
   },
 ]