diff --git a/src/components/AnimatedLogo.tsx b/src/components/AnimatedLogo.tsx
index 8166604..dfbb78a 100644
--- a/src/components/AnimatedLogo.tsx
+++ b/src/components/AnimatedLogo.tsx
@@ -38,6 +38,9 @@ interface Props {
   size?: number;
   variant?: AnimatedLogoVariant;
   showTagline?: boolean;
+  /** If true, emblem only — wordmark + tagline hidden. Use on mobile
+   *  breakpoints where horizontal space is tight. */
+  iconOnly?: boolean;
   className?: string;
 }
 
@@ -45,6 +48,7 @@ export default function AnimatedLogo({
   size = 64,
   variant = 'onLight',
   showTagline = true,
+  iconOnly = false,
   className = '',
 }: Props) {
   // useId for stable, SSR-safe unique IDs (the page can render two of
@@ -162,6 +166,7 @@ export default function AnimatedLogo({
       </svg>
 
       {/* ── WORDMARK + TAGLINE ───────────────────────────────────── */}
+      {!iconOnly && (
       <span
         className="al-text"
         style={{ display: 'inline-flex', flexDirection: 'column', gap: Math.round(size * 0.08), minWidth: 0 }}
@@ -210,6 +215,7 @@ export default function AnimatedLogo({
           </span>
         )}
       </span>
+      )}
 
       {/*
         Component-scoped CSS. Keeping it inline (style jsx-free) so the
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 34bd254..692a06f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import AppImage from "@/components/ui/AppImage";
-import AvBeatLogo from "@/components/AvBeatLogo";
+import AnimatedLogo from "@/components/AnimatedLogo";
 import {
   LinkedInIcon,
   InstagramIcon,
@@ -112,7 +112,7 @@ export default function Footer() {
             href="/home-page"
             aria-label="AV Beat — home"
             className="flex-shrink-0 opacity-90 hover:opacity-100 transition-opacity">
-            <AvBeatLogo variant="full" emblemSize={36} />
+            <AnimatedLogo size={36} variant="onLight" />
           </Link>
 
           <div className="flex items-center gap-4">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 149dfe4..6f8c66b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -18,7 +18,7 @@ import LanguageSwitcher from "@/components/LanguageSwitcher";
 import AdImage from "@/components/AdImage";
 import EventsDropdown from "@/components/EventsDropdown";
 import AboutDropdown from "@/components/AboutDropdown";
-import AvBeatLogo from "@/components/AvBeatLogo";
+import AnimatedLogo from "@/components/AnimatedLogo";
 import { pickAds } from "@/lib/ads";
 
 interface NavItem {
@@ -269,9 +269,9 @@ export default function Header() {
                 aria-label="AV Beat — homepage"
                 className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--brand-bg)] rounded-md"
               >
-                <span className="hidden lg:inline-flex"><AvBeatLogo variant="full"     emblemSize={44} /></span>
-                <span className="hidden md:inline-flex lg:hidden"><AvBeatLogo variant="wordmark" emblemSize={40} /></span>
-                <span className="inline-flex md:hidden"><AvBeatLogo variant="icon"     emblemSize={36} /></span>
+                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onLight" /></span>
+                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onLight" showTagline={false} /></span>
+                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onLight" iconOnly /></span>
               </Link>
 
               {/* Header 728x90 banner — centered between logo and right side */}