diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
deleted file mode 100644
index d7cedd27..00000000
--- a/src/components/UsersDetailCardComponent.vue
+++ /dev/null
@@ -1,345 +0,0 @@
-<script setup lang="ts">
-import AppBox from './app/AppBox.vue';
-
-import AppCircle from 'components/app/AppCircle.vue';
-
-import { CustomerBranch } from 'stores/customer/types';
-
-withDefaults(
-  defineProps<{
-    noDetail?: boolean;
-    noHover?: boolean;
-    noBg?: boolean;
-    dark?: boolean;
-    width?: string;
-    color: 'purple' | 'green';
-    gridColumns?: number;
-    metadata?: { id: string; disabled: boolean };
-    list: {
-      imageUrl?: string;
-      id: string;
-      type: 'CORP' | 'PERS';
-      name: string;
-      code: string;
-      detail?: { label: string; value: string }[];
-      status: string;
-    };
-    hideButton?: boolean;
-    badge?: CustomerBranch[];
-    canEditProfile?: boolean;
-  }>(),
-  {
-    hideButton: false,
-    width: '300px',
-    deletable: false,
-    color: 'green',
-  },
-);
-
-defineEmits<{
-  (e: 'editProfile'): void;
-  (e: 'deleteCard', id: string): void;
-  (e: 'updateCard', action: 'FORM' | 'INFO', id: string): void;
-  (e: 'viewCard', action: 'FORM' | 'INFO', id: string): void;
-  (e: 'enterCard'): void;
-  (e: 'toggleStatus', id: string): void;
-}>();
-</script>
-
-<template>
-  <div
-    v-if="metadata"
-    class="full-width"
-    :class="{
-      'status-inactive': list.status === 'INACTIVE',
-    }"
-  >
-    <div
-      class="surface-1 full-height front bordered rounded"
-      :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
-      @click="$emit('enterCard')"
-    >
-      <q-btn
-        v-if="!hideButton"
-        :id="`btn-dots-${list.code}`"
-        flat
-        round
-        padding="sm"
-        class="absolute-top-right dots-btn"
-        icon="mdi-dots-vertical"
-        style="z-index: 99"
-        size="sm"
-        @click.stop=""
-      >
-        <q-menu class="bordered">
-          <q-list v-close-popup>
-            <q-item
-              id="btn-view"
-              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
-              id="btn-edit"
-              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
-              id="btn-delete"
-              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
-                    id="toggle-status"
-                    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>
-      <div class="row justify-center relative-position">
-        <q-card-section class="q-pt-md img-decoration">
-          <div style="position: relative">
-            <AppCircle
-              bordered
-              class="avatar"
-              style="border: 2px solid var(--border-color); height: 80px"
-              :class="{ 'edit-profile': canEditProfile }"
-              @click="
-                () => {
-                  if (canEditProfile) $emit('editProfile');
-                }
-              "
-            >
-              <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-card-section>
-      </div>
-      <div class="box-title">
-        <div class="rounded-type title text-center q-pa-xs">
-          {{
-            $t(
-              list.type === 'CORP'
-                ? 'customerLegalEntity'
-                : 'customerNaturalPerson',
-            )
-          }}
-        </div>
-      </div>
-
-      <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>
-        </div>
-      </q-card-section>
-
-      <div v-if="!noDetail">
-        <q-separator />
-        <div class="front-scroll">
-          <q-card-section
-            v-for="(d, j) in list.detail"
-            :key="j"
-            class="overflow q-pt-none"
-          >
-            <div class="text-caption app-text-muted-2">
-              {{ $t(d.label) }}
-            </div>
-            <div>{{ !d.value ? '-' : d.value }}</div>
-          </q-card-section>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.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 {
-  width: 100%;
-  backface-visibility: hidden;
-}
-
-.front {
-  --_color: var(--teal-6);
-  --_color-dark: var(--_color);
-  --_bg-front-scroll: hsla(var(--_color) / 0.05);
-  --_bg-back-detail-1: white;
-  --_bg-back-detail-2: hsla(var(--_color) / 0.05) !important;
-
-  .img-decoration {
-    background: hsl(var(--_color)) !important;
-    border-bottom-left-radius: 100px;
-    border-bottom-right-radius: 100px;
-  }
-
-  .title {
-    width: 68px;
-    background: hsl(var(--_color)) !important;
-    position: relative;
-    bottom: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    margin-top: -3px;
-  }
-
-  .front-scroll {
-    background: var(--_bg-front-scroll) !important;
-    /* height: 150px; */
-  }
-
-  .back-scroll {
-    /* height: 268px; */
-
-    .bg-color-text-1 {
-      background: var(--_bg-back-detail-1);
-    }
-    .bg-color-text-2 {
-      background: var(--_bg-back-detail-2) !important;
-    }
-  }
-
-  &.dark {
-    color: hsl(--_color-dark) !important;
-    background-color: var(--surface-2) !important;
-
-    --_bg-back-avatar: var(--gray-11) !important;
-    --_bg-back-detail-1: var(--gray-9) !important;
-    --_bg-front-scroll: hsla(var(--_color) / 0.1) !important;
-    --_bg-back-detail-2: hsla(var(--_color) / 0.1) !important;
-
-    &.front__no-bg {
-      background-color: transparent !important;
-    }
-  }
-  &.color__purple {
-    --_color: var(--violet-11-hsl);
-  }
-
-  &.color__green {
-    --_color: var(--teal-10-hsl);
-  }
-}
-
-.rounded-type {
-  border-bottom-left-radius: var(--radius-2);
-  border-bottom-right-radius: var(--radius-2);
-}
-
-.box-title {
-  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;
-}
-
-.edit-profile {
-  cursor: pointer;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 80%;
-  }
-}
-</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index b93168d0..420fea1b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -19,4 +19,3 @@ export { default as StatCardComponent } from './StatCardComponent.vue';
 export { default as TabComponent } from './TabComponent.vue';
 export { default as TooltipComponent } from './TooltipComponent.vue';
 export { default as TreeCompoent } from './TreeCompoent.vue';
-export { default as UsersDetailCardComponent } from './UsersDetailCardComponent.vue';