diff --git a/frontend/public/logo-oval.png b/frontend/public/logo-oval.png
new file mode 100644
index 0000000..e555e7a
Binary files /dev/null and b/frontend/public/logo-oval.png differ
diff --git a/frontend/src/app/icon.png b/frontend/src/app/icon.png
new file mode 100644
index 0000000..dad2891
Binary files /dev/null and b/frontend/src/app/icon.png differ
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a9c7138..5f841cf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,7 +8,7 @@ import { FAQ } from "@/components/landing/faq";
 import { CTASection } from "@/components/landing/cta-section";
 import { Footer } from "@/components/landing/footer";
 import Link from "next/link";
-import { Zap } from "lucide-react";
+import Image from "next/image";
 
 export default function LandingPage() {
   return (
@@ -16,12 +16,14 @@ export default function LandingPage() {
       {/* Landing nav */}
       <nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 bg-surface-0/80 backdrop-blur-md border-b border-border/50">
         <Link href="/" className="flex items-center gap-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-linear-to-br from-brand-500 to-brand-600">
-            <Zap className="h-4 w-4 text-white" />
-          </div>
-          <span className="text-lg font-bold tracking-tight">
-            Stack<span className="text-brand-400">Stream</span>
-          </span>
+          <Image
+            src="/logo-oval.png"
+            alt="StackStream"
+            width={46}
+            height={36}
+            className="h-9 w-auto"
+            priority
+          />
         </Link>
         <div className="flex items-center gap-4 sm:gap-6">
           <Link href="/dashboard" className="hidden md:inline text-sm text-zinc-400 hover:text-zinc-200 transition-colors">
diff --git a/frontend/src/components/landing/footer.tsx b/frontend/src/components/landing/footer.tsx
index 582123d..7db10ec 100644
--- a/frontend/src/components/landing/footer.tsx
+++ b/frontend/src/components/landing/footer.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
-import { Twitter, Github, Linkedin, Zap, ExternalLink } from "lucide-react";
+import Image from "next/image";
+import { Twitter, Github, Linkedin, ExternalLink } from "lucide-react";
 import { FEEDBACK_URL, EXPLORER_BASE, NETWORK_LABEL } from "@/lib/constants";
 
 const TelegramIcon = () => (
@@ -94,12 +95,13 @@ export function Footer() {
           {/* Brand column */}
           <div className="flex flex-col gap-5 sm:col-span-2 lg:col-span-1">
             <Link href="/" className="flex items-center gap-2 w-fit">
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20">
-                <Zap className="h-4 w-4 text-white" />
-              </div>
-              <span className="text-lg font-bold tracking-tight text-zinc-100">
-                Stack<span className="text-brand-400">Stream</span>
-              </span>
+              <Image
+                src="/logo-oval.png"
+                alt="StackStream"
+                width={56}
+                height={44}
+                className="h-11 w-auto"
+              />
             </Link>
 
             <p className="text-sm leading-relaxed text-zinc-500 max-w-xs">
diff --git a/frontend/src/components/layout/sidebar.tsx b/frontend/src/components/layout/sidebar.tsx
index dd9682f..846ce91 100644
--- a/frontend/src/components/layout/sidebar.tsx
+++ b/frontend/src/components/layout/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import { cn } from "@/lib/utils";
@@ -65,12 +66,14 @@ export function Sidebar() {
       >
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 px-6 py-5 border-b border-border">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-500 to-brand-600">
-            <Zap className="h-4 w-4 text-white" />
-          </div>
-          <span className="text-lg font-bold tracking-tight">
-            Stack<span className="text-brand-400">Stream</span>
-          </span>
+          <Image
+            src="/logo-oval.png"
+            alt="StackStream"
+            width={46}
+            height={36}
+            className="h-9 w-auto"
+            priority
+          />
         </Link>
 
         {/* Nav links */}