diff --git a/apps/web/components/landing/BrowserFrame.tsx b/apps/web/components/landing/BrowserFrame.tsx
index 41b05bc..b0ddda1 100644
--- a/apps/web/components/landing/BrowserFrame.tsx
+++ b/apps/web/components/landing/BrowserFrame.tsx
@@ -1,24 +1,24 @@
 interface Props {
-  children: React.ReactNode;
-  url?: string;
+    children: React.ReactNode;
+    url?: string;
 }
 
-export function BrowserFrame({ children, url = 'devinbox.mydevdeck.com' }: Props) {
-  return (
-    <div className="rounded-xl overflow-hidden shadow-2xl ring-1 ring-black/5 bg-white">
-      <div className="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
-        <div className="flex gap-1.5">
-          <div className="w-3 h-3 rounded-full bg-red-400" />
-          <div className="w-3 h-3 rounded-full bg-yellow-400" />
-          <div className="w-3 h-3 rounded-full bg-green-400" />
+export function BrowserFrame({ children, url = "devinbox.mydevdeck.com" }: Props) {
+    return (
+        <div className="rounded-xl overflow-hidden shadow-lg ring-1 ring-black/5 bg-white">
+            <div className="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
+                <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-400" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
+                    <div className="w-3 h-3 rounded-full bg-green-400" />
+                </div>
+                <div className="flex-1 mx-4">
+                    <div className="px-3 py-1 bg-white rounded text-xs text-gray-500 text-center max-w-sm mx-auto">
+                        {url}
+                    </div>
+                </div>
+            </div>
+            <div>{children}</div>
         </div>
-        <div className="flex-1 mx-4">
-          <div className="px-3 py-1 bg-white rounded text-xs text-gray-500 text-center max-w-sm mx-auto">
-            {url}
-          </div>
-        </div>
-      </div>
-      <div>{children}</div>
-    </div>
-  );
+    );
 }
diff --git a/apps/web/components/landing/FeatureWishlistSection.tsx b/apps/web/components/landing/FeatureWishlistSection.tsx
index 5c0c9ca..69e95d9 100644
--- a/apps/web/components/landing/FeatureWishlistSection.tsx
+++ b/apps/web/components/landing/FeatureWishlistSection.tsx
@@ -1,64 +1,65 @@
-import { fetchFeatureIdeas } from '../../lib/github';
-import { FeatureWishlistItem } from './FeatureWishlistItem';
+import { fetchFeatureIdeas } from "../../lib/github";
+import { FeatureWishlistItem } from "./FeatureWishlistItem";
 
 function getRepoUrl(): string {
-  const owner = process.env.GITHUB_REPO_OWNER || 'Rowee13';
-  const name = process.env.GITHUB_REPO_NAME || 'my-dev-deck';
-  return `https://github.com/${owner}/${name}`;
+    const owner = process.env.GITHUB_REPO_OWNER || "Rowee13";
+    const name = process.env.GITHUB_REPO_NAME || "my-dev-deck";
+    return `https://github.com/${owner}/${name}`;
 }
 
 export async function FeatureWishlistSection() {
-  const ideas = await fetchFeatureIdeas();
-  const repoUrl = getRepoUrl();
-  const submitUrl = `${repoUrl}/discussions/new?category=feature-ideas`;
-  const allUrl = `${repoUrl}/discussions`;
+    const ideas = await fetchFeatureIdeas();
+    const repoUrl = getRepoUrl();
+    const submitUrl = `${repoUrl}/discussions/new?category=feature-ideas`;
+    const allUrl = `${repoUrl}/discussions`;
 
-  return (
-    <section className="py-24 px-6 bg-white">
-      <div className="max-w-5xl mx-auto">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            What&apos;s next?
-          </h2>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            A community-driven wishlist. Upvote the ideas you want, or submit your own on GitHub.
-          </p>
-        </div>
+    return (
+        <section className="py-24 px-6 bg-white">
+            <div className="max-w-5xl mx-auto">
+                <div className="text-center mb-12">
+                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        What&apos;s next?
+                    </h2>
+                    <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        A community-driven wishlist. Upvote the ideas you want, or submit your own
+                        on GitHub.
+                    </p>
+                </div>
 
-        {ideas.length > 0 ? (
-          <div className="grid md:grid-cols-2 gap-4 mb-10">
-            {ideas.map((idea) => (
-              <FeatureWishlistItem key={idea.id} idea={idea} />
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-12 mb-10 bg-slate-50 rounded-xl border border-gray-200">
-            <p className="text-gray-600 mb-2">No ideas yet.</p>
-            <p className="text-sm text-gray-500">
-              Be the first to share what you&apos;d like to see added to the deck.
-            </p>
-          </div>
-        )}
+                {ideas.length > 0 ? (
+                    <div className="grid md:grid-cols-2 gap-4 mb-10">
+                        {ideas.map((idea) => (
+                            <FeatureWishlistItem key={idea.id} idea={idea} />
+                        ))}
+                    </div>
+                ) : (
+                    <div className="text-center py-12 mb-10 bg-slate-50 rounded-xl border border-gray-200">
+                        <p className="text-gray-600 mb-2">No ideas yet.</p>
+                        <p className="text-sm text-gray-500">
+                            Be the first to share what you&apos;d like to see added to the deck.
+                        </p>
+                    </div>
+                )}
 
-        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <a
-            href={submitUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 hover:scale-105 transition-all"
-          >
-            Submit an idea
-          </a>
-          <a
-            href={allUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
-          >
-            See all ideas on GitHub →
-          </a>
-        </div>
-      </div>
-    </section>
-  );
+                <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                    <a
+                        href={submitUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 hover:scale-105 transition-all"
+                    >
+                        Submit an idea
+                    </a>
+                    <a
+                        href={allUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
+                    >
+                        See all ideas on GitHub →
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
 }
diff --git a/apps/web/components/landing/ToolShowcaseSection.tsx b/apps/web/components/landing/ToolShowcaseSection.tsx
index 3fd8c75..94026af 100644
--- a/apps/web/components/landing/ToolShowcaseSection.tsx
+++ b/apps/web/components/landing/ToolShowcaseSection.tsx
@@ -1,68 +1,70 @@
-'use client';
+"use client";
 
-import { motion } from 'framer-motion';
-import Image from 'next/image';
-import Link from 'next/link';
-import { BrowserFrame } from './BrowserFrame';
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { BrowserFrame } from "./BrowserFrame";
 
 export function ToolShowcaseSection() {
-  return (
-    <section className="py-24 px-6 bg-white">
-      <div className="max-w-7xl mx-auto">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.2 }}
-          transition={{ duration: 0.5 }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            Tools in the deck
-          </h2>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            A growing collection of utilities for everyday development work.
-          </p>
-        </motion.div>
+    return (
+        <section className="py-24 px-6 bg-white">
+            <div className="max-w-7xl mx-auto">
+                <motion.div
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.2 }}
+                    transition={{ duration: 0.5 }}
+                    className="text-center mb-16"
+                >
+                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Tools in the deck
+                    </h2>
+                    <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        A growing collection of utilities for everyday development work.
+                    </p>
+                </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.2 }}
-          transition={{ duration: 0.5 }}
-          className="grid md:grid-cols-2 gap-12 items-center bg-slate-50 rounded-2xl p-8 md:p-12 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
-        >
-          <div>
-            <div className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full mb-4">
-              Tool #1
-            </div>
-            <h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
-              DevInbox
-            </h3>
-            <p className="text-gray-600 mb-6 leading-relaxed">
-              A self-hosted email testing inbox. Route your app&apos;s transactional emails to DevInbox during development, inspect message content, headers, and attachments, and verify user signup flows without spamming real mailboxes.
-            </p>
-            <Link
-              href="/login"
-              className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
-            >
-              Try DevInbox
-              <span aria-hidden="true">→</span>
-            </Link>
-          </div>
+                <motion.div
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.2 }}
+                    transition={{ duration: 0.5 }}
+                    className="grid md:grid-cols-2 gap-12 items-center bg-slate-50 rounded-2xl p-8 md:p-12 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+                >
+                    <div>
+                        <div className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full mb-4">
+                            Tool #1
+                        </div>
+                        <h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
+                            DevInbox
+                        </h3>
+                        <p className="text-gray-600 mb-6 leading-relaxed">
+                            A self-hosted email testing inbox. Route your app&apos;s transactional
+                            emails to DevInbox during development, inspect message content, headers,
+                            and attachments, and verify user signup flows without spamming real
+                            mailboxes.
+                        </p>
+                        <Link
+                            href="/login"
+                            className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
+                        >
+                            Try DevInbox
+                            <span aria-hidden="true">→</span>
+                        </Link>
+                    </div>
 
-          <BrowserFrame>
-            <div className="relative aspect-[16/10]">
-              <Image
-                src="/landing/devinbox-preview.png"
-                alt="DevInbox dashboard showing a list of received emails"
-                fill
-                className="object-cover"
-                sizes="(max-width: 768px) 100vw, 50vw"
-              />
+                    <BrowserFrame>
+                        <Image
+                            src="/landing/demo-screenshot.png"
+                            alt="DevInbox dashboard showing a list of received emails"
+                            width={1881}
+                            height={935}
+                            className="w-full h-auto"
+                            sizes="(max-width: 768px) 100vw, 50vw"
+                        />
+                    </BrowserFrame>
+                </motion.div>
             </div>
-          </BrowserFrame>
-        </motion.div>
-      </div>
-    </section>
-  );
+        </section>
+    );
 }
diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx
index 656491d..dc0b9c7 100644
--- a/apps/web/components/layout/Sidebar.tsx
+++ b/apps/web/components/layout/Sidebar.tsx
@@ -33,7 +33,7 @@ export function Sidebar() {
   };
 
   return (
-    <div className="flex flex-col w-64 bg-gray-900 min-h-screen">
+    <div className="sticky top-0 flex flex-col w-64 bg-gray-900 h-screen overflow-y-auto">
       {/* Logo/Brand */}
       <div className="flex items-center h-16 px-6 border-b border-gray-800">
         <h1 className="text-xl font-bold text-white">DevDeck</h1>
diff --git a/apps/web/public/landing/demo-screenshot.png b/apps/web/public/landing/demo-screenshot.png
new file mode 100644
index 0000000..c4c949c
Binary files /dev/null and b/apps/web/public/landing/demo-screenshot.png differ
diff --git a/apps/web/public/landing/devinbox-preview.png b/apps/web/public/landing/devinbox-preview.png
deleted file mode 100644
index 6641c8a..0000000
Binary files a/apps/web/public/landing/devinbox-preview.png and /dev/null differ