diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index de29cea4..880526d2 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -194,13 +194,16 @@ withDefaults(
       <q-btn
         @click.stop="
           () => {
-            $emit('viewDetail');
+            $emit('viewCard');
           }
         "
         unelevated
         class="q-px-sm"
         :label="$t('detail')"
-        style="background-color: var(--indigo-0); color: var(--blue-5)"
+        style="
+          background-color: hsla(var(--blue-5-hsl) / 0.1);
+          color: var(--blue-5);
+        "
       >
         <q-icon
           size="xs"
diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 95867f30..d9fcd7a6 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -134,7 +134,7 @@ withDefaults(
 
         <q-avatar
           v-if="isAddProduct"
-          :style="`background-color: var(${data?.type === 'product' ? '--green-10' : '--orange-8'})`"
+          :style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
           size="18px"
           text-color="white"
         >
@@ -193,7 +193,10 @@ withDefaults(
 
         <div
           class="flex justify-center rounded items-center q-my-md q-py-lg"
-          :style="`background-color: var(${data?.type === 'product' ? '--green-0' : '--orange-0'})`"
+          :class="[
+            data?.type === 'product' ? 'card__green' : 'card__orange',
+            $q.dark.isActive ? 'dark' : '',
+          ]"
         >
           <q-img
             loading="lazy"
@@ -245,4 +248,20 @@ withDefaults(
 .is-add-product {
   border-color: var(--green-10);
 }
+
+.card__green {
+  background-color: hsla(var(--teal-10-hsl) / 0.1);
+
+  &.dark {
+    background-color: hsla(var(--teal-7-hsl) / 0.1);
+  }
+}
+
+.card__orange {
+  background-color: hsla(var(--orange-5-hsl) / 0.1);
+
+  &.dark {
+    background-color: hsla(var(--orange-8-hsl) / 0.1);
+  }
+}
 </style>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 623d266e..cd7806bf 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1173,7 +1173,11 @@ watch(currentPageType, async () => {
               :status="v.status"
               :id="v.id"
               :isDisabled="v.status === 'INACTIVE'"
-              color="var(--purple-11-hsl)"
+              :color="
+                $q.dark.isActive
+                  ? 'var(--purple-7-hsl)'
+                  : 'var(--violet-11-hsl)'
+              "
               @toggleStatus="toggleStatusType(v.id, v.status)"
               @viewCard="
                 () => {