diff --git a/src/pages/ChronoPage.vue b/src/pages/ChronoPage.vue
index 14146a6..8dad19d 100644
--- a/src/pages/ChronoPage.vue
+++ b/src/pages/ChronoPage.vue
@@ -22,6 +22,7 @@ import { EpochSpan } from '@/types/date';
 
 // Vuetify display
 const display = useDisplay();
+const isMobile = computed(() => display.mdAndDown.value);
 
 // Check if chrono manager is available
 const moduleStore = useModuleStore();
@@ -163,7 +164,7 @@ function selectSectionFromRoute() {
 <template>
   <div class="chrono-container">
     <!-- Top Navigation Bar -->
-    <v-toolbar elevation="0" class="chrono-toolbar border-b">
+    <v-toolbar elevation="0" density="compact" class="chrono-toolbar">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -173,8 +174,8 @@ function selectSectionFromRoute() {
       </template>
 
       <v-toolbar-title class="d-flex align-center">
-        <v-icon size="28" color="primary" class="mr-2">mdi-calendar-month</v-icon>
-        <span class="text-h6 font-weight-bold">Chrono</span>
+        <v-icon size="24" color="primary" class="mr-2">mdi-calendar-month</v-icon>
+        <span class="text-subtitle-1 font-weight-bold">Chrono</span>
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
@@ -202,8 +203,8 @@ function selectSectionFromRoute() {
       <v-navigation-drawer
         v-model="sidebarVisible"
         contained
-        :permanent="display.mdAndUp.value"
-        :temporary="display.smAndDown.value"
+        :permanent="sidebarVisible && !isMobile"
+        :temporary="isMobile"
         width="280"
         class="chrono-sidebar"
       >
@@ -353,6 +354,7 @@ function selectSectionFromRoute() {
 }
 
 .chrono-toolbar {
+  flex-shrink: 0;
   border-bottom: 1px solid rgb(var(--v-border-color)) !important;
 }
 
@@ -385,10 +387,6 @@ function selectSectionFromRoute() {
   flex-direction: column;
 }
 
-.border-b {
-  border-bottom: 1px solid rgb(var(--v-border-color));
-}
-
 /* Responsive adjustments */
 @media (max-width: 960px) {
   .chrono-main {