diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 622d6b7d..9b5168bc 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -518,14 +518,7 @@ export function DocsLayout({
 
   const largeMenu = (
     <div className="bg-white/50 dark:bg-black/30 shadow-xl max-w-[300px] xl:max-w-[350px] 2xl:max-w-[400px] hidden lg:flex flex-col gap-4 h-screen sticky top-0 z-20 dark:border-r border-gray-500/20 transition-all duration-500">
-      <div
-        className="px-4 pt-4 flex gap-2 items-center text-2xl"
-        style={{
-          viewTransitionName: `library-name`,
-        }}
-      >
-        {logo}
-      </div>
+      <div className="px-4 pt-4 flex gap-2 items-center text-2xl">{logo}</div>
       <div className="px-4">
         <SearchButton />
       </div>
diff --git a/app/components/DocsLogo.tsx b/app/components/DocsLogo.tsx
index d011f4a6..8e261c2b 100644
--- a/app/components/DocsLogo.tsx
+++ b/app/components/DocsLogo.tsx
@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { ThemeToggle } from './ThemeToggle'
+import { I18nToggle } from '@tanstack-dev/components'
 
 type Props = {
   name: string
@@ -31,6 +32,7 @@ export const DocsLogo = ({
         <span className={`${gradientText}`}>{name}</span>{' '}
         <span className="text-sm align-super">{version}</span>
       </Link>
+      <I18nToggle />
       <div className="ml-auto">
         <ThemeToggle />
       </div>
diff --git a/app/routes/__root.tsx b/app/routes/__root.tsx
index b7629715..81c0d6c3 100644
--- a/app/routes/__root.tsx
+++ b/app/routes/__root.tsx
@@ -24,11 +24,12 @@ import { GoogleScripts } from '~/components/GoogleScripts'
 import { BackgroundAnimation } from '~/components/BackgroundAnimation'
 import { SearchProvider } from '~/contexts/SearchContext'
 import { SearchModal } from '~/components/SearchModal'
+import { getI18nLinks } from '@tanstack-dev/components';
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
 }>()({
-  head: () => ({
+  head: (ctx) => ({
     meta: [
       {
         charSet: 'utf-8',
@@ -81,6 +82,9 @@ export const Route = createRootRouteWithContext<{
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
+      ...getI18nLinks({
+        href: ctx.loaderData.href,
+      }),
     ],
     scripts: [
       // Google Tag Manager script
@@ -108,8 +112,9 @@ export const Route = createRootRouteWithContext<{
     }
   },
   staleTime: Infinity,
-  loader: async () => {
+  loader: async ({location}) => {
     return {
+      href: location.href,
       themeCookie: await getThemeCookie(),
     }
   },
diff --git a/app/routes/_libraries/route.tsx b/app/routes/_libraries/route.tsx
index 32666906..aed7e71f 100644
--- a/app/routes/_libraries/route.tsx
+++ b/app/routes/_libraries/route.tsx
@@ -18,6 +18,7 @@ import { ThemeToggle, useThemeStore } from '~/components/ThemeToggle'
 import { TbBrandBluesky, TbBrandTwitter } from 'react-icons/tb'
 import { BiSolidCheckShield } from 'react-icons/bi'
 import { SearchButton } from '~/components/SearchButton'
+import {I18nToggle} from '@tanstack-dev/components'
 
 export const Route = createFileRoute('/_libraries')({
   staleTime: Infinity,
@@ -37,6 +38,7 @@ function LibrariesLayout() {
       })
     },
   })
+  const href = useLocation().href;
 
   const detailsRef = React.useRef<HTMLElement>(null!)
   const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10 font-black`
@@ -225,7 +227,7 @@ function LibrariesLayout() {
   )
 
   const logo = (
-    <div className="flex-1 flex items-center gap-4 justify-between">
+    <div className="flex-1 flex items-center gap-2 justify-between">
       <Link to="/" className={twMerge(`flex items-center gap-1.5`)}>
         <img
           src={logoColor100w}
@@ -253,6 +255,7 @@ function LibrariesLayout() {
         >
           <FaInstagram className="text-xl" />
         </a>
+        <I18nToggle href={href}/>
       </div>
       <div className="ml-auto">
         <ThemeToggle />
diff --git a/package.json b/package.json
index 7df3c392..dd0f9cf4 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@sentry/react": "^8.35.0",
     "@sentry/vite-plugin": "^2.22.6",
     "@tailwindcss/typography": "^0.5.13",
+    "@tanstack-dev/components": "^1.4.0",
     "@tanstack/pacer": "^0.2.0",
     "@tanstack/react-pacer": "^0.2.0",
     "@tanstack/react-query": "^5.66.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 871157e5..d5fce397 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.13
         version: 0.5.13(tailwindcss@3.4.1)
+      '@tanstack-dev/components':
+        specifier: ^1.4.0
+        version: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@tanstack/pacer':
         specifier: ^0.2.0
         version: 0.2.0
@@ -2884,6 +2887,12 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
+  '@tanstack-dev/components@1.4.0':
+    resolution: {integrity: sha512-d+8NEzqfQpSRUVN8gcP9qBT/M6fOMerGux8pCV4Hmq2mHr+C9tJ3MwFFnP9xXh9LwPzXqKEU/2b/eDSMyunAUw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   '@tanstack/directive-functions-plugin@1.106.0':
     resolution: {integrity: sha512-eAK+8tGl+ZZimROdnuHoAc1MVKvmQWh7WTQbh531607NQAuD/7TgbTAiSBfTJYW8qeGovrSp/qq+dnhjqTy3xQ==}
     engines: {node: '>=12'}
@@ -10011,6 +10020,12 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.1
 
+  '@tanstack-dev/components@1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-icons: 5.3.0(react@19.0.0)
+
   '@tanstack/directive-functions-plugin@1.106.0(babel-plugin-macros@3.1.0)':
     dependencies:
       '@babel/code-frame': 7.26.2