diff --git a/client/src/App.css b/client/src/App.css
index 65e2c057..4716ea52 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -685,4 +685,35 @@ span.doated{
     padding: 10px;
   }
 }
-/* media query end */
\ No newline at end of file
+/* media query end */
+
+.video-wrapper {
+  width: 90%;
+  max-width: 1000px;
+  margin: 20px auto;
+  border: 2px solid var(--bg_buttons);
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+  background: var(--bg_secondary);
+}
+
+.video-wrapper iframe {
+  width: 100%;
+  height: 550px;
+  border-radius: 12px;
+}
+
+.video-card {
+  background-color: var(--bg_secondary);
+  border: 1px solid var(--subtext);
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.video-wrapper iframe {
+  border-radius: 15px;
+}
+
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 3f99b041..4e1336fc 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -28,6 +28,7 @@ const Bookmarks = lazy(() => import("./pages/Bookmarks"));
 const QuestionsPage = lazy(() => import("./pages/QuestionPage.jsx"));
 const QuestionDetail = lazy(() => import("./components/QuestionDetail.jsx"))
 const OAuthCallback = lazy(() => import("./pages/OAuthCallback"));
+const DemoVideo = lazy(() => import("./pages/DemoVideo"));
 
 // Notes components
 const JavaScriptFundamentals = lazy(() => import("./pages/Notes/JavaScriptFundamentals/JavaScriptFundamentals.jsx"));
@@ -88,6 +89,7 @@ function App() {
                   <Route path="/contact" element={<ContactUs />} />
                   <Route path="/questions" element={<QuestionsPage />} />
                   <Route path="/questions/:id" element={<QuestionDetail />} />
+                  <Route path="/demo" element={<DemoVideo />} />
 
                   {/* Notes Routes */}
                   <Route path="/notes" element={<NotesPage />} />
diff --git a/client/src/pages/DemoVideo.jsx b/client/src/pages/DemoVideo.jsx
new file mode 100644
index 00000000..d1841a21
--- /dev/null
+++ b/client/src/pages/DemoVideo.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+
+function DemoVideo() {
+  return (
+    <div className="container video-page">
+
+      <div className="gradient-background"></div>
+                <motion.div
+
+                //   initial="hidden"
+                //   animate="visible"
+                //   transition={{ delay: 1.3 }}
+                   className="flex items-center justify-center m-5"
+                >
+                  <div className={`h-px flex-1 `}></div>
+                  <h2 className={`text-2xl sm:text-3xl md:text-4xl font-righteous tracking-wider px-4 sm:px-8 `}>
+                    Demo Video
+
+                  </h2>
+                  <div className={`h-px flex-1 `}></div>
+                </motion.div>
+
+      {/* Video Card */}
+      <div className="video-card mx-auto p-5 rounded-2xl shadow-xl bg-bg_secondary_light max-w-4xl">
+        <div className="video-wrapper relative" style={{ paddingTop: "56.25%" }}>
+          <iframe
+            className="absolute top-0 left-0 w-full h-full rounded-xl"
+            src="https://www.youtube.com/embed/Y8Tko2YC5hA"
+            title="Demo Video"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        </div>
+      </div>
+
+      {/* Back Button */}
+      <div className="flex justify-center m-5">
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.98 }}
+          className="group bg-transparent border-2 border-primary text-primary py-4 px-8 text-lg rounded-xl font-semibold transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-xl inline-flex items-center gap-3"
+        >
+          <Link to="/" className="flex items-center gap-3">
+            <span>Back to Home</span>
+          </Link>
+        </motion.button>
+      </div>
+    </div>
+  );
+}
+
+export default DemoVideo;
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 52439dd3..5bb6fff8 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -4,6 +4,8 @@ import { useTheme } from "../context/ThemeContext";
 import { motion } from "framer-motion";
 import Counter from "../utils/Counter";
 import { FaArrowUp } from "react-icons/fa";
+
+
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
@@ -23,6 +25,7 @@ function Home() {
 
   const [isVisible, setIsVisible] = useState(false);
   const [showScrollTop, setShowScrollTop] = useState(false);
+  const [showVideo, setShowVideo] = useState(false);
 
   // refs for scoped GSAP
   const root = useRef(null);
@@ -300,8 +303,10 @@ function Home() {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.98 }}
               className="group bg-transparent border-2 border-primary text-primary py-4 px-8 text-lg rounded-xl font-semibold transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-xl inline-flex items-center gap-3"
-            >
+               
+            >  <Link to="/demo">
               <span>Watch Demo</span>
+              </Link>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-4 w-4 sm:h-5 sm:w-5 transform group-hover:scale-110 transition-transform"
@@ -317,6 +322,20 @@ function Home() {
             </motion.button>
           </motion.div>
 
+          {showVideo && (
+  <div className="mt-6">
+    <iframe 
+      width="560" 
+      height="315"
+      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+      title="YouTube video player"
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    ></iframe>
+  </div>
+)}
+
           {/* Trust Indicators */}
           <div className="mt-10 sm:mt-16">
             <p