diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 7ede4f1c..fa75e4b0 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import AppBox from './app/AppBox.vue';
 
+import AppCircle from 'components/app/AppCircle.vue';
+
 import { CustomerBranch } from 'stores/customer/types';
 
 withDefaults(
@@ -20,6 +22,7 @@ withDefaults(
       name: string;
       code: string;
       detail?: { label: string; value: string }[];
+      status: string;
     };
     hideButton?: boolean;
     badge?: CustomerBranch[];
@@ -48,6 +51,7 @@ defineEmits<{
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
+        'status-inactive': list.status === 'INACTIVE',
       }"
     >
       <AppBox
@@ -132,7 +136,7 @@ defineEmits<{
                       dense
                       size="sm"
                       @click="$emit('toggleStatus', metadata.id)"
-                      :model-value="!metadata.disabled"
+                      :model-value="metadata.disabled"
                       val="xs"
                       padding="none"
                     >
@@ -152,9 +156,35 @@ defineEmits<{
         </q-btn>
         <div class="row justify-center relative-position">
           <q-card-section class="q-pt-md img-decoration">
-            <q-avatar size="80px">
+            <div style="position: relative">
+              <AppCircle
+                bordered
+                class="avatar"
+                style="border: 2px solid var(--border-color); height: 80px"
+              >
+                <q-img
+                  :src="list.imageUrl ?? '/no-profile.png'"
+                  style="object-fit: cover; width: 100%; height: 100%"
+                />
+                <div class="status-circle" style="">
+                  <q-icon
+                    :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
+                    :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+                  />
+                </div>
+              </AppCircle>
+            </div>
+
+            <!-- <q-avatar size="80px">
               <img :src="list.imageUrl ?? '/no-profile.png'" />
             </q-avatar>
+
+            <div class="status-circle">
+              <q-icon
+                :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
+                :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+              />
+            </div> -->
           </q-card-section>
         </div>
         <div class="box-title">
@@ -293,4 +323,26 @@ defineEmits<{
   display: flex;
   justify-content: center;
 }
+
+.status-inactive {
+  opacity: 0.5;
+
+  .status-circle {
+    background-color: var(--surface-1);
+  }
+}
+
+.status-circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--teal-6);
+  border: 2px solid var(--border-color);
+  bottom: 0.5rem;
+  right: 0.3rem;
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 993f0a30..6543340b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -720,6 +720,12 @@ async function fetchListEmployee(param?: {
   }
 }
 
+async function toggleStatusCustomer(id: string, status: boolean) {
+  await editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
+
+  await fetchListCustomer();
+}
+
 async function onSubmitEdit(id: string) {
   if (selectorLabel.value === 'EMPLOYER') {
     if (!formData.value) return;
@@ -1429,7 +1435,10 @@ watch(selectorLabel, async () => {
               :key="i.id"
               class="hover-card"
               :color="i.customerType === 'CORP' ? 'purple' : 'green'"
-              :metadata="{ id: '1', disabled: false }"
+              :metadata="{
+                id: i.id,
+                disabled: i.status === 'ACTIVE' || i.status === 'CREATED',
+              }"
               :badge="i.branch"
               :list="{
                 id: i.id,
@@ -1437,6 +1446,7 @@ watch(selectorLabel, async () => {
                 type: i.customerType,
                 name: i.customerName === '' ? '-' : i.customerName,
                 code: i.code,
+                status: i.status,
 
                 detail: [
                   {
@@ -1488,6 +1498,14 @@ watch(selectorLabel, async () => {
                 }
               "
               @delete-card="deleteCustomerById(i.id)"
+              @toggle-status="
+                () => {
+                  toggleStatusCustomer(
+                    i.id,
+                    i.status === 'ACTIVE' ? true : false,
+                  );
+                }
+              "
             />
           </div>
 
@@ -2250,12 +2268,16 @@ watch(selectorLabel, async () => {
                 :color="
                   currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
                 "
-                :metadata="{ id: '1', disabled: false }"
+                :metadata="{
+                  id: '1',
+                  disabled: currentCustomer.status === 'ACTIVE',
+                }"
                 :list="{
                   id: '1',
                   type: currentCustomer.customerType,
                   name: currentCustomer.customerName,
                   imageUrl: currentCustomer.imageUrl,
+                  status: currentCustomer.status,
                   code: 'HQ006',
                 }"
               />
@@ -2442,12 +2464,16 @@ watch(selectorLabel, async () => {
                 :color="
                   currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
                 "
-                :metadata="{ id: '1', disabled: false }"
+                :metadata="{
+                  id: '1',
+                  disabled: currentCustomer.status === 'ACTIVE',
+                }"
                 :list="{
                   id: '1',
                   type: currentCustomer.customerType,
                   name: currentCustomer.customerName,
                   imageUrl: currentCustomer.imageUrl,
+                  status: currentCustomer.status,
                   code: 'HQ006',
                 }"
               />
diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 663769fb..c8d3c93f 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -215,7 +215,7 @@ const useCustomerStore = defineStore('api-customer', () => {
 
   async function editById(
     id: string,
-    data: CustomerUpdate,
+    data: Partial<CustomerUpdate>,
     flow?: {
       sessionId: string;
       refTransactionId: string;