diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index f309e6f..fd0dc0d 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link";
-import { ShieldCheck, ArrowLeft } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { requireAdmin } from "@/lib/auth/guards";
 import { AdminSidebar } from "@/components/admin/admin-sidebar";
 import { AdminMobileNav } from "@/components/admin/admin-mobile-nav";
 import { UserMenu } from "@/components/app/user-menu";
 import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/ui/logo";
 
 // Authed, DB-backed admin surface — never statically prerender.
 export const dynamic = "force-dynamic";
@@ -17,11 +18,11 @@ export default async function AdminLayout({ children }: { children: React.ReactN
       <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
         <div className="flex items-center gap-1">
           <AdminMobileNav />
-          <Link href="/admin" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
-            <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-foreground text-background">
-              <ShieldCheck className="h-5 w-5" />
+          <Link href="/admin" className="flex items-center gap-2.5" aria-label="Podcast Distribution AI Admin">
+            <Logo className="h-7 w-auto" priority />
+            <span className="rounded-md bg-foreground px-1.5 py-0.5 font-display text-[11px] font-bold uppercase tracking-wide text-background">
+              Admin
             </span>
-            <span>Podcast Distribution AI Admin</span>
           </Link>
         </div>
         <div className="flex items-center gap-3">
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 9599562..01e0327 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Mic, Plus, Wrench } from "lucide-react";
+import { Plus, Wrench } from "lucide-react";
 import { requireAuth } from "@/lib/auth/guards";
 import { getEffectivePlan } from "@/lib/billing/subscription";
 import { getActiveBranding, hexToHslTriplet } from "@/lib/branding";
@@ -11,6 +11,7 @@ import { CommandPalette } from "@/components/app/command-palette";
 import { ImpersonationBanner } from "@/components/app/impersonation-banner";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/ui/logo";
 
 // Authed, DB-backed dashboard — never statically prerender.
 export const dynamic = "force-dynamic";
@@ -47,7 +48,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
           <div className="flex items-center gap-1">
             <AppMobileNav plan={plan} workspaceName={workspaceName} />
-            <Link href="/dashboard" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
+            <Link href="/dashboard" className="flex items-center" aria-label={workspaceName}>
               {branding?.logoUrl ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img
@@ -56,12 +57,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
                   className="h-8 w-auto max-w-[160px] object-contain"
                 />
               ) : (
-                <>
-                  <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-                    <Mic className="h-5 w-5" />
-                  </span>
-                  <span className="hidden sm:inline">{workspaceName}</span>
-                </>
+                <Logo className="h-7 w-auto" priority />
               )}
             </Link>
           </div>
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index d77067e..8c291f7 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,18 +1,12 @@
 import Link from "next/link";
-import { Mic } from "lucide-react";
+import { Logo } from "@/components/ui/logo";
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative flex min-h-screen flex-col items-center justify-center bg-secondary px-4 py-12">
       <div className="pointer-events-none absolute inset-0 bg-hero-wash" />
-      <Link
-        href="/"
-        className="relative mb-8 flex items-center gap-2.5 font-display text-xl font-bold tracking-tight"
-      >
-        <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-          <Mic className="h-5 w-5" />
-        </span>
-        Podcast Distribution AI
+      <Link href="/" className="relative mb-8 flex items-center" aria-label="Podcast Distribution AI">
+        <Logo className="h-8 w-auto" />
       </Link>
       <div className="relative w-full max-w-md">{children}</div>
     </div>
diff --git a/app/(public)/p/[shareId]/page.tsx b/app/(public)/p/[shareId]/page.tsx
index d58a7f7..0aae091 100644
--- a/app/(public)/p/[shareId]/page.tsx
+++ b/app/(public)/p/[shareId]/page.tsx
@@ -7,6 +7,7 @@ import { getActiveBranding, hexToHslTriplet } from "@/lib/branding";
 import { WaveformPlayer } from "@/components/app/waveform-player";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Logo } from "@/components/ui/logo";
 import type { StructuredScript } from "@/lib/ai/types";
 
 export const dynamic = "force-dynamic";
