diff --git a/app/views/layouts/_read_modal.html.erb b/app/views/layouts/_read_modal.html.erb
index 48177f0c..6f2384fe 100644
--- a/app/views/layouts/_read_modal.html.erb
+++ b/app/views/layouts/_read_modal.html.erb
@@ -1,263 +1,100 @@
+<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
+    <div class="modal-dialog read-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
+                <h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Customer Detail</h4>
+            </div>
+            <div class="modal-body">
+                <p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or Scan Code</p>
+                <div style="text-align: center;">
+                    <img src="/image/nfc.png" style="height: 200px"><br>
+                    <button type="button" class="btn btn-primary" id="mmqr" >MMQR</button>
+
+                </div>
+            </div>
+            <div class="modal-footer" style="justify-content: center;">
+                <button type="button" class="btn btn-danger" id="close" >Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <style>
-  /* Base Styling */
-  .payment-modal {
-    border-radius: 18px;
-    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  #read_modal {
+  text-align: center;
+  padding: 0!important;
+}
+
+  #read_modal:before {
+    display: inline-block;
+    vertical-align: middle;
+    content: " ";
+    height: 100%;
   }
 
-  .payment-header {
-    background: #f8fbfc;
-    padding: 1.5rem;
-    border-bottom: 2px solid #e0f0f3;
-    text-align: center;
-  }
-
-  .merchant-logo {
-    height: 65px;
-    margin-bottom: 1rem;
-    filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
-  }
-
-  .modal-title {
-    color: #2a626b;
-    font-size: 1.5rem;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-  }
-
-  /* Amount Display */
-  .amount-section {
-    background: #54A5AF15;
-    padding: 1.2rem;
-    margin: 0 1.5rem;
-    border-radius: 12px;
-    border: 2px dashed #54A5AF40;
-  }
-
-  .total-amount {
-    color: #2a626b;
-    font-size: 1.8rem;
-    font-weight: 800;
-    margin: 0;
-  }
-
-  .amount-label {
-    color: #678c93;
-    font-size: 0.95rem;
-    margin-bottom: 0.5rem;
-  }
-
-  /* Payment Options Grid */
-  .payment-grid {
-    display: flex;
-    flex-direction: column;
-    /* grid-template-columns: repeat(1, 1fr); */
-    gap: 1rem;
-    padding: 1.5rem;
-  }
-
-  .payment-card {
-    background: white;
-    border: 2px solid #e0f0f3;
-    border-radius: 14px;
-    padding: 1.5rem;
-    cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-  }
-
-  .payment-card:hover {
-    transform: translateY(-3px);
-    border-color: #54A5AF;
-    box-shadow: 0 6px 20px rgba(84,165,175,0.1);
-  }
-
-  .payment-card.active {
-    border-color: #54A5AF;
-    background: #f8fbfc;
-  }
-
-  .payment-icon {
-    font-size: 2.2rem;
-    color: #54A5AF;
-    margin-bottom: 1rem;
-  }
-
-  .payment-label {
-    color: #2a626b;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-  }
-
-  .payment-description {
-    color: #678c93;
-    font-size: 0.9rem;
-    line-height: 1.4;
-  }
-
-  /* Footer Actions */
-  .modal-footer {
-    background: #f8fbfc;
-    padding: 1.2rem;
-    display: flex;
-    justify-content: space-between;
-    border-top: 2px solid #e0f0f3;
-  }
-
-  .btn-cancel {
-    background: transparent;
-    border: 2px solid #e0f0f3;
-    color: #678c93;
-    padding: 0.8rem 1.5rem;
-    border-radius: 10px;
-    font-weight: 600;
-    transition: all 0.2s ease;
-  }
-
-  .btn-cancel:hover {
-    border-color: #ff4757;
-    color: #ff4757;
-  }
-
-  .btn-proceed {
-    background: transparent;
-    border: 2px solid #e0f0f3;
-    color: #678c93;
-    padding: 0.8rem 1.5rem;
-    border-radius: 10px;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    cursor: pointer;
-  }
-
-  .btn-proceed:hover {
-    border-color: #ff4757;
-    color: #ff4757;
-  }
-  .payment-card#read_nfc {
-      opacity: 0.6;
-      cursor: not-allowed;
+  .read-dialog {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
   }
 </style>
 
-<div class="modal fade payment-modal" id="read_modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-        <div class="payment-header">
-                <h2 class="modal-title">Payment Options</h2>
-        </div>
-      <div class="payment-grid">
-        <div class="payment-card" id="dynamic_qr">
-          <div class="payment-icon text-center">
-              <img src="/image/mmqr.webp" width="100" height="100" />
-          </div>
-          <div class="payment-label text-center">Click here to pay with MMQR</div>
-        </div>
+<script>
+  $('#mmqr').click(function() {
+    // alert("MMQR");
 
-        <div class="text-center text-bold text-muted">
-            (Or)
-        </div>
+            const paymentMethod = 'MMQR';
+            const $serverMode = $('#server_mode');
+            const $createOrderBtn = $('#create_order');
+            const $createPayOrderBtn = $('#create_pay_order');
 
-        <!-- Read NFC Card -->
-        <div class="payment-card disabled" id="read_nfc" style="grid-column: span 2;">
-          <div class="payment-icon text-center">
-              <img src="/image/nfc.png" width="100" height="100" />
-          </div>
-          <div class="payment-label text-center">Tap your NFC-enabled card or device</div>
-        </div>
-      </div>
+            const params = {
+                order_source: "food_court",
+                order_type: "dine_in",
+                customer_id: $("#customer_id").text(),
+                guest_info: "",
+                table_id: $("#table_id").text(),
+                order_items: JSON.stringify(get_order_item_rows()),
+                create_type: "create_pay",
+            };
 
-      <div class="modal-footer">
-        <button type="button" class="btn-cancel" id="close">
-          Cancel
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
+            $.ajax({
+                url: '/foodcourt/addorders/create',
+                method: 'POST',
+                contentType: 'application/json',
+                headers: {
+                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+                },
+                data: JSON.stringify(params),
+                success: function(result) {
+                    const booking_id = result.booking_id;
+                    window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
+                    if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
+                        // customer_display_view(null, "reload");
+                    }
+                },
+                error: function(xhr) {
+                    $('#oqs_loading_wrapper').hide();
+                    $createOrderBtn.prop('disabled', false);
+                    $createPayOrderBtn.prop('disabled', false);
 
-<script defer type="text/javascript">
-document.addEventListener('DOMContentLoaded', function () {
-    const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
-    const cancelButton = document.querySelector('.btn-cancel');
-
-    cancelButton.addEventListener('click', function () {
-        console.log("Action: Cancel payment.");
-
-        paymentCards.forEach(c => c.classList.remove('active'));
-
-        styleProceedButton(false);
-    });
-
-    const disabledNfcCard = document.querySelector('.payment-card.disabled');
-
-    document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
-      initDynamicQrPay();
-    });
-
-    function initDynamicQrPay() {
-        const paymentMethod = 'MMQR';
-        const $serverMode = $('#server_mode');
-        const $createOrderBtn = $('#create_order');
-        const $createPayOrderBtn = $('#create_pay_order');
-
-        const params = {
-            order_source: "food_court",
-            order_type: "dine_in",
-            customer_id: $("#customer_id").text(),
-            guest_info: "",
-            table_id: $("#table_id").text(),
-            order_items: JSON.stringify(get_order_item_rows()),
-            create_type: "create_pay",
-        };
-
-        $.ajax({
-            url: '/foodcourt/addorders/create',
-            method: 'POST',
-            contentType: 'application/json',
-            headers: {
-                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
-            },
-            data: JSON.stringify(params),
-            success: function(result) {
-                const booking_id = result.booking_id;
-                window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
-                if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
-                    // customer_display_view(null, "reload");
+                    const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
+                    swal("Error", errorMsg, "error");
                 }
-            },
-            error: function(xhr) {
-                $('#oqs_loading_wrapper').hide();
-                $createOrderBtn.prop('disabled', false);
-                $createPayOrderBtn.prop('disabled', false);
+            });
+  })
 
-                const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
-                swal("Error", errorMsg, "error");
-            }
-        });
-    }
-    function get_order_item_rows(){
-      var order_items = [];
-      var item_row    = $('.summary-items tbody tr');
-      $(item_row).each(function(i){
-        var order_item = {};
+  function get_order_item_rows(){
+    var order_items = [];
+    var item_row    = $('.summary-items tbody tr');
+    $(item_row).each(function(i){
+      var order_item = {};
 
-        order_item.order_item_id      = $(item_row[i]).attr('data-row');
-        order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
-        order_item.quantity           = $(item_row[i]).children('#item_qty').text();
-    //parent id
-        if ($(item_row[i]).attr('data-parent')=="true") {
-          parent_id = $(item_row[i]).attr('data-row');
-        }
-        if ($(item_row[i]).attr('data-sub-item')=="true") {
-          order_item.parent_order_item_id = parent_id
-        }
-    //end parent id
-        order_item.options            = $(item_row[i]).attr('data-options');
-        order_items.push(order_item);
-      });
-      return order_items;
-    }
-});
+      // order_item.item_name    = $(item_row[i]).attr('data-item-name');
+      order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
+
+      order_items.push(order_item);
+    });
+    return order_items;
+  }
 </script>