diff --git a/.gitignore b/.gitignore
index 24111c6..0536d95 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
diff --git a/app/demo/page.tsx b/app/demo/page.tsx
new file mode 100644
index 0000000..2e101ef
--- /dev/null
+++ b/app/demo/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+export default function DemoPage() {
+    return (
+        <div className="min-h-screen bg-white dark:bg-gray-950 py-12 px-4">
+            <div className="max-w-6xl mx-auto">
+                <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-8 text-center">
+                    GenForm AI Demo
+                </h1>
+                <div className="mb-6 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-center">
+                    <p className="text-base sm:text-lg font-semibold text-blue-700 dark:text-blue-300 animate-pulse">
+                        👉 Click the blue dot to begin the demo!
+                    </p>
+
+                </div>
+
+                <div
+                    style={{
+                        position: "relative",
+                        paddingBottom: "calc(47.8917% + 41px)",
+                        height: 0,
+                        width: "100%",
+                    }}
+                >
+                    <iframe
+                        src="https://demo.arcade.software/SDz6cwsuYffgEjs9EOyp?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+                        title="GenForm AI"
+                        frameBorder="0"
+                        loading="lazy"
+                        allow="clipboard-write"
+                        allowFullScreen
+                        style={{
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: "100%",
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/LandingPage.tsx b/components/LandingPage.tsx
index 054034c..7b20292 100644
--- a/components/LandingPage.tsx
+++ b/components/LandingPage.tsx
@@ -68,14 +68,16 @@ const LandingPage = ({ userId }: LandingPageProps) => {
                   <ArrowRight className="ml-2 w-4 h-4 sm:w-5 sm:h-5" />
                 </Button>
               </Link>
-              <Link href="/dashboard/forms" className="w-full sm:w-auto">
+              <Link href="/demo" className="w-full sm:w-auto">
+
+                {/* <Link href="/dashboard/forms" className="w-full sm:w-auto"> */}
                 <Button
                   size="lg"
                   variant="outline"
                   className="w-full sm:w-auto px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg border-green-500 text-green-500 hover:bg-green-50 dark:hover:bg-green-900/10"
                 >
                   <Sparkles className="mr-2 w-4 h-4 sm:w-5 sm:h-5" />
-                  See Examples
+                  See a Demo form
                 </Button>
               </Link>
             </div>
@@ -529,8 +531,8 @@ const LandingPage = ({ userId }: LandingPageProps) => {
                   <div className="overflow-hidden">
                     <p
                       className={`text-xs sm:text-sm text-gray-600 dark:text-gray-300 transition-all duration-700 ease-smooth-out ${openFaq === "customize"
-                          ? "opacity-100 translate-y-0"
-                          : "opacity-0 translate-y-1"
+                        ? "opacity-100 translate-y-0"
+                        : "opacity-0 translate-y-1"
                         }`}
                     >
                       Absolutely! After the AI generates your form, you have full
diff --git a/middleware.ts b/middleware.ts
index 9d01a89..8febcb8 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -4,24 +4,24 @@ import { Ratelimit } from "@upstash/ratelimit";
 import { Redis } from "@upstash/redis";
 
 // Define public routes that don't require authentication
-const isPublicRoute = createRouteMatcher(['/', '/sign-in(.*)', '/sign-up(.*)']);
+const isPublicRoute = createRouteMatcher(['/', '/sign-in(.*)', '/sign-up(.*)', '/demo(.*)']);
 
 // Graceful Redis Initialization
 // This prevents crashes in CI/Build environments where env vars might be missing
 const redis = (process.env.UPSTASH_REDIS_REST_URL && process.env.UPSTASH_REDIS_REST_TOKEN)
   ? new Redis({
-      url: process.env.UPSTASH_REDIS_REST_URL,
-      token: process.env.UPSTASH_REDIS_REST_TOKEN,
-    })
+    url: process.env.UPSTASH_REDIS_REST_URL,
+    token: process.env.UPSTASH_REDIS_REST_TOKEN,
+  })
   : null; // Return null if config is missing
 
 // Initialize Rate Limiter safely
 const ratelimit = redis
   ? new Ratelimit({
-      redis: redis,
-      limiter: Ratelimit.slidingWindow(10, "10 m"),
-      analytics: true,
-    })
+    redis: redis,
+    limiter: Ratelimit.slidingWindow(10, "10 m"),
+    analytics: true,
+  })
   : null;
 
 export default clerkMiddleware(async (auth, req) => {