diff --git a/components/Loading/index.tsx b/components/Loading/index.tsx
index 36b27ddd..1c83be42 100644
--- a/components/Loading/index.tsx
+++ b/components/Loading/index.tsx
@@ -1,13 +1,29 @@
-
+import { ClipLoader} from "react-spinners"
 
 const Loading = () => {
   return (
-    <>
-      <div className="w-full h-full flex justify-center item-center">
-        <div className="size-24 animate-spin rounded-full border-b-2 border-[#0354EC]"></div>
-      </div>
-    </>
+    <div className="spinner w-full h-full flex justify-center items-center">
+      <ClipLoader
+          color="#0354EC"
+          size={80}
+          speedMultiplier = {1}
+      />
+    </div>
   )
 }
 
 export default Loading;
+
+
+
+// const Loading = () => {
+//   return (
+//     <>
+//       <div className="w-full h-full flex justify-center item-center">
+//         <div className="size-24 animate-spin rounded-full border-b-2 border-[]"></div>
+//       </div>
+//     </>
+//   )
+// }
+
+// export default Loading;
diff --git a/package.json b/package.json
index 03785b4a..ea515147 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "react-modal-video": "^2.0.2",
     "react-quill": "^2.0.0",
     "react-simple-maps": "^3.0.0",
+    "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.3",
     "reactflow": "^11.11.3",