diff --git a/assets/css/custom.css b/assets/css/custom.css
index 113a9e1..a503557 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -295,12 +295,17 @@ body {
     }
     body.printing-receipt .thermal-receipt-print, 
     body.printing-receipt .thermal-receipt-print * {
-        visibility: visible;
+        visibility: visible !important;
+    }
+    body.printing-receipt #posPrintArea {
+        visibility: visible !important;
+        display: block !important;
     }
     body.printing-receipt .thermal-receipt-print {
         position: absolute;
         left: 0;
         top: 0;
+        display: block !important;
     }
 }
 
diff --git a/index.php b/index.php
index a99e672..1773430 100644
--- a/index.php
+++ b/index.php
@@ -3378,6 +3378,169 @@ document.addEventListener('DOMContentLoaded', function() {
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 
+    <!-- View Invoice Modal -->
+    <div class="modal fade" id="viewInvoiceModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content border-0 shadow">
+                <div class="modal-header">
+                    <h5 class="modal-title" data-en="View Invoice" data-ar="عرض الفاتورة">View Invoice</h5>
+                    <button type="button" class="btn-close d-print-none" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-4" id="invoicePrintableArea">
+                    <div class="row mb-4">
+                        <div class="col-6">
+                            <h3 class="mb-0 fw-bold"><?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></h3>
+                            <p class="text-muted small mb-0"><?= nl2br(htmlspecialchars($data['settings']['company_address'] ?? '')) ?></p>
+                            <p class="text-muted small">VAT: <?= htmlspecialchars($data['settings']['vat_number'] ?? '') ?></p>
+                        </div>
+                        <div class="col-6 text-end">
+                            <h2 class="text-uppercase text-muted fw-bold mb-0">Invoice</h2>
+                            <div class="mb-2"><span id="invoiceTypeLabel" class="badge"></span></div>
+                            <p class="mb-0"><strong>No: <span id="invNumber"></span></strong></p>
+                            <p class="mb-0 text-muted">Date: <span id="invDate"></span></p>
+                            <p class="text-muted small">Status: <span id="invoiceStatusLabel"></span></p>
+                        </div>
+                    </div>
+                    <div class="row mb-4 p-3 bg-light rounded">
+                        <div class="col-6">
+                            <p class="text-muted small text-uppercase fw-bold mb-1" id="invPartyLabel">Bill To</p>
+                            <p class="mb-0 fw-bold"><span id="invCustomerName"></span></p>
+                            <p class="small text-muted mb-0" id="invCustomerTaxIdContainer">VAT: <span id="invCustomerTaxId"></span></p>
+                        </div>
+                        <div class="col-6 text-end">
+                            <p class="text-muted small text-uppercase fw-bold mb-1">Payment Type</p>
+                            <p class="mb-0"><span id="invPaymentType"></span></p>
+                        </div>
+                    </div>
+                    <table class="table table-bordered">
+                        <thead class="bg-light">
+                            <tr>
+                                <th>Item Description</th>
+                                <th class="text-center">Qty</th>
+                                <th class="text-end">Unit Price</th>
+                                <th class="text-end">VAT %</th>
+                                <th class="text-end">Total</th>
+                            </tr>
+                        </thead>
+                        <tbody id="invItemsBody"></tbody>
+                    </table>
+                    <div class="row justify-content-end mt-4">
+                        <div class="col-md-5">
+                            <div class="d-flex justify-content-between mb-2">
+                                <span class="text-muted">Subtotal</span>
+                                <span id="invSubtotal" class="fw-bold"></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>
+                            </div>
+                            <hr>
+                            <div class="d-flex justify-content-between mb-3">
+                                <span class="h5 fw-bold">Grand Total</span>
+                                <span id="invGrandTotal" class="h5 fw-bold text-primary"></span>
+                            </div>
+                            <div id="invPaymentsSection" class="mt-4 border-top pt-3">
+                                <p class="text-muted small text-uppercase fw-bold mb-2">Payment History</p>
+                                <table class="table table-sm table-borderless small mb-0">
+                                    <tbody id="invPaymentsBody"></tbody>
+                                </table>
+                                <div class="bg-light p-2 mt-2 rounded">
+                                    <div class="d-flex justify-content-between small mb-1">
+                                        <span>Total Amount</span>
+                                        <span id="invTotalInfo"></span>
+                                    </div>
+                                    <div class="d-flex justify-content-between small mb-1 text-success">
+                                        <span>Paid Amount</span>
+                                        <span id="invPaidInfo"></span>
+                                    </div>
+                                    <div class="d-flex justify-content-between small fw-bold text-danger">
+                                        <span>Remaining Balance</span>
+                                        <span id="invBalanceInfo"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-5 pt-3 border-top text-center">
+                        <div id="invQrCode" class="mb-2"></div>
+                        <p class="text-muted small">Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></p>
+                    </div>
+                </div>
+                <div class="modal-footer d-print-none">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" onclick="window.print()"><i class="bi bi-printer me-2"></i>Print Invoice</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Payment Receipt Modal -->
+    <div class="modal fade" id="receiptModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content border-0 shadow">
+                <div class="modal-header border-0 pb-0 d-print-none">
+                    <h5 class="modal-title">Payment Receipt</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-0" id="printableReceipt">
+                    <div class="receipt-container p-4">
+                        <div class="text-center mb-4">
+                            <h3 class="mb-1 fw-bold"><?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></h3>
+                            <p class="text-muted small mb-0"><?= nl2br(htmlspecialchars($data['settings']['company_address'] ?? '')) ?></p>
+                            <hr class="my-4">
+                            <h4 class="letter-spacing-2 fw-bold text-uppercase">Payment Receipt</h4>
+                        </div>
+                        <div class="row mb-4">
+                            <div class="col-6">
+                                <p class="mb-1 text-muted small text-uppercase fw-bold">Receipt No</p>
+                                <p class="fw-bold h5 text-primary" id="receiptNo"></p>
+                            </div>
+                            <div class="col-6 text-end">
+                                <p class="mb-1 text-muted small text-uppercase fw-bold">Date</p>
+                                <p class="fw-bold" id="receiptDate"></p>
+                            </div>
+                        </div>
+                        <div class="mb-4 p-3 bg-light rounded">
+                            <div class="row mb-2">
+                                <div class="col-4 text-muted small text-uppercase fw-bold" id="receiptPartyLabel">Received From</div>
+                                <div class="col-8 fw-bold" id="receiptCustomer"></div>
+                            </div>
+                            <div class="row mb-2">
+                                <div class="col-4 text-muted small text-uppercase fw-bold" id="receiptAgainstLabel">Against Invoice</div>
+                                <div class="col-8 fw-bold" id="receiptInvNo"></div>
+                            </div>
+                            <div class="row mb-2">
+                                <div class="col-4 text-muted small text-uppercase fw-bold">Payment Method</div>
+                                <div class="col-8 fw-bold" id="receiptMethod"></div>
+                            </div>
+                        </div>
+                        <div class="text-center my-4 py-4 border-top border-bottom">
+                            <p class="mb-1 text-muted small text-uppercase fw-bold">Amount Paid</p>
+                            <h1 class="display-5 fw-bold text-primary mb-1" id="receiptAmount"></h1>
+                            <p class="text-muted small font-italic" id="receiptAmountWords"></p>
+                        </div>
+                        <div id="receiptNotesContainer" class="mb-4" style="display: none;">
+                            <p class="mb-1 text-muted small text-uppercase fw-bold">Notes</p>
+                            <p class="small p-2 bg-light rounded" id="receiptNotes"></p>
+                        </div>
+                        <div class="row mt-5 pt-4">
+                            <div class="col-6">
+                                <div class="border-top pt-2 text-center small text-muted">Receiver's Signature</div>
+                            </div>
+                            <div class="col-6">
+                                <div class="border-top pt-2 text-center small text-muted">Authorized Signatory</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer border-0 d-print-none">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" onclick="window.printReceipt()"><i class="bi bi-printer me-2"></i>Print Receipt</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- POS Payment Modal -->
     <div class="modal fade" id="posPaymentModal" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog">
@@ -3484,7 +3647,7 @@ document.addEventListener('DOMContentLoaded', function() {
         </div>
     </div>
 
-    <div id="posPrintArea" class="d-none"></div>
+    <div id="posPrintArea" class="d-none d-print-block"></div>
 
     <script>
     function printPosReceipt() {