@@ -70,14 +71,14 @@ export default async function PublicSharePage({
       {/* Header / brand wordmark */}
       <header className="mb-8 flex items-center gap-2.5">
         {branding?.logoUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={branding.logoUrl} alt={brandName} className="h-7 w-auto" />
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={branding.logoUrl} alt={brandName} className="h-7 w-auto" />
+            <span className="font-display text-base font-extrabold tracking-tight">{brandName}</span>
+          </>
         ) : (
-          <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-            <Mic2 className="h-4 w-4" />
-          </span>
+          <Logo className="h-7 w-auto" />
         )}
-        <span className="font-display text-base font-extrabold tracking-tight">{brandName}</span>
       </header>
 
       <article className="space-y-8">
diff --git a/app/apple-icon.png b/app/apple-icon.png
new file mode 100644
index 0000000..f459076
Binary files /dev/null and b/app/apple-icon.png differ
diff --git a/app/icon.png b/app/icon.png
new file mode 100644
index 0000000..f459076
Binary files /dev/null and b/app/icon.png differ
diff --git a/components/marketing/site-footer.tsx b/components/marketing/site-footer.tsx
index 3065dbb..0e5e12f 100644
--- a/components/marketing/site-footer.tsx
+++ b/components/marketing/site-footer.tsx
@@ -1,16 +1,13 @@
 import Link from "next/link";
-import { Mic } from "lucide-react";
+import { Logo } from "@/components/ui/logo";
 
 export function SiteFooter() {
   return (
     <footer className="border-t border-border bg-secondary">
       <div className="container flex flex-col gap-10 py-16 md:flex-row md:justify-between">
         <div className="max-w-xs space-y-4">
-          <Link href="/" className="flex items-center gap-2.5 font-display text-lg font-bold tracking-tight">
-            <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-              <Mic className="h-5 w-5" />
-            </span>
-            Podcast Distribution AI
+          <Link href="/" className="flex items-center" aria-label="Podcast Distribution AI">
+            <Logo className="h-7 w-auto" />
           </Link>
           <p className="text-sm leading-relaxed text-muted-foreground">
             From topic idea to a finished, published podcast episode in minutes — script, voice, and
diff --git a/components/marketing/site-header.tsx b/components/marketing/site-header.tsx
index 0ada170..7a911fb 100644
--- a/components/marketing/site-header.tsx
+++ b/components/marketing/site-header.tsx
@@ -1,16 +1,13 @@
 import Link from "next/link";
-import { Mic } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/ui/logo";
 
 export function SiteHeader() {
   return (
     <header className="sticky top-0 z-40 w-full border-b border-border/70 bg-background/85 backdrop-blur-md">
       <div className="container flex h-[72px] items-center justify-between">
-        <Link href="/" className="flex items-center gap-2.5 font-display text-lg font-bold tracking-tight">
-          <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-            <Mic className="h-5 w-5" />
-          </span>
-          <span>Podcast Distribution AI</span>
+        <Link href="/" className="flex items-center" aria-label="Podcast Distribution AI">
+          <Logo className="h-7 w-auto" priority />
         </Link>
 
         <nav className="hidden items-center gap-8 text-sm font-medium text-muted-foreground md:flex">
diff --git a/components/ui/logo.tsx b/components/ui/logo.tsx
new file mode 100644
index 0000000..8c3fd4f
--- /dev/null
+++ b/components/ui/logo.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import logoDark from "@/public/logo-dark.png";
+import logoLight from "@/public/logo-light.png";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Podcast Distribution AI wordmark. Two assets ship: a dark logo for light
+ * backgrounds and a light logo for dark backgrounds. They are swapped purely
+ * with Tailwind `dark:` variants, so on surfaces without a `.dark` ancestor
+ * (marketing, auth, admin, public share) the dark logo is always shown — which
+ * is exactly where a dark logo is required.
+ *
+ * `className` controls the height (default `h-7`); width follows automatically.
+ * Set `priority` for above-the-fold placements (e.g. site/app headers).
+ */
+export function Logo({ className, priority = false }: { className?: string; priority?: boolean }) {
+  return (
+    <>
+      <Image
+        src={logoDark}
+        alt="Podcast Distribution AI"
+        priority={priority}
+        className={cn("h-7 w-auto dark:hidden", className)}
+      />
+      <Image
+        src={logoLight}
+        alt="Podcast Distribution AI"
+        priority={priority}
+        className={cn("hidden h-7 w-auto dark:block", className)}
+      />
+    </>
+  );
+}
diff --git a/public/logo-dark.png b/public/logo-dark.png
new file mode 100644
index 0000000..6b33cc7
Binary files /dev/null and b/public/logo-dark.png differ
diff --git a/public/logo-light.png b/public/logo-light.png
new file mode 100644
index 0000000..151a5d8
Binary files /dev/null and b/public/logo-light.png differ