diff --git a/src/app/(app)/gallery/page.tsx b/src/app/(app)/gallery/page.tsx
index 30d0f90..feae714 100644
--- a/src/app/(app)/gallery/page.tsx
+++ b/src/app/(app)/gallery/page.tsx
@@ -175,7 +175,7 @@ export default function GalleryPage() {
 
   return (
     <section className="w-full px-4 py-8 sm:px-6 lg:px-8">
-      <div className="mx-auto w-full max-w-6xl space-y-6">
+      <div className="mx-auto w-full max-w-7xl space-y-6">
         <header className="space-y-1 mx-auto w-full max-w-2xl">
           <h1 className="text-3xl font-semibold tracking-tight">Gallery</h1>
           <p className="mt-1 text-sm text-muted-foreground">
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 639bae9..c0fd70e 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -61,7 +61,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         <PushPermissionRequest />
         <div className="flex min-h-dvh bg-background">
           <DesktopSidebar primaryLockup={brandContext.primaryLockup} />
-          <div className="flex min-w-0 flex-1 flex-col md:pl-72">
+          <div className="flex min-w-0 flex-1 flex-col md:pl-20 lg:pl-72">
             <MobileHeader primaryLockup={brandContext.primaryLockup} />
             <div className="flex min-h-0 flex-1">
               <main className="min-w-0 flex-1 overflow-y-auto pb-[calc(4rem+var(--safe-area-inset-bottom))] md:pb-0">
diff --git a/src/app/(app)/member/[slug]/page.tsx b/src/app/(app)/member/[slug]/page.tsx
index f3ea9a1..4a2040b 100644
--- a/src/app/(app)/member/[slug]/page.tsx
+++ b/src/app/(app)/member/[slug]/page.tsx
@@ -294,7 +294,7 @@ export default function MemberProfilePage() {
               )}
 
               {activeTab === "gallery" && member ? (
-                <div className="space-y-4 mx-auto max-w-6xl">
+                <div className="space-y-4 mx-auto max-w-7xl">
                   <MemberGalleryTab familyId={familyId} memberId={member.id} memberName={member.name} />
                 </div>
               ) : null}
diff --git a/src/app/(app)/members/page.tsx b/src/app/(app)/members/page.tsx
index d7f4869..7b80325 100644
--- a/src/app/(app)/members/page.tsx
+++ b/src/app/(app)/members/page.tsx
@@ -98,7 +98,7 @@ export default function MembersPage() {
   const isLoading = managementContext.isLoading || membersQuery.isLoading;
 
   return (
-    <section className="mx-auto w-full max-w-6xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
+    <section className="mx-auto w-full max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
       <header className="mx-auto w-full max-w-2xl flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <h1 className="text-3xl font-semibold tracking-tight">Family Members</h1>
diff --git a/src/app/(app)/notifications/page.tsx b/src/app/(app)/notifications/page.tsx
index 5436363..a6fe29d 100644
--- a/src/app/(app)/notifications/page.tsx
+++ b/src/app/(app)/notifications/page.tsx
@@ -154,119 +154,121 @@ export default function NotificationsPage() {
   };
 
   return (
-    <section className="mx-auto w-full max-w-2xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
-      {/* Header */}
-      <header className="space-y-1">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h1 className="text-3xl font-semibold tracking-tight">Notifications</h1>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Tag events, invites, and family activity.
-            </p>
+    <section className="w-full px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mx-auto w-full space-y-6 max-w-2xl">
+        {/* Header */}
+        <header className="space-y-1">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold tracking-tight">Notifications</h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Tag events, invites, and family activity.
+              </p>
+            </div>
+            {showMarkAll && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="shrink-0 text-xs"
+                onClick={() => void handleMarkAllAsRead()}
+                disabled={markAllAsReadMutation.isPending}
+              >
+                Mark all as read
+              </Button>
+            )}
           </div>
-          {showMarkAll && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="shrink-0 text-xs"
-              onClick={() => void handleMarkAllAsRead()}
-              disabled={markAllAsReadMutation.isPending}
+        </header>
+
+        {/* Filter chips */}
+        <div
+          className="flex flex-wrap gap-2"
+          role="tablist"
+          aria-label="Notification filters"
+        >
+          {visibleFilters.map(({ label, value }) => (
+            <button
+              key={value}
+              role="tab"
+              aria-selected={activeFilter === value}
+              onClick={() => setActiveFilter(value)}
+              className={`rounded-full border px-4 py-1.5 text-sm font-medium transition-colors ${
+                activeFilter === value
+                  ? "border-primary bg-primary text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2"
+                  : "border-border bg-card text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2"
+              }`}
             >
-              Mark all as read
-            </Button>
-          )}
+              {label}
+            </button>
+          ))}
         </div>
-      </header>
-
-      {/* Filter chips */}
-      <div
-        className="flex flex-wrap gap-2"
-        role="tablist"
-        aria-label="Notification filters"
-      >
-        {visibleFilters.map(({ label, value }) => (
-          <button
-            key={value}
-            role="tab"
-            aria-selected={activeFilter === value}
-            onClick={() => setActiveFilter(value)}
-            className={`rounded-full border px-4 py-1.5 text-sm font-medium transition-colors ${
-              activeFilter === value
-                ? "border-primary bg-primary text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2"
-                : "border-border bg-card text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2"
-            }`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
 
-      {hasNoFamily ? (
-        <div className="flex flex-col items-center gap-3 rounded-3xl border bg-card py-16 text-center">
-          <div className="flex size-12 items-center justify-center rounded-full bg-muted">
-            <Bell className="size-5 text-muted-foreground" aria-hidden="true" />
+        {hasNoFamily ? (
+          <div className="flex flex-col items-center gap-3 rounded-3xl border bg-card py-16 text-center">
+            <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+              <Bell className="size-5 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div>
+              <p className="font-medium">No family membership found</p>
+              <p className="mt-0.5 text-sm text-muted-foreground">
+                Join a family to view your notifications.
+              </p>
+            </div>
           </div>
-          <div>
-            <p className="font-medium">No family membership found</p>
-            <p className="mt-0.5 text-sm text-muted-foreground">
-              Join a family to view your notifications.
-            </p>
+        ) : isLoading ? (
+          <NotificationsListSkeleton />
+        ) : notificationsQuery.error ? (
+          <div className="rounded-3xl border bg-card px-6 py-14 text-center">
+            <p className="font-medium">Unable to load notifications</p>
+            <p className="mt-1 text-sm text-muted-foreground">{notificationsQuery.error.message}</p>
+            <Button className="mt-4" size="sm" onClick={() => void notificationsQuery.refetch()}>
+              Retry
+            </Button>
           </div>
-        </div>
-      ) : isLoading ? (
-        <NotificationsListSkeleton />
-      ) : notificationsQuery.error ? (
-        <div className="rounded-3xl border bg-card px-6 py-14 text-center">
-          <p className="font-medium">Unable to load notifications</p>
-          <p className="mt-1 text-sm text-muted-foreground">{notificationsQuery.error.message}</p>
-          <Button className="mt-4" size="sm" onClick={() => void notificationsQuery.refetch()}>
-            Retry
-          </Button>
-        </div>
-      ) : filtered.length === 0 ? (
-        /* Empty state */
-        <div className="flex flex-col items-center gap-3 rounded-3xl border bg-card py-16 text-center">
-          <div className="flex size-12 items-center justify-center rounded-full bg-muted">
-            <Bell className="size-5 text-muted-foreground" aria-hidden="true" />
+        ) : filtered.length === 0 ? (
+          /* Empty state */
+          <div className="flex flex-col items-center gap-3 rounded-3xl border bg-card py-16 text-center">
+            <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+              <Bell className="size-5 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div>
+              <p className="font-medium">No notifications yet</p>
+              <p className="mt-0.5 text-sm text-muted-foreground">
+                Tag events and family activity will appear here.
+              </p>
+            </div>
           </div>
-          <div>
-            <p className="font-medium">No notifications yet</p>
-            <p className="mt-0.5 text-sm text-muted-foreground">
-              Tag events and family activity will appear here.
-            </p>
+        ) : (
+          <div className="space-y-6">
+            {/* Unread section */}
+            {unread.length > 0 && (
+              <section aria-label="Unread notifications">
+                <h2 className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                  New
+                </h2>
+                <div className="space-y-2">
+                  {unread.map((notification) => (
+                    <NotificationCard key={notification.id} notification={notification} initialIsRead={snapshot?.get(notification.id) ?? notification.isRead} />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {/* Read section */}
+            {read.length > 0 && (
+              <section aria-label="Earlier notifications">
+                <h2 className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                  Earlier
+                </h2>
+                <div className="space-y-2">
+                  {read.map((notification) => (
+                    <NotificationCard key={notification.id} notification={notification} initialIsRead={snapshot?.get(notification.id) ?? notification.isRead} />
+                  ))}
+                </div>
+              </section>
+            )}
           </div>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          {/* Unread section */}
-          {unread.length > 0 && (
-            <section aria-label="Unread notifications">
-              <h2 className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-                New
-              </h2>
-              <div className="space-y-2">
-                {unread.map((notification) => (
-                  <NotificationCard key={notification.id} notification={notification} initialIsRead={snapshot?.get(notification.id) ?? notification.isRead} />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Read section */}
-          {read.length > 0 && (
-            <section aria-label="Earlier notifications">
-              <h2 className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-                Earlier
-              </h2>
-              <div className="space-y-2">
-                {read.map((notification) => (
-                  <NotificationCard key={notification.id} notification={notification} initialIsRead={snapshot?.get(notification.id) ?? notification.isRead} />
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
-      )}
+        )}
+      </div>
     </section>
   );
 }
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index f005f85..c8bd414 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -6,6 +6,7 @@ import { useMemo } from "react";
 
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { ComposerEntry } from "~/components/feed/composer-entry";
+import { useGlobalComposer } from "~/components/feed/global-composer-provider";
 import { PostCard } from "~/components/feed/post-card";
 import type { PostCardData } from "~/components/feed/post-card";
 import { Skeleton } from "~/components/ui/skeleton";
@@ -101,7 +102,7 @@ function mapFeedItemToPostCardData(item: {
   };
 }
 
-function FeedEmptyState() {
+function FeedEmptyState({ onCreateFirstMemory }: { onCreateFirstMemory: () => void }) {
   return (
     <section className="rounded-3xl border border-dashed border-border/80 bg-card/70 px-6 py-10 text-center">
       <div className="mx-auto flex size-12 items-center justify-center rounded-full border border-border bg-muted">
@@ -111,7 +112,7 @@ function FeedEmptyState() {
       <p className="mx-auto mt-2 max-w-sm text-muted-foreground text-sm sm:text-base">
         Start your family timeline by creating the first memory post.
       </p>
-      <Button type="button" className="mt-5" size="lg">
+      <Button type="button" className="mt-5" size="lg" onClick={onCreateFirstMemory}>
         Create first memory
       </Button>
     </section>
@@ -170,6 +171,7 @@ function FeedSkeletonList() {
 }
 
 export default function FeedPage() {
+  const { openComposer } = useGlobalComposer();
   const managementContext = api.family.getManagementContext.useQuery(undefined, {
     retry: false,
     refetchOnWindowFocus: false,
@@ -236,7 +238,7 @@ export default function FeedPage() {
 
   return (
     <>
-      <section className="px-4 pb-6 pt-5 sm:px-6 md:px-8">
+      <section className="w-full px-4 py-8 sm:px-6 lg:px-8">
         <div className="mx-auto w-full max-w-2xl space-y-4">
           <header className="space-y-1 mx-auto w-full max-w-2xl">
             <h1 className="text-3xl font-semibold tracking-tight">Feed</h1>
@@ -291,7 +293,7 @@ export default function FeedPage() {
               isAdmin={isAdmin}
             />
           ) : (
-            <FeedEmptyState />
+            <FeedEmptyState onCreateFirstMemory={() => openComposer()} />
           )}
         </div>
       </section>
diff --git a/src/app/(app)/profile/page.tsx b/src/app/(app)/profile/page.tsx
index e14768f..76d9f67 100644
--- a/src/app/(app)/profile/page.tsx
+++ b/src/app/(app)/profile/page.tsx
@@ -248,7 +248,7 @@ export default function ProfilePage() {
               )}
 
               {activeTab === "gallery" && member ? (
-                <div className="space-y-4 mx-auto max-w-6xl">
+                <div className="space-y-4 mx-auto max-w-7xl">
                   <MemberGalleryTab familyId={familyId} memberId={member.id} memberName={member.name} />
                 </div>
               ) : null}
diff --git a/src/app/(app)/settings/layout.tsx b/src/app/(app)/settings/layout.tsx
index cffb871..3c58110 100644
--- a/src/app/(app)/settings/layout.tsx
+++ b/src/app/(app)/settings/layout.tsx
@@ -114,9 +114,9 @@ export default function SettingsLayout({
   }
 
   return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <h1 className="font-semibold text-2xl tracking-tight">Settings</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Settings</h1>
         <LogoutButton variant="destructive" size="sm" className="gap-2">
           <Logout className="size-4" />
           <span>Log out</span>
@@ -154,7 +154,7 @@ export default function SettingsLayout({
           </DropdownMenu>
         </div>
 
-        <nav aria-label="Settings navigation" className="hidden shrink-0 md:block md:w-52">
+        <nav aria-label="Settings navigation" className="hidden shrink-0 md:block md:w-48">
           <ul className="flex gap-1 rounded-xl border bg-card/60 p-1 md:flex-col">
             {visibleSettingsNav.map((item) => {
               const active = isActivePath(pathname, item.href);
diff --git a/src/app/auth/claim/[token]/page.tsx b/src/app/auth/claim/[token]/page.tsx
index cc7616f..621e5bd 100644
--- a/src/app/auth/claim/[token]/page.tsx
+++ b/src/app/auth/claim/[token]/page.tsx
@@ -3,15 +3,16 @@
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-import { AlertCircle, ShieldCheck } from "~/components/ui/icons";
+import { AlertCircle } from "~/components/ui/icons";
 
 import { ThemeToggle } from "~/components/theme-toggle";
 import { beginNavigationProgress } from "~/components/nav/navigation-progress";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Skeleton } from "~/components/ui/skeleton";
-import { formatFamilyDisplayName } from "~/lib/family-name";
+import { formatFamilyLockup } from "~/lib/family-name";
 import { api } from "~/trpc/react";
 
 function getClaimErrorMessage(error: unknown) {
@@ -35,6 +36,20 @@ function getClaimErrorState(errorMessage: string | null) {
   return null;
 }
 
+function getInitials(name: string): string {
+  const normalized = name.trim();
+  if (!normalized) {
+    return "?";
+  }
+
+  const parts = normalized.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    return parts[0]!.slice(0, 1).toUpperCase();
+  }
+
+  return `${parts[0]!.slice(0, 1)}${parts[parts.length - 1]!.slice(0, 1)}`.toUpperCase();
+}
+
 export default function ClaimAccountPage() {
   const router = useRouter();
   const params = useParams<{ token: string }>();
@@ -97,27 +112,25 @@ export default function ClaimAccountPage() {
           <div className="space-y-6">
             <header className="space-y-2 text-center sm:text-left">
               <h1 className="font-heading text-3xl font-semibold tracking-tight text-balance">
-                Claim family profile
+                Claim your profile
               </h1>
               <p className="text-sm text-muted-foreground sm:text-base">
-                Confirm your details to activate an existing family profile.
+                Confirm your details to activate your profile in {formatFamilyLockup(claimPreviewQuery.data.family.name)}.
               </p>
             </header>
 
             <div className="rounded-3xl border border-border/80 bg-muted/40 p-5">
-              <div className="flex items-start gap-3">
-                <div className="rounded-xl border border-border/80 bg-background/80 p-2 text-muted-foreground">
-                  <ShieldCheck className="size-4" aria-hidden="true" />
-                </div>
-
-                <div className="space-y-2 text-sm">
-                  <p className="font-semibold text-base">{claimPreviewQuery.data.member.name}</p>
-                  <p className="text-muted-foreground">{formatFamilyDisplayName(claimPreviewQuery.data.family.name)}</p>
-                  <p className="text-muted-foreground">Prepared by a family admin</p>
-                  <p className="text-muted-foreground">
-                    Claiming this link will activate this existing profile instead of creating a duplicate person.
-                  </p>
-                </div>
+              <div className="flex items-center gap-3">
+                <Avatar className="size-12 border border-border/80">
+                  <AvatarImage
+                    src={claimPreviewQuery.data.member.image ?? undefined}
+                    alt={claimPreviewQuery.data.member.name}
+                  />
+                  <AvatarFallback className="text-sm font-semibold text-foreground">
+                    {getInitials(claimPreviewQuery.data.member.name)}
+                  </AvatarFallback>
+                </Avatar>
+                <p className="text-base font-semibold">{claimPreviewQuery.data.member.name}</p>
               </div>
             </div>
 
diff --git a/src/components/gallery/gallery-states.tsx b/src/components/gallery/gallery-states.tsx
index f075223..0ee9ac3 100644
--- a/src/components/gallery/gallery-states.tsx
+++ b/src/components/gallery/gallery-states.tsx
@@ -20,7 +20,7 @@ export function GalleryLoadingState() {
 
 export function GalleryEmptyState({ familyName }: { familyName?: string }) {
   return (
-    <section className="rounded-3xl border border-dashed border-border/80 bg-card/70 px-6 py-12 text-center">
+    <section className="mx-auto w-full max-w-2xl rounded-3xl border border-dashed border-border/80 bg-card/70 px-6 py-12 text-center">
       <div className="mx-auto flex size-12 items-center justify-center rounded-full border border-border bg-muted">
         <ImageOff className="size-5 text-muted-foreground" />
       </div>
diff --git a/src/components/gallery/member-gallery-tab.tsx b/src/components/gallery/member-gallery-tab.tsx
index 235f316..59e29d7 100644
--- a/src/components/gallery/member-gallery-tab.tsx
+++ b/src/components/gallery/member-gallery-tab.tsx
@@ -27,12 +27,12 @@ function SectionEmptyState({
   description: string;
 }) {
   return (
-    <div className="rounded-2xl border border-dashed border-border/80 bg-card/70 px-4 py-10 text-center">
-      <div className="mx-auto flex size-10 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
-        <Icon className="size-4" aria-hidden="true" />
+    <div className="px-2 py-8 text-center mx-auto max-w-2xl">
+      <div className="mx-auto grid size-10 place-items-center rounded-full text-muted-foreground">
+        <Icon className="size-5" aria-hidden="true" />
       </div>
       <p className="mt-3 font-medium text-sm">{title}</p>
-      <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">{description}</p>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
     </div>
   );
 }
diff --git a/src/components/nav/desktop-sidebar.tsx b/src/components/nav/desktop-sidebar.tsx
index ea77096..89c86c8 100644
--- a/src/components/nav/desktop-sidebar.tsx
+++ b/src/components/nav/desktop-sidebar.tsx
@@ -56,6 +56,7 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
   const selectedLogotypeFontName =
     parsedBrandingConfig?.logotype.enabled ? (parsedBrandingConfig.logotype.fontName ?? null) : null;
   const selectedFamilyName = normalizeFamilyNameInput(managementContext.data?.family?.name ?? "") || "Family";
+  const selectedFamilyInitial = Array.from(selectedFamilyName)[0] ?? "F";
   const unreadCountQuery = api.notification.getUnreadCount.useQuery(
     {
       familyId: familyId ?? "",
@@ -94,28 +95,37 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
   const unreadLabel = formatUnreadBadgeCount(unreadCountQuery.data?.count ?? 0);
 
   return (
-    <aside className="fixed top-0 left-0 hidden h-screen w-72 border-r border-border bg-background md:flex md:flex-col">
-      <div className={`flex h-16 items-center px-6 ${selectedLogotypeFontName && "ml-2"}`}>
-        <Link href="/" className="inline-flex items-center gap-2" aria-label={`${primaryLockup} home`}>
+    <aside className="fixed top-0 left-0 hidden h-screen w-20 border-r border-border bg-background md:flex md:flex-col lg:w-72">
+      <div className={`flex h-16 items-center justify-center px-2 lg:justify-start lg:px-6 ${selectedLogotypeFontName && "lg:ml-2"}`}>
+        <Link href="/" className="inline-flex items-center justify-center gap-2" aria-label={`${primaryLockup} home`}>
           {selectedLogotypeFontName ? (
-            <FamilyLogotypeLockup
-              familyName={selectedFamilyName}
-              fontName={selectedLogotypeFontName}
-              className="px-4"
-              familyNameClassName="text-[40px]"
-              leadingClassName="text-xs"
-              trailingClassName="text-xs translate-y-[90%]"
-            />
+            <>
+              <span
+                className="inline-flex select-none text-4xl leading-none text-foreground lg:hidden"
+                style={{ fontFamily: `"${selectedLogotypeFontName}", cursive` }}
+                aria-hidden="true"
+              >
+                {selectedFamilyInitial}
+              </span>
+              <FamilyLogotypeLockup
+                familyName={selectedFamilyName}
+                fontName={selectedLogotypeFontName}
+                className="hidden px-4 lg:inline-flex"
+                familyNameClassName="text-[40px]"
+                leadingClassName="text-xs"
+                trailingClassName="text-xs translate-y-[90%]"
+              />
+            </>
           ) : (
             <>
               <Logo className="h-6 w-auto text-foreground" aria-hidden="true" />
-              <span className="font-semibold text-2xl leading-none tracking-tight">Fircle</span>
+              <span className="hidden font-semibold text-2xl leading-none tracking-tight lg:inline">Fircle</span>
             </>
           )}
         </Link>
       </div>
 
-      <nav className="mt-2 flex flex-1 flex-col gap-2 px-4">
+      <nav className="mt-2 flex flex-1 flex-col gap-2 px-2 lg:px-4">
         {items.map((item) => {
           const active = isActivePath(pathname, item.href);
           const Icon = item.icon;
@@ -128,11 +138,11 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
               size="default"
               title={item.label}
               className={cn(
-                "h-12 w-fit justify-start gap-3 rounded-full px-4 text-base text-foreground",
+                "h-12 w-full justify-center rounded-full px-0 text-base text-foreground lg:justify-start lg:gap-3 lg:px-4",
                 active && "bg-muted font-semibold hover:bg-muted"
               )}
             >
-              <Link href={item.href} aria-label={item.label}>
+              <Link href={item.href} aria-label={item.label} className="inline-flex w-full items-center justify-center lg:justify-start lg:gap-3">
                 <span className="relative inline-flex">
                   <Icon className="size-6" />
                   {item.href === "/notifications" && unreadLabel ? (
@@ -141,7 +151,7 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
                     </span>
                   ) : null}
                 </span>
-                <span>{item.label}</span>
+                <span className="hidden lg:inline">{item.label}</span>
               </Link>
             </Button>
           );
@@ -149,24 +159,25 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
         <Button
           type="button"
           title="Create"
+          aria-label="Create"
           onClick={() => openComposer()}
           className={cn(
-            "h-12 w-full justify-start gap-3 rounded-full px-4 text-base",
-            "bg-primary text-primary-foreground hover:bg-primary/80 text-center"
+            "h-12 w-full justify-center rounded-full px-0 text-base lg:justify-start lg:gap-3 lg:px-4",
+            "bg-primary text-primary-foreground hover:bg-primary/80"
           )}
         >
-          <span aria-label="Create" className="mx-auto inline-flex items-center gap-3">
+          <span className="inline-flex w-full items-center justify-center lg:justify-start lg:gap-3">
             <Plus className="size-6" />
-            <span>Create</span>
+            <span className="hidden lg:inline">Create</span>
           </span>
         </Button>
       </nav>
 
-      <div className="flex flex-col gap-2 px-4 pb-4">
+      <div className="flex flex-col gap-2 px-2 pb-4 lg:px-4">
         <ThemeToggle
           title="Toggle theme"
           className={cn(
-            "h-12 w-fit justify-start gap-3 rounded-full px-4 text-base",
+            "h-12 w-full justify-center rounded-full px-0 text-base lg:w-fit lg:justify-start lg:gap-3 lg:px-4 [&_span]:hidden lg:[&_span]:inline",
             "text-foreground"
           )}
         />
@@ -176,15 +187,15 @@ export function DesktopSidebar({ primaryLockup }: { primaryLockup: string }) {
           title="Settings"
           aria-label="Settings"
           className={cn(
-            "h-12 w-fit justify-start gap-3 rounded-full px-4 text-base",
+            "h-12 w-full justify-center rounded-full px-0 text-base lg:w-fit lg:justify-start lg:gap-3 lg:px-4",
             isSettingsPath(pathname)
               ? "bg-muted font-semibold text-foreground hover:bg-muted"
               : "text-foreground"
           )}
         >
-          <Link href="/settings">
+          <Link href="/settings" className="inline-flex w-full items-center justify-center lg:justify-start lg:gap-3">
             <Settings className="size-6" />
-            <span>Settings</span>
+            <span className="hidden lg:inline">Settings</span>
           </Link>
         </Button>
       </div>