diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index 7eae279d..12cc795d 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -76,7 +76,7 @@ const { t } = useI18n();
             <div class="row justify-between items-cente q-gutter-x-xs">
                 <QBadge
                     :label="`x${item.grouping}`"
-                    color="grey"
+                    color="grey-4"
                     class="col-2 justify-end text-body2"
                 >
                     <QTooltip>
@@ -86,8 +86,7 @@ const { t } = useI18n();
                 <QBadge
                     outline
                     :label="item.available"
-                    color="accent"
-                    text-color="black"
+                    color="grey-6"
                     class="col justify-end text-body2"
                 >
                     <QTooltip>
@@ -98,7 +97,6 @@ const { t } = useI18n();
                     outline
                     :label="currency(item.price)"
                     color="accent"
-                    text-color="black"
                     class="col justify-end text-body2"
                 >
                     <QTooltip>
@@ -155,7 +153,8 @@ const { t } = useI18n();
             <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
                 <QBadge
                     :label="`x${item.grouping}`"
-                    color="grey"
+                    color="grey-4"
+                    text-color="black"
                     class="col-2 justify-end text-body2"
                 >
                     <QTooltip>
@@ -165,8 +164,7 @@ const { t } = useI18n();
                 <QBadge
                     outline
                     :label="item.available"
-                    color="accent"
-                    text-color="black"
+                    color="grey-6"
                     class="col-3 justify-end text-body2"
                 >
                     <QTooltip>
@@ -177,7 +175,6 @@ const { t } = useI18n();
                     outline
                     :label="currency(item.price)"
                     color="accent"
-                    text-color="black"
                     class="col-3 justify-end text-body2"
                 >
                     <QTooltip>