diff --git a/public/index.html b/public/index.html
index 39f4550..44765a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,275 +3,795 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GroceryBucket</title>
+    <title>GroceryBucket - Online Grocery Store</title>
     <link rel="shortcut icon" href="assets/favIcon.png" type="image/x-icon">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <style>
+        /* ====================================================
+           WINDOWS 2000 / CLASSIC UI THEME
+        ==================================================== */
+
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-          background: linear-gradient(to right, rgb(2, 39, 32), 55%, rgb(11, 109, 59) 80%);
-          color: white;
-        }
-    
-        header{
-          background-color:  rgb(2, 39, 32);
-          position: sticky; 
-          top: 0;
-          z-index: 1000;
-          width: 100%; 
-        }
-    
-        #lp-div1 {
-          margin-top: 10%;
-        }
-    
-        #btn-category button {
-          margin: 5px;
-        }
-    
+            margin: 0;
+            padding: 0;
+            background-color: #008080; /* Win2000 teal desktop */
+            font-family: Tahoma, Arial, sans-serif;
+            font-size: 11px;
+            color: #000000;
+            overflow-x: hidden;
+        }
+
+        /* ---- Win2000 Title Bar ---- */
+        .win-titlebar {
+            background: linear-gradient(to right, #0a246a, #a6caf0);
+            color: #ffffff;
+            font-weight: bold;
+            font-size: 12px;
+            padding: 3px 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            user-select: none;
+        }
+
+        .win-titlebar .title-left {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .win-titlebar-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .win-titlebar-btns {
+            display: flex;
+            gap: 2px;
+        }
+
+        .win-titlebar-btns button {
+            width: 16px;
+            height: 14px;
+            font-size: 9px;
+            line-height: 1;
+            border: 1px solid #000;
+            border-top-color: #fff;
+            border-left-color: #fff;
+            background-color: #c0c0c0;
+            cursor: pointer;
+            padding: 0;
+            font-family: Tahoma, Arial, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .win-titlebar-btns button:active {
+            border-top-color: #000;
+            border-left-color: #000;
+            border-bottom-color: #fff;
+            border-right-color: #fff;
+        }
+
+        /* ---- Win2000 Window / Panel ---- */
+        .win-window {
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-color: #ffffff #808080 #808080 #ffffff;
+            box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #606060;
+        }
+
+        .win-panel {
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #ffffff;
+            border-right-color: #ffffff;
+        }
+
+        .win-inset {
+            border: 2px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #dfdfdf;
+            border-right-color: #dfdfdf;
+            background-color: #ffffff;
+        }
+
+        /* ---- Win2000 Buttons ---- */
+        .win-btn {
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-top-color: #ffffff;
+            border-left-color: #ffffff;
+            border-bottom-color: #808080;
+            border-right-color: #808080;
+            box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
+            font-family: Tahoma, Arial, sans-serif;
+            font-size: 11px;
+            color: #000000;
+            padding: 3px 12px;
+            cursor: pointer;
+            min-width: 75px;
+        }
+
+        .win-btn:active,
+        .win-btn.active {
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #dfdfdf;
+            border-right-color: #dfdfdf;
+            box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
+            padding: 4px 11px 2px 13px;
+        }
+
+        .win-btn:focus {
+            outline: 1px dotted #000;
+            outline-offset: -4px;
+        }
+
+        .win-btn-default {
+            border: 2px solid #000;
+        }
+
+        .win-btn-small {
+            padding: 1px 6px;
+            min-width: 50px;
+            font-size: 10px;
+        }
+
+        /* ---- Win2000 Inputs ---- */
+        .win-input {
+            border: 2px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #dfdfdf;
+            border-right-color: #dfdfdf;
+            background-color: #ffffff;
+            font-family: Tahoma, Arial, sans-serif;
+            font-size: 11px;
+            padding: 2px 4px;
+            color: #000;
+        }
+
+        .win-input:focus {
+            outline: none;
+        }
+
+        .win-select {
+            border: 2px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #dfdfdf;
+            border-right-color: #dfdfdf;
+            background-color: #ffffff;
+            font-family: Tahoma, Arial, sans-serif;
+            font-size: 11px;
+            padding: 2px 4px;
+            color: #000;
+            width: 100%;
+        }
+
+        /* ---- Menubar ---- */
+        .win-menubar {
+            background-color: #d4d0c8;
+            border-bottom: 1px solid #808080;
+            padding: 2px 4px;
+            display: flex;
+            align-items: center;
+            gap: 0;
+        }
+
+        .win-menubar .menu-item {
+            padding: 3px 8px;
+            cursor: pointer;
+            font-size: 11px;
+            text-decoration: none;
+            color: #000;
+        }
+
+        .win-menubar .menu-item:hover {
+            background-color: #0a246a;
+            color: #fff;
+        }
+
+        /* ---- Toolbar ---- */
+        .win-toolbar {
+            background-color: #d4d0c8;
+            border-bottom: 1px solid #808080;
+            padding: 2px 6px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            flex-wrap: wrap;
+        }
+
+        .win-toolbar-sep {
+            width: 2px;
+            height: 22px;
+            border-left: 1px solid #808080;
+            border-right: 1px solid #fff;
+            margin: 0 3px;
+        }
+
+        /* ---- Status Bar ---- */
+        .win-statusbar {
+            background-color: #d4d0c8;
+            border-top: 1px solid #808080;
+            padding: 2px 6px;
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .win-statusbar-panel {
+            border: 1px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #fff;
+            border-right-color: #fff;
+            padding: 1px 6px;
+            font-size: 10px;
+            flex: 1;
+        }
+
+        /* ---- Taskbar ---- */
+        #win-taskbar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 30px;
+            background: linear-gradient(to bottom, #1f5fa6 0%, #245dce 40%, #3b6ecf 50%, #0a3a8c 100%);
+            border-top: 1px solid #0040a0;
+            display: flex;
+            align-items: center;
+            padding: 0 4px;
+            z-index: 9999;
+            gap: 4px;
+        }
+
+        #win-start-btn {
+            background: linear-gradient(to bottom, #57a918 0%, #3c8c12 60%, #2a6e00 100%);
+            border: 1px solid #1a5500;
+            border-radius: 0 10px 10px 0;
+            color: #fff;
+            font-weight: bold;
+            font-size: 12px;
+            font-family: Tahoma, Arial, sans-serif;
+            padding: 2px 12px 2px 8px;
+            cursor: pointer;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        #win-start-btn:active {
+            background: linear-gradient(to bottom, #2a6e00 0%, #3c8c12 100%);
+        }
+
+        .taskbar-clock {
+            margin-left: auto;
+            background: rgba(0,0,40,0.3);
+            border: 1px solid rgba(0,0,80,0.5);
+            padding: 2px 8px;
+            color: #fff;
+            font-size: 11px;
+            font-family: Tahoma, Arial, sans-serif;
+        }
+
+        .taskbar-task {
+            background: linear-gradient(to bottom, #2a6ab5 0%, #1a4e99 100%);
+            border: 1px solid #0a2f6e;
+            border-top-color: #4a8ace;
+            border-left-color: #4a8ace;
+            color: #fff;
+            font-size: 11px;
+            font-family: Tahoma, Arial, sans-serif;
+            padding: 2px 10px;
+            height: 22px;
+            cursor: pointer;
+            white-space: nowrap;
+            max-width: 160px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* ---- Section Title with Win2000 Groupbox style ---- */
+        .win-groupbox {
+            border: 1px solid #808080;
+            padding: 8px;
+            margin: 6px 0;
+            position: relative;
+        }
+
+        .win-groupbox-title {
+            position: absolute;
+            top: -7px;
+            left: 8px;
+            background-color: #d4d0c8;
+            padding: 0 4px;
+            font-size: 11px;
+            font-weight: bold;
+        }
+
+        /* ---- Hero Banner ---- */
+        #hero-section {
+            background-color: #d4d0c8;
+            padding: 16px;
+        }
+
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            border: 1px solid #808080;
+            background-color: #c0c0c0;
+            padding: 2px 8px;
+            font-size: 10px;
+            margin-bottom: 8px;
+        }
+
+        #hero-section h1 {
+            font-size: 22px;
+            font-weight: bold;
+            margin: 4px 0;
+            color: #000080;
+            font-family: Tahoma, Arial, sans-serif;
+        }
+
+        #hero-section h2 {
+            font-size: 14px;
+            font-weight: normal;
+            color: #444;
+            margin: 2px 0 10px 0;
+        }
+
+        /* ---- Category buttons ---- */
+        #btn-category {
+            background-color: #d4d0c8;
+            padding: 6px 8px;
+            border-top: 1px solid #808080;
+            border-bottom: 1px solid #808080;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+            align-items: center;
+        }
+
+        #btn-category .cat-label {
+            font-size: 11px;
+            font-weight: bold;
+            margin-right: 4px;
+            color: #000;
+        }
+
+        /* ---- Category images ---- */
+        #img-category {
+            display: flex;
+            gap: 6px;
+            padding: 8px;
+            background-color: #d4d0c8;
+            border-bottom: 2px solid #808080;
+            overflow-x: auto;
+        }
+
+        #img-category .cat-img-wrap {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            cursor: pointer;
+            border: 2px solid;
+            border-top-color: #ffffff;
+            border-left-color: #ffffff;
+            border-bottom-color: #808080;
+            border-right-color: #808080;
+            padding: 2px;
+            background-color: #c0c0c0;
+        }
+
+        #img-category .cat-img-wrap:hover {
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #ffffff;
+            border-right-color: #ffffff;
+            background-color: #b0b0b0;
+        }
+
         #img-category img {
