diff --git a/public/fonts/chopen/chopen-semi-bold.woff b/public/fonts/chopen/chopen-semi-bold.woff
new file mode 100644
index 000000000..e3131b4b5
Binary files /dev/null and b/public/fonts/chopen/chopen-semi-bold.woff differ
diff --git a/public/fonts/chopen/chopen-semi-bold.woff2 b/public/fonts/chopen/chopen-semi-bold.woff2
new file mode 100644
index 000000000..3e0262964
Binary files /dev/null and b/public/fonts/chopen/chopen-semi-bold.woff2 differ
diff --git a/public/images/brand/tanstack-wordmark-black.svg b/public/images/brand/tanstack-wordmark-black.svg
new file mode 100644
index 000000000..62b5dd32f
--- /dev/null
+++ b/public/images/brand/tanstack-wordmark-black.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="48 0 273.33 50">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #121212;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M151.71,43.25h-12.45c-.67,0-1.28-.42-1.53-1.04l-2.55-6.55c-.65-1.7-3.15-1.22-3.17.58-.02,1.8-.02,3.53-.02,5.37,0,.9-.74,1.64-1.64,1.64h-10.47c-.92,0-1.64-.72-1.64-1.64V8.34c0-.9.72-1.64,1.64-1.64h12.43c.69-.02,1.28.41,1.53,1.04l2.61,6.84c.65,1.7,3.15,1.25,3.17-.57l.07-5.69c0-.9.74-1.63,1.64-1.63h10.4c.9,0,1.64.74,1.64,1.66v33.26c0,.92-.74,1.64-1.64,1.64l-.02-.02Z"/>
+  <path class="cls-2" d="M98.25,37.35l-3.85-.04c-.81,0-1.5.58-1.64,1.38l-.53,3.18c-.12.79-.81,1.38-1.62,1.38h-11.07c-1.07,0-1.85-.99-1.6-2.03l8.38-33.28c.18-.72.85-1.24,1.6-1.24h16.76c.76.02,1.41.53,1.58,1.27l8.4,33.25c.26,1.04-.51,2.05-1.58,2.05l-11.07.04c-.81,0-1.5-.58-1.62-1.38l-.53-3.16c-.12-.79-.81-1.38-1.6-1.38v-.04ZM97.94,27.4l-.85-4.19c-.18-.88-1.44-.88-1.62,0l-.76,4.2c-.19,1.02.62,1.98,1.65,1.94,1.02-.04,1.76-.97,1.57-1.98v.02Z"/>
+  <path class="cls-2" d="M69.77,43.23l-10.49.04c-.92,0-1.65-.74-1.65-1.64v-21.76c0-.9-.72-1.64-1.64-1.64h-5.39c-.9,0-1.64-.76-1.64-1.66v-8.2c0-.9.74-1.64,1.65-1.64h27.8c.9,0,1.64.74,1.64,1.64v8.2c0,.9-.72,1.64-1.64,1.64h-5.39c-.9,0-1.64.74-1.64,1.66v21.75c0,.9-.74,1.64-1.64,1.64l.02-.02Z"/>
+  <path class="cls-2" d="M311.9,24.92l9.21,15.85c.63,1.1-.14,2.47-1.41,2.47l-10.72.05c-.6,0-1.14-.32-1.44-.83l-4.07-7.21c-.6-1.08-2.24-.65-2.25.58l-.1,5.81c0,.9-.74,1.63-1.64,1.63h-10.47c-.92,0-1.64-.72-1.64-1.64V8.37c0-.9.72-1.64,1.64-1.64h10.49c.9,0,1.62.71,1.64,1.59l.11,4.26c.04,1.27,1.74,1.64,2.29.49l2.59-5.39c.28-.57.85-.94,1.48-.94h10.88c1.27-.02,2.06,1.34,1.43,2.44l-7.97,14.1c-.28.51-.28,1.13,0,1.64h-.02Z"/>
+  <path class="cls-2" d="M238.4,37.38l-3.85-.04c-.81,0-1.5.58-1.64,1.38l-.53,3.18c-.12.79-.81,1.38-1.62,1.38h-11.09c-1.07,0-1.85-.99-1.6-2.03l8.38-33.26c.18-.72.85-1.24,1.58-1.24h16.78c.76-.02,1.41.49,1.6,1.22l8.4,33.26c.26,1.04-.51,2.05-1.58,2.05h-11.07c-.81.04-1.5-.55-1.62-1.34l-.53-3.16c-.12-.79-.81-1.38-1.6-1.38v-.02ZM238.07,27.43l-.74-3.67c-.19-.99-1.62-.99-1.81.02l-.67,3.69c-.19,1.02.62,1.98,1.65,1.94,1.02-.04,1.76-.97,1.57-1.98Z"/>
+  <path class="cls-2" d="M189.42,33.35c-.99,11.71-17.78,12.35-29.17,8.2-.67-.25-1.11-.9-1.11-1.61v-9.57c0-1.31,1.37-2.14,2.52-1.5,3.68,2.01,7.39,3.44,11.6,4.29,0,0,1.39.11,1.9-.79.51-.9-.46-1.25-.88-1.61-8.01-3.48-17.32-5.53-16.49-14.59.97-10.48,16.83-11.75,27.62-8.39.7.21,1.18.9,1.18,1.64v9.38c0,1.24-1.27,2.07-2.41,1.57-5.16-2.28-12.16-4.29-11.81-2.95.9,3.39,18.06,3.76,17.04,15.9l.02.04Z"/>
+  <path class="cls-2" d="M271.32,29.38c2.8,2.33,6.25,2.44,9.22.94,1.41-.71,3.06.25,3.06,1.82l.05,8.37c0,.87-.51,1.68-1.34,1.96-8.08,2.86-17.55,1.24-23.25-5.81-5.7-7.05-5.42-16.91.23-23.62,5.65-6.71,15.03-8.27,23.01-5.55.83.28,1.36,1.1,1.36,1.98l-.05,8.37c0,1.57-1.65,2.53-3.06,1.84-2.94-1.47-6.28-1.47-9.12.79-2.48,1.98-2.75,6.69-.11,8.9Z"/>
+  <path class="cls-2" d="M210.7,43.24l-10.49.04c-.92,0-1.65-.74-1.65-1.64v-21.76c0-.9-.72-1.64-1.64-1.64h-5.39c-.9,0-1.64-.76-1.64-1.66v-8.2c0-.9.74-1.64,1.65-1.64h27.79c.9,0,1.64.74,1.64,1.64v8.2c0,.9-.72,1.64-1.64,1.64h-5.39c-.9,0-1.64.74-1.64,1.66v21.75c0,.9-.72,1.64-1.64,1.64l.02-.02Z"/>
+</svg>
diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
index aaf76ddfa..4ac073ebd 100644
--- a/src/components/LibraryLayout.tsx
+++ b/src/components/LibraryLayout.tsx
@@ -15,7 +15,6 @@ import { getActiveDocsNavTabId, getTabbedMenuConfig } from '~/utils/docsNavTabs'
 import { getLibrary, type Framework, type LibraryId } from '~/libraries'
 import { categoryOf, categoryTextColor } from '~/libraries/categories'
 import { frameworkOptions } from '~/libraries/frameworks'
