diff --git a/src/app/accessibility/page.tsx b/src/app/accessibility/page.tsx
index 0efdc88..76aafc5 100644
--- a/src/app/accessibility/page.tsx
+++ b/src/app/accessibility/page.tsx
@@ -20,16 +20,15 @@ export const metadata: Metadata = {
 }
 
 export default async function AccessibilityPage() {
-  let communityName = ''
+  let publicSettings = null
   try {
-    const settings = await getPublicSettings()
-    communityName = settings.communityName
+    publicSettings = await getPublicSettings()
   } catch {
     // silently degrade
   }
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="mx-auto max-w-2xl space-y-8">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Accessibility' }]} />
 
diff --git a/src/app/admin/design/page.test.tsx b/src/app/admin/design/page.test.tsx
index 58f117e..a30f9e2 100644
--- a/src/app/admin/design/page.test.tsx
+++ b/src/app/admin/design/page.test.tsx
@@ -56,6 +56,14 @@ describe('AdminDesignPage', () => {
     expect(screen.getByRole('heading', { name: /design/i })).toBeInTheDocument()
   })
 
+  it('renders header logo upload with help text', async () => {
+    render(<AdminDesignPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Header Logo')).toBeInTheDocument()
+    })
+    expect(screen.getByText(/Wide logo or wordmark for the forum header/)).toBeInTheDocument()
+  })
+
   it('renders logo upload section with help text', async () => {
     render(<AdminDesignPage />)
     await waitFor(() => {
@@ -72,6 +80,15 @@ describe('AdminDesignPage', () => {
     expect(screen.getByText(/256×256px.*JPEG, PNG, WebP, GIF/)).toBeInTheDocument()
   })
 
+  it('renders "Show community name" toggle, defaults to checked', async () => {
+    render(<AdminDesignPage />)
+    await waitFor(() => {
+      const toggle = screen.getByRole('checkbox', { name: /show community name/i })
+      expect(toggle).toBeInTheDocument()
+      expect(toggle).toBeChecked()
+    })
+  })
+
   it('renders primary color input', async () => {
     render(<AdminDesignPage />)
     await waitFor(() => {
diff --git a/src/app/admin/design/page.tsx b/src/app/admin/design/page.tsx
index c708f69..5a8d715 100644
--- a/src/app/admin/design/page.tsx
+++ b/src/app/admin/design/page.tsx
@@ -1,7 +1,7 @@
 /**
  * Admin design page.
  * URL: /admin/design
- * Logo upload, favicon upload, primary/accent color configuration.
+ * Header logo upload, community logo upload, favicon upload, primary/accent color configuration.
  */
 
 'use client'
@@ -16,6 +16,7 @@ import {
   updateCommunitySettings,
   uploadCommunityLogo,
   uploadCommunityFavicon,
+  uploadHeaderLogo,
 } from '@/lib/api/client'
 import type { CommunitySettings } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
@@ -44,6 +45,39 @@ export default function AdminDesignPage() {
     void fetchSettings()
   }, [fetchSettings])
 
+  const handleHeaderLogoUpload = useCallback(
+    async (file: File) => {
+      const result = await uploadHeaderLogo(file, getAccessToken() ?? '')
+      setSettings((prev) => (prev ? { ...prev, headerLogoUrl: result.url } : prev))
+      return result
+    },
+    [getAccessToken]
+  )
+
+  const handleHeaderLogoRemove = useCallback(async () => {
+    try {
+      const updated = await updateCommunitySettings({ headerLogoUrl: null }, getAccessToken() ?? '')
+      setSettings(updated)
+    } catch {
+      setSaveError('Failed to remove header logo.')
+    }
+  }, [getAccessToken])
+
+  const handleShowCommunityNameChange = useCallback(
+    async (value: boolean) => {
+      try {
+        const updated = await updateCommunitySettings(
+          { showCommunityName: value },
+          getAccessToken() ?? ''
+        )
+        setSettings(updated)
+      } catch {
+        setSaveError('Failed to update community name visibility.')
+      }
+    },
+    [getAccessToken]
+  )
+
   const handleLogoUpload = useCallback(
     async (file: File) => {
       const result = await uploadCommunityLogo(file, getAccessToken() ?? '')
@@ -118,6 +152,9 @@ export default function AdminDesignPage() {
           <div className="max-w-lg space-y-8">
             <DesignImagesSection
               settings={settings}
+              onHeaderLogoUpload={handleHeaderLogoUpload}
+              onHeaderLogoRemove={() => void handleHeaderLogoRemove()}
+              onShowCommunityNameChange={(v) => void handleShowCommunityNameChange(v)}
               onLogoUpload={handleLogoUpload}
               onLogoRemove={() => void handleLogoRemove()}
               onFaviconUpload={handleFaviconUpload}
diff --git a/src/app/c/[slug]/page.tsx b/src/app/c/[slug]/page.tsx
index a90f022..11a7060 100644
--- a/src/app/c/[slug]/page.tsx
+++ b/src/app/c/[slug]/page.tsx
@@ -91,8 +91,6 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
     getPublicSettings().catch(() => null),
   ])
 
-  const communityName = publicSettings?.communityName ?? ''
-
   const totalPages = Math.max(1, Math.ceil(category.topicCount / TOPICS_PER_PAGE))
 
   const breadcrumbItems = [
@@ -102,7 +100,7 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
 
   return (
     <ForumLayout
-      communityName={communityName}
+      publicSettings={publicSettings}
       sidebar={<CategoryNav categories={categoriesResult.categories} currentSlug={slug} />}
     >
       {/* Breadcrumbs (includes JSON-LD BreadcrumbList) */}
diff --git a/src/app/new/page.tsx b/src/app/new/page.tsx
index fd2774f..30809f5 100644
--- a/src/app/new/page.tsx
+++ b/src/app/new/page.tsx
@@ -9,7 +9,7 @@
 
 import { useState, useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import type { CreateTopicInput } from '@/lib/api/types'
+import type { CreateTopicInput, PublicSettings } from '@/lib/api/types'
 import { createTopic, getPublicSettings } from '@/lib/api/client'
 import { getTopicUrl } from '@/lib/format'
 import { ForumLayout } from '@/components/layout/forum-layout'
@@ -26,11 +26,11 @@ export default function NewTopicPage() {
   const { ensureOnboarded } = useOnboardingContext()
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
@@ -51,7 +51,7 @@ export default function NewTopicPage() {
   }
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'New topic' }]} />
 
diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index 37e2533..660c4a6 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -15,7 +15,7 @@ import { Breadcrumbs } from '@/components/breadcrumbs'
 import { ErrorAlert } from '@/components/error-alert'
 import { getNotifications, markNotificationsRead, getPublicSettings } from '@/lib/api/client'
 import { cn } from '@/lib/utils'
-import type { Notification, NotificationType } from '@/lib/api/types'
+import type { Notification, NotificationType, PublicSettings } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 import { ProtectedRoute } from '@/components/auth/protected-route'
 
@@ -40,11 +40,11 @@ function NotificationsContent() {
   const [loading, setLoading] = useState(true)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [actionError, setActionError] = useState<string | null>(null)
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
@@ -91,7 +91,7 @@ function NotificationsContent() {
   const hasUnread = notifications.some((n) => !n.read)
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Notifications' }]} />
 
diff --git a/src/app/p/[slug]/page.tsx b/src/app/p/[slug]/page.tsx
index 546b6ab..585922d 100644
--- a/src/app/p/[slug]/page.tsx
+++ b/src/app/p/[slug]/page.tsx
@@ -60,10 +60,9 @@ export default async function PublicPage({ params }: PublicPageProps) {
     throw error
   }
 
-  let communityName = ''
+  let publicSettings = null
   try {
-    const settings = await getPublicSettings()
-    communityName = settings.communityName
+    publicSettings = await getPublicSettings()
   } catch {
     // silently degrade
   }
@@ -78,7 +77,7 @@ export default async function PublicPage({ params }: PublicPageProps) {
   }
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6b8ae80..fdc509c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -61,7 +61,7 @@ export default async function HomePage() {
 
   return (
     <ForumLayout
-      communityName={communityName}
+      publicSettings={publicSettings}
       sidebar={
         categoriesResult.categories.length > 0 ? (
           <CategoryNav categories={categoriesResult.categories} />
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index daa6d37..1132d10 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -14,18 +14,19 @@ import { ForumLayout } from '@/components/layout/forum-layout'
 import { Breadcrumbs } from '@/components/breadcrumbs'
 import { SearchInput } from '@/components/search-input'
 import { SearchResults } from '@/components/search-results'
+import type { PublicSettings } from '@/lib/api/types'
 
 export default function SearchPage() {
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Search' }]} />
 
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 1910fe3..8ba1ba3 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -12,6 +12,7 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { getPublicSettings } from '@/lib/api/client'
+import type { PublicSettings } from '@/lib/api/types'
 import { ForumLayout } from '@/components/layout/forum-layout'
 import { Breadcrumbs } from '@/components/breadcrumbs'
 import { AgeGateDialog } from '@/components/age-gate-dialog'
@@ -26,11 +27,11 @@ import { cn } from '@/lib/utils'
 import { useSettingsForm } from '@/hooks/use-settings-form'
 
 export default function SettingsPage() {
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
@@ -59,10 +60,11 @@ export default function SettingsPage() {
     handleCrossPostAuthorize,
   } = useSettingsForm()
 
+  const communityName = publicSettings?.communityName ?? ''
   const displayName = communityName || 'This Community'
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Account settings' }]} />
 
diff --git a/src/app/settings/reports/page.tsx b/src/app/settings/reports/page.tsx
index 79fbc39..e3b3c8f 100644
--- a/src/app/settings/reports/page.tsx
+++ b/src/app/settings/reports/page.tsx
@@ -15,7 +15,7 @@ import { Breadcrumbs } from '@/components/breadcrumbs'
 import { ErrorAlert } from '@/components/error-alert'
 import { ReportCard } from '@/components/settings/report-card'
 import { getMyReports, submitAppeal, getPublicSettings } from '@/lib/api/client'
-import type { MyReport } from '@/lib/api/types'
+import type { MyReport, PublicSettings } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
 export default function MyReportsPage() {
@@ -23,11 +23,11 @@ export default function MyReportsPage() {
   const [reports, setReports] = useState<MyReport[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
   const [appealingId, setAppealingId] = useState<number | null>(null)
@@ -103,7 +103,7 @@ export default function MyReportsPage() {
   )
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs
           items={[
diff --git a/src/app/t/[slug]/[rkey]/edit/page.tsx b/src/app/t/[slug]/[rkey]/edit/page.tsx
index 763fe74..f4a4e3e 100644
--- a/src/app/t/[slug]/[rkey]/edit/page.tsx
+++ b/src/app/t/[slug]/[rkey]/edit/page.tsx
@@ -10,7 +10,7 @@
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import type { CreateTopicInput, Topic } from '@/lib/api/types'
+import type { CreateTopicInput, PublicSettings, Topic } from '@/lib/api/types'
 import { getTopicByRkey, updateTopic, getPublicSettings } from '@/lib/api/client'
 import { getTopicUrl } from '@/lib/format'
 import { useAuth } from '@/hooks/use-auth'
@@ -30,11 +30,11 @@ export default function EditTopicPage({ params }: EditTopicPageProps) {
   const [loading, setLoading] = useState(true)
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
@@ -98,7 +98,7 @@ export default function EditTopicPage({ params }: EditTopicPageProps) {
 
   if (loading || authLoading) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="space-y-6">
           <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Loading...' }]} />
           <p className="text-muted-foreground" aria-busy="true">
@@ -111,7 +111,7 @@ export default function EditTopicPage({ params }: EditTopicPageProps) {
 
   if (!topic) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="space-y-6">
           <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Error' }]} />
           <p className="text-destructive" role="alert">
@@ -124,7 +124,7 @@ export default function EditTopicPage({ params }: EditTopicPageProps) {
 
   if (!authLoading && (!user || user.did !== topic.authorDid)) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="space-y-6">
           <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Edit' }]} />
           <div className="py-8 text-center">
@@ -139,7 +139,7 @@ export default function EditTopicPage({ params }: EditTopicPageProps) {
   }
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs
           items={[
diff --git a/src/app/t/[slug]/[rkey]/page.tsx b/src/app/t/[slug]/[rkey]/page.tsx
index 53d4c3d..9ed0737 100644
--- a/src/app/t/[slug]/[rkey]/page.tsx
+++ b/src/app/t/[slug]/[rkey]/page.tsx
@@ -102,7 +102,6 @@ export default async function TopicPage({ params }: TopicPageProps) {
 
   // Fetch community settings for maturity context
   const publicSettings = await getPublicSettings().catch(() => null)
-  const communityName = publicSettings?.communityName ?? ''
 
   // Deleted topics: minimal page with tombstone, no replies/JSON-LD
   if (isDeleted) {
@@ -115,7 +114,7 @@ export default async function TopicPage({ params }: TopicPageProps) {
 
     return (
       <ForumLayout
-        communityName={communityName}
+        publicSettings={publicSettings}
         sidebar={
           categoriesResult.categories.length > 0 ? (
             <CategoryNav categories={categoriesResult.categories} />
@@ -189,7 +188,7 @@ export default async function TopicPage({ params }: TopicPageProps) {
 
   return (
     <ForumLayout
-      communityName={communityName}
+      publicSettings={publicSettings}
       sidebar={
         categoriesResult.categories.length > 0 ? (
           <CategoryNav categories={categoriesResult.categories} />
diff --git a/src/app/u/[handle]/edit/page.tsx b/src/app/u/[handle]/edit/page.tsx
index 68be100..396d2e7 100644
--- a/src/app/u/[handle]/edit/page.tsx
+++ b/src/app/u/[handle]/edit/page.tsx
@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { getPublicSettings } from '@/lib/api/client'
+import type { PublicSettings } from '@/lib/api/types'
 import { ArrowCounterClockwise } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 import { ForumLayout } from '@/components/layout/forum-layout'
@@ -41,7 +42,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
     handleSave,
   } = useCommunityProfile()
 
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
   const [handle, setHandle] = useState<string | null>(null)
 
   // Resolve Next.js async params
@@ -55,7 +56,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
 
   useEffect(() => {
     getPublicSettings()
-      .then((settings) => setCommunityName(settings.communityName))
+      .then((settings) => setPublicSettings(settings))
       .catch(() => {})
   }, [])
 
@@ -78,7 +79,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
   // Don't render until we know the user is authenticated and it's their profile
   if (authLoading || !user || !handle) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <p className="text-sm text-muted-foreground">Loading...</p>
       </ForumLayout>
     )
@@ -90,7 +91,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
 
   if (loading) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <p className="text-sm text-muted-foreground">Loading...</p>
       </ForumLayout>
     )
@@ -98,7 +99,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
 
   if (error) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-6 text-center">
           <p className="text-sm text-destructive">{error}</p>
         </div>
@@ -119,7 +120,7 @@ export function EditProfilePage({ params }: EditProfilePageProps) {
   )
 
   return (
-    <ForumLayout communityName={communityName}>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="mx-auto max-w-2xl space-y-6">
         <Breadcrumbs
           items={[
diff --git a/src/app/u/[handle]/page.tsx b/src/app/u/[handle]/page.tsx
index be50b3a..571631b 100644
--- a/src/app/u/[handle]/page.tsx
+++ b/src/app/u/[handle]/page.tsx
@@ -16,7 +16,7 @@ import { ProfileSkeleton } from '@/components/profile/profile-skeleton'
 import { getUserProfile, getPublicSettings } from '@/lib/api/client'
 import { useAuth } from '@/hooks/use-auth'
 import { formatDateLong } from '@/lib/format'
-import type { UserProfile } from '@/lib/api/types'
+import type { PublicSettings, UserProfile } from '@/lib/api/types'
 
 interface UserProfilePageProps {
   params: Promise<{ handle: string }> | { handle: string }
@@ -34,7 +34,7 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
   const [error, setError] = useState<string | null>(null)
   const [isBlocked, setIsBlocked] = useState(false)
   const [isMuted, setIsMuted] = useState(false)
-  const [communityName, setCommunityName] = useState('')
+  const [publicSettings, setPublicSettings] = useState<PublicSettings | null>(null)
   const { user } = useAuth()
 
   // Resolve Next.js async params
@@ -60,8 +60,8 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
         const publicSettings = await getPublicSettings({
           signal: controller.signal,
         }).catch(() => null)
-        if (!cancelled && publicSettings?.communityName) {
-          setCommunityName(publicSettings.communityName)
+        if (!cancelled && publicSettings) {
+          setPublicSettings(publicSettings)
         }
         const communityDid = publicSettings?.communityDid ?? undefined
         const data = await getUserProfile(handle!, communityDid, {
@@ -93,7 +93,7 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
   // Loading state: show skeleton while params resolve or data loads
   if (!handle || loading) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <ProfileSkeleton />
       </ForumLayout>
     )
@@ -102,7 +102,7 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
   // Error state
   if (error) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-6 text-center">
           <p className="text-sm text-destructive">{error}</p>
         </div>
@@ -113,7 +113,7 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
   // No profile loaded (shouldn't happen if no error, but guard)
   if (!profile) {
     return (
-      <ForumLayout communityName={communityName}>
+      <ForumLayout publicSettings={publicSettings}>
         <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-6 text-center">
           <p className="text-sm text-destructive">Profile not found.</p>
         </div>
@@ -127,7 +127,7 @@ export default function UserProfilePage({ params }: UserProfilePageProps) {
   const joinDate = formatDateLong(profile.firstSeenAt)
 
   return (
-    <ForumLayout>
+    <ForumLayout publicSettings={publicSettings}>
       <div className="space-y-6">
         <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: handle }]} />
 
diff --git a/src/components/admin/design/design-images-section.tsx b/src/components/admin/design/design-images-section.tsx
index d54a18f..20f4c6e 100644
--- a/src/components/admin/design/design-images-section.tsx
+++ b/src/components/admin/design/design-images-section.tsx
@@ -1,5 +1,5 @@
 /**
- * DesignImagesSection - Logo and favicon upload section for the design page.
+ * DesignImagesSection - Branding section: header logo, community logo, and favicon upload.
  */
 
 'use client'
@@ -9,6 +9,9 @@ import type { CommunitySettings } from '@/lib/api/types'
 
 interface DesignImagesSectionProps {
   settings: CommunitySettings
+  onHeaderLogoUpload: (file: File) => Promise<{ url: string }>
+  onHeaderLogoRemove: () => void
+  onShowCommunityNameChange: (value: boolean) => void
   onLogoUpload: (file: File) => Promise<{ url: string }>
   onLogoRemove: () => void
   onFaviconUpload: (file: File) => Promise<{ url: string }>
@@ -17,6 +20,9 @@ interface DesignImagesSectionProps {
 
 export function DesignImagesSection({
   settings,
+  onHeaderLogoUpload,
+  onHeaderLogoRemove,
+  onShowCommunityNameChange,
   onLogoUpload,
   onLogoRemove,
   onFaviconUpload,
@@ -24,7 +30,38 @@ export function DesignImagesSection({
 }: DesignImagesSectionProps) {
   return (
     <fieldset className="space-y-6">
-      <legend className="text-sm font-medium text-foreground">Images</legend>
+      <legend className="text-sm font-medium text-foreground">Branding</legend>
+
+      <div className="space-y-4">
+        <ImageUpload
+          currentUrl={settings.headerLogoUrl}
+          onUpload={onHeaderLogoUpload}
+          onRemove={onHeaderLogoRemove}
+          label="Header Logo"
+          aspectRatio="5/1"
+          className="w-full max-w-sm"
+        />
+        <p className="text-xs text-muted-foreground">
+          Wide logo or wordmark for the forum header. Max 600 x 120 px. Accepted formats: JPEG, PNG,
+          WebP, GIF.
+        </p>
+
+        <div className="flex items-center gap-3">
+          <input
+            type="checkbox"
+            id="show-community-name"
+            checked={settings.showCommunityName}
+            onChange={(e) => onShowCommunityNameChange(e.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring"
+          />
+          <label htmlFor="show-community-name" className="text-sm font-medium text-foreground">
+            Show community name in header
+          </label>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Disable when your header logo already includes the community name.
+        </p>
+      </div>
 
       <div>
         <ImageUpload
diff --git a/src/components/layout/forum-layout.test.tsx b/src/components/layout/forum-layout.test.tsx
index 271d5d8..a2a8641 100644
--- a/src/components/layout/forum-layout.test.tsx
+++ b/src/components/layout/forum-layout.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'vitest-axe'
 import { ForumLayout } from './forum-layout'
+import type { PublicSettings } from '@/lib/api/types'
 
 // Mock next-themes
 vi.mock('next-themes', () => ({
@@ -53,6 +54,18 @@ vi.mock('@/hooks/use-auth', () => ({
   }),
 }))
 
+const baseSettings: PublicSettings = {
+  communityDid: 'did:plc:test',
+  communityName: 'Test Community',
+  maturityRating: 'safe',
+  maxReplyDepth: 9999,
+  communityDescription: null,
+  communityLogoUrl: null,
+  faviconUrl: null,
+  headerLogoUrl: null,
+  showCommunityName: true,
+}
+
 describe('ForumLayout', () => {
   it('renders header with logo', () => {
     render(<ForumLayout>Content</ForumLayout>)
@@ -99,8 +112,49 @@ describe('ForumLayout', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument()
   })
 
-  it('renders community name next to logo', () => {
-    render(<ForumLayout communityName="Test Community">Content</ForumLayout>)
+  it('shows default Barazo logo when no custom logos (publicSettings null)', () => {
+    render(<ForumLayout publicSettings={null}>Content</ForumLayout>)
+    const logos = screen.getAllByAltText('Barazo')
+    expect(logos.length).toBeGreaterThan(0)
+  })
+
+  it('shows header logo when headerLogoUrl provided via publicSettings', () => {
+    const settings: PublicSettings = {
+      ...baseSettings,
+      headerLogoUrl: 'https://cdn.example.com/header-logo.webp',
+    }
+    render(<ForumLayout publicSettings={settings}>Content</ForumLayout>)
+    const headerLogo = screen.getByAltText('Test Community')
+    expect(headerLogo).toBeInTheDocument()
+    expect(headerLogo).toHaveAttribute('src', 'https://cdn.example.com/header-logo.webp')
+  })
+
+  it('shows square community logo when only communityLogoUrl provided', () => {
+    const settings: PublicSettings = {
+      ...baseSettings,
+      communityLogoUrl: 'https://cdn.example.com/logo.webp',
+    }
+    render(<ForumLayout publicSettings={settings}>Content</ForumLayout>)
+    const logo = screen.getByAltText('Test Community')
+    expect(logo).toBeInTheDocument()
+    expect(logo).toHaveAttribute('src', 'https://cdn.example.com/logo.webp')
+  })
+
+  it('hides community name when showCommunityName is false', () => {
+    const settings: PublicSettings = {
+      ...baseSettings,
+      showCommunityName: false,
+    }
+    render(<ForumLayout publicSettings={settings}>Content</ForumLayout>)
+    expect(screen.queryByText('Test Community')).not.toBeInTheDocument()
+  })
+
+  it('shows community name when showCommunityName is true', () => {
+    const settings: PublicSettings = {
+      ...baseSettings,
+      showCommunityName: true,
+    }
+    render(<ForumLayout publicSettings={settings}>Content</ForumLayout>)
     expect(screen.getByText('Test Community')).toBeInTheDocument()
   })
 
diff --git a/src/components/layout/forum-layout.tsx b/src/components/layout/forum-layout.tsx
index c6142c5..3163246 100644
--- a/src/components/layout/forum-layout.tsx
+++ b/src/components/layout/forum-layout.tsx
@@ -14,14 +14,20 @@ import { NotificationBell } from '@/components/notification-bell'
 import { UserMenu } from '@/components/auth/user-menu'
 import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'
 import { NewTopicButton } from '@/components/new-topic-button'
+import type { PublicSettings } from '@/lib/api/types'
 
 interface ForumLayoutProps {
   children: React.ReactNode
   sidebar?: React.ReactNode
-  communityName?: string
+  publicSettings?: PublicSettings | null
 }
 
-export function ForumLayout({ children, sidebar, communityName = '' }: ForumLayoutProps) {
+export function ForumLayout({ children, sidebar, publicSettings }: ForumLayoutProps) {
+  const communityName = publicSettings?.communityName ?? ''
+  const headerLogoUrl = publicSettings?.headerLogoUrl ?? null
+  const communityLogoUrl = publicSettings?.communityLogoUrl ?? null
+  const showCommunityName = publicSettings?.showCommunityName ?? true
+
   return (
     <div className="min-h-screen overflow-x-hidden bg-background">
       <SkipLinks />
@@ -31,25 +37,45 @@ export function ForumLayout({ children, sidebar, communityName = '' }: ForumLayo
         <div className="container flex h-14 items-center justify-between gap-2 sm:gap-4">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2">
-            <Image
-              src="/barazo-logo-light.svg"
-              alt="Barazo"
-              width={120}
-              height={32}
-              className="h-8 dark:hidden"
-              style={{ width: 'auto' }}
-              priority
-            />
-            <Image
-              src="/barazo-logo-dark.svg"
-              alt="Barazo"
-              width={120}
-              height={32}
-              className="hidden h-8 dark:block"
-              style={{ width: 'auto' }}
-              priority
-            />
-            {communityName && (
+            {headerLogoUrl ? (
+              <Image
+                src={headerLogoUrl}
+                alt={communityName || 'Community'}
+                width={200}
+                height={32}
+                className="h-8 w-auto"
+                priority
+              />
+            ) : communityLogoUrl ? (
+              <Image
+                src={communityLogoUrl}
+                alt={communityName || 'Community'}
+                width={32}
+                height={32}
+                className="h-8 w-8 rounded"
+                priority
+              />
+            ) : (
+              <>
+                <Image
+                  src="/barazo-logo-light.svg"
+                  alt="Barazo"
+                  width={120}
+                  height={32}
+                  className="h-8 w-auto dark:hidden"
+                  priority
+                />
+                <Image
+                  src="/barazo-logo-dark.svg"
+                  alt="Barazo"
+                  width={120}
+                  height={32}
+                  className="hidden h-8 w-auto dark:block"
+                  priority
+                />
+              </>
+            )}
+            {showCommunityName && communityName && (
               <span className="hidden text-lg font-semibold text-foreground sm:inline">
                 {communityName}
               </span>
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index af1a3e5..aaabe2f 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -1010,6 +1010,22 @@ export async function uploadCommunityLogo(
   return response.json() as Promise<UploadResponse>
 }
 
+export async function uploadHeaderLogo(file: File, accessToken: string): Promise<UploadResponse> {
+  const form = new FormData()
+  form.append('file', file)
+  const url = `${API_URL}/api/admin/design/header-logo`
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${accessToken}` },
+    body: form,
+  })
+  if (!response.ok) {
+    const body = await response.text().catch(() => 'Unknown error')
+    throw new ApiError(response.status, `API ${response.status}: ${body}`)
+  }
+  return response.json() as Promise<UploadResponse>
+}
+
 export async function uploadCommunityFavicon(
   file: File,
   accessToken: string
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 27afc6e..e551e8d 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -247,6 +247,8 @@ export interface CommunitySettings {
   communityDescription: string | null
   communityLogoUrl: string | null
   faviconUrl: string | null
+  headerLogoUrl: string | null
+  showCommunityName: boolean
   primaryColor: string | null
   accentColor: string | null
   jurisdictionCountry: string | null
@@ -265,6 +267,8 @@ export interface PublicSettings {
   communityDescription: string | null
   communityLogoUrl: string | null
   faviconUrl: string | null
+  headerLogoUrl: string | null
+  showCommunityName: boolean
 }
 
 export interface CommunityStats {
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index 55a8b53..39e98de 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -604,6 +604,8 @@ export const mockCommunitySettings: CommunitySettings = {
   communityDescription: 'A test community for development',
   communityLogoUrl: null,
   faviconUrl: null,
+  headerLogoUrl: null,
+  showCommunityName: true,
   primaryColor: '#31748f',
   accentColor: '#c4a7e7',
   jurisdictionCountry: null,
@@ -1200,6 +1202,8 @@ export const mockPublicSettings: PublicSettings = {
   communityDescription: 'A test community for development',
   communityLogoUrl: null,
   faviconUrl: null,
+  headerLogoUrl: null,
+  showCommunityName: true,
 }
 
 // --- Community Profile (own profile in a community) ---
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 920b216..6661e9d 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -338,6 +338,17 @@ export const handlers = [
     return HttpResponse.json({ url: 'http://localhost:3000/uploads/logos/mock-logo.webp' })
   }),
 
+  // POST /api/admin/design/header-logo
+  http.post(`${API_URL}/api/admin/design/header-logo`, ({ request }) => {
+    const auth = request.headers.get('Authorization')
+    if (!auth?.startsWith('Bearer ')) {
+      return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+    return HttpResponse.json({
+      url: 'http://localhost:3000/uploads/header-logos/mock-header-logo.webp',
+    })
+  }),
+
   // POST /api/admin/design/favicon
   http.post(`${API_URL}/api/admin/design/favicon`, ({ request }) => {
     const auth = request.headers.get('Authorization')