diff --git a/src/components/03_customer-management/BranchCardCustomer.vue b/src/components/03_customer-management/BranchCardCustomer.vue
index 3f5926ae..1a45c605 100644
--- a/src/components/03_customer-management/BranchCardCustomer.vue
+++ b/src/components/03_customer-management/BranchCardCustomer.vue
@@ -5,69 +5,169 @@ import { CustomerBranch } from 'src/stores/customer/types';
 
 withDefaults(
   defineProps<{
-    data: CustomerBranch;
+    inactive?: boolean;
+    color?: 'none' | 'CORP' | 'PERS';
+
+    metadata?: unknown;
+    badgeField?: string[];
+    fieldSelected?: string[];
+    footer?: boolean;
+
+    data: {
+      customerBranchFormTab: number;
+      branchName: string;
+      address: string;
+      telephone: string;
+      businessTypePure: string;
+      status: string;
+      totalEmployee: number;
+    };
   }>(),
   {},
 );
 </script>
 
 <template>
-  <AppBox class="row" no-padding bordered>
+  <div
+    class="branch-card rounded bordered"
+    :class="{
+      'branch-card__dark': $q.dark.isActive,
+      'branch-card__inactive': inactive,
+      'branch-card__none':
+        color !== 'CORP' && color !== 'PERS' && (!color || color === 'none'),
+      'branch-card__CORP': color === 'CORP',
+      'branch-card__PERS': color === 'PERS',
+    }"
+  >
     <div
-      class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3 items-center"
+      class="branch-card__row"
+      :class="{
+        'branch-card__header': i === 0,
+        'branch-card__footer': footer && i === Object.keys(data).length - 1,
+      }"
+      v-for="([k, v], i) in Object.entries(data).filter(
+        ([key], idx) =>
+          idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
+      )"
+      :key="k"
     >
-      <div>{{ $t('customerBranchFormTab') }} {{ data.branchNo }}</div>
-      <q-btn
-        @click.stop="$emit('view-detail')"
-        :label="$t('viewDetail')"
-        rounded
-        outline
-        dense
-        class="q-px-md"
-        style="color: var(--stone-6)"
-      />
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">{{ $t('branchName') }}</div>
-      <div class="col-7">{{ data.name }}</div>
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
-      <div class="col-5">{{ $t('address') }}</div>
-      <div class="col-7">{{ data.address }}</div>
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">{{ $t('telephone') }}</div>
-      <div class="col-7">{{ data.telephoneNo }}</div>
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
-      <div class="col-5">{{ $t('businessTypePure') }}</div>
-      <div class="col-7">{{ data.bussinessType }}</div>
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">{{ $t('status') }}</div>
-      <div class="col-7">
-        <q-badge
-          v-if="data.status"
-          class="q-px-md q-py-xs rounded"
-          style="background-color: var(--teal-1); color: var(--teal-4)"
-        >
-          {{ $t('statusACTIVE') }}
-        </q-badge>
-        <q-badge
-          v-else
-          text-color="orange"
-          class="q-px-md q-py-xs rounded"
-          style="background-color: var(--red-1); color: var(--orange-4)"
-        >
-          {{ $t('statusINACTIVE') }}
-        </q-badge>
+      <div class="branch-card__label">
+        <span>{{ $t(k) }}</span>
+      </div>
+      <div
+        class="branch-card__value"
+        :class="{ 'branch-card__badge': badgeField?.includes(k) }"
+        style="justify-content: space-between"
+      >
+        <span>{{ v }}</span>
+        <q-btn
+          @click.stop="$emit('view-detail', metadata ?? data)"
+          :label="$t('viewDetail')"
+          rounded
+          outline
+          dense
+          no-caps
+          class="branch-card__view-detail q-px-md text-caption"
+          v-if="i === 0"
+        />
       </div>
     </div>
-    <div class="row col-12 q-px-md q-py-sm surface-3">
-      <div class="col-5">{{ $t('allEmployee') }}</div>
-      <div class="col-7">-</div>
-    </div>
-  </AppBox>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.branch-card {
+  --_branch-card-row-fg: 0 0% 100%;
+  --_branch-card-row-bg: var(--blue-5-hsl);
+  --_branch-badge-fg: var(--green-8-hsl);
+  --_branch-badge-bg: var(--green-6-hsl);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--shadow-2);
+
+  & > .branch-card__row {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-inline: var(--size-4);
+    padding-block: var(--size-2);
+
+    &:last-child {
+      flex-grow: 1;
+    }
+
+    &:nth-child(2n + 1) {
+      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+    }
+
+    &.branch-card__header,
+    &.branch-card__footer {
+      color: hsl(var(--_branch-card-row-fg));
+      background-color: hsl(var(--_branch-card-row-bg));
+
+      &:deep(*) {
+        font-weight: 600;
+      }
+    }
+
+    &.branch-card__header > * {
+      display: flex;
+      align-items: center;
+    }
+
+    & > .branch-card__label {
+      min-width: 120px;
+      width: 30%;
+    }
+
+    &:not(.branch-card__header) .branch-card__label {
+      color: hsl(var(--stone-6-hsl));
+    }
+
+    & > .branch-card__value {
+      width: 70%;
+
+      &.branch-card__badge > span {
+        display: inline-block;
+        border-radius: 999rem;
+        padding-inline: var(--size-2);
+        color: hsl(var(--_branch-badge-fg));
+        background-color: hsla(var(--_branch-badge-bg) / 0.1);
+      }
+    }
+  }
+
+  &.branch-card__none {
+    --_branch-card-row-bg: var(--gray-3-hsl);
+
+    &.branch-card__dark {
+      --_branch-card-row-bg: var(--gray-9-hsl);
+    }
+
+    &:not(.branch-card__dark) .branch-card__header {
+      color: currentColor;
+
+      & .branch-card__view-detail {
+        color: hsla(var(--gray-10-hsl) / 0.3);
+      }
+    }
+  }
+
+  &.branch-card__CORP {
+    --_branch-card-row-fg: var(--purple-11-hsl);
+    --_branch-card-row-bg: var(--purple-5-hsl);
+  }
+
+  &.branch-card__PERS {
+    --_branch-card-row-fg: var(--teal-9-hsl);
+    --_branch-card-row-bg: var(--teal-5-hsl);
+  }
+
+  &.branch-card__inactive {
+    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-badge-bg: var(--red-4-hsl);
+    filter: grayscale(40%);
+    opacity: 0.5;
+  }
+}
+</style>