diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3631b9a..6f96885 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -57,6 +57,7 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -1439,6 +1440,7 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1480,6 +1482,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1585,6 +1588,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1786,6 +1790,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2749,6 +2754,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2809,6 +2815,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3059,6 +3066,7 @@
       "resolved": "https://registry.npmjs.org/rolldown-vite/-/rolldown-vite-7.2.5.tgz",
       "integrity": "sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/runtime": "0.97.0",
         "fdir": "^6.5.0",
@@ -3181,6 +3189,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ae8e702..651bf8f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
 import AboutUs from './components/AboutUs';
+import WhyKshitij from './components/WhyKshitij';
+
 
 function App() {
   const words = ['Inside', 'Within', 'Deeper', 'Godward'];
@@ -106,7 +108,18 @@ function App() {
       </div>
 
       {/* About Us Section with Boat Animation */}
-      <AboutUs />
+      {/* Shared Forest Background */}
+<div
+  className="relative bg-cover bg-center bg-fixed"
+  style={{ backgroundImage: "url('/image.png')" }}
+>
+  <div className="relative z-10">
+    <AboutUs />
+    <WhyKshitij />
+  </div>
+</div>
+
+
       
     </div>
   );
diff --git a/frontend/src/components/AboutUs.jsx b/frontend/src/components/AboutUs.jsx
index b018c97..54c26de 100644
--- a/frontend/src/components/AboutUs.jsx
+++ b/frontend/src/components/AboutUs.jsx
@@ -5,33 +5,37 @@ const AboutUs = () => {
     const [hoveredBubble, setHoveredBubble] = useState(null);
 
     return (
-        <section id="about" className="relative min-h-screen overflow-hidden pt-20">
-            {/* Background Image */}
-            <div
-                className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
-                style={{
-                    backgroundImage: "url('/image.png')",
-                }}
-            />
-
-            {/* Bubbles Container */}
-            <div className="relative z-10 w-full h-screen pt-8">
+        <section id="about" className="relative min-h-screen overflow-hidden pt-24">
+
+            {/* Section Overlay for Readability */}
+            <div className="absolute inset-0 bg-black/40"></div>
+
+            <div className="relative z-10 w-full min-h-screen pt-8">
 
                 {/* Instruction Text */}
                 <div className="absolute top-[26%] left-[3%] max-w-xs">
                     <div className="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-[0_0_40px_rgba(0,0,0,0.3)]">
                         <h1 className="text-5xl md:text-7xl font-black text-white tracking-tight leading-none mb-3 drop-shadow-[0_3px_12px_rgba(0,0,0,0.9)]">
-                            About <span className="bg-gradient-to-r from-amber-300 via-emerald-300 to-amber-300 bg-clip-text text-transparent">Us</span>
+                            About{" "}
+                            <span className="bg-gradient-to-r from-amber-300 via-emerald-300 to-amber-300 bg-clip-text text-transparent">
+                                Us
+                            </span>
                         </h1>
+
                         <div className="h-1 w-20 bg-gradient-to-r from-amber-400 to-emerald-400 rounded-full mb-4" />
+
                         <p className="text-sm md:text-base text-white/90 font-medium leading-relaxed drop-shadow-[0_1px_4px_rgba(0,0,0,0.9)]">
                             Three seekers. Three sparks of purpose.
-                            Hover over the <span className="text-amber-300 font-semibold">bubbles</span>  to uncover our Mission, our Vision, and the Values that light our way.
+                            Hover over the{" "}
+                            <span className="text-amber-300 font-semibold">
+                                bubbles
+                            </span>{" "}
+                            to uncover our Mission, our Vision, and the Values that light our way.
                         </p>
                     </div>
                 </div>
 
-                {/* Bubble 1 - Left Person (Mission) */}
+                {/* Bubble 1 - Mission */}
                 <div
                     className="absolute top-[4%] left-[35%] cursor-pointer"
                     onMouseEnter={() => setHoveredBubble('mission')}
@@ -40,10 +44,9 @@ const AboutUs = () => {
                     <img
                         src="/bubble.png"
                         alt="Mission Bubble"
-                        className="w-10 h-10 md:w-14 md:h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
+                        className="w-14 h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
                     />
 
-                    {/* Mission Content */}
                     {hoveredBubble === 'mission' && (
                         <div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-80 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-amber-300 animate-fade-in">
                             <div className="flex items-center gap-3 mb-3">
@@ -57,7 +60,7 @@ const AboutUs = () => {
                     )}
                 </div>
 
-                {/* Bubble 2 - Center Person (Vision) */}
+                {/* Bubble 2 - Vision */}
                 <div
                     className="absolute top-[1%] left-[55%] cursor-pointer"
                     onMouseEnter={() => setHoveredBubble('vision')}
@@ -66,11 +69,10 @@ const AboutUs = () => {
                     <img
                         src="/bubble.png"
                         alt="Vision Bubble"
-                        className="w-16 h-16 md:w-20 md:h-20 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
+                        className="w-20 h-20 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
                         style={{ animationDelay: '0.5s' }}
                     />
 
-                    {/* Vision Content */}
                     {hoveredBubble === 'vision' && (
                         <div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-80 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-green-300 animate-fade-in">
                             <div className="flex items-center gap-3 mb-3">
@@ -84,7 +86,7 @@ const AboutUs = () => {
                     )}
                 </div>
 
-                {/* Bubble 3 - Right Person (Values) */}
+                {/* Bubble 3 - Values */}
                 <div
                     className="absolute top-[22%] right-[27%] cursor-pointer"
                     onMouseEnter={() => setHoveredBubble('values')}
@@ -93,11 +95,10 @@ const AboutUs = () => {
                     <img
                         src="/bubble.png"
                         alt="Values Bubble"
-                        className="w-16 h-16 md:w-10 md:h-10 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
+                        className="w-14 h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
                         style={{ animationDelay: '1s' }}
                     />
 
-                    {/* Values Content */}
                     {hoveredBubble === 'values' && (
                         <div className="absolute top-full right-0 mt-4 w-96 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-blue-300 animate-fade-in">
                             <div className="flex items-center gap-3 mb-4">
@@ -148,3 +149,4 @@ const AboutUs = () => {
 };
 
 export default AboutUs;
+
diff --git a/frontend/src/components/whykshitij.jsx b/frontend/src/components/whykshitij.jsx
new file mode 100644
index 0000000..2e41ca5
--- /dev/null
+++ b/frontend/src/components/whykshitij.jsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { Leaf, Brain, BookOpen, Users, Landmark, Sparkles } from "lucide-react";
+
+const items = [
+  { icon: Leaf, title: "Live Your Potential", desc: "Discover purpose and inner strength." },
+  { icon: Brain, title: "Inner Peace", desc: "Calm your mind amid college chaos." },
+  { icon: BookOpen, title: "Spiritual Knowledge", desc: "Wisdom from the Gita & Upanishads." },
+  { icon: Users, title: "Community", desc: "Walk the spiritual journey together." },
+  { icon: Landmark, title: "Heritage Exploration", desc: "Explore sacred Odisha sites." },
+  { icon: Sparkles, title: "Divine Connection", desc: "Experience devotion and transformation." }
+];
+
+export default function WhyKshitij() {
+  const [open, setOpen] = useState(false);
+
+  const radius = 260; // distance of cards from center
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center text-white">
+
+      {/* soft overlay for readability on forest */}
+      <div className="absolute inset-0 bg-black/40"></div>
+
+      <div className="relative z-10 flex flex-col items-center">
+
+        {/* Title */}
+        <h2 className="text-5xl md:text-6xl font-bold mb-20 text-center">
+          Why <span className="text-yellow-400">KSHITIJ</span>
+        </h2>
+
+        {/* Main container */}
+        <div className="relative w-[720px] h-[620px] flex items-center justify-center">
+
+          {/* Cards */}
+          {items.map((item, index) => {
+
+            const angle = (index / items.length) * 2 * Math.PI;
+
+            const x = open ? radius * Math.cos(angle) : 0;
+            const y = open ? radius * Math.sin(angle) : 0;
+
+            const Icon = item.icon;
+
+            return (
+              <div
+                key={index}
+                className="absolute transition-all duration-700 ease-out"
+                style={{
+                  transform: `translate(${x}px, ${y}px)`,
+                  opacity: open ? 1 : 0
+                }}
+              >
+                <div className="w-44 p-5 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 text-center shadow-xl hover:scale-105 transition">
+
+                  <Icon className="mx-auto mb-2 text-yellow-300" size={30} />
+
+                  <h3 className="font-semibold mb-1">{item.title}</h3>
+
+                  <p className="text-sm text-white/80">{item.desc}</p>
+
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Vintage Treasure Chest */}
+          <div
+            onClick={() => setOpen(!open)}
+            className="relative cursor-pointer flex flex-col items-center group"
+          >
+
+            {/* Chest Lid */}
+            <div
+              className={`w-56 h-20 bg-gradient-to-b from-yellow-700 to-yellow-900 border-4 border-yellow-950 rounded-t-[30px] origin-bottom transition-transform duration-700 shadow-xl ${
+                open ? "-rotate-45" : "rotate-0"
+              }`}
+            ></div>
+
+            {/* Chest Body */}
+            <div className="w-56 h-36 bg-gradient-to-b from-yellow-800 to-yellow-950 border-4 border-yellow-950 rounded-b-2xl flex items-center justify-center shadow-[0_15px_50px_rgba(0,0,0,0.7)]">
+
+              <img
+                src="/Logo.png"
+                alt="Kshitij Logo"
+                className="w-20 h-20 drop-shadow-[0_0_15px_gold]"
+              />
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    </section>
+  );
+}
+
+
+
+
+
+