diff --git a/app/loading.tsx b/app/loading.tsx
index ea7e5a9..9fb3d11 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,5 +1,9 @@
+import Loader from "@/components/Loader";
+
 const Loading = () => {
-  <div className="bg-red-950">Loading...</div>
+  return (
+    <Loader />
+  )
 }
 
 export default Loading;
diff --git a/components/Loader.tsx b/components/Loader.tsx
new file mode 100644
index 0000000..7feb4d7
--- /dev/null
+++ b/components/Loader.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { PuffLoader } from "react-spinners";
+
+const Loader = () => {
+  return (
+    <div
+      className="
+      h-[70vh]
+      flex
+      flex-col
+      justify-center
+      items-center
+      "
+    >
+      <PuffLoader
+        size={100}
+        color="red"
+      />
+    </div>
+  )
+}
+
+export default Loader