diff --git a/app/views/foodcourt/qrpay/init.html.erb b/app/views/foodcourt/qrpay/init.html.erb
index 9b55723e..67ec371e 100644
--- a/app/views/foodcourt/qrpay/init.html.erb
+++ b/app/views/foodcourt/qrpay/init.html.erb
@@ -205,16 +205,22 @@
 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 d-flex flex-column h-100" style="padding-right: 10px;">
 
     <div class="card-block">
-        <div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+        <div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
+            <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
             <h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
             <p class="text-muted">Please ask customer to scan the QR code</p>
-            <div class="processing-indicator m-t-10">
+            <% if @qr_svg %>
+                <div>
+                    <%= raw @qr_svg %>
+                </div>
+            <% end %>
+            <div class="processing-indicator m-t-10" style="margin-top: 8rem;">
                 <div class="processing-dot"></div>
                 <div class="processing-dot"></div>
                 <div class="processing-dot"></div>
             </div>
         </div>
-        <div class="d-flex">
+        <div class="d-flex" style="margin-top: 10rem;">
             <button class="btn btn-block btn-default waves-effect" id="cancel-btn">Cancel</button>
         </div>
         <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
@@ -252,8 +258,7 @@
   document.addEventListener('DOMContentLoaded', function() {
     const paymentWaiting = document.querySelector('.payment-waiting');
     let amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
-    let receipt_no = document.querySelector('#receipt_no').textContent;
-    console.log(receipt_no);
+    const receipt_no = document.querySelector('#receipt_no').textContent;
     const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
 
 
@@ -264,7 +269,8 @@
       ws.send(JSON.stringify({
         command: "subscribe",
         identifier: JSON.stringify({
-          channel: "TestChannel"
+          channel: "TestChannel",
+          // receipt_no: receipt_no
         })
       }));
     }
@@ -279,6 +285,7 @@
 
       if(msg?.message?.status === "PAY_SUCCESS") {
         paymentWaiting.innerHTML = `
+                  <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
                   <div class="payment-success text-center">
                     <i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
                     <h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
@@ -341,10 +348,12 @@
           },
           body: JSON.stringify(data)
         }).then(function(res) {
+          customer_display_view(null,"reload");
           return  res.json();
         }).then(function(data) {
             if(data.status) {
-              window.location.href = "/"
+
+              window.location.href = "/";
             }
         });
     });
diff --git a/app/views/foodcourt/second_display/_second_display.html.erb b/app/views/foodcourt/second_display/_second_display.html.erb
index e78c2703..2184910e 100644
--- a/app/views/foodcourt/second_display/_second_display.html.erb
+++ b/app/views/foodcourt/second_display/_second_display.html.erb
@@ -50,50 +50,61 @@
   </div>
 
   <!-- Second Column: MMQR Payment -->
-  <div class="col-12 d-flex flex-column h-100 hidden" id="mmqr_payment" >
+  <div class="col-12 d-flex flex-column h-100 hidden" id="mmqr_payment">
     <div class="card h-100" style="opacity: 0.85;">
       <div class="card-header text-white" style="background-color: #ffc107;">
         <h4 class="mb-0">MMQR Payment Option</h4>
       </div>
-      <div class="card-body d-flex flex-column align-items-center justify-content-center">
-        <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
-        <div class="text-center">
-          <h5>Scan to Pay</h5>
-          <p class="text-muted">Use your mobile wallet app</p>
-        </div>
+      <!-- MODIFICATION HERE: Removed flex-column -->
+      <div class="card-body row d-flex align-items-center justify-content-center">
 
-        <div id="qr-payment-container" class="text-center p-3 bg-white rounded border" style="max-width: 300px;">
-          <div id="qr-code" class="mb-2">
-            <div id="qrpay_svg">
-              <svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                  <rect width="100" height="100" fill="#e0e0e0"/>
-                  <text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
-              </svg>
+        <!-- This is now Column 1 -->
+        <div class="col-6"> <!-- Using col-md-6 for responsiveness, col-6 is also fine -->
+            <div class="text-center">
+              <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
+              <h5>Scan to Pay</h5>
+              <p class="text-muted">Use your mobile wallet app</p>
+            </div>
+
+            <div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 300px;">
+              <!-- Added mx-auto to center this block within its col-6 parent -->
+              <div id="qr-code" class="mb-2">
+                <div id="qrpay_svg">
+                  <svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="100" height="100" fill="#e0e0e0"/>
+                      <text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
+                  </svg>
+                </div>
+              </div>
+              <div class="payment-details text-dark">
+              </div>
             </div>
-          </div>
-          <div class="payment-details text-dark">
-          </div>
         </div>
 
-        <div class="payment-instructions mt-4 text-center">
-          <h6>How to Pay:</h6>
-          <ol class="text-left small pl-3 mb-0">
-            <li>Open your mobile wallet app</li>
-            <li>Tap on 'Scan QR Code'</li>
-            <li>Point your camera at this code</li>
-            <li>Confirm the payment details</li>
-          </ol>
+        <!-- This is now Column 2 -->
+        <div class="col-6 d-flex flex-column"> <!-- Using col-md-6. Added d-flex flex-column here to make mt-auto work -->
+            <div class="payment-instructions mt-4 text-center">
+              <h6>How to Pay:</h6>
+              <!-- text-left on ol seems fine, but you might want text-md-left if it looks odd on small screens -->
+              <ol class="text-left small pl-3 mb-0" style="display: inline-block;"> <!-- inline-block for text-center to work on ol -->
+                <li>Open your mobile wallet app</li>
+                <li>Tap on 'Scan QR Code'</li>
+                <li>Point your camera at this code</li>
+                <li>Confirm the payment details</li>
+              </ol>
+            </div>
+            <!-- mt-auto will push this to the bottom of this column if the column has extra space -->
+            <div class="supported-partners-container mt-auto pt-3 pb-3 text-center">
+                <h6 class="supported-partners-title">Supported Partners</h6>
+                <div class="partner-logos">
+                    <img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
+                    <img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
+                    <img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
+                    <img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
+                </div>
+            </div>
         </div>
       </div>
-      <div class="supported-partners-container mt-auto pt-3 pb-3">
-          <h6 class="supported-partners-title">Supported Partners</h6>
-          <div class="partner-logos">
-              <img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
-              <img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
-              <img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
-              <img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
-          </div>
-      </div>
     </div>
   </div>
 
@@ -178,7 +189,6 @@
     background-color: #f8f9fa;
     padding: 15px;
     border-radius: 8px;
-    max-width: 300px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
   }
   .payment-instructions ol {
@@ -286,6 +296,17 @@
       font-size: 0.95rem;
   }
 
+  @media(min-width: 600px){
+      #second_display_order_items{
+        margin-top: -3rem;
+      }
+      #mmqr_payment{
+        margin-top: -3rem;
+      }
+  }
+
+
+
 
   @media (max-width: 576px) {
     .card-header h4 { font-size: 1.1rem; }
diff --git a/app/views/foodcourt/second_display/index.html.erb b/app/views/foodcourt/second_display/index.html.erb
index f4e5af5f..67560f9c 100644
--- a/app/views/foodcourt/second_display/index.html.erb
+++ b/app/views/foodcourt/second_display/index.html.erb
@@ -1,135 +1,143 @@
-<style>
-  * {box-sizing: border-box;}
-  body {
-    font-family: Verdana, sans-serif;
-    overflow: hidden;
-  }
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    </head>
+    <style>
+      * {box-sizing: border-box;}
+      body {
+        font-family: Verdana, sans-serif;
+        overflow: hidden;
+      }
 
-  .mySlides {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: none;
-  }
+      .mySlides {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: none;
+      }
 
-  .mySlides img {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-  }
+      .mySlides img {
+        width: 100%;
+        height: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
 
-  /* Slideshow container */
-  .slideshow-container {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-  }
+      /* Slideshow container */
+      .slideshow-container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0;
+      }
 
-  /* Caption text */
-  .text {
-    color: #f2f2f2;
-    font-size: 15px;
-    padding: 8px 12px;
-    position: absolute;
-    bottom: 8px;
-    width: 100%;
-    text-align: center;
-  }
+      /* Caption text */
+      .text {
+        color: #f2f2f2;
+        font-size: 15px;
+        padding: 8px 12px;
+        position: absolute;
+        bottom: 8px;
+        width: 100%;
+        text-align: center;
+      }
 
-  /* Number text (1/3 etc) */
-  .numbertext {
-    color: #f2f2f2;
-    font-size: 12px;
-    padding: 8px 12px;
-    position: absolute;
-    top: 0;
-  }
+      /* Number text (1/3 etc) */
+      .numbertext {
+        color: #f2f2f2;
+        font-size: 12px;
+        padding: 8px 12px;
+        position: absolute;
+        top: 0;
+      }
 
-  /* Fading animation */
-  .slide-in {
-    animation-name: slide-in;
-    animation-duration: 2s; /* Adjust the duration as per your preference */
-    animation-fill-mode: forwards;
-    display: block;
-  }
+      /* Fading animation */
+      .slide-in {
+        animation-name: slide-in;
+        animation-duration: 2s; /* Adjust the duration as per your preference */
+        animation-fill-mode: forwards;
+        display: block;
+      }
 
-  .slide-out {
-    animation-name: slide-out;
-    animation-duration: 2s; /* Adjust the duration as per your preference */
-    animation-fill-mode: forwards;
-    display: block;
-  }
+      .slide-out {
+        animation-name: slide-out;
+        animation-duration: 2s; /* Adjust the duration as per your preference */
+        animation-fill-mode: forwards;
+        display: block;
+      }
 
-  @keyframes slide-in {
-    0% {
-      transform: translateX(100%);
-    }
-    100% {
-      transform: translateX(0%);
-    }
-  }
+      @keyframes slide-in {
+        0% {
+          transform: translateX(100%);
+        }
+        100% {
+          transform: translateX(0%);
+        }
+      }
 
-  @keyframes slide-out {
-    0% {
-      transform: translateX(0%);
-    }
-    100% {
-      transform: translateX(-100%);
-    }
-  }
+      @keyframes slide-out {
+        0% {
+          transform: translateX(0%);
+        }
+        100% {
+          transform: translateX(-100%);
+        }
+      }
 
-  /* On smaller screens, decrease text size */
-  @media only screen and (max-width: 300px) {
-    .text {font-size: 11px}
-  }
-</style>
+      /* On smaller screens, decrease text size */
+      @media only screen and (max-width: 300px) {
+        .text {font-size: 11px}
+      }
+    </style>
 
-<div class="container-fluid h-100">
-    <button type="button" class="hidden" id="s_reload">Reload</button>
-    <div class="slider" id="second_display_slider">
-    	<%= render 'slider' %>
-    </div>
+    <body>
+        <div class="container-fluid h-100">
+            <button type="button" class="hidden" id="s_reload">Reload</button>
+            <div class="slider" id="second_display_slider">
+            	<%= render 'slider' %>
+            </div>
 
-    <div class="item hidden" id="second_display_items" style="min-height: 80%;">
-    	<%= render 'second_display' %>
-    </div>
-</div>
-
-<script type="text/javascript">
+            <div class="item hidden" id="second_display_items" style="min-height: 80%;">
+            	<%= render 'second_display' %>
+            </div>
+        </div>
+    </body>
+    <script type="text/javascript">
 	$(document).ready(function () {
-    //html font-size for second display till 35px!
-    // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
+        //html font-size for second display till 35px!
+        // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
 
-    $('#s_reload').on('click', function () {
-      window.location.reload();
-    });
-  });
+        $('#s_reload').on('click', function () {
+          window.location.reload();
+        });
+      });
 
-  showSlides("second_display_slider");
+      showSlides("second_display_slider");
 
-  function showSlides(sliderId) {
-    let slider = document.getElementById(sliderId);
-    let slides = slider.getElementsByClassName("mySlides");
+      function showSlides(sliderId) {
+        let slider = document.getElementById(sliderId);
+        let slides = slider.getElementsByClassName("mySlides");
 
-    let slideIndex = slider.dataset.slideIndex;
+        let slideIndex = slider.dataset.slideIndex;
 
-    slideIndex++;
-    if (!slideIndex || slideIndex >= slides.length) {
-      slideIndex = 0;
-    }
+        slideIndex++;
+        if (!slideIndex || slideIndex >= slides.length) {
+          slideIndex = 0;
+        }
 
-    for (let i = 0; i < slides.length; i++) {
-      slides[i].className = slides[i].className.replace("slide-in", "slide-out");
-    }
+        for (let i = 0; i < slides.length; i++) {
+          slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+        }
 
-    slides[slideIndex].classList.remove("slide-out");
-    slides[slideIndex].classList.add("slide-in");
+        slides[slideIndex].classList.remove("slide-out");
+        slides[slideIndex].classList.add("slide-in");
 
-    slider.dataset.slideIndex = slideIndex;
-    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
-  }
-</script>
+        slider.dataset.slideIndex = slideIndex;
+        setTimeout(showSlides, 5000, sliderId);
+      }
+    </script>
+</html>