diff --git a/public/img-table-dark.png b/public/img-table-dark.png
new file mode 100644
index 00000000..76bc34c7
Binary files /dev/null and b/public/img-table-dark.png differ
diff --git a/public/img-table-light.png b/public/img-table-light.png
new file mode 100644
index 00000000..19747e12
Binary files /dev/null and b/public/img-table-light.png differ
diff --git a/src/components/01_branch-management/BtnAddComponet.vue b/src/components/01_branch-management/BtnAddComponet.vue
index c4f4e699..1a864b1b 100644
--- a/src/components/01_branch-management/BtnAddComponet.vue
+++ b/src/components/01_branch-management/BtnAddComponet.vue
@@ -8,6 +8,7 @@ defineProps<{
   <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
     <div class="row">
       <q-btn
+        unelevated
         @click="$emit('trigger')"
         size="lg"
         class="color-btn"
diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 7806ab15..8059ae9c 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -1,34 +1,50 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t, locale } = useI18n();
 const router = useRouter();
 
 const currentRoute = ref<string>('');
-const labelMenu: {
-  label: string;
-  icon: string;
-  route: string;
-}[] = [
-  { label: 'Dashboard', icon: 'img:/file-account-outline.png', route: '' },
+
+const labelMenu = ref<{ label: string; icon: string; route: string }[]>([
   {
-    label: 'จัดการสาขา',
+    label: 'drawerDashboard',
+    icon: 'img:/file-account-outline.png',
+    route: '',
+  },
+  {
+    label: 'drawerBranchManagement',
     icon: 'mdi-sitemap-outline',
     route: '/branch-management',
   },
   {
-    label: 'จัดการบุคลากร',
-    icon: 'mdi-account-settings-outline',
+    label: 'drawerPersonnelManagement',
+    icon: 'mdi:account-settings-outline',
     route: '/personnel-management',
   },
-  { 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: '' },
-];
+  {
+    label: 'drawerCustomerManagement',
+    icon: 'mdi-account-settings-outline',
+    route: '',
+  },
+  {
+    label: 'drawerProductsAndServices',
+    icon: 'raphael:package',
+    route: '',
+  },
+  { label: 'drawerQuotation', icon: 'raphael:package', route: '' },
+  { label: 'drawerRequestList', icon: 'raphael:package', route: '' },
+  { label: 'drawerWorkOrder', icon: 'raphael:package', route: '' },
+  { label: 'drawerInvoice', icon: 'raphael:package', route: '' },
+  {
+    label: 'drawerAccountingLedger',
+    icon: 'mdi-account-cash-outline',
+    route: '',
+  },
+  { label: 'drawerReport', icon: 'mdi-file-chart-outline', route: '' },
+]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
   default: false,
@@ -70,9 +86,10 @@ function navigateTo(label: string, destination: string) {
         <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" />
+            <iconify-icon :icon="v.icon" />
+            <!-- <q-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
 
-            {{ v.label }}
+            {{ $t(v.label) }}
           </q-item-label>
         </q-item-section>
       </q-item>
diff --git a/src/css/app.scss b/src/css/app.scss
index be2b6fc4..e0c5fb80 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -4,19 +4,24 @@
 @import 'open-props/shadows';
 @import 'open-props/zindex';
 
+:root {
+  --_bg-box-content: var(--blue-5);
+  --_color-box-content-text: var(--_bg-box-content);
+  --_bg-box-content-text: white;
+  --_bg-tooltip-branch: var(--indigo-0);
+  --_bg-tooltip-branch-arrow: var(--_bg-tooltip-branch);
+}
+
 html {
   --brand-1: #035aa1;
   --brand-2: #f50000;
-
   --border-color: var(--gray-4);
-
   --foreground: black;
   --background: var(--gray-1);
   --surface-0: var(--background);
   --surface-1: white;
   --surface-2: var(--gray-1);
   --surface-3: var(--gray-2);
-
   color: var(--foreground);
   background-color: var(--background);
 }
@@ -24,9 +29,7 @@ html {
 :where(.dark, .body--dark) {
   --brand-1: var(--blue-7);
   --brand-2: #f50000;
-
   --border-color: var(--gray-8);
-
   --foreground: white;
   --background: var(--gray-10);
   --surface-0: var(--background);
diff --git a/src/i18n/en-US/drawer-component.ts b/src/i18n/en-US/drawer-component.ts
new file mode 100644
index 00000000..b511b0ed
--- /dev/null
+++ b/src/i18n/en-US/drawer-component.ts
@@ -0,0 +1,13 @@
+export default {
+  drawerDashboard: 'Dashboard',
+  drawerBranchManagement: 'Branch Management',
+  drawerPersonnelManagement: 'Personnel Management',
+  drawerCustomerManagement: 'Customer Management',
+  drawerProductsAndServices: 'Products and Services',
+  drawerQuotation: 'Quotation',
+  drawerRequestList: 'Request List',
+  drawerWorkOrder: 'Work Order',
+  drawerInvoice: 'Invoice',
+  drawerAccountingLedger: 'Accounting Ledger',
+  drawerReport: 'Report',
+};
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 64c0e5cf..d7f1fb3c 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -1,5 +1,6 @@
 // This is just an example,
 // so you can safely delete all default props below
+import drawerComponent from './drawer-component';
 
 export default {
   ok: 'Confirm',
@@ -9,4 +10,5 @@ export default {
   search: 'Search',
   download: 'Download',
   save: 'Save',
+  ...drawerComponent,
 };
diff --git a/src/i18n/th-th/drawer-component.ts b/src/i18n/th-th/drawer-component.ts
new file mode 100644
index 00000000..80cb7c46
--- /dev/null
+++ b/src/i18n/th-th/drawer-component.ts
@@ -0,0 +1,13 @@
+export default {
+  drawerDashboard: 'Dashboard',
+  drawerBranchManagement: 'การจัดการสาขา',
+  drawerPersonnelManagement: 'จัดการบุคลากร',
+  drawerCustomerManagement: 'จัดการลูกค้า',
+  drawerProductsAndServices: 'สินค้าและบริการ',
+  drawerQuotation: 'ใบเสนอราคา',
+  drawerRequestList: 'รายการคําขอ',
+  drawerWorkOrder: 'ใบสั่งงาน',
+  drawerInvoice: 'ใบรับสินค้า',
+  drawerAccountingLedger: 'รายการทางบัญชี',
+  drawerReport: 'รายงาน',
+};
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 2b72d1bf..75e5d2ea 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -1,3 +1,5 @@
+import drawerComponent from './drawer-component';
+
 export default {
   ok: 'ยืนยัน',
   cancel: 'ยกเลิก',
@@ -6,4 +8,5 @@ export default {
   search: 'ค้นหา',
   download: 'ดาวน์โหลด',
   save: 'บันทึก',
+  ...drawerComponent,
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 69a8623c..ed442512 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { getName, getRole, logout } from 'src/services/keycloak';
+import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
@@ -24,10 +25,21 @@ const $q = useQuasar();
 const loaderStore = useLoader();
 
 const { visible } = storeToRefs(loaderStore);
+const { locale } = useI18n({ useScope: 'global' });
 
 const leftDrawerOpen = ref($q.screen.gt.sm);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
+
+const currentLanguage = ref<string>('ไทย');
+const language: {
+  value: string;
+  label: string;
+}[] = [
+  { value: 'th-th', label: 'ไทย' },
+  { value: 'en-US', label: 'English' },
+];
+
 const notiOpen = ref(false);
 const notiMenu = ref<NotificationButton[]>([
   {
@@ -255,12 +267,42 @@ function doLogout() {
             style="color: var(--gray-6)"
             @click="$q.dark.toggle()"
           />
+          <!-- เปลี่นรภาษา -->
+          <q-btn
+            flat
+            color="grey"
+            v-model="currentLanguage"
+            :label="currentLanguage"
+            class="no-uppercase"
+          >
+            <q-menu fit anchor="bottom left" self="top left" auto-close>
+              <q-list
+                v-for="v in language"
+                :key="v.value"
+                style="min-width: 50px"
+              >
+                <q-item
+                  v-if="!v.label.includes(currentLanguage)"
+                  clickable
+                  @click="
+                    locale = v.value;
+                    currentLanguage = v.label;
+                    console.log(locale);
+                  "
+                >
+                  <q-item-section>
+                    {{ v.label }}
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </div>
       </div>
     </q-header>
 
     <q-page-container style="background-color: transparent">
-      <q-page class="q-px-lg q-pa-md">
+      <q-page class="q-px-lg">
         <router-view />
       </q-page>
     </q-page-container>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 42ad0978..dc023d8c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -9,17 +9,46 @@ import AppBox from 'components/app/AppBox.vue';
     <app-box bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
-          <q-btn
-            unelevated
-            class="color-btn-icon"
-            size="10px"
-            round
-            icon="mdi-exclamation"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            <q-tooltip>test</q-tooltip>
-          </q-btn>
+          <div class="row">
+            <div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
+              <q-btn
+                unelevated
+                class="color-btn-icon"
+                size="5px"
+                round
+                icon="mdi-exclamation"
+                :class="{ 'dark-btn-icon': $q.dark.isActive }"
+              ></q-btn>
+
+              <div
+                class="tooltip-text"
+                :class="{ 'dark-tooltip-text': $q.dark.isActive }"
+              >
+                <q-img
+                  :src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
+                  width="60%"
+                />
+                <div
+                  class="box-content"
+                  :class="{ 'dack-box-content': $q.dark.isActive }"
+                >
+                  <div class="column justify-center" style="height: 100%">
+                    <div class="col-4">ยังไม่มีสำนักงานใหญ่</div>
+                    <div class="col-4 q-mb-md q-px-md">
+                      <div
+                        class="content-text q-pa-sm"
+                        :class="{ 'dack-content-text': $q.dark.isActive }"
+                      >
+                        คลิก + เพื่อสร้างสำนักงานใหญ่
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+
         <div
           class="col test self-center"
           style="display: flex; align-items: center"
@@ -39,10 +68,80 @@ import AppBox from 'components/app/AppBox.vue';
 </template>
 
 <style scoped>
-/* .test {
-  display: flex;
-  align-items: center;
-} */
+.box-content {
+  position: absolute;
+  width: 100%;
+  height: 45%;
+  background: var(--_bg-box-content);
+  bottom: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  .content-text {
+    color: var(--_color-box-content-text);
+    background: var(--_bg-box-content-text);
+    border-radius: 6px;
+
+    &.dack-content-text {
+      border: 1px solid var(--brand-1);
+    }
+  }
+
+  &.dack-box-content {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  &.dark-tooltip {
+    --_bg-box-content: var(--gray-9);
+    --_bg-tooltip-branch: var(--gray-11);
+    --_bg-tooltip-branch-arrow: var(--_bg-box-content);
+    --_bg-box-content-text: var(--gray-11);
+    --_color-box-content-text: var(--gray-0);
+  }
+}
+
+.tooltip-text {
+  &.dark-tooltip-text {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 242px;
+  height: 200px;
+  background-color: var(--_bg-tooltip-branch);
+  color: white;
+  text-align: center;
+  border-radius: 10px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: -170px;
+  left: -255px;
+}
+
+.tooltip .tooltip-text::after {
+  content: '';
+  z-index: -99;
+  position: absolute;
+  top: 7%;
+  left: 100.2%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
+    transparent;
+  transform: rotate(270deg);
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+}
 
 .color-btn-icon {
   --_bg-color-btn-icon: var(--blue-5-hsl);
@@ -50,7 +149,7 @@ import AppBox from 'components/app/AppBox.vue';
   color: var(--gray-0);
   background: hsl(var(--_bg-color-btn-icon));
 
-  &.dark {
+  &.dark-btn-icon {
     --_bg-color-btn-icon: var(--surface-0);
     border: 2px solid;
     border-color: var(--brand-1);