diff --git a/src/components/01_branch-management/CardBranchComponent.vue b/src/components/01_branch-management/CardBranchComponent.vue
new file mode 100644
index 00000000..8442061c
--- /dev/null
+++ b/src/components/01_branch-management/CardBranchComponent.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import appBox from '../app/AppBox.vue';
+</script>
+<template>
+  <appBox></appBox>
+</template>
+<style scoped></style>
diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index 161efce6..be253b86 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -21,7 +21,9 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-5"
       :label="$t('formDialogInputEmailHq')"
@@ -30,7 +32,9 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-7"
       :label="$t('formDialogInputTelephoneHq')"
@@ -39,7 +43,9 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-5"
       :label="$t('formDialogInputContactName')"
@@ -48,7 +54,9 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-7"
       :label="$t('formDialogInputTelephoneContact')"
@@ -57,7 +65,9 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-5"
       label="Line ID"
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 7b0d5615..4c93407a 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 const code = defineModel<string>('code');
+const codeSubBranch = defineModel<string>('codeSubBranch');
 const taxNo = defineModel<string>('taxNo');
 const name = defineModel<string>('name');
 const nameEN = defineModel<string>('nameEN');
+const typeBranch = defineModel<string>('typeBranch');
 
 defineProps<{
   title?: string;
@@ -10,6 +12,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  view?: boolean;
 }>();
 </script>
 <template>
@@ -17,42 +20,88 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
+      :borderless="readonly"
       readonly
       hide-bottom-space
-      class="col-6"
+      :class="{
+        'col-6': typeBranch == 'headOffice',
+        'col-4': typeBranch != 'headOffice',
+      }"
       :label="$t('formDialogInputCode')"
       v-model="code"
     />
 
     <q-input
+      v-if="typeBranch !== 'headOffice'"
       :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
+      :outlined="!readonly"
+      :borderless="readonly"
+      readonly
       hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogInputTaxNo')"
-      v-model="taxNo"
+      :class="{
+        'col-6': typeBranch == 'headOffice',
+        'col-4': typeBranch != 'headOffice',
+      }"
+      :label="$t('branchLabelCode')"
+      v-model="codeSubBranch"
     />
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
       :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      :class="{
+        'col-6': typeBranch === 'headOffice',
+        'col-4': typeBranch !== 'headOffice',
+      }"
+      :label="$t('formDialogInputTaxNo')"
+      v-model="taxNo"
+      lazy-rules
+      :rules="[
+        (val) => (val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
+      ]"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-12"
       :label="$t('formDialogInputNameHq')"
       v-model="name"
+      lazy-rules
+      :rules="[(val) => val && val.length > 0]"
+      :error-message="
+        typeBranch === 'headOffice'
+          ? $t('formDialogInputNameHqValidate')
+          : $t('formDialogInputNameSubBranchValidate')
+      "
     />
 
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="!readonly"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-12"
-      :label="$t('formDialogInputNameHqEn')"
       v-model="nameEN"
+      :label="
+        typeBranch === 'headOffice'
+          ? $t('formDialogInputNameHqEn')
+          : $t('formDialogInputNameSubBranchEn')
+      "
+      :rules="[(val) => val && val.length > 0]"
+      :error-message="
+        typeBranch === 'headOffice'
+          ? $t('formDialogInputNameHqEnValidate')
+          : $t('formDialogInputNameSubBranchEnValidate')
+      "
     />
   </div>
   <q-separator
diff --git a/src/components/01_branch-management/FormImage.vue b/src/components/01_branch-management/FormImage.vue
index b6fce1b8..b7671e71 100644
--- a/src/components/01_branch-management/FormImage.vue
+++ b/src/components/01_branch-management/FormImage.vue
@@ -7,7 +7,7 @@ defineProps<{
   title?: string;
   dense?: boolean;
   outlined?: boolean;
-  readonly?: boolean;
+  readonly: boolean;
   separator?: boolean;
 }>();
 
@@ -25,7 +25,7 @@ defineEmits<{
     <div class="col-12 flex flex-center" v-if="image">
       <q-img :src="image as string" style="width: 150px; height: 150px" />
     </div>
-    <div class="col-12 flex flex-center q-pb-lg">
+    <div class="col-12 flex flex-center q-pb-lg" v-if="!readonly">
       <q-btn
         :text-color="$q.dark.isActive ? 'black' : 'white'"
         style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
diff --git a/src/components/01_branch-management/FormLocation.vue b/src/components/01_branch-management/FormLocation.vue
index 948457ae..f5daa12f 100644
--- a/src/components/01_branch-management/FormLocation.vue
+++ b/src/components/01_branch-management/FormLocation.vue
@@ -3,6 +3,8 @@ const longitude = defineModel<string>('longitude');
 const latitude = defineModel<string>('latitude');
 
 function getLocation() {
+  console.log('ddd');
+
   navigator.geolocation.getCurrentPosition((position) => {
     longitude.value = position.coords.longitude.toString();
     latitude.value = position.coords.latitude.toString();
@@ -13,7 +15,7 @@ defineProps<{
   title?: string;
   dense?: boolean;
   outlined?: boolean;
-  readonly?: boolean;
+  readonly: boolean;
   separator?: boolean;
 }>();
 </script>
@@ -38,7 +40,7 @@ defineProps<{
         height: 100px;
         background-image: url(/map.png);
         background-position: center center;
-        background-size: 980px 400px;
+        background-size: 1500px 850px;
       "
     >
       <q-btn
diff --git a/src/components/01_branch-management/FormQr.vue b/src/components/01_branch-management/FormQr.vue
index ee9760af..c74aef32 100644
--- a/src/components/01_branch-management/FormQr.vue
+++ b/src/components/01_branch-management/FormQr.vue
@@ -7,7 +7,7 @@ defineProps<{
   title?: string;
   dense?: boolean;
   outlined?: boolean;
-  readonly?: boolean;
+  readonly: boolean;
   separator?: boolean;
 }>();
 
@@ -42,6 +42,7 @@ defineEmits<{
     </div>
     <div class="col-12 flex flex-center q-py-md">
       <q-btn
+        v-if="!readonly"
         :text-color="$q.dark.isActive ? 'black' : 'white'"
         style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
         unelevated
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index d341bd68..0dc12681 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -8,6 +8,7 @@ defineProps<{
   addressTitle?: string;
   addressTitleEN?: string;
   addressSeparator?: boolean;
+  branchStatus?: string;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -37,6 +38,8 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <div style="width: 31.98px"></div>
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
+
+              <div>{{ branchStatus ? `(${branchStatus})` : '' }}</div>
             </div>
             <q-btn
               round