diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3631b9a..238817f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
+        "framer-motion": "^12.34.0",
         "lucide-react": "^0.564.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -2053,6 +2054,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.34.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.0.tgz",
+      "integrity": "sha512-+/H49owhzkzQyxtn7nZeF4kdH++I2FWrESQ184Zbcw5cEqNHYkE5yxWxcTLSj5lNx3NWdbIRy5FHqUvetD8FWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.34.0",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2616,6 +2644,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.34.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.0.tgz",
+      "integrity": "sha512-Lql3NuEcScRDxTAO6GgUsRHBZOWI/3fnMlkMcH5NftzcN37zJta+bpbMAV9px4Nj057TuvRooMK7QrzMCgtz6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2996,8 +3039,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
diff --git a/frontend/package.json b/frontend/package.json
index 4ecbec8..d93b84e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "framer-motion": "^12.34.0",
     "lucide-react": "^0.564.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
diff --git a/frontend/public/BACKGROUND.png b/frontend/public/BACKGROUND.png
new file mode 100644
index 0000000..98492e4
Binary files /dev/null and b/frontend/public/BACKGROUND.png differ
diff --git a/frontend/public/WWDBGM.png b/frontend/public/WWDBGM.png
new file mode 100644
index 0000000..1ec1ed5
Binary files /dev/null and b/frontend/public/WWDBGM.png differ
diff --git a/frontend/public/WhatWeDoBG.png b/frontend/public/WhatWeDoBG.png
new file mode 100644
index 0000000..228bb6a
Binary files /dev/null and b/frontend/public/WhatWeDoBG.png differ
diff --git a/frontend/public/WweDoBg.png b/frontend/public/WweDoBg.png
new file mode 100644
index 0000000..4c060a6
Binary files /dev/null and b/frontend/public/WweDoBg.png differ
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ae8e702..af37f5c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import AboutUs from './components/AboutUs';
+import WhatWeDo from './components/WhatWeDo';
 
 function App() {
   const words = ['Inside', 'Within', 'Deeper', 'Godward'];
@@ -107,6 +108,7 @@ function App() {
 
       {/* About Us Section with Boat Animation */}
       <AboutUs />
+      <WhatWeDo/>
       
     </div>
   );
diff --git a/frontend/src/components/WhatWeDo.jsx b/frontend/src/components/WhatWeDo.jsx
new file mode 100644
index 0000000..9c4cad5
--- /dev/null
+++ b/frontend/src/components/WhatWeDo.jsx
@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { BookOpen, Sparkles, Brain, Music2, HeartPulse, Landmark } from "lucide-react";
+
+const activities = [
+  { title: "Discussions on Vedic Literatures", icon: BookOpen, description: "Explore timeless wisdom and philosophy for modern life." },
+  { title: "Spiritual Sessions", icon: Sparkles, description: "Guided practices for awareness, clarity and inner peace." },
+  { title: "Meditation Sessions", icon: Brain, description: "Improve focus and calmness through meditation training." },
+  { title: "Singing Mantras", icon: Music2, description: "Group chanting creating a powerful positive vibration." },
+  { title: "Yoga & Breathwork", icon: HeartPulse, description: "Balance body and mind through yogic practices." },
+  { title: "Heritage Exploration", icon: Landmark, description: "Discover sacred culture and spiritual traditions." },
+];
+
+const container = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.12 } }
+};
+
+const item = {
+  hidden: { opacity: 0, y: 40 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } }
+};
+
+export default function WhatWeDo() {
+  const [active, setActive] = useState(null);
+
+  return (
+    <section
+      className="relative w-full py-32 px-6 overflow-hidden"
+      style={{
+        backgroundImage: "url('/BACKGROUND.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      }}
+    >
+
+      {/* DARK OVERLAY */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px]" />
+
+      {/* HERO TITLE */}
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1 }}
+        className="relative z-10 max-w-4xl mx-auto text-center mb-24"
+      >
+        <div className="inline-block px-10 py-8 rounded-[40px] bg-white/10 border border-white/20 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)]">
+
+          <h2 className="text-5xl md:text-6xl font-bold text-white tracking-tight leading-tight">
+            What We{" "}
+            <span className="bg-gradient-to-r from-yellow-300 via-lime-300 to-yellow-300 bg-clip-text text-transparent">
+              Do
+            </span>
+          </h2>
+
+          <p className="mt-6 text-white/80 text-lg max-w-2xl mx-auto">
+            Activities designed to nurture knowledge, peace and spiritual growth through meaningful experiences.
+          </p>
+
+        </div>
+      </motion.div>
+
+      {/* ACTIVITIES GRID */}
+      <motion.div
+        variants={container}
+        initial="hidden"
+        whileInView="show"
+        className="relative z-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-10 max-w-6xl mx-auto"
+      >
+        {activities.map((act, i) => {
+          const Icon = act.icon;
+
+          return (
+            <motion.div
+              key={i}
+              variants={item}
+              onClick={() => setActive(i)}
+              whileHover={{ y: -12 }}
+              className="group cursor-pointer relative rounded-3xl p-[1px] bg-gradient-to-br from-white/30 via-white/10 to-transparent"
+            >
+              <div className="rounded-3xl bg-black/60 backdrop-blur-xl border border-white/10 p-8 h-full transition-all duration-500 group-hover:border-yellow-300/40 group-hover:shadow-[0_0_40px_rgba(255,215,120,0.35)]">
+
+                <div className="flex flex-col items-center text-center gap-5">
+
+                  <div className="p-4 rounded-2xl bg-white/10 text-yellow-300 transition-transform duration-500 group-hover:scale-125 group-hover:rotate-6">
+                    <Icon size={32} />
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-white">
+                    {act.title}
+                  </h3>
+
+                  <p className="text-white/70 text-sm leading-relaxed">
+                    {act.description}
+                  </p>
+
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </motion.div>
+
+      {/* MODAL */}
+      <AnimatePresence>
+        {active !== null && (
+          <motion.div
+            className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setActive(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.85, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.85, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 160, damping: 18 }}
+              onClick={(e) => e.stopPropagation()}
+              className="max-w-xl w-full rounded-[36px] bg-gradient-to-b from-black/90 to-black/70 border border-white/20 p-10 text-center shadow-[0_20px_80px_rgba(0,0,0,0.8)]"
+            >
+              {(() => {
+                const Icon = activities[active].icon;
+                return (
+                  <div className="flex flex-col items-center gap-6">
+                    <div className="p-5 rounded-2xl bg-yellow-300/10 text-yellow-300">
+                      <Icon size={40} />
+                    </div>
+
+                    <h3 className="text-3xl font-semibold text-white">
+                      {activities[active].title}
+                    </h3>
+
+                    <p className="text-white/75 leading-relaxed">
+                      {activities[active].description}
+                    </p>
+
+                    <button
+                      onClick={() => setActive(null)}
+                      className="mt-4 px-8 py-3 rounded-xl bg-yellow-300 text-black font-semibold hover:bg-yellow-200 transition"
+                    >
+                      Close
+                    </button>
+                  </div>
+                );
+              })()}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}