diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
new file mode 100644
index 000000000..a42403ee9
--- /dev/null
+++ b/src/components/ui/CardSummary.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, toRef, ref, watch } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    description: {
+        type: String,
+        required: false,
+        default: '',
+    },
+});
+
+onMounted(() => fetch());
+
+const entity = ref();
+const entityId = toRef(props, 'id');
+// const description = computed(() => {
+//     return props.description || entity.value.name;
+// });
+
+async function fetch() {
+    const id = entityId.value;
+    const { data } = await axios.get(`Clients/${id}/summary`);
+    entity.value = data;
+}
+
+watch(entityId, async () => {
+    entity.value = null;
+    fetch();
+});
+</script>
+
+<template>
+    <slot name="body" :entity="entity" />
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    max-width: 1200px;
+}
+
+.negative {
+    color: red;
+}
+
+.summary {
+    .q-list {
+        .q-item__label--header {
+            display: flex;
+            justify-content: space-between;
+
+            a {
+                color: $primary;
+            }
+        }
+    }
+    .row {
+        flex-wrap: wrap;
+
+        .col {
+            min-width: 250px;
+        }
+    }
+
+    .header {
+        text-align: center;
+        font-size: 18px;
+    }
+
+    #slider-container {
+        max-width: 80%;
+        margin: 0 auto;
+
+        .q-slider {
+            .q-slider__marker-labels:nth-child(1) {
+                transform: none;
+            }
+            .q-slider__marker-labels:nth-child(2) {
+                transform: none;
+                left: auto !important;
+                right: 0%;
+            }
+        }
+    }
+}
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
+</style>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 55b2aae81..1d99a4ecf 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -1,15 +1,16 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-import { toCurrency, toPercentage, toDate } from 'src/filters';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+// import { useI18n } from 'vue-i18n';
+// import axios from 'axios';
+// import { toCurrency, toPercentage, toDate } from 'src/filters';
+import CardSummary from 'components/ui/CardSummary.vue';
+// import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 
 onMounted(() => fetch());
 
 const route = useRoute();
-const { t } = useI18n();
+// const { t } = useI18n();
 
 const $props = defineProps({
     id: {
@@ -20,49 +21,54 @@ const $props = defineProps({
 
 const entityId = computed(() => $props.id || route.params.id);
 
-const customer = ref(null);
-function fetch() {
-    const id = entityId.value;
-    axios.get(`Clients/${id}/summary`).then(({ data }) => {
-        customer.value = data;
-    });
-}
+// const customer = ref(null);
+// function fetch() {
+//     const id = entityId.value;
+//     axios.get(`Clients/${id}/summary`).then(({ data }) => {
+//         customer.value = data;
+//     });
+// }
 
-const balanceDue = computed(() => {
-    return customer.value.defaulters.length && customer.value.defaulters[0].amount;
-});
+// const balanceDue = computed(() => {
+//     return customer.value.defaulters.length && customer.value.defaulters[0].amount;
+// });
 
-const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
+// const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
-const claimRate = computed(() => {
-    const data = customer.value;
+// const claimRate = computed(() => {
+//     const data = customer.value;
 
-    return data.claimsRatio.claimingRate * 100;
-});
+//     return data.claimsRatio.claimingRate * 100;
+// });
 
-const priceIncreasingRate = computed(() => {
-    const data = customer.value;
+// const priceIncreasingRate = computed(() => {
+//     const data = customer.value;
 
-    return data.claimsRatio.priceIncreasing / 100;
-});
+//     return data.claimsRatio.priceIncreasing / 100;
+// });
 
-const debtWarning = computed(() => {
-    const data = customer.value;
+// const debtWarning = computed(() => {
+//     const data = customer.value;
 
-    return data.debt.debt > data.credit ? 'negative' : '';
-});
+//     return data.debt.debt > data.credit ? 'negative' : '';
+// });
 
-const creditWarning = computed(() => {
-    const data = customer.value;
-    const tooMuchInsurance = data.credit > data.creditInsurance;
-    const noCreditInsurance = data.credit && data.creditInsurance == null;
+// const creditWarning = computed(() => {
+//     const data = customer.value;
+//     const tooMuchInsurance = data.credit > data.creditInsurance;
+//     const noCreditInsurance = data.credit && data.creditInsurance == null;
 
-    return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
-});
+//     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
+// });
 </script>
 
 <template>
-    <div class="summary container">
+    <card-summary :id="entityId">
+        <template #body="{ entity }">
+            {{ entity }}
+        </template>
+    </card-summary>
+    <!-- <div class="summary container">
         <q-card>
             <skeleton-summary v-if="!customer" />
             <template v-if="customer">
@@ -428,7 +434,7 @@ const creditWarning = computed(() => {
                 </div>
             </template>
         </q-card>
-    </div>
+    </div> -->
 </template>
 <style lang="scss" scoped>
 .container {