diff --git a/public/images/sanctuary_arch.png b/public/images/sanctuary_arch.png
new file mode 100644
index 0000000..aa6f972
Binary files /dev/null and b/public/images/sanctuary_arch.png differ
diff --git a/public/images/sanctuary_bg.png b/public/images/sanctuary_bg.png
new file mode 100644
index 0000000..a5026e9
Binary files /dev/null and b/public/images/sanctuary_bg.png differ
diff --git a/src/components/EntranceExperience.tsx b/src/components/EntranceExperience.tsx
index e8c7595..eecf715 100644
--- a/src/components/EntranceExperience.tsx
+++ b/src/components/EntranceExperience.tsx
@@ -7,6 +7,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { useTexture } from "@react-three/drei";
 import * as THREE from "three";
+import Image from "next/image";
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -365,32 +366,159 @@ export default function EntranceExperience() {
         </div>
       </div>
 
-      {/* ----------------- FOOD PLATTER STORYTELLING CARD (REVEALS AT END) ----------------- */}
+      {/* ----------------- SPATIAL SANCTUARY OVERLAY (REVEALS AT END) ----------------- */}
       <AnimatePresence>
         {scrollProgress > 0.75 && (
           <motion.div
-            initial={{ opacity: 0, x: -50, scale: 0.95 }}
-            animate={{ opacity: 1, x: 0, scale: 1 }}
-            exit={{ opacity: 0, x: -50, scale: 0.95 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
-            className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.8 }}
+            className="absolute inset-0 z-35 w-full h-full bg-[#fdfcf7] flex flex-col justify-between"
           >
-            {/* Inner traditional gold frame */}
-            <div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
+            {/* Parchment background containing sketches and mandalas */}
+            <Image
+              src="/images/sanctuary_bg.png"
+              alt="Traditional South Indian Sanctuary Background"
+              fill
+              priority
+              className="object-fill pointer-events-none select-none z-0"
+            />
 
-            <span className="font-sans text-[#188754] text-[10px] sm:text-[11px] tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
-              P U R E   V E G E T A R I A N   F E A S T
-            </span>
+            {/* Traditional Temple Borders */}
+            <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />
 
-            <h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.15em] uppercase font-bold mb-3 text-center">
-              A Royal Banquet
-            </h3>
+            {/* Content Container */}
+            <div className="max-w-7xl mx-auto w-full flex-1 flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 px-6 sm:px-12 md:px-16 pt-16 pb-20 relative z-10">
+              
+              {/* Left Side: Text Details and Grid of 4 Cards */}
+              <div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
+                
+                {/* Pre-title with Gold Crest */}
+                <div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
+                  <svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
+                  </svg>
+                  <span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
+                    — OUR STORY —
+                  </span>
+                </div>
 
-            <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-4" />
+                {/* Main Headline */}
+                <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4">
+                  The Spatial<br />
+                  <span className="text-[#bc9e65] font-extrabold block mt-1">Sanctuary</span>
+                </h2>
+
+                {/* Traditional Gold Divider */}
+                <div className="flex items-center gap-3 w-40 mb-5 justify-center lg:justify-start pointer-events-none select-none">
+                  <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
+                  <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
+                    <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
+                  </svg>
+                  <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
+                </div>
+
+                {/* Narrative Paragraph */}
+                <p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6">
+                  Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life.
+                </p>
+
+                {/* Scroll Down Slide Indicator */}
+                <div className="flex items-center gap-2 mb-6 pointer-events-none select-none text-[#bc9e65]">
+                  <span className="font-sans text-[9px] tracking-[0.2em] font-bold uppercase">
+                    Scroll down to slide right
+                  </span>
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v8M12 16l4-4M12 16l-4-4" />
+                  </svg>
+                </div>
+
+                {/* Grid of 4 Sanctuary Features */}
+                <div className="grid grid-cols-2 gap-4 w-full max-w-lg">
+                  
+                  {/* Card 1: Pillars */}
+                  <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
+                    <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                      <path d="M6 20V4M18 20V4M4 20h16M4 4h16M9 8h6M9 12h6M9 16h6" strokeLinecap="round" />
+                    </svg>
+                    <h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                      Heritage Pillars
+                    </h5>
+                    <p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
+                      Timeless architecture rooted in tradition.
+                    </p>
+                  </div>
+
+                  {/* Card 2: Lanterns */}
+                  <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
+                    <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                      <path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
+                    </svg>
+                    <h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                      Brass Lanterns
+                    </h5>
+                    <p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
+                      Traditional lighting that sets the mood.
+                    </p>
+                  </div>
+
+                  {/* Card 3: Feast Tables */}
+                  <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
+                    <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                      <path d="M3 10h18M5 10v9M19 10v9M8 6h8M12 3v3" strokeLinecap="round" />
+                    </svg>
+                    <h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                      Set Feast Tables
+                    </h5>
+                    <p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
+                      Every table is a celebration of South Indian flavors.
+                    </p>
+                  </div>
+
+                  {/* Card 4: Hospitality */}
+                  <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
+                    <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                    </svg>
+                    <h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                      Warm Hospitality
+                    </h5>
+                    <p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
+                      Where every guest feels at home.
+                    </p>
+                  </div>
+
+                </div>
+
+              </div>
+
+              {/* Right Side: Cropped Traditional Archway scene with overlay leaves & badge */}
+              <div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative select-none pointer-events-none">
+                <div className="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative">
+                  <Image
+                    src="/images/sanctuary_arch.png"
+                    alt="My Dosa Place Spatial Dining Sanctuary"
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 46vw"
+                    className="object-contain"
+                    priority
+                  />
+                </div>
+              </div>
+
+            </div>
+
+            {/* Bottom Gold-Bordered Green Banner */}
+            <div className="w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-10 flex items-center justify-center gap-4 pointer-events-none select-none">
+              <span className="font-serif text-xs text-[#bc9e65] font-semibold italic">My Dosa Place</span>
+              <span className="h-4 w-[1px] bg-[#bc9e65]/40" />
+              <span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] text-[#bc9e65] font-bold uppercase">
+                ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
+              </span>
+            </div>
 
-            <p className="font-sans text-xs sm:text-[13px] text-stone-800 leading-relaxed tracking-wider font-medium text-justify">
-              Your table is set. Experience a royal banquet served on fresh banana leaves, where crispy ghee-roasted dosas, steaming lentil sambar, and hand-ground chutneys await you.
-            </p>
           </motion.div>
         )}
       </AnimatePresence>