diff --git a/apps/web/src/app/generate/page.tsx b/apps/web/src/app/generate/page.tsx
new file mode 100644
index 0000000..43cd975
--- /dev/null
+++ b/apps/web/src/app/generate/page.tsx
@@ -0,0 +1,83 @@
+import { Suspense } from "react";
+import { ProgressTracker } from "@/components/progress-tracker";
+import { Github, Loader2 } from "lucide-react";
+
+function GeneratePageContent({
+  searchParams,
+}: {
+  searchParams: { repo?: string; id?: string };
+}) {
+  const repoUrl = searchParams.repo || "";
+  const generationId = searchParams.id || "";
+
+  const repoName = repoUrl
+    ? repoUrl.replace("https://github.com/", "").replace(/\/$/, "")
+    : "";
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+      <div className="text-center mb-12">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6">
+          <Github className="w-8 h-8 text-zinc-400" />
+        </div>
+
+        <h1 className="text-2xl sm:text-3xl font-bold text-white mb-3">
+          Analyzing Repository
+        </h1>
+
+        <p className="text-zinc-400 font-mono text-sm break-all max-w-md mx-auto">
+          {repoName || repoUrl || "Unknown repository"}
+        </p>
+      </div>
+
+      {generationId ? (
+        <ProgressTracker generationId={generationId} repoUrl={repoUrl} />
+      ) : (
+        <div className="text-center p-8 rounded-2xl glass border-red-500/30">
+          <p className="text-red-400">
+            Missing generation ID. Please try again.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function GeneratePageSkeleton() {
+  return (
+    <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+      <div className="text-center mb-12">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6">
+          <Loader2 className="w-8 h-8 text-zinc-400 animate-spin" />
+        </div>
+
+        <div className="h-8 w-48 bg-zinc-800 rounded animate-pulse mx-auto mb-3" />
+        <div className="h-4 w-64 bg-zinc-800 rounded animate-pulse mx-auto" />
+      </div>
+
+      <div className="space-y-4">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div
+            key={i}
+            className="flex items-center gap-4 p-4 rounded-xl bg-zinc-900/50"
+          >
+            <div className="w-8 h-8 rounded-full bg-zinc-800 animate-pulse" />
+            <div className="flex-1 h-4 bg-zinc-800 rounded animate-pulse" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function GeneratePage({
+  searchParams,
+}: {
+  searchParams: { repo?: string; id?: string };
+}) {
+  return (
+    <Suspense fallback={<GeneratePageSkeleton />}>
+      <GeneratePageContent searchParams={searchParams} />
+    </Suspense>
+  );
+}