diff --git a/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue b/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
new file mode 100644
index 00000000..19f70772
--- /dev/null
+++ b/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { Branch } from '../../stores/branch/types';
+
+defineProps<{
+  data?: Branch;
+}>();
+
+const open = defineModel('open', { type: Boolean, default: false });
+</script>
+
+<template>
+  <q-drawer
+    overlay
+    bordered
+    class="q-pa-md"
+    side="right"
+    tabindex="0"
+    :width="500"
+    :breakpoint="500"
+    :model-value="true"
+    v-model="open"
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <q-icon name="mdi-home" size="md" />
+        <span class="text-weight-bold q-pl-sm">รายละเอียดสำนักงานใหญ่</span>
+      </q-toolbar-title>
+      <q-btn
+        v-close-popup
+        flat
+        round
+        dense
+        icon="mdi-close"
+        color="red"
+        @click="() => $emit('open')"
+        id="fileFormIconClose"
+      />
+    </q-toolbar>
+
+    <section class="q-mb-md">
+      <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>
+    </section>
+
+    <section class="q-mb-md">
+      <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>
+    </section>
+  </q-drawer>
+</template>
+
+<style scoped></style>