-import { fallbackLibraryIcon, libraryIcons } from '~/libraries/icons'
 import { twMerge } from 'tailwind-merge'
 import {
   getPartnerHref,
@@ -823,7 +822,6 @@ export function LibraryLayout({
     routeVersion,
   })
   const menuConfig = useMenuConfig({ config, frameworks, repo, libraryId })
-  const LibraryIcon = libraryIcons[libraryId] ?? fallbackLibraryIcon
   const libraryGroupColor = categoryTextColor[categoryOf(libraryId)]
 
   const isExample = matches.some(
@@ -1321,17 +1319,6 @@ export function LibraryLayout({
       )}
     >
       <div className="flex h-full items-stretch">
-        <Link
-          to={libraryHomePath}
-          aria-label={`${name} home`}
-          className={twMerge(
-            'flex max-w-[50vw] shrink-0 items-center gap-2 border-r border-gray-500/20 px-3 font-ds-display text-[20px] font-semibold leading-none hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current md:max-w-none md:text-[24px] min-[900px]:px-5',
-            libraryGroupColor,
-          )}
-        >
-          <LibraryIcon className="size-5 shrink-0 md:size-6" weight="bold" />
-          <span className="truncate">{name}</span>
-        </Link>
         <button
           type="button"
           aria-label="Documentation menu"
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 86c5a91ba..1d6c29b84 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -43,8 +43,9 @@ import { AiDockButton, SearchButton } from './SearchButton'
 import { BrandContextMenu } from './BrandContextMenu'
 import { useSearchContext } from '~/contexts/SearchContext'
 import { useLibrariesOverlay } from '~/contexts/LibrariesOverlayContext'
-import { publicLibraries, type LibrarySlim } from '~/libraries'
+import { findLibrary, publicLibraries, type LibrarySlim } from '~/libraries'
 import {
+  categoryOf,
   categoryLabels,
   categoryOrder,
   categoryTextColor,
@@ -79,6 +80,46 @@ import { fetchRecentPosts, type RecentPost } from '~/utils/blog.functions'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 
 const LogoSection = () => {
+  const pathname = useLocation({ select: (location) => location.pathname })
+  const library = findLibrary(pathname.split('/')[1])
+
+  if (library) {
+    return (
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        <Link
+          to="/"
+          aria-label="TanStack home"
+          className={twMerge(
+            'flex shrink-0 items-center gap-1.5 sm:gap-2',
+            categoryTextColor[categoryOf(library.id)],
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className="block h-6 w-[19px] shrink-0 bg-current sm:h-8 sm:w-6"
+            style={{
+              mask: 'url(/images/brand/tanstack-emblem-black.svg) center / contain no-repeat',
+            }}
+          />
+          <img
+            src="/images/brand/tanstack-wordmark-black.svg"
+            alt="TanStack"
+            className="h-5 w-auto dark:invert sm:h-7"
+          />
+        </Link>
+        <Link
+          to={library.to ?? `/${library.id}/latest`}
+          className={twMerge(
+            'relative -top-[0.06em] whitespace-nowrap font-library-name text-[16px] font-normal uppercase leading-none sm:text-[22px]',
+            categoryTextColor[categoryOf(library.id)],
+          )}
+        >
+          {library.name.replace(/^TanStack /, '')}
+        </Link>
+      </div>
+    )
+  }
+
   return (
     <Link
       to="/"
@@ -143,8 +184,6 @@ type NavMenuGroup = {
 
 const MERCH_MENU_PRODUCT_COUNT = 3
 
-const DESKTOP_NAV_CLASS = 'hidden min-[900px]:flex'
-const MOBILE_NAV_CLASS = 'min-[900px]:hidden'
 const DESKTOP_SOCIAL_CLASS = 'hidden min-[1120px]:flex'
 
 const NAV_GROUPS = [
@@ -424,6 +463,13 @@ function AiDockMount() {
 
 export function Navbar({ children }: { children: React.ReactNode }) {
   const location = useLocation()
+  const isLibrary = Boolean(findLibrary(location.pathname.split('/')[1]))
+  const desktopNavClass = isLibrary
+    ? 'hidden min-[1280px]:flex'
+    : 'hidden min-[900px]:flex'
+  const mobileNavClass = isLibrary
+    ? 'min-[1280px]:hidden'
+    : 'min-[900px]:hidden'
 
   const containerRef = React.useRef<HTMLDivElement>(null)
   const desktopNavRef = React.useRef<HTMLElement>(null)
@@ -618,7 +664,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         ref={desktopNavRef}
         aria-label="Primary navigation"
         className={twMerge(
-          DESKTOP_NAV_CLASS,
+          desktopNavClass,
           'relative self-stretch shrink-0 items-center justify-center gap-1',
         )}
       >
@@ -637,20 +683,26 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         ))}
       </nav>
 
-      <div className={DESKTOP_NAV_CLASS}>
+      <div className={desktopNavClass}>
         <SearchButton iconOnly className="h-8 w-8" />
       </div>
 
       <div className="flex flex-1 items-center justify-end gap-2 sm:gap-2.5">
-        <div className={DESKTOP_SOCIAL_CLASS}>{socialLinks}</div>
-        <div className={DESKTOP_NAV_CLASS}>
+        <div
+          className={
+            isLibrary ? 'hidden min-[1440px]:flex' : DESKTOP_SOCIAL_CLASS
+          }
+        >
+          {socialLinks}
+        </div>
+        <div className={desktopNavClass}>
           <ThemeToggle />
         </div>
         <NavbarCartButton />
-        <div className={DESKTOP_NAV_CLASS}>
+        <div className={desktopNavClass}>
           <AiDockButton />
         </div>
-        <div className={twMerge(DESKTOP_NAV_CLASS, 'items-center gap-2')}>
+        <div className={twMerge(desktopNavClass, 'items-center gap-2')}>
           {renderAuthControls()}
         </div>
         <button
@@ -662,7 +714,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             'inline-flex h-9 w-9 items-center justify-center rounded-md',
             'text-gray-700 transition-colors hover:bg-gray-500/10',
             'dark:text-gray-200',
-            MOBILE_NAV_CLASS,
+            mobileNavClass,
           )}
           onClick={() => setMobileMenuOpen((prev) => !prev)}
         >
@@ -680,7 +732,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     <Panel
       open={mobileMenuOpen}
       onOpenChange={setMobileMenuOpen}
-      className={MOBILE_NAV_CLASS}
+      className={mobileNavClass}
     >
       <PanelContent
         className={twMerge(
diff --git a/src/components/landing/LibraryLanding.tsx b/src/components/landing/LibraryLanding.tsx
index 833403c19..c07bb2a9e 100644
--- a/src/components/landing/LibraryLanding.tsx
+++ b/src/components/landing/LibraryLanding.tsx
@@ -324,7 +324,7 @@ export function LibraryLandingShell({
                         className="hidden h-[18px] w-auto dark:block"
                       />
                       <h1 className="mt-1">
-                        <span className="block bg-[linear-gradient(110deg,var(--landing-headline-start),var(--landing-headline-end))] bg-clip-text pr-1 font-ds-display text-ds-display-lg uppercase text-transparent dark:[filter:drop-shadow(0_4px_4px_rgb(0_0_0/0.25))] sm:text-ds-display-xl 2xl:text-ds-display-2xl">
+                        <span className="block bg-[linear-gradient(110deg,var(--landing-headline-start),var(--landing-headline-end))] bg-clip-text pr-1 font-library-name text-ds-display-lg font-normal uppercase text-transparent dark:[filter:drop-shadow(0_4px_4px_rgb(0_0_0/0.25))] sm:text-ds-display-xl 2xl:text-ds-display-2xl">
                           {library.name.replace(/^TanStack\s+/i, '')}
                         </span>
                       </h1>
diff --git a/src/styles/app.css b/src/styles/app.css
index 72623f57f..d4a8625c7 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -22,6 +22,7 @@ html.theme-switching *::after {
   --breakpoint-xs: 480px;
 
   /* Fonts */
+  --font-library-name: 'Chopen-SemiBold', ui-sans-serif, system-ui, sans-serif;
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
@@ -3028,3 +3029,29 @@ html.dark .sandbox-ui {
 [data-builder-shell]:has([data-builder-ready]) > [data-builder-initial] {
   display: none;
 }
+
+/*
+Font: 		Chopen Semi Bold
+Style:
+URL: 		https://youworkforthem.com/font/T28170/chopen
+Foundry: 	Typeface Design Studio
+Foundry: 	https://youworkforthem.com/designer/1740/typeface-design-studio
+Copyright:
+Version: 	18
+Created:	April 02, 2026
+License: 	https://www.youworkforthem.com/font-license
+License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
+			WebFont license rules. All other parties are strictly restricted
+			from using the WebFonts(s) listed without a purchased license.
+			All details above must always remain unaltered and visible in your CSS.
+*/
+
+@font-face {
+  font-family: 'Chopen-SemiBold';
+  src:
+    url('/fonts/chopen/chopen-semi-bold.woff2') format('woff2'),
+    url('/fonts/chopen/chopen-semi-bold.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}