diff --git a/public/qrcode.png b/public/qrcode.png
new file mode 100644
index 00000000..b671d081
Binary files /dev/null and b/public/qrcode.png differ
diff --git a/src/App.vue b/src/App.vue
index 1741fee0..e57f4049 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-import 'iconify-icon';
-</script>
+<script setup lang="ts"></script>
 <template>
   <router-view />
 </template>
diff --git a/src/components/01_branch-management/CardDetailsComponent.vue b/src/components/01_branch-management/CardDetailsComponent.vue
new file mode 100644
index 00000000..b72a5d3d
--- /dev/null
+++ b/src/components/01_branch-management/CardDetailsComponent.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { Branch } from '../../stores/branch/types';
+
+defineProps<{
+  data?: Branch;
+}>();
+</script>
+
+<template>
+  <q-card style="width: 100%">
+    <q-item>
+      <q-card-section class="no-padding">
+        <div class="flex q-gutter-x-md" style="align-items: center">
+          <iconify-icon icon="ic:baseline-home" />
+          <div class="text-h6">รายละเอียดสำนักงานใหญ่</div>
+
+          <div
+            class="text-h6 color-card-text-code"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            Httw
+          </div>
+          <div
+            class="q-pa-sm"
+            style="
+              color: var(--teal-6);
+              background: hsla(var(--teal-6-hsl) / 0.08);
+              border-radius: 25px;
+            "
+          >
+            ดำเนินการอยู่
+          </div>
+        </div>
+      </q-card-section>
+    </q-item>
+  </q-card>
+
+  <div class="row">
+    <div class="col q-pa-sm card-details-variable">
+      <q-card class="bordered column q-pa-sm">
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">รหัสสาขา</div>
+          <div class="col-2">{{ data?.code }}</div>
+          <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
+          <div class="col-3">{{ data?.taxNo }}</div>
+        </div>
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
+          <div class="col-2">{{ data?.name }}</div>
+          <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
+          <div class="col-3">{{ data?.nameEN }}</div>
+        </div>
+
+        <div class="row q-pt-sm q-pb-md card-details-row-height">
+          <div
+            class="col color-card-text-code"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            ที่อยู่สาขา
+          </div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">ที่อยู่</div>
+          <div class="col-2">{{ data?.address }}</div>
+          <div class="col-4 color-text-static">แขวง/ตำบล</div>
+          <div class="col-3">
+            {{ data?.subDistrict?.name }}
+          </div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">เขต/อำเภอ</div>
+          <div class="col-2">{{ data?.district?.name }}</div>
+          <div class="col-4 color-text-static">จังหวัด</div>
+          <div class="col-3">{{ data?.province?.name }}</div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
+          <div class="col-2">{{ data?.code }}</div>
+        </div>
+
+        <div class="row q-pt-sm q-pb-md card-details-row-height">
+          <div
+            class="col color-card-text-code"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            ที่อยู่สาขา ENG
+          </div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">Address</div>
+          <div class="col-2">{{ data?.addressEN }}</div>
+          <div class="col-4 color-text-static">Subdistrict</div>
+          <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">District</div>
+          <div class="col-2">{{ data?.district?.nameEN }}</div>
+          <div class="col-4 color-text-static">Province</div>
+          <div class="col-3">{{ data?.province?.nameEN }}</div>
+        </div>
+
+        <div class="row card-details-row-height">
+          <div class="col-3 color-text-static">Zip code</div>
+          <div class="col-2">{{ data?.code }}</div>
+        </div>
+      </q-card>
+    </div>
+
+    <div class="col q-pa-sm">
+      <q-card class="bordered q-pa-sm">
+        <div class="row">
+          <div class="col-8">
+            <div class="row card-details-row-height">
+              <div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
+              <div class="col">{{ data?.telephoneNo }}</div>
+            </div>
+            <div class="row card-details-row-height">
+              <div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
+              <div class="col">{{ data?.email }}</div>
+            </div>
+          </div>
+          <div class="col full-width">
+            <div
+              class="column"
+              style="border-radius: 6px; border: 1px solid #e0e0e0"
+            >
+              <div class="col q-pa-sm" style="border-bottom: 1px solid #e0e0e0">
+                Id line
+              </div>
+              <div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
+                <q-img
+                  src="/qrcode.png"
+                  spinner-color="white"
+                  style="height: 80px; max-width: 80px"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col color-text-static">location</div>
+          <div class="col"></div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.color-card-text-code {
+  --_color-card-text-code: var(--gray-12);
+  color: var(--_color-card-text-code);
+
+  &.dark {
+    --_color-card-text-code: var(--cyan-6);
+  }
+}
+
+.color-text-static {
+  --_details-text-static-color: var(--gray-6);
+  color: var(--_details-text-static-color);
+}
+
+.card-details-row-height {
+  height: 40px;
+}
+</style>
diff --git a/src/components/01_branch-management/TableCardComponent.vue b/src/components/01_branch-management/TableCardComponent.vue
new file mode 100644
index 00000000..c2ba92b6
--- /dev/null
+++ b/src/components/01_branch-management/TableCardComponent.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar';
+import { ref } from 'vue';
+
+const color: string[] = ['pink', 'violet'];
+
+const props = defineProps<{
+  subBranch?: boolean;
+  rows: {
+    name: string;
+    branchName: string;
+    address: string;
+    phonNumber: string;
+    Headquarters: string;
+    type: string;
+    status: string;
+  }[];
+}>();
+
+const columns = [
+  {
+    name: 'name',
+    required: true,
+    label: props.subBranch ? 'รหัสสาขา' : 'รหัสสำนักงานใหญ่',
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: 'branchName',
+    align: 'center',
+    label: 'ชื่อสาขา',
+    field: 'branchName',
+    sortable: true,
+  },
+  { name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
+  { name: 'phonNumber', label: 'เบอร์โทร', field: 'phonNumber' },
+  { name: 'Headquarters', label: 'สำนักงานใหญ่', field: 'Headquarters' },
+  { name: 'type', label: 'ประเภท', field: 'type' },
+  { name: 'status', label: 'สถานะ', field: 'status' },
+] satisfies QTableProps['columns'];
+
+const filter = ref('');
+</script>
+
+<template>
+  <div style="width: 100%">
+    <q-table
+      :rows-per-page-options="[4]"
+      flat
+      bordered
+      grid
+      :rows="rows"
+      :columns="columns"
+      row-key="name"
+      :filter="filter"
+      hide-header
+    >
+      <template v-slot:item="prop">
+        <div class="q-pr-sm">
+          <q-card class="bordered" style="width: 340px">
+            <q-item
+              class="bordered"
+              :class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''}    ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
+              :key="i"
+              v-for="([k, v], i) in Object.entries(prop.row)"
+              :style="` `"
+            >
+              <q-item-section
+                avatar
+                style="width: 120px"
+                :style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`"
+              >
+                {{ prop.colsMap[k]?.label }}
+              </q-item-section>
+
+              <q-item-section>
+                <div class="row">
+                  {{ v }}
+                  <q-space />
+
+                  <iconify-icon
+                    class="cursor-pointer"
+                    v-if="i === 0"
+                    width="20px"
+                    icon="mdi:navigate-next"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-card>
+        </div>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<style scoped>
+.table-card-color-pink {
+  --bg-table-card-header: var(--pink-6-hsl);
+  --color-table-card-header: var(--pink-0-hsl);
+  --bg-table-card-row: hsla(var(--pink-6-hsl) / 0.08);
+
+  &.dark-table-card {
+    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
+  }
+}
+
+.table-card-color-violet {
+  --bg-table-card-header: var(--violet-4-hsl);
+  --color-table-card-header: var(--violet-0-hsl);
+  --bg-table-card-row: hsla(var(--violet-4-hsl) / 0.08);
+  &.dark-table-card {
+    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
+  }
+}
+
+.color-table-header {
+  background: hsl(var(--bg-table-card-header));
+  color: hsl(var(--color-table-card-header));
+}
+
+.color-table-row {
+  background: var(--bg-table-card-row);
+}
+</style>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0d537d4b..144a085e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -365,12 +365,12 @@ onMounted(() => {
           </q-card-section>
 
           <q-card-section>
-            <table-card-component :subBranch="true" :rows="rows" />
+            <TableCardComponent :subBranch="true" :rows="rows" />
           </q-card-section>
         </div>
 
         <div class="col bordered full-height" style="overflow-y: auto">
-          <card-details-component class="q-pa-sm" />
+          <CardDetailsComponent class="q-pa-sm" />
         </div>
       </q-card-section>
     </q-card>