diff --git a/src/component/Assets/Loader.css b/src/component/Assets/Loader.css
new file mode 100644
index 0000000..5d2e14d
--- /dev/null
+++ b/src/component/Assets/Loader.css
@@ -0,0 +1,11 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    z-index: 9999; /* Ensure it's on top of other elements */
+    pointer-events: all; /* Disable pointer events to block interactions */
+  }
+  
\ No newline at end of file
diff --git a/src/component/Assets/Loader.jsx b/src/component/Assets/Loader.jsx
index 68a294f..c37e06d 100644
--- a/src/component/Assets/Loader.jsx
+++ b/src/component/Assets/Loader.jsx
@@ -1,22 +1,27 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Spinner } from "react-bootstrap";
+import "./Loader.css"
 
-const Loader = ({ time, loading }) => {
+const Loader = ({ time, loading}) => {
   return (
     <>
-      <Spinner
-        animation="border"
-        variant="light"
-        id="loadSpinner"
-        style={{
-          zIndex: "200",
-          position: "fixed",
-          top: "45vh",
+        <div className="overlay">
+          <Spinner
+            animation="border"
+            variant="light"
+            id="loadSpinner"
+            style={{
+              zIndex: "200",
+              position: "fixed",
+              top: "45vh",
           left: "50vw",
-        }}
-      />
+            }}
+          />
+        </div>
+
     </>
   );
 };
 
 export default Loader;
+