diff --git a/src/components/BrandCard.vue b/src/components/BrandCard.vue
index 248c17d64ce..124d2e50614 100644
--- a/src/components/BrandCard.vue
+++ b/src/components/BrandCard.vue
@@ -1,10 +1,7 @@
 <template>
   <v-card :title="brand" prepend-icon="mdi-factory" data-name="brand-card">
     <v-card-text>
-      <v-chip label size="small" density="comfortable" class="mr-1">
-        <v-icon start icon="mdi-food-outline" />
-        <span id="product-count">{{ $t('BrandDetail.BrandProductTotal', { count: productCount }) }}</span>
-      </v-chip>
+      <ProductCountChip :count="productCount" :withLabel="true" />
       <BrandActionMenuButton :brand="brand" />
     </v-card-text>
   </v-card>
@@ -15,7 +12,8 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
-    BrandActionMenuButton: defineAsyncComponent(() => import('../components/BrandActionMenuButton.vue')),
+    ProductCountChip: defineAsyncComponent(() => import('../components/ProductCountChip.vue')),
+    BrandActionMenuButton: defineAsyncComponent(() => import('../components/BrandActionMenuButton.vue'))
   },
   props: {
     brand: {
diff --git a/src/components/CategoryCard.vue b/src/components/CategoryCard.vue
index 9f323474053..cf1a9fc3ca2 100644
--- a/src/components/CategoryCard.vue
+++ b/src/components/CategoryCard.vue
@@ -1,10 +1,7 @@
 <template>
   <v-card v-if="category" :title="category.name" prepend-icon="mdi-fruit-watermelon" data-name="category-card">
     <v-card-text>
-      <v-chip v-if="sourceCategory" label size="small" density="comfortable" class="mr-1">
-        <v-icon start icon="mdi-food-outline" />
-        {{ $t('CategoryDetail.CategoryProductTotal', { count: productCount }) }}
-      </v-chip>
+      <ProductCountChip v-if="sourceCategory" :count="productCount" :withLabel="true" />
       <PriceCountChip v-else-if="sourceProduct" :count="priceCount" />
       <CategoryTagChip v-if="showProductCategoryTag" :category="category" />
       <CategoryActionMenuButton :category="category" :source="source" />
@@ -19,6 +16,7 @@ import { useAppStore } from '../store'
 
 export default {
   components: {
+    ProductCountChip: defineAsyncComponent(() => import('../components/ProductCountChip.vue')),
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     CategoryTagChip: defineAsyncComponent(() => import('../components/CategoryTagChip.vue')),
     CategoryActionMenuButton: defineAsyncComponent(() => import('../components/CategoryActionMenuButton.vue')),