diff --git a/public/file-account-outline.png b/public/file-account-outline.png
new file mode 100644
index 00000000..25c536ca
Binary files /dev/null and b/public/file-account-outline.png differ
diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 91fc8ede..14caee4d 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -1,39 +1,56 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const currentRoute = ref<string>('');
 const labelMenu: {
   label: string;
   icon: string;
+  route: string;
 }[] = [
-  { label: 'Dashboard', icon: 'mdi-folder-arrow-left' },
-  { label: 'จัดการสาขา', icon: 'mdi-folder-arrow-left' },
-  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline' },
-  { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline' },
-  { label: 'สินค้าและบริการ', icon: 'mdi-folder-arrow-left' },
-  { label: 'ใบเสนอราคา', icon: 'mdi-folder-arrow-left' },
-  { label: 'รายการคำขอ', icon: 'mdi-folder-arrow-left' },
-  { label: 'ใบสั่งงาน', icon: 'mdi-folder-arrow-left' },
-  { label: 'ใบรับสินค้า', icon: 'mdi-folder-arrow-left' },
-  { label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline' },
-  { label: 'รายงาน', icon: 'mdi-file-chart-outline' },
+  { label: 'Dashboard', icon: 'img:/file-account-outline.png', route: '' },
+  {
+    label: 'จัดการสาขา',
+    icon: 'mdi-sitemap-outline',
+    route: '/branch-management',
+  },
+  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline', route: '' },
+  { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline', route: '' },
+  { label: 'สินค้าและบริการ', icon: 'mdi-package-variant', route: '' },
+  { label: 'ใบเสนอราคา', icon: 'mdi-package-variant', route: '' },
+  { label: 'รายการคำขอ', icon: 'mdi-package-variant', route: '' },
+  { label: 'ใบสั่งงาน', icon: 'mdi-package-variant', route: '' },
+  { label: 'ใบรับสินค้า', icon: 'mdi-package-variant', route: '' },
+  { label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline', route: '' },
+  { label: 'รายงาน', icon: 'mdi-file-chart-outline', route: '' },
 ];
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
   default: false,
 });
+
+function navigateTo(label: string, destination: string) {
+  currentRoute.value = label;
+  router.push(`${destination}`);
+}
 </script>
 
 <template>
   <!-- Drawer -->
-  <q-drawer v-model="leftDrawerOpen" side="left" show-if-above>
+  <q-drawer
+    :breakpoint="500"
+    v-model="leftDrawerOpen"
+    side="left"
+    show-if-above
+  >
     <div class="main-bar">
       <div
         class="column items-center justify-center q-pa-xl cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
       >
-        <q-img src="/logo.png" />
+        <q-img src="/logo.png" style="width: 70%; height: 70%" />
       </div>
     </div>
 
@@ -42,11 +59,11 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
         v-for="v in labelMenu"
         :key="v.label"
         clickable
-        @click="currentRoute = v.label"
+        @click="navigateTo(v.label, v.route)"
         class="no-padding"
         :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
       >
-        <q-item-section id="btn-drawer-back " style="border: 10px">
+        <q-item-section id="btn-drawer-back ">
           <q-item-label class="q-pl-lg">
             <div class="box-border-left" />
             <q-icon :name="v.icon" size="sm" class="q-mr-xs" />