diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 16bdcd3c..e5598e98 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -10,7 +10,6 @@ withDefaults(
     noBg?: boolean;
     dark?: boolean;
     width?: string;
-    height?: string;
     color: 'purple' | 'green';
     gridColumns?: number;
     metadata?: { id: string; disabled: boolean };
@@ -41,8 +40,9 @@ defineEmits<{
 </script>
 
 <template>
-  <div v-if="metadata" style="width: 200px">
+  <div v-if="metadata">
     <div
+      :style="`${noBg ? 'height: 228px' : 'min-height: 400px'}`"
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
@@ -143,8 +143,8 @@ defineEmits<{
           </q-menu>
         </q-btn>
         <div class="row justify-center relative-position">
-          <q-card-section class="img-decoration">
-            <q-avatar size="50px">
+          <q-card-section class="q-pt-xl img-decoration">
+            <q-avatar size="100px">
               <img :src="list.imageUrl ?? '/no-profile.png'" />
             </q-avatar>
           </q-card-section>
@@ -160,8 +160,9 @@ defineEmits<{
             }}
           </div>
         </div>
-        <q-card-section class="q-py-sm">
-          <div class="column items-center justify-center">
+        <q-card-section class="no-padding">
+          <div class="column items-center justify-center q-mb-md">
+            <div class="row">{{ list.name }}</div>
             <div v-if="!noDetail">
               {{ list.code }}
             </div>
@@ -174,31 +175,184 @@ defineEmits<{
             <q-card-section
               v-for="(d, j) in list.detail"
               :key="j"
-              class="overflow q-py-none"
+              class="overflow"
             >
               <div class="text-caption app-text-muted-2">
                 {{ $t(d.label) }}
               </div>
-              <div>{{ !d.value ? '-' : d.value }}</div>
+              <div>{{ d.value }}</div>
             </q-card-section>
           </div>
         </div>
       </AppBox>
+
+      <AppBox
+        style="padding: 0"
+        class="back"
+        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
+        bordered
+        @click="$emit('enterCard')"
+      >
+        <div
+          class="row q-pl-md q-pb-md items-center"
+          :class="{
+            'surface-1': !$q.dark.isActive,
+            'surface-2': $q.dark.isActive,
+          }"
+          style="border-radius: 12px 12px 0px 0px"
+        >
+          <q-btn
+            flat
+            round
+            padding="sm"
+            class="absolute-top-right dots-btn"
+            icon="mdi-dots-vertical"
+            size="sm"
+            @click.stop=""
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup>
+                <q-item
+                  clickable
+                  dense
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="$emit('viewCard', 'INFO', metadata.id)"
+                >
+                  <q-icon
+                    name="mdi-eye-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--green-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('viewDetail') }}
+                  </span>
+                </q-item>
+                <q-item
+                  dense
+                  clickable
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="$emit('updateCard', 'FORM', metadata.id)"
+                  v-close-popup
+                >
+                  <q-icon
+                    name="mdi-pencil-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--cyan-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('edit') }}
+                  </span>
+                </q-item>
+                <q-item
+                  dense
+                  clickable
+                  @click="$emit('deleteCard', metadata.id)"
+                  v-close-popup
+                >
+                  <q-icon
+                    name="mdi-trash-can-outline"
+                    size="xs"
+                    class="col-3 app-text-negative"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('delete') }}
+                  </span>
+                </q-item>
+                <q-item dense>
+                  <q-item-section class="q-py-sm">
+                    <div class="q-pa-sm surface-2 rounded">
+                      <q-toggle
+                        dense
+                        size="sm"
+                        @click="$emit('toggleStatus', metadata.id)"
+                        :model-value="!metadata.disabled"
+                        val="xs"
+                        padding="none"
+                      >
+                        <div class="q-ml-xs">
+                          {{
+                            metadata.disabled
+                              ? $t('switchOnLabel')
+                              : $t('switchOffLabel')
+                          }}
+                        </div>
+                      </q-toggle>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <q-card-section class="q-pt-xl img-decoration">
+            <q-avatar size="50px">
+              <img :src="list.imageUrl ?? '/no-profile.png'" />
+            </q-avatar>
+          </q-card-section>
+
+          <div class="col-7 q-pl-md">
+            <div class="row">{{ list.name }}</div>
+            <div class="row">{{ list.code }}</div>
+          </div>
+        </div>
+
+        <q-separator />
+        <q-scroll-area
+          class="back-scroll"
+          :class="{
+            'surface-1': $q.dark.isActive,
+            'surface-2': !$q.dark.isActive,
+          }"
+        >
+          <q-card-section class="q-pa-md">
+            <div
+              v-for="(v, i) in badge"
+              :key="v.id"
+              class="bordered row q-pa-sm q-mb-sm rounded bg-color-text-1"
+            >
+              <div class="col-2 flex flex-center">{{ i + 1 }}</div>
+              <div class="col-10 rounded q-pa-sm bg-color-text-2">
+                {{ v.branchNo }}
+              </div>
+            </div>
+          </q-card-section>
+        </q-scroll-area>
+      </AppBox>
     </div>
   </div>
 </template>
 
 <style scoped>
-.flip {
-  width: 100%;
+.container {
+  height: 500px;
 }
 
-.front {
+.flip {
+  width: 100%;
   position: relative;
+  transition: transform 0.4s;
+  transform-style: preserve-3d;
+  /* 
+  &:not(.person-box__no-hover):hover {
+    cursor: pointer;
+    transition-delay: 0.3s;
+    transform: rotateY(180deg);
+  } */
+}
+
+.front,
+.back {
+  width: 100%;
+  height: min-content;
+  position: absolute;
   backface-visibility: hidden;
 }
 
-.front {
+.front,
+.back {
   --_color: var(--teal-6);
   --_color-dark: var(--_color);
   --_bg-front-scroll: hsla(var(--_color) / 0.05);
@@ -212,11 +366,11 @@ defineEmits<{
   }
 
   .title {
-    width: 60%;
+    width: 50%;
     height: 25px;
     background: hsl(var(--_color)) !important;
     position: relative;
-    margin-top: -16px;
+    bottom: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -225,9 +379,12 @@ defineEmits<{
 
   .front-scroll {
     background: var(--_bg-front-scroll) !important;
+    height: 150px;
   }
 
   .back-scroll {
+    height: 268px;
+
     .bg-color-text-1 {
       background: var(--_bg-back-detail-1);
     }