diff --git a/assets/pasted-20260219-052722-08f15b4c.png b/assets/pasted-20260219-052722-08f15b4c.png
new file mode 100644
index 0000000..de4cedf
Binary files /dev/null and b/assets/pasted-20260219-052722-08f15b4c.png differ
diff --git a/index.php b/index.php
index 64e4aa9..8751689 100644
--- a/index.php
+++ b/index.php
@@ -9230,13 +9230,26 @@ document.addEventListener('DOMContentLoaded', function() {
                 visibility: visible !important; 
                 background: white !important;
                 width: 100% !important;
-                height: 100% !important;
             }
             
             .modal.show .modal-dialog { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
             .modal.show .modal-content { border: none !important; box-shadow: none !important; background: white !important; }
             .modal.show .modal-body { padding: 0 !important; margin: 0 !important; background: white !important; }
             
+            @page {
+                size: auto;
+                margin: 5mm;
+            }
+            
+            .invoice-printable-container {
+                padding: 10px !important;
+            }
+            
+            .mt-4 { margin-top: 1rem !important; }
+            .mt-5 { margin-top: 1.5rem !important; }
+            .mb-4 { margin-bottom: 1rem !important; }
+            .p-5 { padding: 1.5rem !important; }
+            
             .table-bordered th, .table-bordered td { border: 1px solid #dee2e6 !important; }
             .bg-light { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact; }
             .text-primary { color: #0d6efd !important; -webkit-print-color-adjust: exact; }
@@ -9261,7 +9274,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-0" id="invoicePrintableArea">
-                    <div class="p-5">
+                    <div class="p-4 invoice-printable-container">
                         <div class="invoice-header mb-4">
                             <div class="row align-items-center">
                                 <div class="col-6">
@@ -9322,32 +9335,31 @@ document.addEventListener('DOMContentLoaded', function() {
                         </table>
 
                         <div class="row mt-4">
-                            <div class="col-7">
-                                <div class="p-3 bg-light rounded" style="min-height: 100px;">
+                            <div class="col-6">
+                                <div class="p-3 bg-light rounded" style="min-height: 80px;">
                                     <p class="text-muted small text-uppercase fw-bold mb-1">Amount in Words / المبلغ بالحروف</p>
                                     <p id="invAmountInWords" class="small fw-bold mb-0"></p>
                                 </div>
-                                <div class="mt-4">
+                                <div class="mt-3">
                                     <p class="text-muted small text-uppercase fw-bold mb-1">Terms & Conditions / الشروط والأحكام</p>
-                                    <ul class="small text-muted ps-3">
-                                        <li>Goods once sold will not be taken back or exchanged. / البضاعة التي تباع لا ترد ولا تستبدل.</li>
-                                        <li>Payment is due within the agreed credit period. / الدفع مستحق خلال فترة الائتمان المتفق عليها.</li>
-                                        <li>This is a computer-generated invoice and does not require a physical signature. / هذه فاتورة تم إنشاؤها بواسطة الكمبيوتر ولا تتطلب توقيعًا فعليًا.</li>
+                                    <ul class="small text-muted ps-3 mb-0">
+                                        <li>Goods once sold will not be taken back or exchanged.</li>
+                                        <li>Payment is due within the agreed credit period.</li>
                                     </ul>
                                 </div>
                             </div>
-                            <div class="col-5">
+                            <div class="col-6">
                                 <div class="d-flex justify-content-between mb-2">
                                     <span class="text-muted">Subtotal / المجموع الفرعي</span>
-                                    <span id="invSubtotal" class="fw-bold"></span>
+                                    <span id="invSubtotal" class="fw-bold text-nowrap"></span>
                                 </div>
                                 <div class="d-flex justify-content-between mb-2">
                                     <span class="text-muted">VAT Amount / مبلغ الضريبة</span>
-                                    <span id="invVatAmount" class="fw-bold"></span>
+                                    <span id="invVatAmount" class="fw-bold text-nowrap"></span>
                                 </div>
                                 <div class="d-flex justify-content-between mb-3 border-top pt-2">
                                     <span class="h4 fw-bold">Grand Total / المجموع الكلي</span>
-                                    <span id="invGrandTotal" class="h4 fw-bold text-primary"></span>
+                                    <span id="invGrandTotal" class="h4 fw-bold text-primary text-nowrap"></span>
                                 </div>
                                 
                                  <div id="invPaymentsSection" class="mt-4 border-top pt-3">
@@ -9376,23 +9388,23 @@ document.addEventListener('DOMContentLoaded', function() {
                             </div>
                         </div>
 
-                        <div class="mt-5 pt-4 border-top text-center">
+                        <div class="mt-4 pt-3 border-top text-center">
                             <div class="row">
                                 <div class="col-4">
                                     <div class="border-top pt-2 mx-auto" style="width: 150px;">
-                                        <p class="small text-muted">Customer Signature / توقيع العميل</p>
+                                        <p class="small text-muted mb-0">Customer Signature / توقيع العميل</p>
                                     </div>
                                 </div>
                                 <div class="col-4">
-                                    <div id="invQrCode" class="mb-2 d-flex justify-content-center"></div>
+                                    <div id="invQrCode" class="d-flex justify-content-center"></div>
                                 </div>
                                 <div class="col-4">
                                     <div class="border-top pt-2 mx-auto" style="width: 150px;">
-                                        <p class="small text-muted">Authorized Signatory / التوقيع المعتمد</p>
+                                        <p class="small text-muted mb-0">Authorized Signatory / التوقيع المعتمد</p>
                                     </div>
                                 </div>
                             </div>
-                            <p class="text-muted x-small mt-4 mb-0">Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?> | Visit us at <?= $_SERVER['HTTP_HOST'] ?></p>
+                            <p class="text-muted x-small mt-3 mb-0">Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?> | Visit us at <?= $_SERVER['HTTP_HOST'] ?></p>
                         </div>
                     </div>
                 </div>
@@ -10095,21 +10107,21 @@ document.addEventListener('DOMContentLoaded', function() {
                 tr.innerHTML = `
                     <td>${item.name_en} / ${item.name_ar}</td>
                     <td class="text-center">${item.quantity}</td>
-                    <td class="text-end">OMR ${parseFloat(item.unit_price).toFixed(3)}</td>
-                    <td class="text-end">${parseFloat(item.vat_rate || 0).toFixed(3)}%</td>
-                    <td class="text-end">OMR ${parseFloat(item.total_price).toFixed(3)}</td>
+                    <td class="text-end"><small>OMR</small> ${parseFloat(item.unit_price).toFixed(3)}</td>
+                    <td class="text-end">${parseFloat(item.vat_rate || 0).toFixed(0)}%</td>
+                    <td class="text-end"><small>OMR</small> ${parseFloat(item.total_price).toFixed(3)}</td>
                 `;
                 body.appendChild(tr);
             });
         }
-        if (document.getElementById('invSubtotal')) document.getElementById('invSubtotal').textContent = 'OMR ' + parseFloat(data.total_amount).toFixed(3);
-        if (document.getElementById('invVatAmount')) document.getElementById('invVatAmount').textContent = 'OMR ' + (parseFloat(data.vat_amount) || 0).toFixed(3);
+        if (document.getElementById('invSubtotal')) document.getElementById('invSubtotal').innerHTML = '<small>OMR</small> ' + parseFloat(data.total_amount).toFixed(3);
+        if (document.getElementById('invVatAmount')) document.getElementById('invVatAmount').innerHTML = '<small>OMR</small> ' + (parseFloat(data.vat_amount) || 0).toFixed(3);
         const grandTotalValue = (parseFloat(data.total_with_vat) || parseFloat(data.total_amount));
-        if (document.getElementById('invGrandTotal')) document.getElementById('invGrandTotal').textContent = 'OMR ' + grandTotalValue.toFixed(3);
+        if (document.getElementById('invGrandTotal')) document.getElementById('invGrandTotal').innerHTML = '<small>OMR</small> ' + grandTotalValue.toFixed(3);
 
-        if (document.getElementById('invPaidInfo')) document.getElementById('invPaidInfo').textContent = 'OMR ' + parseFloat(data.paid_amount || 0).toFixed(3);
+        if (document.getElementById('invPaidInfo')) document.getElementById('invPaidInfo').innerHTML = '<small>OMR</small> ' + parseFloat(data.paid_amount || 0).toFixed(3);
         const balance = grandTotalValue - parseFloat(data.paid_amount || 0);
-        if (document.getElementById('invBalanceInfo')) document.getElementById('invBalanceInfo').textContent = 'OMR ' + balance.toFixed(3);
+        if (document.getElementById('invBalanceInfo')) document.getElementById('invBalanceInfo').innerHTML = '<small>OMR</small> ' + balance.toFixed(3);
 
         // Generate QR Code for Zakat, Tax and Customs Authority (ZATCA) style or simple formal
         const companyName = <?= json_encode($data['settings']['company_name'] ?? 'Accounting System') ?>;