diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index b3fb9746b..d1b346c5c 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -2,6 +2,8 @@
 import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
 onMounted(() => fetch());
 
 const entity = ref();
@@ -44,9 +46,9 @@ watch(props, async () => {
         <QCard>
             <SkeletonSummary v-if="!entity" />
             <template v-if="entity">
-                <div class="header bg-primary q-pa-sm q-mb-md">
+                <div class="header bg-primary q-pa-sm q-mb-md text-weight-bolder text-h2">
                     <slot name="header" :entity="entity">
-                        {{ entity.id }} - {{ entity.name }}
+                        <VnLv :label="entity.id" :value="entity.name" />
                     </slot>
                 </div>
                 <div class="body q-pa-md q-mb-md">
@@ -58,62 +60,63 @@ watch(props, async () => {
 </template>
 
 <style lang="scss">
-.summary.container {
-    display: flex;
-    justify-content: center;
-}
+// .summary.container {
+//     display: flex;
+//     justify-content: center;
+// }
 
 .summary {
-    .q-card {
-        width: 100%;
-        max-width: 1200px;
-    }
+    //     .q-card {
+    //         width: 100%;
+    //         max-width: 1200px;
+    //     }
 
-    .negative {
-        color: red;
-    }
-    .q-list {
-        .q-item__label--header {
-            display: flex;
-            justify-content: space-between;
+    //     .negative {
+    //         color: red;
+    //     }
+    //     .q-list {
+    //         .q-item__label--header {
+    //             display: flex;
+    //             justify-content: space-between;
 
-            a {
-                color: $primary;
-            }
-        }
-    }
+    //             a {
+    //                 color: $primary;
+    //             }
+    //         }
+    //     }
 
-    .body > .q-card__section.row {
-        flex-wrap: wrap;
+    //     .body > .q-card__section.row {
+    //         flex-wrap: wrap;
 
-        & > .col {
-            min-width: 250px;
-        }
-    }
+    //         & > .col {
+    //             min-width: 250px;
+    //         }
+    //     }
 
     .header {
         text-align: center;
         font-size: 18px;
+        color: $label-color;
     }
 
-    #slider-container {
-        max-width: 80%;
-        margin: 0 auto;
+    //     #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-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;
+    // .q-dialog .summary {
+    //     max-width: 1200px;
 }
 </style>