diff --git a/src/components/01_branch-management/CardDetailsComponent.vue b/src/components/01_branch-management/CardDetailsComponent.vue
index 2a3505c1..d3acb68c 100644
--- a/src/components/01_branch-management/CardDetailsComponent.vue
+++ b/src/components/01_branch-management/CardDetailsComponent.vue
@@ -37,14 +37,14 @@ defineProps<{
     <div class="row">
       <div class="col q-pa-sm card-details-variable">
         <AppBox class="bordered row q-pa-sm" bordered>
-          <div class="col-4 color-text-static">รหัสสาขา</div>
-          <div class="col-8">{{ data?.code }}</div>
-          <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
-          <div class="col-8">{{ data?.taxNo }}</div>
-          <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
-          <div class="col-8">{{ data?.name }}</div>
-          <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
-          <div class="col-8">{{ data?.nameEN }}</div>
+          <div class="col-5 color-text-static">รหัสสาขา</div>
+          <div class="col-7">{{ data?.code }}</div>
+          <div class="col-5 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
+          <div class="col-7">{{ data?.taxNo }}</div>
+          <div class="col-5 color-text-static">ชื่อสาขา ภาษาไทย</div>
+          <div class="col-7">{{ data?.name }}</div>
+          <div class="col-5 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
+          <div class="col-7">{{ data?.nameEN }}</div>
 
           <div
             class="color-card-text-code col-12 q-my-md text-weight-bold"
diff --git a/src/components/01_branch-management/DetailBranchDrawerComponent.vue b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
index aee56aa9..df96a729 100644
--- a/src/components/01_branch-management/DetailBranchDrawerComponent.vue
+++ b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
@@ -58,51 +58,51 @@ const open = defineModel('open', { type: Boolean, default: false });
 
     <section class="q-mb-md">
       <AppBox class="row q-pa-sm" bordered>
-        <div class="col-4 color-text-static">รหัสสาขา</div>
-        <div class="col-8">{{ data?.code }}</div>
-        <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
-        <div class="col-8">{{ data?.taxNo }}</div>
-        <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
-        <div class="col-8">{{ data?.name }}</div>
-        <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
-        <div class="col-8">{{ data?.nameEN }}</div>
+        <div class="col-5 app-text-muted">รหัสสาขา</div>
+        <div class="col-7">{{ data?.code }}</div>
+        <div class="col-5 app-text-muted">เลขประชำตัวผู้เสียภาษี</div>
+        <div class="col-7">{{ data?.taxNo }}</div>
+        <div class="col-5 app-text-muted">ชื่อสาขา ภาษาไทย</div>
+        <div class="col-7">{{ data?.name }}</div>
+        <div class="col-5 app-text-muted">ชื่อสาขา ภาษาอังกฤษ</div>
+        <div class="col-7">{{ data?.nameEN }}</div>
 
         <div
-          class="color-card-text-code col-12 q-my-md text-weight-bolder"
+          class="app-text-info col-12 q-my-md text-weight-bold"
           :class="{ dark: $q.dark.isActive }"
         >
           ที่อยู่สาขา
         </div>
 
-        <div class="col-3 color-text-static">ที่อยู่</div>
+        <div class="col-3 app-text-muted">ที่อยู่</div>
         <div class="col-9">{{ data?.address }}</div>
-        <div class="col-3 color-text-static">แขวง/ตำบล</div>
+        <div class="col-3 app-text-muted">แขวง/ตำบล</div>
         <div class="col-3">
           {{ data?.subDistrict?.name }}
         </div>
-        <div class="col-3 color-text-static">เขต/อำเภอ</div>
+        <div class="col-3 app-text-muted">เขต/อำเภอ</div>
         <div class="col-3">{{ data?.district?.name }}</div>
-        <div class="col-3 color-text-static">จังหวัด</div>
+        <div class="col-3 app-text-muted">จังหวัด</div>
         <div class="col-3">{{ data?.province?.name }}</div>
-        <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
+        <div class="col-3 app-text-muted">รหัสไปรษณีย์</div>
         <div class="col-3">{{ data?.zipCode }}</div>
 
         <div
-          class="color-card-text-code col-12 q-my-md"
+          class="app-text-info col-12 q-my-md text-weight-bold"
           :class="{ dark: $q.dark.isActive }"
         >
           ที่อยู่สาขา ENG
         </div>
 
-        <div class="col-3 color-text-static">Address</div>
+        <div class="col-3 app-text-muted">Address</div>
         <div class="col-9">{{ data?.addressEN }}</div>
-        <div class="col-3 color-text-static">Subdistrict</div>
+        <div class="col-3 app-text-muted">Subdistrict</div>
         <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
-        <div class="col-3 color-text-static">District</div>
+        <div class="col-3 app-text-muted">District</div>
         <div class="col-3">{{ data?.district?.nameEN }}</div>
-        <div class="col-3 color-text-static">Province</div>
+        <div class="col-3 app-text-muted">Province</div>
         <div class="col-3">{{ data?.province?.nameEN }}</div>
-        <div class="col-3 color-text-static">Zip code</div>
+        <div class="col-3 app-text-muted">Zip code</div>
         <div class="col-3">{{ data?.zipCode }}</div>
       </AppBox>
     </section>