diff --git a/apps/ui-library/app/(app)/page.tsx b/apps/ui-library/app/(app)/page.tsx
index bc5852aa173..454e8aa807c 100644
--- a/apps/ui-library/app/(app)/page.tsx
+++ b/apps/ui-library/app/(app)/page.tsx
@@ -29,10 +29,7 @@ export default function Home() {
             {/* Grid Content */}
             <div className="grid grid-cols-12 gap-0 relative z-20 pb-32">
               {/* Heading Section */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-8 pb-8"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-8 pb-8">
                 <div className="flex flex-col gap-8 justify-start pt-16 md:pt-32">
                   <div className="max-w-2xl">
                     <h1 className="text-4xl text-foreground mb-3 font-medium tracking-tight">
@@ -50,17 +47,17 @@ export default function Home() {
               </div>
 
               {/* Password-based Authentication */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Password-based Authentication
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Password-based Authentication</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/password-based-auth"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4">
                   <BlockPreview name="password-based-auth/auth/sign-up" />
                 </div>
@@ -68,17 +65,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Cursors */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Cursors
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Cursors</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-cursor"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 flex rounded-lg overflow-hidden">
                   <BlockPreview name="realtime-cursor-demo" isPair />
                   <BlockPreview name="realtime-cursor-demo" isPair />
@@ -87,17 +84,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Dropzone */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                File Upload
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative  flex justify-between items-center">
+                <span>File Upload</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/dropzone"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="dropzone-demo" showCode={false} />
                 </div>
@@ -105,17 +102,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Current User Avatar */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Current User Avatar
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Current User Avatar</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/current-user-avatar"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="current-user-avatar-preview" showCode={false} />
                 </div>
@@ -123,17 +120,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Avatar Stack */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Avatar Stack
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Avatar Stack</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-avatar-stack"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="realtime-avatar-stack-preview" showCode={false} />
                 </div>
@@ -141,22 +138,23 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Chat */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Chat
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Chat</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-chat"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 flex rounded-lg overflow-hidden">
                   <BlockPreview name="realtime-chat-demo" isPair />
                   <BlockPreview name="realtime-chat-demo" isPair />
                 </div>
               </div>
+              <HorizontalGridLine />
             </div>
           </div>
         </div>
diff --git a/apps/ui-library/app/layout.tsx b/apps/ui-library/app/layout.tsx
index a03636ea6a5..ae7320e0194 100644
--- a/apps/ui-library/app/layout.tsx
+++ b/apps/ui-library/app/layout.tsx
@@ -1,15 +1,35 @@
 import type { Metadata } from 'next'
 
 import '@/styles/globals.css'
+import { genFaviconData } from 'common/MetaFavicons/app-router'
 import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
 
 const inter = Inter({ subsets: ['latin'] })
 
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
+
 export const metadata: Metadata = {
+  applicationName: 'Supabase UI Library',
   title: 'Supabase UI Library',
   description: 'Provides a library of components for your project',
+  metadataBase: new URL('https://supabase.com'),
+  icons: genFaviconData(BASE_PATH),
+  openGraph: {
+    type: 'article',
+    authors: 'Supabase',
+    url: `${BASE_PATH}`,
+    images: `${BASE_PATH}/img/supabase-og-image.png`,
+    publishedTime: new Date().toISOString(),
+    modifiedTime: new Date().toISOString(),
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@supabase',
+    creator: '@supabase',
+    images: `${BASE_PATH}/img/supabase-og-image.png`,
+  },
 }
 
 interface RootLayoutProps {
diff --git a/apps/ui-library/components/command-menu.tsx b/apps/ui-library/components/command-menu.tsx
index 873b14c0a44..be36bc95574 100644
--- a/apps/ui-library/components/command-menu.tsx
+++ b/apps/ui-library/components/command-menu.tsx
@@ -72,30 +72,12 @@ export function CommandMenu({ ...props }: DialogProps) {
         <CommandInput_Shadcn_ placeholder="Type a command or search..." />
         <CommandList_Shadcn_>
           <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          {/* <CommandGroup_Shadcn_ heading="Links">
-            {docsConfig.mainNav
-              .filter((navitem) => !navitem.external)
-              .map((navItem) => (
-                <CommandItem_Shadcn_
-                  key={navItem.href}
-                  value={navItem.title}
-                  onSelect={() => {
-                    runCommand(() => router.push(navItem.href as string))
-                  }}
-                >
-                  <FileIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-                  {navItem.title}
-                </CommandItem_Shadcn_>
-              ))}
-          </CommandGroup_Shadcn_> */}
           <CommandGroup_Shadcn_ key="pages" heading="Pages">
             {COMMAND_ITEMS.map((navItem) => (
               <CommandItem_Shadcn_
                 key={navItem.href}
                 value={navItem.label}
-                onSelect={() => {
-                  runCommand(() => router.push(navItem.href as string))
-                }}
+                onSelect={() => runCommand(() => router.push(navItem.href as string))}
               >
                 <div className="mr-2 flex h-4 w-4 items-center justify-center">
                   <CircleIcon className="h-3 w-3" strokeWidth={1} />
diff --git a/apps/ui-library/components/command.tsx b/apps/ui-library/components/command.tsx
index 726f116b875..fe93dedb7bc 100644
--- a/apps/ui-library/components/command.tsx
+++ b/apps/ui-library/components/command.tsx
@@ -33,7 +33,7 @@ export function Command({ name, highlight }: CommandCopyProps) {
   const commands: Record<PackageManager, string> = {
     npm: `npx shadcn@latest add ${baseUrl}${componentPath}`,
     pnpm: `pnpm dlx shadcn@latest add ${baseUrl}${componentPath}`,
-    yarn: `npx shadcn@latest add ${baseUrl}${componentPath}`,
+    yarn: `yarn dlx shadcn@latest add ${baseUrl}${componentPath}`,
     bun: `bunx --bun shadcn@latest add ${baseUrl}${componentPath}`,
   }
 
diff --git a/apps/ui-library/config/docs.ts b/apps/ui-library/config/docs.ts
index f436e287425..efba21cad8e 100644
--- a/apps/ui-library/config/docs.ts
+++ b/apps/ui-library/config/docs.ts
@@ -101,9 +101,9 @@ export const COMMAND_ITEMS = [
     label: item.commandItemLabel,
     href: item.href,
   })),
-  ...Object.entries(componentPages).map(([_, component]) => ({
-    label: component.commandItemLabel,
-    href: component.href,
+  ...componentPages.items.map((item) => ({
+    label: item.commandItemLabel,
+    href: item.href,
   })),
 ]
 
diff --git a/apps/ui-library/public/favicon/android-icon-144x144.png b/apps/ui-library/public/favicon/android-icon-144x144.png
new file mode 100644
index 00000000000..144190d1976
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-144x144.png differ
diff --git a/apps/ui-library/public/favicon/android-icon-192x192.png b/apps/ui-library/public/favicon/android-icon-192x192.png
new file mode 100644
index 00000000000..c4f30c5f922
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-192x192.png differ
diff --git a/apps/ui-library/public/favicon/android-icon-36x36.png b/apps/ui-library/public/favicon/android-icon-36x36.png
new file mode 100644
index 00000000000..aed5d2b3063
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-36x36.png differ
diff --git a/apps/ui-library/public/favicon/android-icon-48x48.png b/apps/ui-library/public/favicon/android-icon-48x48.png
new file mode 100644
index 00000000000..0821ae73784
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-48x48.png differ
diff --git a/apps/ui-library/public/favicon/android-icon-72x72.png b/apps/ui-library/public/favicon/android-icon-72x72.png
new file mode 100644
index 00000000000..10d2bbaaa86
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-72x72.png differ
diff --git a/apps/ui-library/public/favicon/android-icon-96x96.png b/apps/ui-library/public/favicon/android-icon-96x96.png
new file mode 100644
index 00000000000..a8d96ffed73
Binary files /dev/null and b/apps/ui-library/public/favicon/android-icon-96x96.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-114x114.png b/apps/ui-library/public/favicon/apple-icon-114x114.png
new file mode 100644
index 00000000000..396cee8516a
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-114x114.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-120x120.png b/apps/ui-library/public/favicon/apple-icon-120x120.png
new file mode 100644
index 00000000000..7e4e727910e
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-120x120.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-144x144.png b/apps/ui-library/public/favicon/apple-icon-144x144.png
new file mode 100644
index 00000000000..144190d1976
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-144x144.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-152x152.png b/apps/ui-library/public/favicon/apple-icon-152x152.png
new file mode 100644
index 00000000000..cb261b8bba0
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-152x152.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-180x180.png b/apps/ui-library/public/favicon/apple-icon-180x180.png
new file mode 100644
index 00000000000..3cf7f1132c8
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-180x180.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-57x57.png b/apps/ui-library/public/favicon/apple-icon-57x57.png
new file mode 100644
index 00000000000..278a7a87bee
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-57x57.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-60x60.png b/apps/ui-library/public/favicon/apple-icon-60x60.png
new file mode 100644
index 00000000000..a693570eea3
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-60x60.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-72x72.png b/apps/ui-library/public/favicon/apple-icon-72x72.png
new file mode 100644
index 00000000000..10d2bbaaa86
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-72x72.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-76x76.png b/apps/ui-library/public/favicon/apple-icon-76x76.png
new file mode 100644
index 00000000000..241bd6a2452
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-76x76.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon-precomposed.png b/apps/ui-library/public/favicon/apple-icon-precomposed.png
new file mode 100644
index 00000000000..c4f30c5f922
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon-precomposed.png differ
diff --git a/apps/ui-library/public/favicon/apple-icon.png b/apps/ui-library/public/favicon/apple-icon.png
new file mode 100644
index 00000000000..c4f30c5f922
Binary files /dev/null and b/apps/ui-library/public/favicon/apple-icon.png differ
diff --git a/apps/ui-library/public/favicon/browserconfig.xml b/apps/ui-library/public/favicon/browserconfig.xml
new file mode 100644
index 00000000000..1a8136def88
--- /dev/null
+++ b/apps/ui-library/public/favicon/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/apps/ui-library/public/favicon/favicon-128.png b/apps/ui-library/public/favicon/favicon-128.png
new file mode 100644
index 00000000000..4fab8e34978
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-128.png differ
diff --git a/apps/ui-library/public/favicon/favicon-16x16.png b/apps/ui-library/public/favicon/favicon-16x16.png
new file mode 100644
index 00000000000..7d05a72096b
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-16x16.png differ
diff --git a/apps/ui-library/public/favicon/favicon-180x180.png b/apps/ui-library/public/favicon/favicon-180x180.png
new file mode 100644
index 00000000000..3cf7f1132c8
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-180x180.png differ
diff --git a/apps/ui-library/public/favicon/favicon-196x196.png b/apps/ui-library/public/favicon/favicon-196x196.png
new file mode 100644
index 00000000000..1e0258526ae
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-196x196.png differ
diff --git a/apps/ui-library/public/favicon/favicon-32x32.png b/apps/ui-library/public/favicon/favicon-32x32.png
new file mode 100644
index 00000000000..7eb8cabea60
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-32x32.png differ
diff --git a/apps/ui-library/public/favicon/favicon-48x48.png b/apps/ui-library/public/favicon/favicon-48x48.png
new file mode 100644
index 00000000000..40377a51b54
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-48x48.png differ
diff --git a/apps/ui-library/public/favicon/favicon-96x96.png b/apps/ui-library/public/favicon/favicon-96x96.png
new file mode 100644
index 00000000000..a8d96ffed73
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon-96x96.png differ
diff --git a/apps/ui-library/public/favicon/favicon.ico b/apps/ui-library/public/favicon/favicon.ico
new file mode 100644
index 00000000000..343ad561d71
Binary files /dev/null and b/apps/ui-library/public/favicon/favicon.ico differ
diff --git a/apps/ui-library/public/favicon/manifest.json b/apps/ui-library/public/favicon/manifest.json
new file mode 100644
index 00000000000..4efcf18e2ec
--- /dev/null
+++ b/apps/ui-library/public/favicon/manifest.json
@@ -0,0 +1,46 @@
+{
+  "name": "Supabase",
+  "short_name": "Supabase",
+  "description": "The open source Firebase alternative.",
+  "display": "standalone",
+  "theme_color": "#1C1C1C",
+  "background_color": "#1C1C1C",
+  "icons": [
+    {
+      "src": "/favicon/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/favicon/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/favicon/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/favicon/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/favicon/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/favicon/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}
diff --git a/apps/ui-library/public/favicon/ms-icon-144x144.png b/apps/ui-library/public/favicon/ms-icon-144x144.png
new file mode 100644
index 00000000000..144190d1976
Binary files /dev/null and b/apps/ui-library/public/favicon/ms-icon-144x144.png differ
diff --git a/apps/ui-library/public/favicon/ms-icon-150x150.png b/apps/ui-library/public/favicon/ms-icon-150x150.png
new file mode 100644
index 00000000000..bbdf205047c
Binary files /dev/null and b/apps/ui-library/public/favicon/ms-icon-150x150.png differ
diff --git a/apps/ui-library/public/favicon/ms-icon-310x310.png b/apps/ui-library/public/favicon/ms-icon-310x310.png
new file mode 100644
index 00000000000..42bd0698a0f
Binary files /dev/null and b/apps/ui-library/public/favicon/ms-icon-310x310.png differ
diff --git a/apps/ui-library/public/favicon/ms-icon-70x70.png b/apps/ui-library/public/favicon/ms-icon-70x70.png
new file mode 100644
index 00000000000..6a428df84d3
Binary files /dev/null and b/apps/ui-library/public/favicon/ms-icon-70x70.png differ
diff --git a/apps/ui-library/public/img/supabase-og-image.png b/apps/ui-library/public/img/supabase-og-image.png
new file mode 100644
index 00000000000..c2f4d0ea806
Binary files /dev/null and b/apps/ui-library/public/img/supabase-og-image.png differ