diff --git a/package-lock.json b/package-lock.json
index 9a0deaebe..05f0dbc0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,13 +33,11 @@
         "react-helmet": "^6.1.0",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.2.1",
-        "react-loader-spinner": "^6.1.6",
         "react-redux": "^9.1.2",
         "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^6.26.0",
         "react-slick": "^0.30.2",
         "react-spinners": "^0.14.1",
-        "react-top-loading-bar": "^2.3.1",
         "react-use": "^17.5.0",
         "sitemap": "^8.0.0",
         "slick-carousel": "^1.8.1",
@@ -13754,28 +13752,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-loader-spinner": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
-      "integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-is": "^18.2.0",
-        "styled-components": "^6.1.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-loader-spinner/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
-    },
     "node_modules/react-redux": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
@@ -13880,17 +13856,6 @@
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-top-loading-bar": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz",
-      "integrity": "sha512-rQk2Nm+TOBrM1C4E3e6KwT65iXyRSgBHjCkr2FNja1S51WaPulRA5nKj/xazuQ3x89wDDdGsrqkqy0RBIfd0xg==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16 || ^17 || ^18"
-      }
-    },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
diff --git a/package.json b/package.json
index 1f1c18906..4a6bbf2dc 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,11 @@
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
-    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.2",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.26.0",
     "react-slick": "^0.30.2",
     "react-spinners": "^0.14.1",
-    "react-top-loading-bar": "^2.3.1",
     "react-use": "^17.5.0",
     "sitemap": "^8.0.0",
     "slick-carousel": "^1.8.1",
diff --git a/src/User/UserLayout.jsx b/src/User/UserLayout.jsx
index d151a9f00..8f6d7165f 100644
--- a/src/User/UserLayout.jsx
+++ b/src/User/UserLayout.jsx
@@ -6,29 +6,17 @@ import Footer from "./components/Footer/Footer";
 import GoToTop from "./components/GoToTop/gototop";
 import ScrollProgressBar from "./components/progressbar/ScrollProgressBar";
 import FeedbackButton from "./components/FeedbackForm/FeedBtn";
