diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 4ed73d3f..f29a033a 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
+const addedProduct = ref<boolean>(false);
 </script>
 
 <template>
@@ -84,10 +85,19 @@ import AppBox from 'components/app/AppBox.vue';
         </div>
         <div>
           <q-btn
+            v-if="addedProduct"
+            unelevated
+            class="q-mr-sm text-white"
+            label="เพิ่มสินค้าแล้ว (1)"
+            @click="addedProduct = false"
+            style="background-color: var(--green-10)"
+          />
+          <q-btn
+            v-else
             unelevated
             class="surface-0 q-mr-sm"
             label="เพิ่มสินค้า"
-            @click="console.log('add')"
+            @click="addedProduct = true"
             style="color: var(--blue-5)"
           />
         </div>