diff --git a/src/app/generate/[repo]/page.tsx b/src/app/generate/[repo]/page.tsx
index f272df6..dc1e56a 100644
--- a/src/app/generate/[repo]/page.tsx
+++ b/src/app/generate/[repo]/page.tsx
@@ -3,7 +3,7 @@ import GeneratePageClient from "@/app/generate/GeneratePageClient";
 
 interface PageProps {
   params: Promise<{
-    repo: string; // e.g., "facebook/react"
+    repo: string;
   }>;
 }
 
diff --git a/src/app/loading.module.css b/src/app/loading.module.css
new file mode 100644
index 0000000..c886e55
--- /dev/null
+++ b/src/app/loading.module.css
@@ -0,0 +1,122 @@
+.dotContainer {
+  transform-origin: 50% 50%;
+}
+
+.dotItem {
+  animation: dotPulse 1.2s ease-in-out infinite;
+}
+
+.dotWrapper {
+  will-change: transform, opacity;
+}
+
+@keyframes dotPulse {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+}
+
+.dotContainer:nth-child(1) {
+  transform: rotate(0deg);
+}
+
+.dotContainer:nth-child(2) {
+  transform: rotate(30deg);
+}
+
+.dotContainer:nth-child(3) {
+  transform: rotate(60deg);
+}
+
+.dotContainer:nth-child(4) {
+  transform: rotate(90deg);
+}
+
+.dotContainer:nth-child(5) {
+  transform: rotate(120deg);
+}
+
+.dotContainer:nth-child(6) {
+  transform: rotate(150deg);
+}
+
+.dotContainer:nth-child(7) {
+  transform: rotate(180deg);
+}
+
+.dotContainer:nth-child(8) {
+  transform: rotate(210deg);
+}
+
+.dotContainer:nth-child(9) {
+  transform: rotate(240deg);
+}
+
+.dotContainer:nth-child(10) {
+  transform: rotate(270deg);
+}
+
+.dotContainer:nth-child(11) {
+  transform: rotate(300deg);
+}
+
+.dotContainer:nth-child(12) {
+  transform: rotate(330deg);
+}
+
+.dotContainer:nth-child(1) .dotItem {
+  animation-delay: 0s;
+}
+
+.dotContainer:nth-child(2) .dotItem {
+  animation-delay: 0.1s;
+}
+
+.dotContainer:nth-child(3) .dotItem {
+  animation-delay: 0.2s;
+}
+
+.dotContainer:nth-child(4) .dotItem {
+  animation-delay: 0.3s;
+}
+
+.dotContainer:nth-child(5) .dotItem {
+  animation-delay: 0.4s;
+}
+
+.dotContainer:nth-child(6) .dotItem {
+  animation-delay: 0.5s;
+}
+
+.dotContainer:nth-child(7) .dotItem {
+  animation-delay: 0.6s;
+}
+
+.dotContainer:nth-child(8) .dotItem {
+  animation-delay: 0.7s;
+}
+
+.dotContainer:nth-child(9) .dotItem {
+  animation-delay: 0.8s;
+}
+
+.dotContainer:nth-child(10) .dotItem {
+  animation-delay: 0.9s;
+}
+
+.dotContainer:nth-child(11) .dotItem {
+  animation-delay: 1s;
+}
+
+.dotContainer:nth-child(12) .dotItem {
+  animation-delay: 1.1s;
+}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..53d623f
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import styles from "./loading.module.css";
+
+export default function Loading() {
+  const dots = Array.from({ length: 12 });
+
+  return (
+    <div className="min-h-[80vh] bg-black text-white font-sans antialiased flex flex-col items-center justify-center relative overflow-hidden px-6">
+      {/* Background Ambient Glows */}
+      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
+      <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none"></div>
+
+      <main className="z-10 flex flex-col items-center justify-center text-center">
+        <div className="relative w-20 h-20 mb-12">
+          {dots.map((_, i) => (
+            <div
+              key={i}
+              className={`absolute top-0 left-0 w-full h-full ${styles.dotContainer}`}
+            >
+              <div
+                className={`w-2.5 h-2.5 bg-white rounded-full mx-auto shadow-[0_0_10px_rgba(255,255,255,0.2)] ${styles.dotItem} ${styles.dotWrapper}`}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-3xl font-black tracking-[0.4em] text-white animate-pulse uppercase">
+            LOADING
+          </h2>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-[11px] text-gray-400 font-mono tracking-[0.2em] uppercase max-w-60 leading-relaxed">
+              Synchronizing with{" "}
+              <span className="text-blue-400">core.engine</span>
+            </p>
+            <div className="w-12 h-px bg-linear-to-r from-transparent via-blue-500/50 to-transparent"></div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}