diff --git a/resources/images/logo_bca.png b/resources/images/logo_bca.png
new file mode 100644
index 0000000..e783277
Binary files /dev/null and b/resources/images/logo_bca.png differ
diff --git a/resources/images/logo_bni.png b/resources/images/logo_bni.png
new file mode 100644
index 0000000..b6b5df3
Binary files /dev/null and b/resources/images/logo_bni.png differ
diff --git a/resources/images/logo_bri.png b/resources/images/logo_bri.png
new file mode 100644
index 0000000..3d66f26
Binary files /dev/null and b/resources/images/logo_bri.png differ
diff --git a/resources/images/logo_mandiri.png b/resources/images/logo_mandiri.png
new file mode 100644
index 0000000..0ee9038
Binary files /dev/null and b/resources/images/logo_mandiri.png differ
diff --git a/resources/images/logo_mastercard.png b/resources/images/logo_mastercard.png
new file mode 100644
index 0000000..41b7b34
Binary files /dev/null and b/resources/images/logo_mastercard.png differ
diff --git a/resources/images/logo_visa.png b/resources/images/logo_visa.png
new file mode 100644
index 0000000..7fd1d8d
Binary files /dev/null and b/resources/images/logo_visa.png differ
diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index ae241ae..73a79f2 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -7,16 +7,16 @@
         </div>
 
       <div class="p-6 text-sm flex flex-col h-full relative">
-        <div class="relative flex items-center justify-between top-0 pb-2 mb-2">
+        <div class="relative flex items-center justify-between top-0 pb-1 mb-2">
           <div class="flex flex-col gap-2 -mt-5">
             <p class="flex items-center gap-2">
-              <i class="fab fa-instagram text-D text-xl"></i> tokomas_Jakartacitayam
+              <i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam
             </p>
             <p class="flex items-center gap-2">
-              <i class="fab fa-tiktok text-D text-xl"></i> tokomas_Jakartacitayam
+              <i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
             </p>
             <p class="flex items-center gap-2">
-              <i class="fab fa-whatsapp text-D text-xl"></i> 08158851178
+              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
             </p>
             <p class=" text-sm">{{ generateTransactionCode() }}</p>
 
@@ -28,39 +28,49 @@
           </div>
 
 
-          <div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center -mt-5 relative z-10">
+          <div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center  -mt-5 relative z-10">
             <div class="text-right font-semibold pr-3">Tanggal :</div>
 
             <p class="mt-1 text-left pl-2">{{ getCurrentDate() }}</p>
-            
+
             <div class="text-right font-semibold pr-3">Nama :</div>
 
             <inputField v-model="namaPembeli" class="h-7 text-sm rounded bg-blue-200 w-full" />
 
-            <div class="text-right font-semibold pr-3">No.Hp :</div>
-
-            <inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
 
             <div class="text-right font-semibold pr-3">Alamat :</div>
 
             <inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
 
+            <div class="text-right font-semibold pr-3">No.Hp :</div>
+
+            <inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
           </div>
         </div>
 
 
-       
 
-
-        <table class="w-full border-D  text-sm table-fixed border-b">
+        <div class="flex justify-between items-center mb-1 w-full">
+            <div class="flex gap-2">
+                <img :src="logo_bca" alt="Logo_bca" class="h-5" />
+                <img :src="logo_bri" alt="Logo_bri" class="h-5" />
+                <img :src="logo_bni" alt="Logo_bni" class="h-5" />
+            </div>
+            <div class="flex gap-2">
+                <img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
+                <img :src="logo_visa" alt="Logo_visa" class="h-5" />
+                <img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
+            </div>
+        </div>
+            <table class="w-full border-D  text-sm table-fixed border-b">
           <thead>
             <tr class="border-b border-t border-D">
-              <th class="w-[60px] border-r border-D">Jml</th>
-              <th class="w-[330px] py-2 border-r border-D">Item</th>
-              <th class="w-[70px] border-r border-D">Posisi</th>
-              <th class="w-[60px] border-r border-D">Berat</th>
-              <th class="w-[60px] border-r border-D">Kadar</th>
-              <th class="w-[210px]">Harga</th>
+              <th class="w-[40px] border-r text-lg border-D">Jml</th>
+              <th class="w-[360px] py-2 text-lg border-r border-D">Item</th>
+              <th class="w-[70px] border-r text-lg border-D">Posisi</th>
+              <th class="w-[40px] border-r text-lg border-D">Berat</th>
+              <th class="w-[40px] border-r text-lg border-D">Kadar</th>
+              <th class="w-[240px] text-lg">Harga</th>
             </tr>
           </thead>
 
@@ -101,13 +111,13 @@
               <li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
                 lain harga.</li>
               <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
-              <li>Surat ini harap dibawa pada saat menjual kembali.</li>
+              <li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
             </ol>
           </div>
 
           <!-- SALES -->
           <div class="w-[20%] p-2 flex flex-col items-center justify-center">
-            <p><strong>Sales</strong></p>
+            <p><strong>Hormat Kami</strong></p>
             <inputSelect v-model="selectedSales" :options="salesOptions"
               class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
           </div>
@@ -122,19 +132,24 @@
                   <p class="text-red-500 text-xs">diluar harga jual</p>
                 </div>
                 <div class="flex items-center w-40">
-                  <p>Rp</p>
-                  <inputField v-model.number="ongkosBikin" type="number"
-                    class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
-                </div>
+  <p>Rp</p>
+  <input
+    type="text"
+    v-model="ongkosBikinFormatted"
+    @input="formatInput"
+    class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
+  />
+</div>
+
               </div>
 
               <!-- Total -->
               <div class="flex items-center justify-between -mt-4">
-                <p class="font-semibold">Total</p>
+                <p class="font-semibold">Total Harga</p>
                 <div class="flex items-center w-40">
                   <p>Rp</p>
                   <p class="px-3 pl-2 py-1 text-left text-sm w-full">
-                    {{ grandTotal.toLocaleString() }}
+                    {{ grandTotal.toLocaleString() }},-
                   </p>
                 </div>
               </div>
@@ -152,7 +167,7 @@
           </div>
         </div>
       </div>
-      <p class="absolute p-2 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
+      <p class="absolute p-8 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
         Terima kasih sudah berbelanja dengan kami
       </p>
 
@@ -163,6 +178,12 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import logo from '@/../images/logo.png'
+import logo_bca from '@/../images/logo_bca.png'
+import logo_bri from '@/../images/logo_bri.png'
+import logo_bni from '@/../images/logo_bni.png'
+import logo_mastercard from '@/../images/logo_mastercard.png'
+import logo_visa from '@/../images/logo_visa.png'
+import logo_mandiri from '@/../images/logo_mandiri.png'
 import inputField from '@/components/inputField.vue'
 import inputSelect from '@/components/inputSelect.vue'
 
@@ -192,6 +213,7 @@ const alamat = ref('')
 const ongkosBikin = ref(0)
 const selectedSales = ref(null)
 const salesOptions = ref([])
+const ongkosBikinFormatted = ref("");
 
 const grandTotal = computed(() => {
   return props.total + (ongkosBikin.value || 0)
@@ -310,6 +332,19 @@ const pesananMinimal = computed(() => {
   return arr
 })
 
+function formatInput(e) {
+
+  let value = e.target.value.replace(/\D/g, "");
+
+
+  ongkosBikin.value = value ? parseInt(value, 10) : null;
+
+  
+  ongkosBikinFormatted.value = value
+    ? new Intl.NumberFormat("id-ID").format(value)
+    : "";
+}
+
 </script>
 
 <style scoped>