diff --git a/apps/web/src/lib/providers/theme.tsx b/apps/web/src/lib/providers/theme.tsx
index 948c533..89e9625 100644
--- a/apps/web/src/lib/providers/theme.tsx
+++ b/apps/web/src/lib/providers/theme.tsx
@@ -39,7 +39,8 @@ export const ThemeProvider = memo<ThemeProviderProps>(({ children }) => {
     <NextThemeProvider
       attribute="class"
       defaultTheme={appConfig.theme.mode}
-      enableSystem
+      forcedTheme={appConfig.theme.mode === "system" ? undefined : appConfig.theme.mode}
+      enableSystem={appConfig.theme.mode === "system"}
       disableTransitionOnChange
     >
       {children}
diff --git a/apps/web/src/modules/marketing/home/report-fan.tsx b/apps/web/src/modules/marketing/home/report-fan.tsx
index ef8b1e9..5deb655 100644
--- a/apps/web/src/modules/marketing/home/report-fan.tsx
+++ b/apps/web/src/modules/marketing/home/report-fan.tsx
@@ -2,40 +2,94 @@ import Image from "next/image";
 
 export const ReportFan = () => {
   return (
-    <div className="animate-fade-in relative mx-auto mt-8 -translate-y-4 opacity-0 [--animation-delay:800ms]">
-      <div className="relative flex h-[320px] w-[500px] items-end justify-center sm:h-[400px] sm:w-[600px] md:h-[480px] md:w-[720px]">
-        {/* Left page - peeking from behind */}
-        <div className="absolute bottom-0 left-0 z-0 w-[45%] origin-bottom-center -rotate-6 drop-shadow-xl">
-          <Image
-            src="/images/report/page-2.png"
-            alt="Report table of contents"
-            width={1653}
-            height={2339}
-            className="rounded-lg"
-          />
-        </div>
+    <div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20">
+      {/* Ambient glow behind the fan */}
+      <div className="pointer-events-none absolute inset-0 -inset-x-20 -bottom-10">
+        <div className="absolute top-1/2 left-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
+        <div className="absolute top-1/3 left-1/3 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
+      </div>
 
-        {/* Right page - peeking from behind */}
-        <div className="absolute right-0 bottom-0 z-0 w-[45%] origin-bottom-center rotate-6 drop-shadow-xl">
-          <Image
-            src="/images/report/page-3.png"
-            alt="Report reading guide"
-            width={1653}
-            height={2339}
-            className="rounded-lg"
-          />
-        </div>
+      {/* Fan container with perspective */}
+      <div
+        className="relative mx-auto w-[340px] sm:w-[480px] md:w-[620px] lg:w-[740px]"
+        style={{ perspective: "1200px" }}
+      >
+        {/* Floating grid dots decoration */}
+        <div className="pointer-events-none absolute -top-8 -right-12 h-24 w-24 opacity-[0.04]"
+          style={{
+            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+            backgroundSize: "8px 8px",
+          }}
+        />
+        <div className="pointer-events-none absolute -bottom-6 -left-10 h-20 w-20 opacity-[0.04]"
+          style={{
+            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+            backgroundSize: "8px 8px",
+          }}
+        />
 
-        {/* Center page - full cover */}
-        <div className="relative z-10 w-[50%] drop-shadow-2xl">
-          <Image
-            src="/images/report/page-1.png"
-            alt="Reputation Blueprint cover"
-            width={1653}
-            height={2339}
-            className="rounded-lg"
-            priority
-          />
+        <div className="relative flex aspect-[3/2.2] items-end justify-center">
+          {/* Left page — tilted, peeking */}
+          <div
+            className="absolute bottom-0 left-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]"
+            style={{
+              transform: "rotate(-8deg) translateY(-4%) translateX(6%)",
+              transformOrigin: "bottom center",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
+              <Image
+                src="/images/report/page-2.png"
+                alt="Report table of contents"
+                width={1653}
+                height={2339}
+                className="block w-full"
+              />
+              {/* Top fade for depth */}
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
+            </div>
+          </div>
+
+          {/* Right page — tilted, peeking */}
+          <div
+            className="absolute right-0 bottom-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]"
+            style={{
+              transform: "rotate(8deg) translateY(-4%) translateX(-6%)",
+              transformOrigin: "bottom center",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
+              <Image
+                src="/images/report/page-3.png"
+                alt="Report reading guide"
+                width={1653}
+                height={2339}
+                className="block w-full"
+              />
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
+            </div>
+          </div>
+
+          {/* Center page — hero, elevated */}
+          <div
+            className="relative z-10 w-[52%] transition-transform duration-500 ease-out hover:scale-[1.03]"
+            style={{
+              transform: "translateY(-2%)",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/80 shadow-[0_32px_80px_-12px_rgba(0,0,0,0.25)]">
+              <Image
+                src="/images/report/page-1.png"
+                alt="Reputation Blueprint cover"
+                width={1653}
+                height={2339}
+                className="block w-full"
+                priority
+              />
+            </div>
+            {/* Reflection hint */}
+            <div className="pointer-events-none mx-auto mt-1 h-8 w-[90%] rounded-b-xl bg-gradient-to-b from-black/[0.04] to-transparent blur-sm" />
+          </div>
         </div>
       </div>
     </div>