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>