diff --git a/src/main/resources/templates/user/viewhistory.html b/src/main/resources/templates/user/viewhistory.html
index 078dbb47..3223d607 100644
--- a/src/main/resources/templates/user/viewhistory.html
+++ b/src/main/resources/templates/user/viewhistory.html
@@ -769,11 +769,19 @@
                                                                 </p>
 
                                                             </td>
+             
+
                                                             <td>
                                                                 <a class="view-button">
-                                                                    <span class="badge bg-primary"
+                                                                 <!--  <span class="badge bg-primary"
                                                                         style="cursor: pointer;"
-                                                                        th:onclick="showBookingDetails([[${booking.booking_id}]])">View</span>
+                                                                        th:onclick="showBookingDetails([[${booking.booking_id}]])">View</span>-->
+                                                                        <span class="badge bg-primary"
+      style="cursor: pointer;"
+      th:onclick="showBookingDetails([[${booking.booking_id}]], [[${bookingRefIds[booking.booking_id]}]])">
+      View
+</span>
+
                                                                 </a>
                                                                 <!--<a class="view-button">
                                                             <span class="badge bg-primary"
@@ -790,13 +798,26 @@
                                     </div>
 
                                     <input type="hidden" id="serverDate" th:value=${serverDate}>
+                                  
+
+                                 
+
+
+
                                     <div class="modal fade backdrop" id="showBookingDetails" data-backdrop="static"
                                         tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
                                         aria-hidden="true">
+                                      
+
+
                                         <div class="modal-dialog modal-lg" role="document">
                                             <div class="modal-content" id="printableContent">
 
                                                 <form id="regform" onsubmit="return rejectsubmit();">
+                                                    <!--ak-->
+                                                        <!-- Add these -->
+    <input type="hidden" id="modalBookingId">
+    <input type="hidden" id="modalRefId">
                                                     <div
                                                         class="block block-rounded block-themed block-transparent mb-0">
 
@@ -1832,9 +1853,14 @@
             function downloadAcknowledgment(event) {
                 event.preventDefault();
                 var bookingId = document.getElementById("booking_id").innerHTML;
+                var refId = document.getElementById("modalRefId").value;
 
                 // Redirect to the acknowledgment URL in the same tab
-                window.location.href = '/communityhall/user/acknowledgement?bookingId=' + encodeURIComponent(bookingId);
+            window.location.href = '/communityhall/user/acknowledgement?bookingId=' + encodeURIComponent(bookingId);
+              // var refId = document.getElementById("ref_" + bookingId).value;
+              console.log("Ref ID: " + refId);
+
+    window.location.href = '/communityhall/user/acknowledgement?ref_id=' + encodeURIComponent(refId);
             }
 
             function getTimeSlot(slotValue) {
@@ -1850,7 +1876,8 @@
                 return timeSlot;
             }
 
-            function showBookingDetails(bookingId) {
+           // function showBookingDetails(bookingId) {
+           function showBookingDetails(bookingId, refId) {
                 $.ajax({
                     url: '/communityhall/user/api/viewAllBookingDetails',
                     method: 'GET',
@@ -2011,6 +2038,8 @@
                             document.getElementById("refundamountDetails").style.display = "none";
                         }
                         // Show the modal
+                           document.getElementById("modalBookingId").value = bookingId;
+    document.getElementById("modalRefId").value = refId;
                         $('#showBookingDetails').modal('show');
                     },
                     error: function () {