diff --git a/Coverpage.html b/Coverpage.html
index 09d565b9..91eefc77 100644
--- a/Coverpage.html
+++ b/Coverpage.html
@@ -117,9 +117,41 @@
     margin-top: 70px;
     margin-left: 35%;
 }
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
     </style>
 </head>
 <body>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="container">
         <span class="small-text">Welcome to</span><br>
         <!-- Animated SVG Title -->
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index cafb6bb1..4c6cf100 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -149,6 +149,43 @@
         100% {
           transform: rotate(360deg);
         }
+
+  #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 53%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+</style>
+  <title>Retro</title>
+</head>
+<body>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
+
       }
 
       .head_container_service {
@@ -565,6 +602,7 @@
     <title>Retro</title>
   </head>
   <body>
+
     <div class="circle-container">
       <div
         class="circle"
diff --git a/Html-files/about.html b/Html-files/about.html
index 79e09c09..d8adc62d 100644
--- a/Html-files/about.html
+++ b/Html-files/about.html
@@ -559,10 +559,42 @@
   color: #181e20 !important;
 }
 
+#progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
     </style>
 </head>
 
 <body>
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+        
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
     <div class="circle-container">
         <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
         <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/Html-files/booknow.html b/Html-files/booknow.html
index 0603880e..08a73e1e 100644
--- a/Html-files/booknow.html
+++ b/Html-files/booknow.html
@@ -101,9 +101,41 @@
         .description{
             color: white !important;
         }
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
     </style>
+    
 </head>
 <body>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <header>
         <h1>Retro</h1>
         <p style="color: white;">Celebrating Vintage Elegance</p>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index e02cfc76..62957623 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -338,9 +338,122 @@
 
 
   </style>
+
+  <style>
+    /* Modal styles */
+    .modal {
+      display: none; /* Hidden by default */
+      position: fixed; /* Stay in place */
+      z-index: 1000; /* Sit on top */
+      left: 0;
+      top: 0;
+      width: 100%; /* Full width */
+      height: 100%; /* Full height */
+      overflow: auto; /* Enable scroll if needed */
+      background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for better contrast */
+      animation: fadeIn 0.5s; /* Animation for modal display */
+    }
+
+    .modal-content {
+      background-color: #ffffff; /* White background */
+      margin: 10% auto; /* 10% from the top and centered */
+      padding: 20px;
+      border-radius: 10px; /* Rounded corners */
+      width: 400px; /* Adjusted width for better visibility */
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Shadow */
+      animation: slideIn 0.5s; /* Animation for content */
+    }
+
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: #e74c3c; /* Red color on hover */
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    h2 {
+      color: #2c3e50; /* Darker text color */
+    }
+
+    #couponDisplay {
+      font-weight: bold;
+      color: #27ae60; /* Green color for coupon code */
+    }
+
+    #okButton {
+      background-color: #3498db; /* Blue */
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
+    }
+
+    #okButton:hover {
+      background-color: #2980b9; /* Darker blue on hover */
+      transform: scale(1.05); /* Slightly enlarge on hover */
+    }
+
+    /* Animation keyframes */
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes slideIn {
+      from { transform: translateY(-50px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+  </style>
+
 </head>
 
 <body>
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+        
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
   <div id="preloader">
     <div id="loader"></div>
   </div>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index c5261767..f7279820 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -550,11 +550,44 @@
 .fa-brands.fa-x-twitter:hover {
   color: #181e20 !important;
 }
+
+#progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
         </style>
 
 </head>
 
 <body class="contact_page">
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="circle-container">
         <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
         <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/Html-files/logged.html b/Html-files/logged.html
index ef8ab8c7..70acd0df 100644
--- a/Html-files/logged.html
+++ b/Html-files/logged.html
@@ -60,9 +60,40 @@
             --ff-philosopher: "Philosopher", sans-serif;
             --ff-poppins: "Poppins", sans-serif;
         }
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
 </style>
 </head>
 <body>
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+        
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
 <div class="circle-container">
     <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
     <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 52a9989a..7f379a6f 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -316,10 +316,44 @@
         .fa-brands.fa-x-twitter:hover {
             color: #181e20 !important;
         }
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
     </style>
+
 </head>
 
 <body>
+
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="circle-container">
         <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
         <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/Html-files/services.html b/Html-files/services.html
index 720e0c41..bd687942 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -306,6 +306,26 @@
     transform: scale(1.1);
 }
 
+
+#progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
 .foot-panel2 .footer-colums  a { 
       /* /* color: black!important; */
       text-decoration: none !important;
@@ -341,12 +361,37 @@
       width:100%;
     } 
 
-
     </style>
 
 </head>
 
 <body>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="circle-container">
         <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
         <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/Html-files/signup.html b/Html-files/signup.html
index 17e83eda..5f5beb3a 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -188,9 +188,28 @@
     .switch-link a:hover {
       color: hsl(203, 30%, 26%);
     }
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 53%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
   </style>
 </head>
 <body>
+  
   <div class="circle-container">
       <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
       <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
diff --git a/index.html b/index.html
index 63447afc..8dee5767 100644
--- a/index.html
+++ b/index.html
@@ -398,11 +398,42 @@
     }
 }
 
+#progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 30%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(255, 0, 55) 0%, rgb(190, 53, 78) 50%, rgb(249, 78, 115) 100%);
+    box-shadow: 0 0 4px rgb(255, 0, 55), 0 0 10px rgb(255, 0, 55);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
 
 
 </style>
 </head>
 <body>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="circle-container">
         <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
         <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