-          margin: 1%;
-          border-radius: 20px;
+            width: 200px;
+            height: 110px;
+            object-fit: cover;
+            display: block;
+        }
+
+        #img-category .cat-img-label {
+            font-size: 10px;
+            padding: 2px 4px;
+            text-align: center;
+        }
+
+        /* ---- Product area layout ---- */
+        #product-area {
+            display: flex;
+            background-color: #d4d0c8;
+            min-height: 400px;
+        }
+
+        /* ---- Sidebar ---- */
+        #sidebar {
+            width: 160px;
+            min-width: 160px;
+            background-color: #d4d0c8;
+            border-right: 2px solid;
+            border-right-color: #808080;
+            padding: 8px 6px;
+        }
+
+        #sidebar .sidebar-title {
+            background: linear-gradient(to right, #0a246a, #a6caf0);
+            color: #fff;
+            font-size: 11px;
+            font-weight: bold;
+            padding: 2px 6px;
+            margin-bottom: 6px;
         }
-    
+
+        /* ---- Product cards ---- */
         #card-group {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 20px;
-          justify-content: center;
-        }
-    
-        .card {
-          width: 150px;
-          height: 270px;
-          margin: 5px;
-        }
-    
-        #card-img {
-          height: 100px;
-          width: 90px;
-        }
-    
-        #body-text {
-          font-size: 11px;
-        }
-    
-        #title {
-          font-size: smaller;
-          font-weight: bold;
-          margin-bottom: -1px;
-        }
-    
-        .card-header {
-          background-color: white;
-          padding: 0%;
-        }
-    
-        .card-body {
-          height: 50px;
-          margin-bottom: -1px;
-        }
-    
-        .card-footer {
-          margin-top: -1px;
-        }
-    
-        #btn-add {
-          height: 25px;
-          width: 55px;
-          font-size: 14px;
-        }
-    
-        .overflow-hidden-text {
-          display: -webkit-box;
-          line-clamp: 2;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-    
-        #img-category img:hover{
-          cursor: pointer;
-          box-shadow: 7px 7px 7px  rgba(248, 248, 255, 0.457);
-          transform: scale(1.11);
-        }
-    
-        #btnLogin a{
-          text-decoration: none;
-          color: black;
-        }
-
-        /* ADDED: Loading and error message styles */
-        .loading-spinner {
-          display: none;
-          text-align: center;
-          padding: 40px;
-        }
-
-        .error-message {
-          display: none;
-          background-color: #f8d7da;
-          color: #721c24;
-          padding: 15px;
-          border-radius: 5px;
-          margin: 20px;
-          text-align: center;
-        }
-
-        /* ADDED: Quantity button styles */
-        .qty-btn {
-          width: 30px;
-          height: 30px;
-          padding: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            padding: 8px;
+            justify-content: flex-start;
         }
 
-        @media  (max-width: 700px){
-          #manImg{
-            display: none;
-          }
+        .product-card {
+            width: 140px;
+            background-color: #ffffff;
+            border: 2px solid;
+            border-top-color: #ffffff;
+            border-left-color: #ffffff;
+            border-bottom-color: #808080;
+            border-right-color: #808080;
+            box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #e0e0e0;
+            cursor: pointer;
+            overflow: hidden;
         }
 
-        @media  (max-width: 400px){
-          #manImg{
-            display: none;
-          }
+        .product-card:hover {
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #ffffff;
+            border-right-color: #ffffff;
+        }
+
+        .product-card .card-header {
+            background-color: #f0f0f0;
+            border-bottom: 1px solid #c0c0c0;
+            display: flex;
+            justify-content: center;
+            padding: 4px;
+        }
+
+        .product-card .card-header img {
+            width: 80px;
+            height: 80px;
+            object-fit: contain;
+        }
 
-          #img-category img {
-            width: 180px;
-            height: 120px;
-          }
+        .product-card .card-body {
+            padding: 4px 6px;
+            background-color: #ffffff;
+        }
+
+        .product-card .card-title {
+            font-size: 10px;
+            font-weight: bold;
+            color: #000080;
+            margin: 0 0 2px 0;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .product-card .card-meta {
+            font-size: 9px;
+            color: #444;
+            margin: 1px 0;
+        }
 
-          #img-category{
+        .product-card .card-footer {
+            background-color: #d4d0c8;
+            border-top: 1px solid #a0a0a0;
+            padding: 3px 6px;
             display: flex;
-            flex-wrap: wrap !important;
-            justify-content: space-evenly;
-          }
-
-          .card-header{
-            height: 60px;
-            width: 90px;
-            margin-bottom: 4%;
-          }
-
-          .card-body{
-            height: 40%;
-            width: 100px;
-          }
-
-          .card-footer{
-            height: 60px;
-            width: 100px;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .product-card .card-price {
+            font-size: 11px;
+            font-weight: bold;
+            color: #000080;
+        }
+
+        /* ---- Pagination ---- */
+        .win-pagination {
             display: flex;
-            justify-content: space-around;
-          }
+            justify-content: center;
+            gap: 2px;
+            padding: 8px;
+            background-color: #d4d0c8;
+            border-top: 1px solid #808080;
+        }
 
-          .card{
-            height: 200px;
-            width: 105px;
-            margin-left: 0px;
-            margin-right: 0px;
-          }
+        .win-pagination .page-btn {
+            min-width: 22px;
+            height: 22px;
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-top-color: #ffffff;
+            border-left-color: #ffffff;
+            border-bottom-color: #808080;
+            border-right-color: #808080;
+            font-family: Tahoma, Arial, sans-serif;
+            font-size: 11px;
+            cursor: pointer;
+            padding: 0 4px;
+        }
+
+        .win-pagination .page-btn.active,
+        .win-pagination .page-btn:active {
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #ffffff;
+            border-right-color: #ffffff;
+            background-color: #c0c0c0;
+        }
+
+        .win-pagination .page-btn.disabled {
+            color: #808080;
+            cursor: default;
+        }
 
-          .type{
+        /* ---- Win2000 Modal / Dialog ---- */
+        .win-modal-backdrop {
             display: none;
-          }
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 30px;
+            background: rgba(0,0,0,0.4);
+            z-index: 5000;
+            justify-content: center;
+            align-items: center;
+        }
 
-          #card-img{
-            height: 80px;
-            width: 70px;
-          }
-          
-          #addbtn{
-            height: 30px;
-            width: 51px;
-            font-size: small;
-            margin-left: 6px;
-          }
+        .win-modal-backdrop.show {
+            display: flex;
+        }
 
-          #btnLogin{
+        .win-dialog {
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-color: #ffffff #808080 #808080 #ffffff;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+            min-width: 320px;
+            max-width: 500px;
+            width: 90%;
+            max-height: 80vh;
+            overflow: hidden;
             display: flex;
-            font-size: small;
-            height: 40px;
-          }
-          
-          #btnCart{
-            display: block;
-            font-size: small;
-            height: 40px;
-          }
+            flex-direction: column;
+        }
 
-          #card-group{
-            margin-top: 60%;
-          }
+        .win-dialog-body {
+            overflow-y: auto;
+            padding: 10px;
+            flex: 1;
+        }
 
