diff --git a/frontend/public/workmate-icon.png b/frontend/public/workmate-icon.png
new file mode 100644
index 0000000..55e44dc
Binary files /dev/null and b/frontend/public/workmate-icon.png differ
diff --git a/frontend/public/workmate-logo.png b/frontend/public/workmate-logo.png
new file mode 100644
index 0000000..b62af1e
Binary files /dev/null and b/frontend/public/workmate-logo.png differ
diff --git a/frontend/src/public/components/Navbar.tsx b/frontend/src/public/components/Navbar.tsx
index 042d2ed..152bbbd 100644
--- a/frontend/src/public/components/Navbar.tsx
+++ b/frontend/src/public/components/Navbar.tsx
@@ -33,8 +33,12 @@ export function Navbar() {
       }`}
     >
       <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-        <Link to="/" className="text-lg font-bold text-white">
-          WorkMate
+        <Link to="/" className="flex items-center gap-2">
+          <img src="/workmate-icon.png" alt="WorkMate" className="h-7" />
+          <span className="text-lg tracking-tight text-white">
+            <span className="font-bold">Work</span>
+            <span className="font-light">Mate</span>
+          </span>
         </Link>
 
         <div className="hidden items-center gap-8 md:flex">
diff --git a/frontend/src/public/pages/DemoPage.tsx b/frontend/src/public/pages/DemoPage.tsx
index aba455d..5643ac0 100644
--- a/frontend/src/public/pages/DemoPage.tsx
+++ b/frontend/src/public/pages/DemoPage.tsx
@@ -1,12 +1,64 @@
-import { Play } from "lucide-react";
-import { ComingSoon } from "../components/ComingSoon";
+import { motion } from "motion/react";
+import { Link } from "react-router-dom";
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 24 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, margin: "-60px" },
+  transition: { duration: 0.5 },
+};
 
 export function DemoPage() {
   return (
-    <ComingSoon
-      icon={Play}
-      title="Demo"
-      description="An interactive walkthrough is on the way."
-    />
+    <>
+      {/* Header */}
+      <section className="px-6 pb-8 pt-20 text-center md:pt-28">
+        <p className="mb-4 text-[10px] uppercase tracking-[3px] text-purple-500">
+          Demo
+        </p>
+        <h1 className="text-2xl font-bold text-white md:text-3xl">
+          See WorkMate in action
+        </h1>
+        <p className="mt-3 text-sm text-white/40">
+          Watch how WorkMate connects to your Notion workspace and answers
+          questions with sourced citations.
+        </p>
+      </section>
+
+      {/* Video */}
+      <motion.section className="px-6 pb-16" {...fadeInUp}>
+        <div className="mx-auto max-w-4xl overflow-hidden rounded-xl border border-white/[0.08] bg-white/[0.02]">
+          <div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
+            <iframe
+              className="absolute inset-0 h-full w-full"
+              src="https://www.youtube.com/embed/gFEkT7CEuBk?modestbranding=1&rel=0"
+              title="WorkMate Demo"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </motion.section>
+
+      {/* CTA */}
+      <motion.section
+        className="relative px-6 pb-16 text-center"
+        {...fadeInUp}
+      >
+        <div className="pointer-events-none absolute left-1/2 top-1/2 h-[200px] w-[400px] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse,rgba(124,58,237,0.06)_0%,transparent_70%)]" />
+        <div className="relative z-10">
+          <h2 className="text-xl font-bold text-white">Ready to try it?</h2>
+          <p className="mt-2 text-sm text-white/40">
+            Connect your Notion workspace and start getting answers.
+          </p>
+          <Link
+            to="/login"
+            className="mt-6 inline-block rounded-lg bg-purple-600 px-8 py-3 text-sm font-medium text-white transition-colors hover:bg-purple-700"
+          >
+            Get Started Free
+          </Link>
+        </div>
+      </motion.section>
+    </>
   );
 }