-import Loader from "./components/progressbar/Loader";
+
 const UserLayout = () => {
-   const [loading, setLoading] = useState(true);
    const location = useLocation();
 
   // Determine which navbar to show based on the current route
   const isAdminRoute = location.pathname.startsWith("/admin");
 
-  // Simulate page loading
-  useEffect(() => {
-    const loadPage = async () => {
-      // Simulate page load delay
-      await new Promise(resolve => setTimeout(resolve, 3000)); // 3-second delay
-      setLoading(false); // Hide loader after page is loaded
-    };
-
-    loadPage();
-  }, []);
-
   return (
     <>
       {isAdminRoute ? <AdminNavbar /> : <UserNavbar />}
-      <Loader visible={loading} /> {/*set to true to manage state as needed */}
+      
       <ScrollProgressBar />
       <Outlet />
       <Footer />
diff --git a/src/User/components/GoToTop/gototop.jsx b/src/User/components/GoToTop/gototop.jsx
index a7cc7fc8a..1bb5637fc 100644
--- a/src/User/components/GoToTop/gototop.jsx
+++ b/src/User/components/GoToTop/gototop.jsx
@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
 import { FaArrowUp } from "react-icons/fa";
+import './top.css'; // Import the CSS file
 
 const GoToTop = () => {
+  const [scrollProgress, setScrollProgress] = useState(0);
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY;
+      const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (currentScrollY / documentHeight) * 100;
 
-      setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
+      setScrollProgress(progress);
+      setIsVisible(progress > 2); // Show button only if scroll progress is greater than 2%
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -23,36 +27,33 @@ const GoToTop = () => {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   };
 
+  // Calculate the dash offset for the circle based on scroll progress
+  const circleLength = 157; // Approximate circumference of the circle (2 * PI * radius)
+  const strokeDashoffset = ((100 - scrollProgress) / 100) * circleLength;
+
   return (
-    <>
-      {isVisible && (
-        <Wrapper onClick={goToTop}>
-          <FaArrowUp className="top-btn--icon" />
-        </Wrapper>
-      )}
-    </>
+    <div
+      className={`go-to-top-wrapper ${isVisible ? "" : "hidden"}`}
+      onClick={goToTop}
+    >
+      <svg className="circular-progress">
+        <circle
+          className="circle-background"
+          cx="50%"
+          cy="50%"
+          r="25"
+        />
+        <circle
+          className="circle"
+          cx="50%"
+          cy="50%"
+          r="25"
+          style={{ strokeDashoffset }}
+        />
+      </svg>
+      <FaArrowUp className="top-btn--icon" />
+    </div>
   );
 };
 
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 95px;
-  right: 28px;
-  color: white;
-  background-color: #16a34a;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 99;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-  &:hover {
-    background-color: #005a01;
-    transform: scale(1.1);
-  }
-`;
-
 export default GoToTop;
diff --git a/src/User/components/GoToTop/top.css b/src/User/components/GoToTop/top.css
new file mode 100644
index 000000000..c08c264ce
--- /dev/null
+++ b/src/User/components/GoToTop/top.css
@@ -0,0 +1,61 @@
+/* GoToTop.css */
+.go-to-top-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 110px; /* Adjust as needed */
+    right: 20px; /* Adjust as needed */
+    color: white;
+    background-color: #16a34a;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+    opacity: 1;
+    visibility: visible;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .go-to-top-wrapper.hidden {
+    background-color: transparent;
+    cursor: default;
+    opacity: 0;
+    visibility: hidden;
+  }
+  
+  .go-to-top-wrapper:hover {
+    background-color: #005a01;
+    transform: scale(1.1);
+  }
+  
+  .circular-progress {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg); /* Rotate the SVG to align the start position */
+  }
+  
+  .circle-background {
+    stroke: rgba(255, 255, 255, 0.3);
+    stroke-width: 5;
+    fill: none;
+  }
+  
+  .circle {
+    stroke: rgba(255, 255, 255, 0.7);
+    stroke-width: 5;
+    stroke-dasharray: 157; /* Circumference of the circle */
+    stroke-dashoffset: 0;
+    fill: none;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+  
+  .top-btn--icon {
+    position: absolute;
+    color: white;
+    font-size: 24px;
+    z-index: 1; /* Ensure it is above the circle */
+    background-color: #16a34a;
+  }
\ No newline at end of file
diff --git a/src/User/components/progressbar/Loader.jsx b/src/User/components/progressbar/Loader.jsx
index dd8a4483a..787db105a 100644
--- a/src/User/components/progressbar/Loader.jsx
+++ b/src/User/components/progressbar/Loader.jsx
@@ -1,21 +1,17 @@
-import React from 'react';
-import { RotatingLines } from 'react-loader-spinner'; // Import the spinner component
-import './Loader.css'; // Import CSS file for styling (create this if needed)
+import React from "react";
+import TopLoader from "react-top-loader"; // Import TopLoader component
 
-const Loader = ({ visible }) => {
+const Loader = ({ progress }) => {
   return (
-    <div className={`loader-overlay ${visible ? 'visible' : 'hidden'}`}>
-      <RotatingLines
-        visible={visible}
-        height="300"
-        width="300"
-        color="grey"
-        strokeWidth="5"
-        animationDuration="0.75"
-        ariaLabel="rotating-lines-loading"
-      />
-    </div>
+    <TopLoader
+      show={progress < 100}
+      progress={progress / 100}
+      thickness={5}
+      color="#4caf50"
+      backgroundColor="transparent"
+    />
   );
 };
 
 export default Loader;
+
diff --git a/src/User/components/progressbar/ScrollProgressBar.css b/src/User/components/progressbar/ScrollProgressBar.css
index f33e683f7..a3da00524 100644
--- a/src/User/components/progressbar/ScrollProgressBar.css
+++ b/src/User/components/progressbar/ScrollProgressBar.css
@@ -1,17 +1,20 @@
-.progress-container {
-    position: fixed;
-    width: 100%;
-    height: 6px;
-    top: 0;
-    left: 0;
-    z-index: 999;
-  }
-  
-  .progress-bar {
-    height: 100%;
-    background-color: #4caf50;
-    width: 0%;
-    transition: width 0.1s;
-    border-radius: 20px;
-  }
-  
\ No newline at end of file
+/* Loader.css */
+.loader-overlay {
+  position: fixed;
+  width: 100%;
+  height: 200px; /* Adjust height to match the loader */
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: transparent; /* Transparent background for the overlay */
+}
+
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Additional styles for the loader if needed */