diff --git a/app/page.tsx b/app/page.tsx
index e26b9b2..293ced7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,30 +1,31 @@
-"use client"
+"use client";
 
-import { Navbar } from "@/components/landing/navbar"
-import { Footer } from "@/components/landing/footer"
-import { LandingHero } from "@/components/landing/hero-section"
-import { ComicCreationForm } from "@/components/landing/comic-creation-form"
-import { useState, useEffect } from "react"
+import { Navbar } from "@/components/landing/navbar";
+import { Footer } from "@/components/landing/footer";
+import { LandingHero } from "@/components/landing/hero-section";
+import { ComicCreationForm } from "@/components/landing/comic-creation-form";
+import { ComicPreview } from "@/components/landing/comic-preview";
+import { useState, useEffect } from "react";
 
 export default function Home() {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [prompt, setPrompt] = useState("")
-  const [style, setStyle] = useState("noir")
-  const [characterFiles, setCharacterFiles] = useState<File[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1);
+  const [prompt, setPrompt] = useState("");
+  const [style, setStyle] = useState("noir");
+  const [characterFiles, setCharacterFiles] = useState<File[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   // Auto-loop through pages every 6 seconds
   useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentPage((prev) => (prev === 3 ? 1 : prev + 1))
-    }, 6000)
+      setCurrentPage((prev) => (prev === 4 ? 1 : prev + 1));
+    }, 6000);
 
