diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index c5101e71..0c59fbc8 100755
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -289,3 +289,149 @@ i.logout_icon{
 .blue{
 	background-color: blue;
 }
+
+.new-design-navbar {
+    background-color: #5856D6;
+    color: white;
+    padding: 0 15px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 50px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    position: relative;
+    z-index: 1030;
+}
+
+.new-design-navbar .container-fluid {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.new-design-navbar .navbar-left-section,
+.new-design-navbar .navbar-right-section {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.new-design-navbar .bars-toggle {
+    color: white;
+    text-decoration: none;
+    margin-right: 15px;
+    padding: 0 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+.new-design-navbar .bars-toggle:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+.new-design-navbar .bars-toggle .material-icons {
+    font-size: 24px;
+    vertical-align: middle;
+}
+
+.new-design-navbar .navbar-brand {
+    color: white !important;
+    display: flex;
+    align-items: center;
+    font-size: 1.1rem; /* Adjust size */
+    font-weight: 500;
+    padding: 0;
+    margin: 0;
+    text-decoration: none;
+}
+.new-design-navbar .navbar-brand:hover {
+    opacity: 0.9;
+}
+
+.new-design-navbar .navbar-brand .material-icons {
+    margin-right: 8px;
+    font-size: 22px;
+    vertical-align: middle;
+}
+
+.new-design-navbar .navbar-right-section .nav-item {
+    display: flex;
+    align-items: center;
+    margin-left: 15px;
+    padding: 0 8px;
+    height: 100%;
+    cursor: default;
+    font-size: 0.9rem;
+}
+.new-design-navbar .navbar-right-section .nav-item .material-icons {
+    margin-right: 5px;
+    font-size: 20px;
+    vertical-align: middle;
+}
+
+.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle {
+    color: white;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 8px;
+}
+.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+
+.new-design-navbar .navbar-right-section .nav-item.dropdown > a .material-icons:last-child { /* Dropdown arrow */
+    margin-left: 2px;
+    margin-right: 0;
+    font-size: 22px;
+}
+
+/* Dropdown Menu Styling */
+.new-design-navbar .dropdown-menu {
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    margin-top: 2px !important;
+}
+.new-design-navbar .dropdown-menu > li > a {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    color: #333;
+    font-size: 14px;
+    text-decoration: none;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.42857143;
+    white-space: nowrap;
+}
+.new-design-navbar .dropdown-menu > li > a:hover,
+.new-design-navbar .dropdown-menu > li > a:focus {
+    background-color: #f5f5f5;
+    color: #333;
+}
+.new-design-navbar .dropdown-menu > li > a .material-icons {
+    margin-right: 12px;
+    color: #777;
+    font-size: 18px;
+    vertical-align: middle;
+}
+.new-design-navbar .dropdown-menu .hidden {
+    display: none;
+}
+
+.material-icons {
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'liga';
+}
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 7bc45725..027a38b0 100755
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,274 +1,274 @@
-<!-- Search Bar -->
-<!-- <div class="search-bar">
-    <div class="search-icon">
-        <i class="material-icons">search</i>
-    </div>
-    <input type="text" placeholder="START TYPING...">
-    <div class="close-search">
-        <i class="material-icons">close</i>
-    </div>
-</div> -->
-<!-- #END# Search Bar -->
-<!-- Top Bar -->
-<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
-<% display_none = (food_court && current_user.role == 'cashier') ? 'd-none' : '' %>
-<%if !request.path_info.include?('second_display') %>
-<nav class="navbar">
+<%# Top Bar - New Design %>
+<% if !request.path_info.include?('second_display') %>
+<nav class="navbar new-design-navbar">
     <div class="container-fluid">
-        <div class="navbar-header">
-            <!-- <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a> -->
-            <%if current_login_employee.role !="waiter" %>
-                <a href="javascript:void(0);" class="bars"></a>
-                <a class="navbar-brand mbl_view" href="<%= root_path %>" style="margin-left: 20px;">
-            <% else %>
-                <a class="navbar-brand m-0 mbl_view" href="<%= root_path %>">
-            <%end%>
-                <img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo", class="<%= display_none.present? ? 'm-0' : '' %>" />
-                <span class="navbar-brand-txt">SX Restaurant</span>
-            </a>
-
-            <span class="navbar-brand m-0">
-                <span id="others_payment"></span>
-            </span>
-        </div>
-        <!-- Start Shop Info -->
-        <div class="navbar-right m-auto">
-            <span class="navbar-brand navbar-brand-txt"><%= current_shop.name %></span>
-        </div>
-        <% if current_login_employee.role == "cashier" %>
-            <div class="mr-4">
-                <a class="pt-2" href="<%= settings_out_of_stock_index_path %>">
-                    <i class="material-icons" style="margin:25%; color:white;">phonelink_erase</i>
+        <div class="navbar-left-section">
+            <% if current_login_employee.role != "waiter" %>
+                <a href="javascript:void(0);" class="bars bars-toggle">
+                    <!-- <i class="material-icons">menu</i> -->
                 </a>
+            <% end %>
+            <%# Brand Name and Icon %>
+            <a class="navbar-brand" href="<%= root_path %>">
+                <img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo" />
+                <span>SX Restaurant</span>
+            </a>
+        </div>
+
+        <div class="navbar-right-section">
+            <%# Connection Status %>
+            <div class="nav-item" id="connection-status-item">
+                <i class="material-icons">wifi</i>
+                <span class="connection-status-text">Connecting...</span>
             </div>
-        <%end%>
-        <!-- End Shop Info -->
-        <%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
-        <% if !food_court %>
-          <div class="navbar-right m-auto">
-              <% if order_reservation %>
-                  <div class="online_order">
-                      <span class="navbar-brand navbar-brand-txt header-default-color">
-                        <% if request.user_agent.include? "Mobile" %>
-                          <img src="/assets/online_order_icon.png" alt="<%= t :order_reservation %>" />
-                        <% else %>
-                          <%= t :order_reservation %>
-                        <% end %>
+
+            <%# User Dropdown %>
+            <div class="nav-item dropdown">
+                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <i class="material-icons">person</i>
+                    <span><%= current_login_employee.name %></span>
+                </a>
+                <ul class="dropdown-menu">
+                    <% if current_login_employee.role == "administrator" %>
+                    <li>
+                        <a href="<%= settings_shops_path %>" class="waves-effect waves-block">
+                            <i class="material-icons">store</i>
+                            <span>Shop Info</span>
+                        </a>
+                    </li>
+                    <% end %>
+                    <li>
+                        <a href="javascript:void(0);" class="team_viewer waves-effect waves-block">
+                           <i class="material-icons">touch_app</i>
+                            <span>Team Viewer</span>
+                        </a>
+                    </li>
+                    <% if current_login_employee.role == "cashier" %>
+                    <li>
+                        <a href="/origami/second_display" class="waves-effect waves-block" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;">
+                            <i class="material-icons">desktop_windows</i>
+                            <span>Second Display</span>
+                        </a>
+                    </li>
+                      <% food_court = Lookup.find_by_lookup_type_and_value("food_court", "1") %>
+                      <% if food_court && ShiftSale.current_open_shift(current_user) %>
+                      <li>
+                          <a href="javascript:void(0);" class="close_cashier waves-effect waves-block">
+                              <i class="material-icons">highlight_off</i>
+                              <span>Close Cashier</span>
+                          </a>
+                      </li>
+                      <% end %>
+                    <% end %>
+                    <li>
+                        <a href="javascript:void(0);" class="delete logout waves-effect waves-block" data-ref="<%= logout_path %>" data-method="delete">
+                            <i class="material-icons">exit_to_app</i>
+                            <span>Logout</span>
+                        </a>
+                         <span class="hidden" id="delete_text">
+                            <h6>Are you sure you want to Logout ?</h6>
                         </span>
-                      <span class="order_no"></span>
-                  </div>
-              <% end %>
-          </div>
-        <% end %>
-
-        <!-- Start Quick Access for Cashier -->
-        <!-- <div class="navbar-right m-auto">
-            <a href="#" class="dropdown-toggle waves-block col-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="flase">
-                <span><%= t :cashier %></span>
-            </a>
-            <ul class="dropdown-menu">
-                <li>
-                    <p class="waves-effect waves-block p-l-20 m-b-5">
-                        <a href="<%= origami_root_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">monetization_on</i>
-                            <span class="font-15 shopinfo dinein" ><%= t :dine_in %></span>
-                        </a>
-                    </p>
-                </li>
-                <li>
-                    <p class="waves-effect waves-block p-l-20 m-b-5">
-                        <a href="<%= origami_quick_service_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">restaurant_menu</i>
-                            <span class="font-15 shopinfo quick_service" ><%= t :quick_service %></span>
-                        </a>
-                    </p>
-                </li>
-                <% if order_reservation %>
-                <li>
-                    <p class="waves-effect waves-block p-l-20 m-b-5">
-                        <a href="<%= origami_order_reservation_index_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">room_service</i>
-                            <span class="font-15 col-black online_order" ><%= t :order_reservation %></span>
-                            <span class="order_no"></span>
-                        </a>
-                    </p>
-                </li>
-                <% end %>
-                <li>
-                    <p class="waves-effect waves-block p-l-20 m-b-5">
-                        <a href="<%= origami_reservation_index_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">book</i>
-                            <span class="font-15 col-black reservation" ><%= t :reservation %></span>
-                        </a>
-                    </p>
-                </li>
-                <li>
-                    <p class="waves-effect waves-block p-l-20 m-b-5">
-                        <a href="<%= origami_food_court_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">restaurant</i>
-                            <span class="font-15 col-black foodcourt" ><%= t :foodcourt %></span>
-                        </a>
-                    </p>
-                </li>
-            </ul>
-        </div> -->
-        <!-- End Quick Access for Cashier -->
-
-        <!-- Start Delete confirrm text !-->
-
-        <div class="navbar-right toggle_mbl">
-            <a href="javascript:void(0);" class="dropdown-toggle waves-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                <% if current_login_employee %>
-                   <span>
-                     <% if request.user_agent.include? "Mobile" %>
-                       <img src="/assets/user_icon.png" alt="<%= current_login_employee.name %>" />
-                     <% else %>
-                       <%= current_login_employee.name %>
-                     <% end %>
-                   </span>
-                <% end %>
-            </a>
-            <ul class="dropdown-menu">
-                <%if current_login_employee.role =="administrator" %>
-                <li>
-                    <p class="waves-effect waves-block p-l-30 m-b-5">
-                        <a href="<%= settings_shops_path %>" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">info</i>
-                            <span class="font-15 shopinfo" >Shop Info</span>
-                        </a>
-                    </p>
-                </li>
-                <% end %>
-                <li>
-                    <p class="waves-effect waves-block p-l-30 m-b-5 team_viewer">
-                       <i class="material-icons font-7 logout_icon shopinfo">touch_app</i>
-                        <span class="font-15 shopinfo" >Team Viewer</span>
-                    </p>
-                </li>
-                <%if current_login_employee.role =="cashier"%>
-                <li>
-                    <p class="waves-effect waves-block p-l-30 m-b-5">
-                        <a href="/origami/second_display" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;" style="text-decoration: none;">
-                            <i class="material-icons font-7 logout_icon shopinfo">info</i>
-                            <span class="font-15 shopinfo" >Second Display</span>
-                        </a>
-                    </p>
-                </li>
-                  <%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
-                  <% if food_court && ShiftSale.current_open_shift(current_user)%>
-                  <li>
-                      <p class="waves-effect waves-block p-l-30 m-b-5 close_cashier">
-                          <i class="material-icons font-7 logout_icon">close</i>
-                          <span class="font-15">Close Cashier</span>
-                      </p>
-                  </li>
-                  <% end %>
-                <% end %>
-
-                <li>
-                    <!-- <p class="delete waves-effect waves-block p-l-30 m-b-5" data-ref="<%=logout_path%>" data-method="delete">
-                        <i class="material-icons font-10 logout_icon">exit_to_app</i>
-                        <span class="font-18">Logout</span>
-                    </p> -->
-                    <p class="delete waves-effect waves-block p-l-30 m-b-5 logout" data-ref="<%= logout_path %>" data-method="delete">
-                        <i class="material-icons font-7 logout_icon">exit_to_app</i>
-                        <span class="font-15">Logout</span>
-                    </p>
-                     <span class="hidden" id="delete_text">
-                        <h6>Are you sure you want to Logout ?</h6>
-                        <!-- <h6>This action can't be undo. </h6> -->
-                    </span>
-                </li>
-            </ul>
-            <!-- NO Need for color Change
-            <a href="javascript:void(0);" class="js-right-sidebar" data-close="true">
-                <i class="material-icons">more_vert</i>
-            </a> -->
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 </nav>
-<%end%>
+
 <script type="text/javascript">
     $(function(){
-        $('.delete').click(function(){
+        $('.delete.logout').click(function(e){
+            e.preventDefault();
             var method    = $(this).attr('data-method');
             var url       = $(this).attr('data-ref');
-            var html_text = $(this).siblings( "#delete_text" ).html();
-            //var page = url.substring(url.lastIndexOf('/') + 1);
+            var html_text = $(this).siblings("#delete_text").html();
             swal({
                 title: "Confirmation",
                 text: html_text,
                 type: "warning",
                 showCancelButton: true,
                 confirmButtonColor: "#DD6B55",
+                confirmButtonText: "Yes, logout!",
                 html: true
             }, function (isConfirm) {
                 if (isConfirm) {
                   $.ajax({
                     type: method,
-                    url: url ,
+                    url: url,
+                    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
                     success: function(data) {
-                        location.href = data.url;
+                        if (data.url) {
+                           location.href = data.url;
+                        } else {
+                           location.reload();
+                        }
+                    },
+                    error: function() {
+                        swal("Error", "Could not process logout.", "error");
                     }
                  });
-                } else {
-                    swal("Cancelled", "Your imaginary file is safe :)", "error");
                 }
             });
         });
 
-        $('.online_order').on('click',function(){
-            window.location.href = '/origami/order_reservation';
-        });
-
-        if(parseInt(getOnlineOrderCount()) > 0){
-            $('.order_no').addClass("order-badge");
-            $('.order_no').html(parseInt(getOnlineOrderCount()));
-        }
-
-        $(".team_viewer").on('click',function(){
-            // /opt/teamviewer/tv_bin/script/teamviewer
+        // TEAM VIEWER
+        $(".team_viewer").on('click',function(e){
+            e.preventDefault();
             $.ajax({
                 type: "POST",
                 data: {},
                 dataType: 'json',
-                url: "/run_teamviewer",
+                url: "<%= 's' %>",
+                headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
                 success: function(data){
                     if(!data.status){
                         window.open('https://www.teamviewer.com', '_blank');
-                        return false;
                     }
+                },
+                error: function() {
+                    window.open('https://www.teamviewer.com', '_blank');
                 }
             });
         });
 
-    });
-    $('.close_cashier').on('click',function(e){
-        e.preventDefault(); // Prevent the href from redirecting directly
-        var linkURL = '/foodcourt/shift/cashier/close';
-        var count = ''
-        var text = ''
-        $.ajax({
-            url: '/foodcourt/current_shift_order_count',
-            method: 'get',
-            success: function(data) {
-                count = JSON.stringify(data)
-                console.log(count)
-                if (count > 0) {
-                    text = "<h5><span style=\"color: #CC0000\"> We have "+count+" pending orders and sales</span> </h5>.<br>Are you sure you want to close cashier?  ";
-                }else{
-                    text = "Are you sure you want to close cashier?";
+        // CLOSE CASHIER
+        $('.close_cashier').on('click',function(e){
+            e.preventDefault();
+            var linkURL = '/foodcourt/shift/cashier/close';
+            var countText = '';
+            var alertText = '';
+
+            $.ajax({
+                url: '/foodcourt/current_shift_order_count', // Ensure this path is correct
+                method: 'GET',
+                success: function(data) {
+                    // Assuming data is a number or an object like { count: X }
+                    var pendingOrders = 0;
+                    if (typeof data === 'number') {
+                        pendingOrders = data;
+                    } else if (data && typeof data.count === 'number') {
+                        pendingOrders = data.count;
+                    } else {
+                         // Try to parse if it's a stringified number, as in original code
+                        pendingOrders = parseInt(data) || 0;
+                    }
+
+                    if (pendingOrders > 0) {
+                        alertText = "<h5><span style=\"color: #CC0000\">We have " + pendingOrders + " pending orders and sales.</span></h5><br>Are you sure you want to close cashier?";
+                    } else {
+                        alertText = "Are you sure you want to close cashier?";
+                    }
+
+                    swal({
+                      title: "Alert!",
+                      text: alertText,
+                      type: "warning",
+                      showCancelButton: true,
+                      confirmButtonText: "Yes, close it!",
+                      html: true
+                    }, function(isConfirm) {
+                        if (isConfirm) {
+                            window.location.href = linkURL; // If this needs to be a POST/DELETE, use AJAX
+                        }
+                    });
+                },
+                error: function() {
+                    swal("Error", "Could not check pending orders. Please try again.", "error");
                 }
-                swal({
-                  title: "Alert!",
-                  text: text,
-                  type: "warning",
-                  showCancelButton: true,
-                  html: true
-                }, function() {
-                    window.location.href = linkURL;
-                });
-            }
+            });
+        });
+    });
+
+    // Check Internet Connection status
+    document.addEventListener('DOMContentLoaded', function() {
+      function updateConnectionStatus() {
+        const statusTextEl = document.querySelector('.connection-status-text');
+        console.log('checking internet connection');
+        if (!statusTextEl) {
+          return;
+        }
+
+        statusTextEl.innerText = "Connecting";
+        statusTextEl.style.color = "white";
+        document.querySelector('#connection-status-item i').style.color = "white";
+
+
+
+        fetch("https://www.google.com/generate_204?_=" + new Date().getTime(), {
+            method: 'GET',
+            mode: 'no-cors',
+            cache: 'no-store'
         })
-      })
+        .then(function(res) {
+            console.log(res);
+            statusTextEl.innerText = "Online";
+            statusTextEl.style.color = "lightgreen";
+            document.querySelector('#connection-status-item i').style.color = "lightgreen";
+        })
+        .catch(function(e) {
+            console.log("error", e);
+            statusTextEl.innerText = "Offline";
+            statusTextEl.style.color = "#ffcdd2";
+            document.querySelector('#connection-status-item i').style.color = "#ffcdd2";
+        });
+      }
+
+      updateConnectionStatus();
+      setInterval(updateConnectionStatus, 10000);
+    });
+
+    // navbar dropdown menu handler
+    document.addEventListener('DOMContentLoaded', function () {
+        const dropdownToggles = document.querySelectorAll('.new-design-navbar .dropdown-toggle');
+
+        dropdownToggles.forEach(function (toggle) {
+            const menu = toggle.nextElementSibling;
+
+            if (!menu || !menu.classList.contains('dropdown-menu')) {
+                // console.warn('Dropdown menu not found or incorrectly structured for toggle:', toggle);
+                return;
+            }
+
+            toggle.addEventListener('click', function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const isCurrentlyOpen = menu.classList.contains('show');
+                const allMenusInNavbar = toggle.closest('.new-design-navbar').querySelectorAll('.dropdown-menu');
+
+                allMenusInNavbar.forEach(function(otherMenu) {
+                    if (otherMenu !== menu && otherMenu.classList.contains('show')) {
+                        otherMenu.classList.remove('show');
+                        const otherToggle = otherMenu.previousElementSibling;
+                        if (otherToggle && otherToggle.classList.contains('dropdown-toggle')) {
+                              otherToggle.setAttribute('aria-expanded', 'false');
+                        }
+                    }
+                });
+
+                if (isCurrentlyOpen) {
+                    menu.classList.remove('show');
+                    toggle.setAttribute('aria-expanded', 'false');
+                } else {
+                    menu.classList.add('show');
+                    toggle.setAttribute('aria-expanded', 'true');
+                }
+            });
+        });
+    });
+
+    // close dropdown menu when click away
+    document.addEventListener('click', function (event) {
+        const openMenus = document.querySelectorAll('.new-design-navbar .dropdown-menu.show');
+        openMenus.forEach(function(menu) {
+            const toggle = menu.previousElementSibling;
+            if (!menu.contains(event.target) && toggle && !toggle.contains(event.target)) {
+                menu.classList.remove('show');
+                if (toggle.classList.contains('dropdown-toggle')) {
+                    toggle.setAttribute('aria-expanded', 'false');
+                }
+            }
+        });
+    });
 </script>
+<% end %>
diff --git a/public/500.html b/public/500.html
index 061abc58..5cd5b4d7 100755
--- a/public/500.html
+++ b/public/500.html
@@ -1,66 +1,134 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>We're sorry, but something went wrong (500)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  body {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Server Error - 500</title>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    Oxygen, Ubuntu, Cantarell, sans-serif;
+            }
 
-  div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
+            body {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 20px;
+            }
 
-  div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
+            .error-container {
+                background: rgba(255, 255, 255, 0.95);
+                border-radius: 20px;
+                padding: 40px;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+                text-align: center;
+                max-width: 600px;
+                width: 100%;
+                transition: transform 0.3s ease;
+            }
 
-  h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
+            .error-container:hover {
+                transform: translateY(-5px);
+            }
 
-  div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
-</head>
+            .error-icon {
+                font-size: 80px;
+                color: #ef4444;
+                margin-bottom: 20px;
+                animation: pulse 1.5s infinite;
+            }
 
-<body>
-  <!-- This file lives in public/500.html -->
-  <div class="dialog">
-    <div>
-      <h1>We're sorry, but something went wrong.</h1>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
-  </div>
-</body>
+            h1 {
+                color: #1a1a1a;
+                font-size: 2.5em;
+                margin-bottom: 15px;
+            }
+
+            p {
+                color: #4a5568;
+                font-size: 1.1em;
+                line-height: 1.6;
+                margin-bottom: 30px;
+            }
+
+            .home-button {
+                display: inline-block;
+                background: #4f46e5;
+                color: white;
+                padding: 12px 30px;
+                border-radius: 25px;
+                text-decoration: none;
+                font-weight: 500;
+                transition: all 0.3s ease;
+                margin-top: 20px;
+            }
+
+            .home-button:hover {
+                background: #4338ca;
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            }
+
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.1);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            @media (max-width: 480px) {
+                .error-container {
+                    padding: 25px;
+                }
+
+                h1 {
+                    font-size: 2em;
+                }
+
+                p {
+                    font-size: 1em;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="error-container">
+            <div class="error-icon">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="80"
+                    height="80"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#ef4444"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12" y2="16" />
+                </svg>
+            </div>
+            <h1>Internal Server Error</h1>
+            <p>Something went wrong.</p>
+            <p>
+                Please try again later or contact support if the problem
+                persists.
+            </p>
+            <a href="/" class="home-button">Return to Homepage</a>
+        </div>
+    </body>
 </html>