diff --git a/assets/js/main.js b/assets/js/main.js
index ead9433..45bb5fc 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -582,6 +582,28 @@ document.addEventListener('DOMContentLoaded', () => {
         updateCart();
     };
 
+    window.clearCart = function() {
+        if (cart.length === 0) return;
+        Swal.fire({
+            title: 'Clear Cart?',
+            text: "Are you sure you want to remove all items from the cart?",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#dc3545',
+            cancelButtonColor: '#6c757d',
+            confirmButtonText: 'Yes, clear it!'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                cart = [];
+                cartDiscountInput.value = 0;
+                currentOrderId = null;
+                isLoyaltyRedemption = false;
+                updateCart();
+                showToast("Cart cleared", "success");
+            }
+        });
+    };
+
     // --- Payment Selection Logic ---
     function renderPaymentMethods() {
         if (!paymentMethodsContainer) return;
@@ -937,4 +959,4 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         });
     }
-});
+});
\ No newline at end of file
diff --git a/pos.php b/pos.php
index 457a407..65a908f 100644
--- a/pos.php
+++ b/pos.php
@@ -252,65 +252,112 @@ if (!$loyalty_settings) {
         </div>
       </div>
 
-      <!-- Right Sidebar: Cart -->
-      <div class="col-md-3 d-none d-md-flex cart-sidebar p-0">
-        <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
-            <h6 class="fw-bold mb-0">Current Order</h6>
-            <span class="badge bg-primary rounded-pill" id="cart-count">0 items</span>
-        </div>
-        
-        <!-- Customer Selection -->
-        <div class="p-2 border-bottom bg-light">
-            <div class="input-group input-group-sm mb-1 position-relative">
-                <span class="input-group-text bg-white"><i class="bi bi-person"></i></span>
-                <input type="text" id="customer-search" class="form-control" placeholder="Search customer (Name/Phone)..." autocomplete="off">
-                <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#addCustomerModal" title="Add New Customer">
-                    <i class="bi bi-person-plus"></i>
-                </button>
-                <div id="customer-dropdown" class="list-group shadow-sm position-absolute w-100" style="top: 100%; z-index: 1050; display: none; max-height: 200px; overflow-y: auto;"></div>
-            </div>
-            <div id="selected-customer-display" class="d-none alert alert-info p-1 mb-0 mt-1 d-flex justify-content-between align-items-center" style="font-size: 0.8rem;">
-                <span><i class="bi bi-person-check-fill me-1"></i> <strong id="selected-customer-name"></strong></span>
-                <button type="button" class="btn-close" style="font-size: 0.6rem;" onclick="clearSelectedCustomer()"></button>
-            </div>
-        </div>
+      <!-- Right Sidebar: Cart & Order Info -->
+      <div class="col-md-3 col-12 cart-sidebar border-start p-0 d-flex flex-column">
+         
+         <!-- Top Section: Customer & Type -->
+         <div class="p-3 border-bottom bg-white">
+            <!-- Order Type -->
+            <div class="btn-group w-100 mb-3" role="group">
+                <input type="radio" class="btn-check" name="order_type" id="ot-takeaway" value="takeaway" <?= $order_type === 'takeaway' ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary btn-sm" for="ot-takeaway">Takeaway</label>
 
-        <!-- Cart Items -->
-        <div class="scrollable-y flex-grow-1 p-3" id="cart-items">
-            <div class="text-center text-muted mt-5 py-5">
-                <i class="bi bi-cart3 fs-1 opacity-25"></i>
-                <p class="mt-2">Cart is empty</p>
+                <input type="radio" class="btn-check" name="order_type" id="ot-dine-in" value="dine-in" <?= $order_type === 'dine-in' ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary btn-sm" for="ot-dine-in">Dine-In</label>
+                
+                <input type="radio" class="btn-check" name="order_type" id="ot-delivery" value="delivery" <?= $order_type === 'delivery' ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary btn-sm" for="ot-delivery">Delivery</label>
             </div>
-        </div>
 
-        <!-- Cart Summary & Actions -->
-        <div class="p-3 border-top bg-white shadow-lg">
-            <div class="d-flex justify-content-between mb-1">
-                <span class="text-muted">Subtotal</span>
-                <span id="cart-subtotal">$0.00</span>
-            </div>
-            <div class="d-flex justify-content-between mb-1">
-                <span class="text-muted">VAT (<?= ($settings['vat_rate'] ?? 0) * 100 ?>%)</span>
-                <span id="cart-tax">$0.00</span>
-            </div>
-            <div class="d-flex justify-content-between mb-3 pt-2 border-top">
-                <h5 class="fw-bold mb-0">Total</h5>
-                <h5 class="fw-bold mb-0 text-primary" id="cart-total">$0.00</h5>
-            </div>
-            
-            <div class="row g-2">
-                <div class="col-6">
-                    <button class="btn btn-outline-danger w-100 py-3 fw-bold" onclick="clearCart()">
-                        <i class="bi bi-trash"></i> CLEAR
+            <!-- Customer Search -->
+            <div class="position-relative">
+                <div class="input-group input-group-sm">
+                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-person"></i></span>
+                    <input type="text" class="form-control border-start-0 ps-0" id="customer-search" placeholder="Search Customer..." autocomplete="off">
+                    <button class="btn btn-outline-secondary d-none" type="button" id="clear-customer"><i class="bi bi-x"></i></button>
+                    <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#addCustomerModal" title="Add New Customer">
+                        <i class="bi bi-plus-lg"></i>
                     </button>
                 </div>
-                <div class="col-6">
-                    <button class="btn btn-primary w-100 py-3 fw-bold" onclick="proceedToPayment()">
-                        PAYMENT <i class="bi bi-arrow-right"></i>
-                    </button>
+                <div class="list-group shadow-sm search-dropdown" id="customer-results"></div>
+                <input type="hidden" id="selected-customer-id">
+                
+                <div id="customer-info" class="small text-success mt-1 d-none">
+                    <i class="bi bi-check-circle-fill me-1"></i> <span id="customer-name-display"></span>
                 </div>
+                
+                <!-- Loyalty Section (Hidden if disabled) -->
+                <?php if ($loyalty_settings['is_enabled']): ?>
+                <div id="loyalty-section" class="d-none mt-2 p-2 bg-warning-subtle rounded border border-warning">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="d-block fw-bold small text-warning-emphasis">Loyalty Points</span>
+                            <span id="loyalty-points-display" class="fw-bold fs-5">0</span>
+                        </div>
+                        <button id="redeem-loyalty-btn" class="btn btn-sm btn-success shadow-sm" disabled>
+                            <i class="bi bi-gift-fill me-1"></i> Redeem Meal
+                        </button>
+                    </div>
+                    <div id="loyalty-message" class="small text-muted mt-1 fst-italic" style="font-size: 0.75rem;"></div>
+                </div>
+                <?php endif; ?>
             </div>
-        </div>
+         </div>
+
+         <!-- Cart Items (Flex Grow) -->
+         <div class="flex-grow-1 overflow-auto p-3 bg-white" id="cart-items">
+             <div class="text-center text-muted mt-5">
+                 <i class="bi bi-basket3 fs-1 text-light"></i>
+                 <p class="mt-2">Cart is empty</p>
+             </div>
+         </div>
+
+         <!-- Bottom: Totals & Action -->
+         <div class="p-3 border-top bg-light mt-auto">
+             <div class="d-flex justify-content-between mb-2">
+                 <span class="text-muted">Subtotal</span>
+                 <span class="fw-bold" id="cart-subtotal"><?= format_currency(0) ?></span>
+             </div>
+             
+             <!-- Discount Field -->
+             <div class="d-flex justify-content-between align-items-center mb-2">
+                 <span class="text-muted">Discount</span>
+                 <div class="input-group input-group-sm w-50">
+                     <span class="input-group-text bg-white border-end-0 text-muted">-</span>
+                     <input type="number" id="cart-discount-input" class="form-control border-start-0 text-end" value="0" min="0" step="0.01">
+                 </div>
+             </div>
+
+             <div class="d-flex justify-content-between mb-3">
+                 <span class="fs-5 fw-bold">Total</span>
+                 <span class="fs-4 fw-bold text-primary" id="cart-total-price"><?= format_currency(0) ?></span>
+             </div>
+             
+             <?php if (has_permission('pos_add')): ?>
+             <div class="mb-2">
+                 <button class="btn btn-outline-danger w-100 py-2 fw-bold mb-2" onclick="clearCart()">
+                     <i class="bi bi-trash me-1"></i> CLEAR CART
+                 </button>
+                 <div class="d-flex gap-2">
+                     <button class="btn btn-primary w-50 btn-lg shadow-sm fw-bold" id="quick-order-btn" disabled>
+                         QUICK ORDER <i class="bi bi-lightning-fill ms-1"></i>
+                     </button>
+                     <button class="btn btn-warning w-50 btn-lg shadow-sm text-white fw-bold" id="place-order-btn" disabled>
+                         PLACE ORDER <i class="bi bi-clock ms-1"></i>
+                     </button>
+                 </div>
+             </div>
+             <?php else: ?>
+             <div class="alert alert-warning small py-2 mb-0 text-center">
+                 <i class="bi bi-info-circle me-1"></i> View Only Mode
+             </div>
+             <?php endif; ?>
+
+             <div class="text-center mt-3 text-muted small" style="font-size: 0.7rem;">
+                Powered By Abidarcafe @2026
+             </div>
+         </div>
+
       </div>
 
     </div>