-    return () => clearInterval(interval)
-  }, [])
+    return () => clearInterval(interval);
+  }, []);
 
   const goToPage = (page: number) => {
-    setCurrentPage(page)
-  }
+    setCurrentPage(page);
+  };
 
   return (
     <div className="min-h-screen bg-background flex flex-col overflow-hidden relative">
@@ -42,186 +43,28 @@ export default function Home() {
           <div className="max-w-xl mx-auto lg:mx-0 w-full z-10">
             <LandingHero />
 
-             <div className="space-y-4 sm:space-y-5 mt-4 sm:mt-5">
-               <div className="opacity-0 animate-fade-in-up animation-delay-100">
-                 <ComicCreationForm
-                   prompt={prompt}
-                   setPrompt={setPrompt}
-                   style={style}
-                   setStyle={setStyle}
-                   characterFiles={characterFiles}
-                   setCharacterFiles={setCharacterFiles}
-                   isLoading={isLoading}
-                   setIsLoading={setIsLoading}
-                 />
-               </div>
-             </div>
+            <div className="space-y-4 sm:space-y-5 mt-4 sm:mt-5">
+              <div className="opacity-0 animate-fade-in-up animation-delay-100">
+                <ComicCreationForm
+                  prompt={prompt}
+                  setPrompt={setPrompt}
+                  style={style}
+                  setStyle={setStyle}
+                  characterFiles={characterFiles}
+                  setCharacterFiles={setCharacterFiles}
+                  isLoading={isLoading}
+                  setIsLoading={setIsLoading}
+                />
+              </div>
+            </div>
           </div>
         </div>
 
         {/* Right: Visual Preview / Canvas */}
-        <div className="hidden lg:flex w-full lg:w-1/2 border-l border-border relative items-center justify-center overflow-hidden">
-          {/* Dot grid background */}
-          <div className="absolute inset-0 dot-grid opacity-30" />
-
-          <div className="relative z-10 flex flex-col gap-4">
-            {/* Background floating comics - less prominent */}
-            <div className="absolute -top-32 -left-20 opacity-20 animate-float animation-delay-300">
-              <div className="bg-white w-48 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-12">
-                <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
-                  <img
-                    src="/manga-style-hero-battle-scene.jpg"
-                    alt="Background comic"
-                    className="w-full h-full object-cover opacity-60"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute -bottom-40 left-10 opacity-15 animate-float animation-delay-500">
-              <div className="bg-white w-56 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-6">
-                <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
-                  <img
-                    src="/american-comic-superhero-flying.jpg"
-                    alt="Background comic"
-                    className="w-full h-full object-cover opacity-60"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute top-20 -right-32 opacity-25 animate-float animation-delay-700">
-              <div className="bg-white w-52 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-12">
-                <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
-                  <img
-                    src="/noir-detective-comic-panel-dark.jpg"
-                    alt="Background comic"
-                    className="w-full h-full object-cover opacity-60"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute bottom-10 -right-24 opacity-18 animate-float animation-delay-1000">
-              <div className="bg-white w-44 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-6">
-                <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
-                  <img
-                    src="/vintage-comic-book-cover-retro.jpg"
-                    alt="Background comic"
-                    className="w-full h-full object-cover opacity-60"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="relative">
-              <div className="bg-white w-80 aspect-3/4 p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300">
-                <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
-                  {/* Page transition container */}
-                  <div className="relative w-full h-full">
-                    {/* Page 1 */}
-                    <div
-                      className={`absolute inset-0 transition-all duration-500 ${
-                        currentPage === 1 ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-full"
-                      }`}
-                    >
-                      <img
-                        src="/comic-book-page-with-superhero-action-scene-noir-s.jpg"
-                        alt="Comic preview page 1"
-                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
-                      />
-                      <div className="scan-line opacity-50" />
-                      <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
-                        Page 1
-                      </div>
-                      <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
-                        {'"The city needs a hero..."'}
-                      </div>
-                    </div>
-
-                    {/* Page 2 */}
-                    <div
-                      className={`absolute inset-0 transition-all duration-500 ${
-                        currentPage === 2 ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
-                      }`}
-                    >
-                      <img
-                        src="/american-comic-superhero-flying.jpg"
-                        alt="Comic preview page 2"
-                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
-                      />
-                      <div className="scan-line opacity-50" />
-                      <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
-                        Page 2
-                      </div>
-                      <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform rotate-1">
-                        {'"And a hero shall rise!"'}
-                      </div>
-                    </div>
-
-                    <div
-                      className={`absolute inset-0 transition-all duration-500 ${
-                        currentPage === 3 ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
-                      }`}
-                    >
-                      <img
-                        src="/manga-style-hero-battle-scene.jpg"
-                        alt="Comic preview page 3"
-                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
-                      />
-                      <div className="scan-line opacity-50" />
-                      <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
-                        Page 3
-                      </div>
-                      <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
-                        {'"The battle begins!"'}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute -right-20 top-1/2 -translate-y-1/2 flex flex-col gap-3">
-              <button
-                onClick={() => goToPage(1)}
-                className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
-                  currentPage === 1 ? "border-indigo bg-indigo/10" : "hover:border-indigo/50 hover:bg-indigo/5"
-                }`}
-                aria-label="Go to page 1"
-              >
-                <div
-                  className={`w-2 h-2 rounded-full transition-colors duration-300 ${currentPage === 1 ? "bg-indigo" : "bg-muted-foreground"}`}
-                />
-              </button>
-              <button
-                onClick={() => goToPage(2)}
-                className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
-                  currentPage === 2 ? "border-indigo bg-indigo/10" : "hover:border-indigo/50 hover:bg-indigo/5"
-                }`}
-                aria-label="Go to page 2"
-              >
-                <div
-                  className={`w-2 h-2 rounded-full transition-colors duration-300 ${currentPage === 2 ? "bg-indigo" : "bg-muted-foreground"}`}
-                />
-              </button>
-              <button
-                onClick={() => goToPage(3)}
-                className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
-                  currentPage === 3 ? "border-indigo bg-indigo/10" : "hover:border-indigo/50 hover:bg-indigo/5"
-                }`}
-                aria-label="Go to page 3"
-              >
-                <div
-                  className={`w-2 h-2 rounded-full transition-colors duration-300 ${currentPage === 3 ? "bg-indigo" : "bg-muted-foreground"}`}
-                />
-              </button>
-            </div>
-          </div>
-        </div>
+        <ComicPreview currentPage={currentPage} goToPage={goToPage} />
       </main>
 
       <Footer />
     </div>
-  )
+  );
 }
diff --git a/components/landing/comic-preview.tsx b/components/landing/comic-preview.tsx
new file mode 100644
index 0000000..a1ce0f5
--- /dev/null
+++ b/components/landing/comic-preview.tsx
@@ -0,0 +1,224 @@
+export function ComicPreview({
+  currentPage,
+  goToPage,
+}: {
+  currentPage: number;
+  goToPage: (page: number) => void;
+}) {
+  return (
+    <div className="hidden lg:flex w-full lg:w-1/2 border-l border-border relative items-center justify-center overflow-hidden">
+      {/* Dot grid background */}
+      <div className="absolute inset-0 dot-grid opacity-30" />
+
+      <div className="relative z-10 flex flex-col gap-4">
+        {/* Background floating comics - less prominent - hidden on mobile */}
+        <div className="hidden lg:block absolute -top-32 -left-20 opacity-20 animate-float animation-delay-300">
+          <div className="bg-white w-48 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-12">
+            <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
+              <img
+                src="/manga-style-hero-battle-scene.jpg"
+                alt="Background comic"
+                className="w-full h-full object-cover opacity-60"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:block absolute -bottom-40 left-10 opacity-15 animate-float animation-delay-500">
+          <div className="bg-white w-56 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-6">
+            <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
+              <img
+                src="/american-comic-superhero-flying.jpg"
+                alt="Background comic"
+                className="w-full h-full object-cover opacity-60"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:block absolute top-20 -right-32 opacity-25 animate-float animation-delay-700">
+          <div className="bg-white w-52 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-12">
+            <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
+              <img
+                src="/noir-detective-comic-panel-dark.jpg"
+                alt="Background comic"
+                className="w-full h-full object-cover opacity-60"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:block absolute bottom-10 -right-24 opacity-18 animate-float animation-delay-1000">
+          <div className="bg-white w-44 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-6">
+            <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
+              <img
+                src="/vintage-comic-book-cover-retro.jpg"
+                alt="Background comic"
+                className="w-full h-full object-cover opacity-60"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="bg-white w-80 aspect-3/4 p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300">
+            <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
+              {/* Page transition container */}
+              <div className="relative w-full h-full">
+                {/* Page 1 */}
+                <div
+                  className={`absolute inset-0 transition-all duration-500 ${
+                    currentPage === 1
+                      ? "opacity-100 translate-x-0"
+                      : "opacity-0 -translate-x-full"
+                  }`}
+                >
+                  <img
+                    src="/american-comic-superhero-flying.jpg"
+                    alt="Comic preview page 1"
+                    className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
+                  />
+                  <div className="scan-line opacity-50" />
+                  <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
+                    American Modern
+                  </div>
+                  <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform rotate-1">
+                    {"\"And a hero shall rise!\""}
+                  </div>
+                </div>
+
+                {/* Page 2 */}
+                <div
+                  className={`absolute inset-0 transition-all duration-500 ${
+                    currentPage === 2
+                      ? "opacity-100 translate-x-0"
+                      : "opacity-0 translate-x-full"
+                  }`}
+                >
+                  <img
+                    src="/manga-style-hero-battle-scene.jpg"
+                    alt="Comic preview page 2"
+                    className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
+                  />
+                  <div className="scan-line opacity-50" />
+                  <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
+                    Manga
+                  </div>
+                  <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
+                    {"\"The battle begins!\""}
+                  </div>
+                </div>
+
+                <div
+                  className={`absolute inset-0 transition-all duration-500 ${
+                    currentPage === 3
+                      ? "opacity-100 translate-x-0"
+                      : "opacity-0 translate-x-full"
+                  }`}
+                >
+                  <img
+                    src="/comic-book-page-with-superhero-action-scene-noir-s.jpg"
+                    alt="Comic preview page 3"
+                    className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
+                  />
+                  <div className="scan-line opacity-50" />
+                  <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
+                    Noir
+                  </div>
+                  <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
+                    {"\"The city needs a hero...\""}
+                  </div>
+                </div>
+
+                {/* Page 4 */}
+                <div
+                  className={`absolute inset-0 transition-all duration-500 ${
+                    currentPage === 4
+                      ? "opacity-100 translate-x-0"
+                      : "opacity-0 translate-x-full"
+                  }`}
+                >
+                  <img
+                    src="/vintage-superman.jpg"
+                    alt="Comic preview page 4"
+                    className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
+                  />
+                  <div className="scan-line opacity-50" />
+                  <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
+                    Vintage
+                  </div>
+                  <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
+                    {"\"Super Action\""}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:flex absolute -right-20 top-1/2 -translate-y-1/2 flex flex-col gap-3">
+          <button
+            onClick={() => goToPage(1)}
+            className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
+              currentPage === 1
+                ? "border-indigo bg-indigo/10"
+                : "hover:border-indigo/50 hover:bg-indigo/5"
+            }`}
+            aria-label="Go to page 1"
+          >
+            <div
+              className={`w-2 h-2 rounded-full transition-colors duration-300 ${
+                currentPage === 1 ? "bg-indigo" : "bg-muted-foreground"
+              }`}
+            />
+          </button>
+          <button
+            onClick={() => goToPage(2)}
+            className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
+              currentPage === 2
+                ? "border-indigo bg-indigo/10"
+                : "hover:border-indigo/50 hover:bg-indigo/5"
+            }`}
+            aria-label="Go to page 2"
+          >
+            <div
+              className={`w-2 h-2 rounded-full transition-colors duration-300 ${
+                currentPage === 2 ? "bg-indigo" : "bg-muted-foreground"
+              }`}
+            />
+          </button>
+          <button
+            onClick={() => goToPage(3)}
+            className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
+              currentPage === 3
+                ? "border-indigo bg-indigo/10"
+                : "hover:border-indigo/50 hover:bg-indigo/5"
+            }`}
+            aria-label="Go to page 3"
+          >
+            <div
+              className={`w-2 h-2 rounded-full transition-colors duration-300 ${
+                currentPage === 3 ? "bg-indigo" : "bg-muted-foreground"
+              }`}
+            />
+          </button>
+          <button
+            onClick={() => goToPage(4)}
+            className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
+              currentPage === 4
+                ? "border-indigo bg-indigo/10"
+                : "hover:border-indigo/50 hover:bg-indigo/5"
+            }`}
+            aria-label="Go to page 4"
+          >
+            <div
+              className={`w-2 h-2 rounded-full transition-colors duration-300 ${
+                currentPage === 4 ? "bg-indigo" : "bg-muted-foreground"
+              }`}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/public/vintage-superman.jpg b/public/vintage-superman.jpg
new file mode 100644
index 0000000..4f74797
Binary files /dev/null and b/public/vintage-superman.jpg differ