diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index e0e068f1..7154d2a9 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { formatNumberDecimal } from 'src/stores/utils';
 import KebabAction from '../shared/KebabAction.vue';
+import MainButton from '../button/MainButton.vue';
 
 defineProps<{
   type?:
@@ -107,27 +108,25 @@ defineEmits<{
       <div class="col-9">{{ reporter || '-' }}</div>
     </section>
     <q-separator />
-    <footer class="row no-wrap items-center q-mt-sm">
+    <footer class="row no-wrap items-center q-mt-sm" style="text-wrap: nowrap">
       <Icon
-        class="q-mr-md"
+        class="q-mr-xs"
         icon="ph:money-fill"
         style="font-size: 24px; color: var(--green-9)"
       />
       {{ $t('quotation.totalPriceBaht') }} :
-      <div class="q-pl-xs" style="color: var(--orange-5)">
+      <div class="q-ml-xs" style="color: var(--orange-5)">
         {{ formatNumberDecimal(totalPrice || 0, 2) }}
       </div>
-      <q-btn
-        dense
-        outline
-        color="primary"
-        class="rounded q-ml-auto"
+      <MainButton
+        outlined
+        icon="mdi-play-box-outline"
+        color="207 96% 32%"
+        class="q-ml-auto"
         @click="$emit('preview')"
-        padding="2px 8px"
       >
-        <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
         {{ $t('general.view', { msg: $t('general.example') }) }}
-      </q-btn>
+      </MainButton>
     </footer>
   </div>
 </template>