+        .win-dialog-footer {
+            border-top: 1px solid #808080;
+            padding: 8px 10px;
+            background-color: #d4d0c8;
+            display: flex;
+            justify-content: flex-end;
+            gap: 6px;
         }
-#category, #lstOption {
-    position: -webkit-sticky; /* Support for Safari */
-    position: sticky;         /* The standard property */
-    z-index: 100;
-}
 
-#category {
-    top: 90px; /* Sticks when it hits 90px from the top of the window */
-    background: transparent;
-}
+        /* ---- Toast / Notification Balloon ---- */
+        #toast-container {
+            position: fixed;
+            bottom: 36px;
+            right: 8px;
+            z-index: 9000;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .win-toast {
+            background-color: #ffffcc;
+            border: 1px solid #000080;
+            padding: 6px 10px;
+            font-size: 11px;
+            font-family: Tahoma, Arial, sans-serif;
+            max-width: 220px;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
 
+        /* ---- Table ---- */
+        .win-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 11px;
+        }
 
-#lstOption {
-    top: 140px; /* Adjust this value based on the height of your H2 title */
-}
-        
-      </style>
+        .win-table th {
+            background-color: #d4d0c8;
+            border: 1px solid #808080;
+            padding: 3px 6px;
+            text-align: left;
+            font-weight: bold;
+        }
+
+        .win-table td {
+            border: 1px solid #c0c0c0;
+            padding: 3px 6px;
+            background-color: #ffffff;
+        }
+
+        .win-table tr:nth-child(even) td {
+            background-color: #f0f0f0;
+        }
+
+        /* ---- Loading ---- */
+        #loading-spinner {
+            display: none;
+            text-align: center;
+            padding: 30px;
+            color: #000080;
+        }
+
+        .win-progress-bar {
+            width: 200px;
+            height: 16px;
+            border: 2px solid;
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #fff;
+            border-right-color: #fff;
+            background: #fff;
+            margin: 6px auto;
+            overflow: hidden;
+        }
+
+        .win-progress-fill {
+            height: 100%;
+            background: linear-gradient(to right, #000080, #1084d0);
+            animation: win-progress 1.5s infinite;
+        }
+
+        @keyframes win-progress {
+            0% { width: 0%; margin-left: 0; }
+            50% { width: 60%; margin-left: 20%; }
+            100% { width: 0%; margin-left: 100%; }
+        }
+
+        /* ---- Error ---- */
+        #error-message {
+            display: none;
+            background: #ffdddd;
+            border: 1px solid #cc0000;
+            padding: 8px 12px;
+            margin: 8px;
+            font-size: 11px;
+        }
+
+        /* ---- Responsive ---- */
+        @media (max-width: 600px) {
+            #sidebar { display: none; }
+            #img-category img { width: 140px; height: 80px; }
+            .product-card { width: 120px; }
+            .product-card .card-header img { width: 60px; height: 60px; }
+            #hero-section h1 { font-size: 16px; }
+        }
+
+        /* ---- Scrollbar (IE-style simulation) ---- */
+        ::-webkit-scrollbar { width: 16px; height: 16px; }
+        ::-webkit-scrollbar-track { background-color: #c0c0c0; }
+        ::-webkit-scrollbar-thumb { background-color: #d4d0c8; border: 2px solid; border-top-color: #fff; border-left-color: #fff; border-bottom-color: #808080; border-right-color: #808080; }
+        ::-webkit-scrollbar-button { background-color: #d4d0c8; border: 2px solid; border-top-color: #fff; border-left-color: #fff; border-bottom-color: #808080; border-right-color: #808080; height: 16px; width: 16px; }
+        ::-webkit-scrollbar-corner { background-color: #c0c0c0; }
+
+        /* Add to cart qty buttons */
+        .qty-btn {
+            background-color: #d4d0c8;
+            border: 2px solid;
+            border-top-color: #ffffff;
+            border-left-color: #ffffff;
+            border-bottom-color: #808080;
+            border-right-color: #808080;
+            width: 20px;
+            height: 20px;
+            font-size: 12px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            font-family: Tahoma, Arial, sans-serif;
+        }
+
+        .qty-btn:active {
+            border-top-color: #808080;
+            border-left-color: #808080;
+            border-bottom-color: #ffffff;
+            border-right-color: #ffffff;
+        }
+
+        /* Main window that wraps everything */
+        #main-app-window {
+            margin: 6px;
+            margin-bottom: 36px;
+        }
+    </style>
 
-     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <script>
 
 // Configuration
 const API_BASE_URL = 'https://imposterapi-5.onrender.com/data';
 
-// Utility function to escape HTML and prevent XSS
+// Utility function to escape HTML
 function escapeHtml(text) {
   if (!text) return '';
-  const map = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#039;'
-  };
+  const map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
   return text.toString().replace(/[&<>"']/g, m => map[m]);
 }
 
 $(function () {
-
   let currentPage = 1;
   const limit = 28;
-  let totalPages = 1; // FIXED: Changed from 28 to 1
+  let totalPages = 1;
   let allProducts = [];
-  
-  // FIXED: Track current category and subCategory for pagination
   let currentCategory = 'all';
   let currentSubCategory = 'all';
 
-  function fetchProducts(page = 1, category = 'all', subCategory = 'all') {
-    // FIXED: Save current category and subCategory for pagination
+  // Clock
+  function updateClock() {
+    const now = new Date();
+    const h = String(now.getHours()).padStart(2,'0');
+    const m = String(now.getMinutes()).padStart(2,'0');
+    $('#taskbar-time').text(h + ':' + m);
+  }
+  updateClock();
+  setInterval(updateClock, 30000);
+
+  function fetchProducts(page, category, subCategory) {
+    page = page || 1;
+    category = category || 'all';
+    subCategory = subCategory || 'all';
     currentCategory = category;
     currentSubCategory = subCategory;
-    
+
     let url = `${API_BASE_URL}`;
-    
     if (category !== 'all') {
       url += `/category/${category}`;
       if (subCategory !== 'all') {
-        url += `/sub-category/${subCategory}`; 
+        url += `/sub-category/${subCategory}`;
       }
     }
 
-    // FIXED: Show loading spinner
     $('#loading-spinner').show();
     $('#error-message').hide();
     $('#card-group').hide();
@@ -288,70 +808,77 @@
           allProducts = response.data || [];
           totalPages = response.totalPages || 1;
         }
-        
-        // Slice for current page
+
         const start = (page - 1) * limit;
         const end = start + limit;
         const pageProducts = allProducts.slice(start, end);
-        
+
         $('#card-group').empty();
         pageProducts.forEach(function(value) {
           const card = $(`
-            <div class="col">
-              <div class="card" style="cursor:pointer;">
-                <div align="center" class="card-header">
-                  <img id="card-img" src="${escapeHtml(value.image)}" class="card-img-top" alt="${escapeHtml(value.title)}">
-                </div>
-                <div class="card-body">
-                  <p id="title" class="overflow-hidden-text fw-bold">${escapeHtml(value.title)}</p>
-                  <p id="body-text" class="ms-1">Unit: ${escapeHtml(value.unit)}</p>
-                  <p class="type" id="body-text">Type: ${escapeHtml(value.type)}</p>
-                </div>
-                <div class="card-footer d-flex justify-content-between align-items-center">
-                  <span>&#8377;&nbsp;${escapeHtml(value.price)}</span>
-                  <button id="addbtn" onclick="AddToCart(${value.id})" class="btn btn-outline-success">Add</button>
-                </div>
+            <div class="product-card" data-id="${value.id}">
+              <div class="card-header">
+                <img src="${escapeHtml(value.image)}" alt="${escapeHtml(value.title)}">
+              </div>
+              <div class="card-body">
+                <p class="card-title">${escapeHtml(value.title)}</p>
+                <p class="card-meta">Unit: ${escapeHtml(value.unit)}</p>
+                <p class="card-meta">Type: ${escapeHtml(value.type)}</p>
+              </div>
+              <div class="card-footer">
+                <span class="card-price">&#8377;${escapeHtml(value.price)}</span>
+                <button class="win-btn win-btn-small add-btn" onclick="AddToCart(${value.id})">Add</button>
               </div>
             </div>
           `);
-          card.on("click", function () {
-            $('#modalImage').attr('src', escapeHtml(value.image));
-            $('#modalTitle').text(value.title);
-            $('#modalUnit').text("Unit: " + value.unit);
-            $('#modalType').text("Type: " + value.type);
-            $('#modalPrice').text("₹ " + value.price); // FIXED: Changed to .text() for consistency
-            $('#modalDescription').text(value.description);
-            $('#modalFSSAI').text(value.fssaiLicense);
-            $('#modalOrigin').text(value.countryOfOrigin);
-            $('#modalShelfLife').text(value.shelfLife);
-            $('#productModal .add-to-cart-button').data('product-id', value.id);
-            const modal = new bootstrap.Modal(document.getElementById('productModal'));
-            modal.show();
+          card.on('click', function(e) {
+            if ($(e.target).hasClass('add-btn')) return;
+            openProductModal(value);
           });
           $('#card-group').append(card);
         });
 
         totalPages = response.totalPages || totalPages;
-        currentPage = page; // FIXED: Update currentPage BEFORE updatePaginationButtons
+        currentPage = page;
         updatePaginationButtons();
-
-        // FIXED: Hide loading spinner and show content
         $('#loading-spinner').hide();
         $('#card-group').show();
-
-        $("#card-group")[0].scrollIntoView();
-        
+        $('#card-group')[0].scrollIntoView({ behavior: 'smooth' });
+        updateStatusBar(`Loaded ${pageProducts.length} items`);
       },
-      error: function(xhr, status, error) {
-        console.error("Error fetching data:", error);
-        // FIXED: Show user-visible error message
+      error: function() {
         $('#loading-spinner').hide();
-        $('#error-message').text('Failed to load products. Please try again later.').show();
+        $('#error-message').text('Error: Failed to load products. Please check your connection and try again.').show();
+        updateStatusBar('Error loading products');
       }
     });
   }
 
-  // Event listener for category buttons
+  function openProductModal(value) {
+    $('#modalImage').attr('src', escapeHtml(value.image));
+    $('#modalTitle').text(value.title);
+    $('#modalUnit').text('Unit: ' + value.unit);
+    $('#modalType').text('Type: ' + value.type);
+    $('#modalPrice').text('Price: \u20B9' + value.price);
+    $('#modalDescription').text(value.description || '');
+    $('#modalFSSAI').text(value.fssaiLicense || 'N/A');
+    $('#modalOrigin').text(value.countryOfOrigin || 'N/A');
+    $('#modalShelfLife').text(value.shelfLife || 'N/A');
+    $('#modal-add-btn').data('product-id', value.id);
+    $('#productModal').addClass('show');
+  }
+
+  window.closeProductModal = function() {
+    $('#productModal').removeClass('show');
+  };
+
+  $('#modal-add-btn').on('click', function() {
+    const id = $(this).data('product-id');
+    AddToCart(id);
+    closeProductModal();
+  });
+
+  // Category buttons
   $("#btn-category button").on("click", function () {
     const category = $(this).data("category") || "all";
     const subCategory = $(this).data("sub-category") || "all";
@@ -359,535 +886,501 @@
     fetchProducts(currentPage, category, subCategory);
   });
 
-  // Event listener for image categories
-  $("#img-category img").on("click", function () {
+  // Image categories
+  $(document).on("click", ".cat-img-wrap", function () {
     const category = $(this).data("category") || "all";
     const subCategory = $(this).data("sub-category") || "all";
     currentPage = 1;
     fetchProducts(currentPage, category, subCategory);
   });
 
-  // Event listener for the dropdown
+  // Dropdown filter
   $("#lstOption").on("change", function() {
-    const selectedCategory = $(this).val();
     currentPage = 1;
-    fetchProducts(currentPage, selectedCategory, 'all');
+    fetchProducts(currentPage, $(this).val(), 'all');
   });
 
-  // Initial load
-  fetchProducts();
+  // Search
+  $('#search-btn').on('click', function() {
+    showToast('Search feature coming soon!');
+  });
 
-  $('#productModal').on('click', '.add-to-cart-button', function() {
-    const productId = $(this).data('product-id');
-    AddToCart(productId);
+  $('#search-input').on('keypress', function(e) {
+    if (e.which === 13) $('#search-btn').click();
   });
 
-  
-  function updatePaginationButtons() {
-    // Clear existing page buttons except prev and next
-    $(".pagination .page-item:not(:first-child):not(:last-child)").remove();
+  // Pagination
+  $(document).on('click', '.win-pagination .page-btn', function() {
+    if ($(this).hasClass('disabled') || $(this).hasClass('active')) return;
+    const label = $(this).data('page');
+    if (label === 'prev') {
+      if (currentPage > 1) fetchProducts(currentPage - 1, currentCategory, currentSubCategory);
+    } else if (label === 'next') {
+      if (currentPage < totalPages) fetchProducts(currentPage + 1, currentCategory, currentSubCategory);
+    } else {
+      fetchProducts(parseInt(label), currentCategory, currentSubCategory);
+    }
+  });
 
-    // Add page buttons
+  function updatePaginationButtons() {
+    const $pg = $('.win-pagination');
+    $pg.empty();
+    const prev = $(`<button class="page-btn win-btn${currentPage === 1 ? ' disabled' : ''}" data-page="prev">&lt;&lt; Prev</button>`);
+    $pg.append(prev);
     for (let i = 1; i <= totalPages; i++) {
-      const pageItem = $(`<li class="page-item"><a class="page-link" href="#">${i}</a></li>`);
-      $(".pagination .page-item:last-child").before(pageItem);
+      const btn = $(`<button class="page-btn win-btn${i === currentPage ? ' active' : ''}" data-page="${i}">${i}</button>`);
+      $pg.append(btn);
     }
+    const next = $(`<button class="page-btn win-btn${currentPage === totalPages ? ' disabled' : ''}" data-page="next">Next &gt;&gt;</button>`);
+    $pg.append(next);
+  }
 
-    // Set active and disabled
-    $(".pagination .page-item").removeClass("active disabled");
-    $(".pagination .page-item:nth-child(" + (currentPage + 1) + ")").addClass("active");
-
-    $("#prevPage").toggleClass("disabled", currentPage === 1);
-    $("#nextPage").toggleClass("disabled", currentPage === totalPages);
+  function updateStatusBar(msg) {
+    $('#statusbar-msg').text(msg);
   }
 
-  // Event listeners for pagination links
-  $(".pagination").on("click", ".page-item a", function (e) {
-    e.preventDefault();
-    const clickedPage = $(this).text();
-    if (!isNaN(clickedPage)) {
-      // FIXED: Pass current category and subCategory to maintain filter
-      fetchProducts(parseInt(clickedPage), currentCategory, currentSubCategory);
-    } else if ($(this).attr("aria-label") === "Previous" && currentPage > 1) {
-      // FIXED: Pass current category and subCategory to maintain filter
-      fetchProducts(currentPage - 1, currentCategory, currentSubCategory);
-    } else if ($(this).attr("aria-label") === "Next" && currentPage < totalPages) {
-      // FIXED: Pass current category and subCategory to maintain filter
-      fetchProducts(currentPage + 1, currentCategory, currentSubCategory);
-    }
-  });
+  // Initial load
+  fetchProducts();
+  updateStatusBar('Connecting to GroceryBucket server...');
 
-  // Add IDs to the 'Previous' and 'Next' buttons
-  $(".pagination .page-item:first-child a").attr("id", "prevPage");
-  $(".pagination .page-item:last-child a").attr("id", "nextPage");
+  // Cart modal
+  $('#cart-modal-btn').on('click', function() {
+    ShowCartClick();
+    $('#cartModal').addClass('show');
+  });
 
+  window.closeCartModal = function() {
+    $('#cartModal').removeClass('show');
+  };
 });
 
 
-function ShowCartClick() {
-    document.querySelector("tbody").innerHTML = "";
-    let totalAmount = 0;
-
-    for (var item of cartItems) {
-        var tr = document.createElement("tr");
-        var tdImage = document.createElement("td");
-        var tdTitle = document.createElement("td");
-        var tdQuantity = document.createElement("td");
-        var tdPrice = document.createElement("td");
-        var tdActions = document.createElement("td");
-
-        tdTitle.innerHTML = item.title;
-        
-        // FIXED: Show total price for this item (price × quantity)
-        const itemTotal = parseFloat(item.price) * item.quantity;
-        tdPrice.innerHTML = `₹${itemTotal.toFixed(2)}`;
-        
-        // FIXED: Create quantity controls with +/- buttons
-        tdQuantity.innerHTML = `
-            <div class="d-flex align-items-center justify-content-center gap-2">
-                <button class="btn btn-sm btn-outline-secondary qty-btn" onclick="decrementQuantity(${item.id})">-</button>
-                <span class="fw-bold">${item.quantity}</span>
-                <button class="btn btn-sm btn-outline-secondary qty-btn" onclick="incrementQuantity(${item.id})">+</button>
-            </div>
-        `;
-        
-        // FIXED: Add remove button
-        tdActions.innerHTML = `
-            <button class="btn btn-sm btn-danger" onclick="removeFromCart(${item.id})">
-                <i class="bi bi-trash"></i>
-            </button>
-        `;
-
-        var img = document.createElement("img");
-        img.src = item.image;
-        img.width = "100";
-        img.height = "100";
+/* ===== CART LOGIC ===== */
+var cartItems = [];
+var count = 0;
 
-        tdImage.appendChild(img);
+function ShowCartClick() {
+  document.querySelector("#cart-tbody").innerHTML = "";
+  let totalAmount = 0;
 
-        tr.appendChild(tdImage);
-        tr.appendChild(tdTitle);
-        tr.appendChild(tdQuantity);
-        tr.appendChild(tdPrice);
-        tr.appendChild(tdActions);
+  if (cartItems.length === 0) {
+    $('#cart-tbody').html('<tr><td colspan="5" style="text-align:center;padding:16px;color:#808080;">Your cart is empty</td></tr>');
+    $('#cart-total-row').hide();
+    return;
+  }
 
-        document.querySelector("tbody").appendChild(tr);
+  for (var item of cartItems) {
+    const itemTotal = parseFloat(item.price) * item.quantity;
+    var tr = $(`
+      <tr>
+        <td><img src="${escapeHtml(item.image)}" width="40" height="40" style="object-fit:contain;border:1px solid #c0c0c0;"/></td>
+        <td style="max-width:120px;overflow:hidden;font-size:10px;">${escapeHtml(item.title)}</td>
+        <td>
+          <div style="display:flex;align-items:center;gap:2px;">
+            <button class="qty-btn" onclick="decrementQuantity(${item.id})">-</button>
+            <span style="min-width:16px;text-align:center;">${item.quantity}</span>
+            <button class="qty-btn" onclick="incrementQuantity(${item.id})">+</button>
+          </div>
+        </td>
+        <td style="font-weight:bold;color:#000080;">&#8377;${itemTotal.toFixed(2)}</td>
+        <td><button class="win-btn win-btn-small" style="background:#ffdddd;color:#cc0000;" onclick="removeFromCart(${item.id})">Del</button></td>
+      </tr>
+    `);
+    $('#cart-tbody').append(tr);
+    totalAmount += itemTotal;
+  }
 
-        totalAmount += itemTotal;
-    }
+  $('#cart-total-display').text('Total: \u20B9' + totalAmount.toFixed(2));
+  $('#cart-total-row').show();
+}
 
-    // Add total row
-    let trTotal = document.createElement("tr");
-    trTotal.innerHTML = `
-        <td colspan="4" style="text-align: right;"><strong>Total:</strong></td>
-        <td><strong>₹${totalAmount.toFixed(2)}</strong></td>
-    `;
-    let tbody = document.querySelector("tbody");
-    if (tbody) {
-        tbody.appendChild(trTotal);
-    }
+function escapeHtml(text) {
+  if (!text) return '';
+  const map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
+  return text.toString().replace(/[&<>"']/g, m => map[m]);
 }
 
-// FIXED: Function to increment quantity
 function incrementQuantity(id) {
-    const item = cartItems.find(item => item.id === id);
-    if (item) {
-        item.quantity += 1;
-        GetCartItemsCount();
-        ShowCartClick(); // Refresh cart display
-    }
+  const item = cartItems.find(item => item.id === id);
+  if (item) { item.quantity += 1; GetCartItemsCount(); ShowCartClick(); }
 }
 
-// FIXED: Function to decrement quantity
 function decrementQuantity(id) {
-    const item = cartItems.find(item => item.id === id);
-    if (item) {
-        if (item.quantity > 1) {
-            item.quantity -= 1;
-            GetCartItemsCount();
-            ShowCartClick(); // Refresh cart display
-        } else {
-            // If quantity is 1, remove the item
-            removeFromCart(id);
-        }
-    }
+  const item = cartItems.find(item => item.id === id);
+  if (item) {
+    if (item.quantity > 1) { item.quantity -= 1; GetCartItemsCount(); ShowCartClick(); }
+    else removeFromCart(id);
+  }
 }
 
-// FIXED: Function to remove item from cart
 function removeFromCart(id) {
-    const index = cartItems.findIndex(item => item.id === id);
-    if (index !== -1) {
-        cartItems.splice(index, 1);
-        GetCartItemsCount();
-        ShowCartClick(); // Refresh cart display
-        showToast("Item removed from cart");
-    }
+  const index = cartItems.findIndex(item => item.id === id);
+  if (index !== -1) { cartItems.splice(index, 1); GetCartItemsCount(); ShowCartClick(); showToast('Item removed from cart'); }
 }
 
-
-var cartItems = [];
-var count = 0;
-
-function GetCartItemsCount(){
-  count = cartItems.reduce((sum, item) => sum + item.quantity, 0); // FIXED: Sum quantities
-  let total = cartItems.reduce((sum, item) => sum + (parseFloat(item.price) * item.quantity), 0); // FIXED: Multiply by quantity
-  document.getElementById("totalAmount").innerHTML = ` ₹${total.toFixed(2)} X ${count}`;
+function GetCartItemsCount() {
+  count = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+  let total = cartItems.reduce((sum, item) => sum + (parseFloat(item.price) * item.quantity), 0);
+  document.getElementById("totalAmount").innerHTML = count > 0 ? ` \u20B9${total.toFixed(2)} (${count})` : '';
 }
 
-
-function AddToCart(id){
-    // Check if item already exists in cart
-    const existingItem = cartItems.find(item => item.id === id);
-    
-    if (existingItem) {
-        // FIXED: Instead of blocking, increment quantity
-        existingItem.quantity += 1;
-        GetCartItemsCount();
-        showToast("Item quantity increased!");
-        return; 
-    }
-
-    fetch(`${API_BASE_URL}/${id}`)
-    .then((response) => {
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-    })
-    .then((data) => {
-        // FIXED: Add quantity property to new items
-        data.quantity = 1;
-        cartItems.push(data);
-        GetCartItemsCount();
-        // FIXED: Show success feedback to user
-        showToast("Item added to cart!");
-    })
-    .catch((error) => {
-        console.error("Error adding item to cart:", error);
-        // FIXED: Show error to user
-        alert("Failed to add item to cart. Please try again.");
-    });
+function AddToCart(id) {
+  const existingItem = cartItems.find(item => item.id === id);
+  if (existingItem) {
+    existingItem.quantity += 1;
+    GetCartItemsCount();
+    showToast('Quantity increased!');
+    return;
+  }
+  fetch(`${API_BASE_URL}/${id}`)
+    .then(response => { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json(); })
+    .then(data => { data.quantity = 1; cartItems.push(data); GetCartItemsCount(); showToast('Item added to cart!'); })
+    .catch(error => { console.error('Error adding item to cart:', error); alert('Failed to add item. Please try again.'); });
 }
 
-// FIXED: Added toast notification function
 function showToast(message) {
-    const toast = $(`
-        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-            <div class="toast show" role="alert">
-                <div class="toast-header">
-                    <strong class="me-auto">Success</strong>
-                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
-                </div>
-                <div class="toast-body">
-                    ${message}
-                </div>
-            </div>
-        </div>
-    `);
-    $('body').append(toast);
-    setTimeout(() => toast.remove(), 3000);
+  const toast = $(`<div class="win-toast">&#8505;&nbsp;${message}</div>`);
+  $('#toast-container').append(toast);
+  setTimeout(() => toast.remove(), 3000);
 }
 
-// ==================== RAZORPAY PAYMENT INTEGRATION ====================
 
-// Handle checkout button click
+/* ===== RAZORPAY CHECKOUT ===== */
 async function handleCheckout() {
-    // Check if cart is empty
-    if (cartItems.length === 0) {
-        alert('Your cart is empty!');
-        return;
-    }
-
-    // Calculate total amount
-    const totalAmount = cartItems.reduce((sum, item) => sum + (parseFloat(item.price) * item.quantity), 0);
-
-    try {
-        // Step 1: Create order on backend
-        const orderResponse = await fetch('/api/razorpay/create-order', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                amount: totalAmount,
-                currency: 'INR',
-                receipt: `order_${Date.now()}`
-            })
-        });
-
-        const orderData = await orderResponse.json();
-
-        if (!orderData.success) {
-            throw new Error(orderData.error || 'Failed to create order');
-        }
-
-        // Step 2: Get Razorpay key
-        const keyResponse = await fetch('/api/razorpay/key');
-        const keyData = await keyResponse.json();
-
-        // Step 3: Initialize Razorpay payment
-        const options = {
-            key: keyData.key,
-            amount: orderData.order.amount,
-            currency: orderData.order.currency,
-            name: 'GroceryBucket',
-            description: 'Grocery Items Purchase',
-            order_id: orderData.order.id,
-            handler: async function (response) {
-                // Payment successful, verify on backend
-                await verifyPayment(response);
-            },
-            prefill: {
-                name: 'Customer Name',
-                email: 'customer@example.com',
-                contact: '9999999999'
-            },
-            theme: {
-                color: '#ffc107'
-            },
-            modal: {
-                ondismiss: function() {
-                    console.log('Payment cancelled by user');
-                }
-            }
-        };
-
-        const razorpay = new Razorpay(options);
-        razorpay.open();
-
-    } catch (error) {
-        console.error('Checkout error:', error);
-        alert('Failed to initiate payment. Please try again.');
-    }
+  if (cartItems.length === 0) { alert('Your cart is empty!'); return; }
+  const totalAmount = cartItems.reduce((sum, item) => sum + (parseFloat(item.price) * item.quantity), 0);
+  try {
+    const orderResponse = await fetch('/api/razorpay/create-order', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ amount: totalAmount, currency: 'INR', receipt: `order_${Date.now()}` })
+    });
+    const orderData = await orderResponse.json();
+    if (!orderData.success) throw new Error(orderData.error || 'Failed to create order');
+
+    const keyResponse = await fetch('/api/razorpay/key');
+    const keyData = await keyResponse.json();
+
+    const options = {
+      key: keyData.key,
+      amount: orderData.order.amount,
+      currency: orderData.order.currency,
+      name: 'GroceryBucket',
+      description: 'Grocery Items Purchase',
+      order_id: orderData.order.id,
+      handler: async function (response) { await verifyPayment(response); },
+      prefill: { name: 'Customer', email: 'customer@example.com', contact: '9999999999' },
+      theme: { color: '#000080' },
+      modal: { ondismiss: function() { console.log('Payment cancelled'); } }
+    };
+    const razorpay = new Razorpay(options);
+    razorpay.open();
+  } catch (error) {
+    console.error('Checkout error:', error);
+    alert('Failed to initiate payment. Please try again.');
+  }
 }
 
-// Verify payment on backend
 async function verifyPayment(response) {
-    try {
-        const verifyResponse = await fetch('/api/razorpay/verify-payment', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                razorpay_order_id: response.razorpay_order_id,
-                razorpay_payment_id: response.razorpay_payment_id,
-                razorpay_signature: response.razorpay_signature
-            })
-        });
-
-        const verifyData = await verifyResponse.json();
-
-        if (verifyData.success) {
-            // Payment verified successfully
-            showToast('Payment successful! Order placed.');
-            
-            // Clear the cart
-            cartItems = [];
-            GetCartItemsCount();
-            
-            // Close the cart modal
-            const cartModal = bootstrap.Modal.getInstance(document.getElementById('cart'));
-            if (cartModal) {
-                cartModal.hide();
-            }
-
-            // Show success message
-            setTimeout(() => {
-                alert(`Payment Successful!\nPayment ID: ${verifyData.payment_id}\nOrder ID: ${verifyData.order_id}`);
-            }, 500);
-
-        } else {
-            throw new Error(verifyData.error || 'Payment verification failed');
-        }
-
-    } catch (error) {
-        console.error('Payment verification error:', error);
-        alert('Payment verification failed. Please contact support with your payment details.');
+  try {
+    const verifyResponse = await fetch('/api/razorpay/verify-payment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        razorpay_order_id: response.razorpay_order_id,
+        razorpay_payment_id: response.razorpay_payment_id,
+        razorpay_signature: response.razorpay_signature
+      })
+    });
+    const verifyData = await verifyResponse.json();
+    if (verifyData.success) {
+      showToast('Payment successful! Order placed.');
+      cartItems = [];
+      GetCartItemsCount();
+      closeCartModal();
+      setTimeout(() => { alert(`Payment Successful!\nPayment ID: ${verifyData.payment_id}\nOrder ID: ${verifyData.order_id}`); }, 500);
+    } else {
+      throw new Error(verifyData.error || 'Payment verification failed');
     }
+  } catch (error) {
+    console.error('Payment verification error:', error);
+    alert('Payment verification failed. Please contact support.');
+  }
 }
 
-// ========================================================
-
     </script>
 </head>
 <body>
 
-    <header>
-        <div class="d-flex justify-content-between align-items-center p-3">
-          <h2><img class="p-0 m-0" src="/assets/cartIcon.png" width="70px" alt="">GroceryBucket</h2>
-          <div class="d-flex">
-            <button id="btnLogin" class="btn btn-warning mx-2"><i class="bi bi-person-circle"></i><a href="./login.html">&nbsp;Login</a></button>
-            <button id="btnCart" onclick="ShowCartClick()" data-bs-target="#cart" data-bs-toggle="modal" class="btn btn-warning mx-2"><i class="bi bi-cart3"></i>&nbsp;Cart
-              </span>
-              <span id="totalAmount" class="badge bg-success">
-              </span>
+    <!-- ==============================
+         MAIN APP WINDOW
+    ============================== -->
+    <div id="main-app-window" class="win-window">
+
+        <!-- Title Bar -->
+        <div class="win-titlebar">
+            <div class="title-left">
+                <img src="assets/favIcon.png" class="win-titlebar-icon" alt="" onerror="this.style.display='none'">
+                <span>GroceryBucket &mdash; Online Grocery Store</span>
+            </div>
+            <div class="win-titlebar-btns">
+                <button title="Minimize">_</button>
+                <button title="Maximize">&#9633;</button>
+                <button title="Close" style="font-weight:bold;background:#c0c0c0;">&#x2715;</button>
+            </div>
+        </div>
+
+        <!-- Menu Bar -->
+        <div class="win-menubar">
+            <span class="menu-item">File</span>
+            <span class="menu-item">Edit</span>
+            <span class="menu-item">View</span>
+            <span class="menu-item">Favorites</span>
+            <span class="menu-item">Tools</span>
+            <span class="menu-item">Help</span>
+        </div>
+
+        <!-- Toolbar / Header Actions -->
+        <div class="win-toolbar">
+            <img src="assets/cartIcon.png" width="24" height="24" alt="" onerror="this.style.display='none'" style="margin-right:2px;">
+            <strong style="font-size:13px;color:#000080;">GroceryBucket</strong>
+            <div class="win-toolbar-sep"></div>
+            <!-- Search -->
+            <input id="search-input" type="text" class="win-input" placeholder="Search products..." style="width:180px;">
+            <button id="search-btn" class="win-btn">&#128269; Search</button>
+            <div class="win-toolbar-sep"></div>
+            <!-- Login / Cart -->
+            <a href="./login.html" style="text-decoration:none;">
+                <button class="win-btn">&#128100; Login</button>
+            </a>
+            <button id="cart-modal-btn" class="win-btn win-btn-default">
+                &#128722; Cart <span id="totalAmount" style="color:#000080;font-weight:bold;"></span>
             </button>
-          </div>
         </div>
-    </header>
 
-    <section class="container-fluid">
-        <div class="d-flex justify-content-around">
-          <div id="lp-div1">
-            <div align="center" style="color: white; border-radius: 20px; background-color: rgba(255, 255, 255, 0.075); width: 200px; font-size: small;"><i class="bi bi-truck"></i>&nbsp;&nbsp;Fastest Grocery Delivery</div>
+        <!-- Address/Info bar -->
+        <div style="background:#d4d0c8; border-bottom:1px solid #808080; padding:3px 8px; display:flex; align-items:center; gap:6px; font-size:10px;">
+            <span style="color:#444;">Address:</span>
+            <div class="win-inset" style="flex:1;padding:1px 4px;font-size:10px;">https://grocerybucket.app/</div>
+            <span style="color:#808080;font-size:9px;">&#128274; Secure</span>
+            <span>&#x1F69A;&nbsp;Fastest Grocery Delivery</span>
+        </div>
+
+        <!-- Hero / Banner Section -->
+        <div id="hero-section" style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:2px solid #808080; flex-wrap:wrap; gap:10px;">
             <div>
-              <h1 style="font-weight: bolder;">Get fresh Grocery</h1>
-              <h2 style="font-family: roboto;">Enjoy healthy life.</h2>
+                <div class="hero-badge">&#x1F69A;&nbsp; Fastest Grocery Delivery in Your City</div>
+                <h1>Get Fresh Grocery</h1>
+                <h2>Enjoy a healthier life delivered to your door.</h2>
+                <p style="font-size:10px;color:#555;margin:4px 0 8px 0;">
+                    New customer?&nbsp;
+                    <a href="./signup.html" style="color:#000080;font-weight:bold;">Sign up here</a>
+                    &nbsp;and save on your first order.
+                </p>
+                <img src="assets/4-removebg-preview.png" width="160px" height="180px" alt="Grocery illustration" style="display:block;margin-top:4px;" onerror="this.style.display='none'">
             </div>
-            <div class="input-group">
-              <input class="form-control" placeholder="search" type="text">
-              <button class="btn btn-warning"><i class="bi bi-search"></i></button>
+            <div>
+                <img id="manImg" src="assets/grocery-banner-img.png" width="380px" alt="Grocery shopping banner" style="border:2px solid #808080;display:block;" onerror="this.style.display='none'">
             </div>
-            <p class="mb-0" style="color: rgba(255, 255, 255, 0.516); font-size: smaller;">Not yet Member?<a id="btn-signup" href="./signup.html">&nbsp;sign up&nbsp;</a>now</p>
-            <img src="assets/4-removebg-preview.png" class="ms-5 mt-0" width="220px" height="250px" title="Hello">
-          </div>
-    
-          <div class="mt-5">
-            <img id="manImg" src="assets/grocery-banner-img.png" width="450px" alt="Grocery shopping banner">
-          </div>
         </div>
-    
-        <div id="btn-category" class="mt-5" align="center">
-          <button class="btn btn-warning px-4" data-category="fruit_veges">Fruits</button>
-          <button class="btn btn-warning px-4" data-category="atta_rice">Atta</button>
-          <button class="btn btn-warning px-4" data-category="dairy_breakfast" data-sub-category="eggs">Eggs</button>
-          <button class="btn btn-warning" data-category="drinks">Beverages</button>
-          <button class="btn btn-warning" data-category="personal_care" data-sub-category="facewash">Facewash</button>
-          <button class="btn btn-warning px-4" data-category="dairy_breakfast" data-sub-category="milk">Milk</button>
-          <button class="btn btn-warning" data-category="instant_food" data-sub-category="noodles">Noodles</button>
-          <button class="btn btn-warning" data-category="dairy_breakfast" data-sub-category="cheese">Cheese</button>
-          <button class="btn btn-warning " data-category="oil_masala" data-sub-category="oil">Oil</button>
-          <button class="btn btn-warning" data-category="dairy_breakfast" data-sub-category="paneer">Paneer</button>
+
+        <!-- Category Buttons Toolbar -->
+        <div id="btn-category" class="win-toolbar" style="padding:6px 8px;">
+            <span class="cat-label">Quick Categories:</span>
+            <button class="win-btn" data-category="fruit_veges">&#127815; Fruits</button>
+            <button class="win-btn" data-category="atta_rice">&#127859; Atta &amp; Rice</button>
+            <button class="win-btn" data-category="dairy_breakfast" data-sub-category="eggs">&#129040; Eggs</button>
+            <button class="win-btn" data-category="drinks">&#127864; Beverages</button>
+            <button class="win-btn" data-category="personal_care" data-sub-category="facewash">&#129380; Facewash</button>
+            <button class="win-btn" data-category="dairy_breakfast" data-sub-category="milk">&#129371; Milk</button>
+            <button class="win-btn" data-category="instant_food" data-sub-category="noodles">&#127836; Noodles</button>
+            <button class="win-btn" data-category="dairy_breakfast" data-sub-category="cheese">&#129472; Cheese</button>
+            <button class="win-btn" data-category="oil_masala" data-sub-category="oil">&#129739; Oil</button>
+            <button class="win-btn" data-category="dairy_breakfast" data-sub-category="paneer">&#127856; Paneer</button>
         </div>
-        
-    
-        <div align="center" id="img-category">
-          <img src="assets/AdobeStock_314327563_Preview.jpeg" data-category="fruit_veges" width="350px" height="180px" alt="Fresh fruits category" />
-          <img src="assets/AdobeStock_335853623_Preview.jpeg" data-category="fruit_veges" data-sub-category="vegetable" width="350px" height="180px" alt="Fresh vegetables category" />
-          <img src="assets/download.webp" data-category="instant_food" data-sub-category="veg_snack" width="350px" height="180px" alt="Instant food snacks category" />
+
+        <!-- Category Images -->
+        <div id="img-category" style="border-bottom:2px solid #808080;">
+            <div class="cat-img-wrap" data-category="fruit_veges">
+                <img src="assets/AdobeStock_314327563_Preview.jpeg" alt="Fresh Fruits">
+                <span class="cat-img-label">&#127815; Fruits</span>
+            </div>
+            <div class="cat-img-wrap" data-category="fruit_veges" data-sub-category="vegetable">
+                <img src="assets/AdobeStock_335853623_Preview.jpeg" alt="Vegetables">
+                <span class="cat-img-label">&#129363; Vegetables</span>
+            </div>
+            <div class="cat-img-wrap" data-category="instant_food" data-sub-category="veg_snack">
+                <img src="assets/download.webp" alt="Instant Food">
+                <span class="cat-img-label">&#127836; Instant Food</span>
+            </div>
         </div>
 
-        <div class="row">
-            <div class="col-md-2 d-none d-md-block">
-              <h2 align="center" id="category">Category</h2>
-              <select id="lstOption" class="form-select dropdown m-3">
-                <option selected value="all">All</option>
-                <option value="atta_rice">Atta&Rice</option>
-                <option value="fruit_veges">Fruits&Vegetables</option>
-                <option value="instant_food">Instant Food</option>
-                <option value="dairy_breakfast">Dairy&Breakfast</option>
-                <option value="drinks">Drinks</option>
-                <option value="oil_masala">Oil&Masala</option>
-                <option value="personal_care">Personal care</option>
-              </select>
+        <!-- Product Area -->
+        <div id="product-area">
+
+            <!-- Sidebar -->
+            <div id="sidebar">
+                <div class="sidebar-title">Filter by Category</div>
+                <select id="lstOption" class="win-select">
+                    <option selected value="all">All Products</option>
+                    <option value="atta_rice">Atta &amp; Rice</option>
+                    <option value="fruit_veges">Fruits &amp; Vegetables</option>
+                    <option value="instant_food">Instant Food</option>
+                    <option value="dairy_breakfast">Dairy &amp; Breakfast</option>
+                    <option value="drinks">Drinks</option>
+                    <option value="oil_masala">Oil &amp; Masala</option>
+                    <option value="personal_care">Personal Care</option>
+                </select>
+
+                <div style="margin-top:12px;">
+                    <div class="sidebar-title" style="margin-top:8px;">My Account</div>
+                    <div style="padding:4px 2px; font-size:10px;">
+                        <div><a href="./login.html" style="color:#000080;text-decoration:none;">&#128100; Login</a></div>
+                        <div style="margin-top:3px;"><a href="./signup.html" style="color:#000080;text-decoration:none;">&#128221; Sign Up</a></div>
+                    </div>
+                </div>
+
+                <div style="margin-top:12px;">
+                    <div class="sidebar-title">Advertisement</div>
+                    <div class="win-inset" style="padding:8px;font-size:9px;text-align:center;background:#ffffcc;color:#000;">
+                        &#127381; Special Offer!<br>Get 10% off<br>on your first order.<br><br>
+                        <strong>Use code: FRESH10</strong>
+                    </div>
+                </div>
             </div>
-      
-            <div align="center" class="col-12 col-md-8">
 
-              <!-- FIXED: Added loading spinner -->
-              <div id="loading-spinner" class="loading-spinner">
-                <div class="spinner-border text-warning" role="status">
-                  <span class="visually-hidden">Loading...</span>
+            <!-- Main Content -->
+            <div style="flex:1; overflow:hidden;">
+
+                <!-- Loading spinner -->
+                <div id="loading-spinner">
+                    <div style="font-size:12px;margin-bottom:4px;">Loading products, please wait...</div>
+                    <div class="win-progress-bar"><div class="win-progress-fill"></div></div>
                 </div>
-                <p class="mt-3">Loading products...</p>
-              </div>
 
-              <!-- FIXED: Added error message -->
-              <div id="error-message" class="error-message"></div>
+                <!-- Error message -->
+                <div id="error-message"></div>
 
-              <div id="card-group">
-                <!-- Product cards will be injected here -->
-              </div>
+                <!-- Product cards -->
+                <div id="card-group"></div>
 
-              <div class="d-flex justify-content-center">
-                <nav aria-label="Page navigation example">
-                  <ul class="pagination">
-                    <li class="page-item">
-                      <a class="page-link" href="#" aria-label="Previous">
-                        <span aria-hidden="true">&laquo;</span>
-                      </a>
-                    </li>
-                    <!-- FIXED: Removed hardcoded page numbers 1, 2, 3 - JS will generate them -->
-                    <li class="page-item">
-                      <a class="page-link" href="#" aria-label="Next">
-                        <span aria-hidden="true">&raquo;</span>
-                      </a>
-                    </li>
-                  </ul>
-                </nav>
-              </div>
+                <!-- Pagination -->
+                <div class="win-pagination"></div>
 
             </div>
-              
-            <div class="col-2">
-            </div>
         </div>
 
-    </section>
+        <!-- Status Bar -->
+        <div class="win-statusbar">
+            <div class="win-statusbar-panel" id="statusbar-msg">Ready</div>
+            <div class="win-statusbar-panel" style="flex:0 0 auto;min-width:80px;">GroceryBucket v2.0</div>
+            <div class="win-statusbar-panel" style="flex:0 0 auto;min-width:80px;text-align:center;">&#127381; Online</div>
+        </div>
+
+    </div><!-- /main-app-window -->
+
+
+    <!-- ==============================
+         TASKBAR
+    ============================== -->
+    <div id="win-taskbar">
+        <button id="win-start-btn">
+            <span style="font-size:14px;">&#127381;</span> Start
+        </button>
+        <button class="taskbar-task">&#128722; GroceryBucket</button>
+        <div class="taskbar-clock" id="taskbar-time">00:00</div>
+    </div>
+
 
-    <!-- Product Modal -->
-    <div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-          <div class="modal-content text-dark">
-            <div class="modal-header">
-              <h5 class="modal-title" id="productModalLabel">Product Info</h5>
-              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+    <!-- ==============================
+         PRODUCT DETAIL DIALOG
+    ============================== -->
+    <div class="win-modal-backdrop" id="productModal">
+        <div class="win-dialog">
+            <div class="win-titlebar">
+                <div class="title-left">
+                    <span>&#128722; Product Information</span>
+                </div>
+                <div class="win-titlebar-btns">
+                    <button onclick="closeProductModal()" title="Close" style="font-weight:bold;">&#x2715;</button>
+                </div>
             </div>
-            <div class="modal-body">
-              <div align="center">
-                <img id="modalImage" width="300px" height="300px" class="img-fluid mb-2" alt="Product image" />
-              </div>
-              <h5 id="modalTitle"></h5>
-              <p id="modalUnit"></p>
-              <p id="modalType"></p>
-              <p id="modalPrice" class="fw-bold"></p>
-              <p id="modalDescription"></p>
-              <p><strong>FSSAI:</strong> <span id="modalFSSAI"></span></p>
-              <p><strong>Country:</strong> <span id="modalOrigin"></span></p>
-              <div class="d-flex">
-                <p><strong>Shelf Life:</strong> <span id="modalShelfLife"></span></p>
-                <button class="btn btn-outline-success add-to-cart-button" style="margin-left: 60%;">Add</button>
-              </div>
+            <div class="win-dialog-body">
+                <div style="display:flex;gap:10px;flex-wrap:wrap;">
+                    <div class="win-inset" style="padding:4px;width:150px;height:150px;display:flex;align-items:center;justify-content:center;">
+                        <img id="modalImage" width="140" height="140" style="object-fit:contain;" alt="Product">
+                    </div>
+                    <div style="flex:1;min-width:140px;">
+                        <div class="win-groupbox" style="padding:8px 8px 8px 8px;border:1px solid #808080;">
+                            <span class="win-groupbox-title">Details</span>
+                            <p style="margin:3px 0;"><strong id="modalTitle"></strong></p>
+                            <p style="margin:2px 0;font-size:10px;" id="modalUnit"></p>
+                            <p style="margin:2px 0;font-size:10px;" id="modalType"></p>
+                            <p style="margin:2px 0;font-size:12px;font-weight:bold;color:#000080;" id="modalPrice"></p>
+                        </div>
+                        <div class="win-groupbox" style="margin-top:8px;padding:8px;border:1px solid #808080;">
+                            <span class="win-groupbox-title">Description</span>
+                            <p style="margin:2px 0;font-size:10px;" id="modalDescription"></p>
+                        </div>
+                    </div>
+                </div>
+                <table class="win-table" style="margin-top:8px;">
+                    <tr><th>FSSAI License</th><td id="modalFSSAI"></td></tr>
+                    <tr><th>Country of Origin</th><td id="modalOrigin"></td></tr>
+                    <tr><th>Shelf Life</th><td id="modalShelfLife"></td></tr>
+                </table>
+            </div>
+            <div class="win-dialog-footer">
+                <button id="modal-add-btn" class="win-btn win-btn-default">&#43; Add to Cart</button>
+                <button class="win-btn" onclick="closeProductModal()">Close</button>
             </div>
-          </div>
         </div>
     </div>
 
-    <!-- CART MODAL -->
-    <div class="modal fade" id="cart">
-      <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h3>Your Cart</h3>
-            <button class="btn-close" data-bs-dismiss="modal"></button>
-          </div>
-          <div class="modal-body">
-              <table class="table table-hover">
-                <thead>
-                  <tr>
-                    <th>Image</th>
-                    <th>Title</th>
-                    <th>Quantity</th>
-                    <th>Price</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody></tbody>
-              </table>
-          </div>
-          <div class="modal-footer">
-               <button class="btn btn-warning" onclick="handleCheckout()">Check Out</button>
-          </div>
+
+    <!-- ==============================
+         CART DIALOG
+    ============================== -->
+    <div class="win-modal-backdrop" id="cartModal">
+        <div class="win-dialog" style="max-width:600px;">
+            <div class="win-titlebar">
+                <div class="title-left">
+                    <span>&#128722; Shopping Cart</span>
+                </div>
+                <div class="win-titlebar-btns">
+                    <button onclick="closeCartModal()" title="Close" style="font-weight:bold;">&#x2715;</button>
+                </div>
+            </div>
+            <div class="win-dialog-body">
+                <table class="win-table">
+                    <thead>
+                        <tr>
+                            <th>Image</th>
+                            <th>Product</th>
+                            <th>Qty</th>
+                            <th>Price</th>
+                            <th>Remove</th>
+                        </tr>
+                    </thead>
+                    <tbody id="cart-tbody"></tbody>
+                </table>
+                <div id="cart-total-row" style="margin-top:8px;text-align:right;font-weight:bold;font-size:13px;color:#000080;" id="cart-total-display"></div>
+                <div id="cart-total-display" style="margin-top:4px;text-align:right;font-weight:bold;font-size:13px;color:#000080;"></div>
+            </div>
+            <div class="win-dialog-footer">
+                <button class="win-btn win-btn-default" onclick="handleCheckout()">&#128179; Check Out</button>
+                <button class="win-btn" onclick="closeCartModal()">Close</button>
+            </div>
         </div>
-      </div>
-    </div> <!-- FIXED: Added missing closing div tag for modal -->
+    </div>
+
+
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+
 
-    <!-- Razorpay Checkout Script -->
+    <!-- Razorpay -->
     <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
 
-    <!-- FIXED: Removed duplicate bootstrap.min.js, kept only bundle version -->
-    <!-- FIXED: Moved scripts inside body tag -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
