diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 9bea934cc4..65a89ee288 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -127,7 +127,7 @@ watch($props, async () => {
                         </QItemLabel>
                     </QItem>
                 </QList>
-                <div class="list-box">
+                <div class="list-box q-mt-xs">
                     <slot name="body" :entity="entity" />
                 </div>
             </div>
@@ -161,11 +161,12 @@ watch($props, async () => {
         display: flex;
         padding: 2px 16px;
         .label {
-            color: $label-color;
+            color: var(--vn-label);
             font-size: 12px;
             width: 47%;
         }
         .value {
+            color: var(--vn-text);
             font-size: 14px;
             margin-left: 12px;
             width: 47%;
@@ -178,32 +179,9 @@ watch($props, async () => {
         }
     }
 }
-body.body--light {
-    .descriptor {
-        .vn-label-value {
-            .label {
-                color: var(--vn-label);
-            }
-            .value {
-                color: var(--vn-text);
-            }
-        }
-    }
-}
 </style>
 
 <style lang="scss" scoped>
-body.body--light {
-    .descriptor {
-        .subtitle {
-            color: $gray;
-        }
-        .list-box {
-            background-color: $lighter-gray;
-        }
-    }
-}
-$descriptor-items-box: rgba(87, 86, 86, 0.2);
 .title {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -213,17 +191,18 @@ $descriptor-items-box: rgba(87, 86, 86, 0.2);
     }
 }
 .subtitle {
+    color: var(--vn-text);
     font-size: 16px;
-    color: $white;
+    margin-bottom: 15px;
 }
 .list-box {
     width: 90%;
-    background-color: $descriptor-items-box;
+    background-color: var(--vn-gray);
     margin: 10px auto;
     padding: 10px 5px 10px 0px;
     border-radius: 8px;
     .q-item__label {
-        color: $label-color;
+        color: var(--vn-label);
     }
 }
 .descriptor {
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 75e609eb5f..48a1c82a66 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -25,34 +25,21 @@ const $props = defineProps({
     </QCard>
 </template>
 <style lang="scss">
-body.body--light {
-    .card-list-body {
-        .vn-label-value {
-            .label {
-                color: $gray;
-            }
-            .value {
-                color: $light-black;
-            }
-        }
-    }
-}
 .card-list-body {
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
-        gap: 10px;
-        width: 100%;
+        gap: 2%;
+        width: 50%;
         .label {
-            max-width: 90px;
-            flex: 1;
-            color: $label-color;
+            width: 30%;
+            color: var(--vn-label);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
         .value {
-            flex: 1;
+            width: 60%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -68,19 +55,10 @@ body.body--light {
         font-size: 25px;
     }
 }
-@media (min-width: 1024px) and (max-width: 1200px) {
+@media (max-width: $breakpoint-xs) {
     .card-list-body {
         .vn-label-value {
-            max-width: 150px;
-        }
-    }
-}
-@media (max-width: 460px) {
-    .card-list-body {
-        .vn-label-value {
-            .value {
-                max-width: 150px;
-            }
+            width: 100%;
         }
     }
 }
@@ -96,7 +74,7 @@ body.body--light {
     justify-content: space-between;
 }
 .card:hover {
-    background-color: $light-gray;
+    background-color: var(--vn-gray);
 }
 .title {
     color: $primary;
@@ -106,30 +84,12 @@ body.body--light {
 .list-items {
     width: 100%;
     margin-top: 20px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    row-gap: 10px;
-    margin-right: 10px;
+    display: flex;
+    flex-wrap: wrap;
 }
 .actions {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-@media screen and (min-width: $breakpoint-lg) {
-    .list-items {
-        column-gap: 10vw;
-    }
-}
-@media screen and (min-width: $breakpoint-sm) {
-    .list-items {
-        column-gap: 5vw;
-    }
-}
-@media (max-width: $breakpoint-xs) {
-    .list-items {
-        grid-template-columns: 1fr;
-        grid-gap: 5px;
-    }
-}
 </style>
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 1a603ec73b..b54e443980 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -66,14 +66,6 @@ watch(props, async () => {
 </template>
 
 <style lang="scss">
-body.body--light {
-    .summary {
-        .header {
-            color: $white;
-        }
-    }
-}
-
 .summary.container {
     display: flex;
     justify-content: center;
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index df4936e447..808bf3468d 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -16,11 +16,6 @@ $primary: #ec8916;
 $secondary: #26a69a;
 $accent: #9c27b0;
 $white: #fff;
-$black: #000;
-$light-black: #4e4c4c;
-$gray: gray;
-$light-gray: #57565633;
-$lighter-gray: #5756560f;
 
 $positive: #21ba45;
 $negative: #c10015;
@@ -52,5 +47,3 @@ $dark-shadow-color: #000;
 $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
-
-$label-color: #ffffff99;
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 25c31ac64d..30462d2996 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -120,7 +120,7 @@ function viewSummary(id) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn icon="preview" @click="viewSummary(row.id)">
+                            <QBtn flat icon="preview" @click="viewSummary(row.id)">
                                 <QTooltip>
                                     {{ t('components.smartCard.openSummary') }}
                                 </QTooltip>