diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index 72c8d4f5c0418..3346cae6376d2 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -1,15 +1,118 @@
 import '@/styles/globals.css'
 import '../../studio/styles/typography.scss'
-import type { Metadata } from 'next'
+
+import type { Metadata, Viewport } from 'next'
+
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
 import { customFont, sourceCodePro } from './fonts'
 
 const className = `${customFont.variable} ${sourceCodePro.variable}`
 
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
+
+const genFaviconData = (basePath: string): Metadata['icons'] => ({
+  icon: {
+    url: `${basePath}/favicon/favicon.ico`,
+    type: 'image/x-icon',
+  },
+  shortcut: `${basePath}/favicon/favicon.ico`,
+  apple: `${basePath}/favicon/favicon.ico`,
+  other: [
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-57x57.png`,
+      sizes: '57x57',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-60x60.png`,
+      sizes: '60x60',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-72x72.png`,
+      sizes: '72x72',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-76x76.png`,
+      sizes: '76x76',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-114x114.png`,
+      sizes: '114x114',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-120x120.png`,
+      sizes: '120x120',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-144x144.png`,
+      sizes: '144x144',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-152x152.png`,
+      sizes: '152x152',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-16x16.png`,
+      type: 'image/png',
+      sizes: '16x16',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-32x32.png`,
+      type: 'image/png',
+      sizes: '32x32',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-48x48.png`,
+      type: 'image/png',
+      sizes: '48x48',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-96x96.png`,
+      type: 'image/png',
+      sizes: '96x96',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-128x128.png`,
+      type: 'image/png',
+      sizes: '128x128',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-180x180.png`,
+      type: 'image/png',
+      sizes: '180x180',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-196x196.png`,
+      type: 'image/png',
+      sizes: '196x196',
+    },
+  ],
+})
+
 export const metadata: Metadata = {
+  applicationName: 'Supabase Design System',
   title: 'Supabase Design System',
   description: 'Design resources for building consistent user experiences at Supabase.',
+  icons: genFaviconData(BASE_PATH),
+}
+
+export const viewport: Viewport = {
+  themeColor: '#1E1E1E',
 }
 
 interface RootLayoutProps {
diff --git a/apps/design-system/config/docs.ts b/apps/design-system/config/docs.ts
index 6db89889ee206..33903e95e2b8f 100644
--- a/apps/design-system/config/docs.ts
+++ b/apps/design-system/config/docs.ts
@@ -61,7 +61,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/ui-patterns/ui-patterns',
+          href: '/docs/ui-patterns/introduction',
           items: [],
           priority: true,
         },
@@ -108,7 +108,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/fragments/fragment-components',
+          href: '/docs/fragments/introduction',
           items: [],
           priority: true,
         },
@@ -210,7 +210,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/components/atom-components',
+          href: '/docs/components/introduction',
           items: [],
           priority: true,
         },
diff --git a/apps/design-system/public/favicon/android-icon-144x144.png b/apps/design-system/public/favicon/android-icon-144x144.png
new file mode 100644
index 0000000000000..0b375991a844d
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-144x144.png differ
diff --git a/apps/design-system/public/favicon/android-icon-192x192.png b/apps/design-system/public/favicon/android-icon-192x192.png
new file mode 100644
index 0000000000000..d84f05675057b
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-192x192.png differ
diff --git a/apps/design-system/public/favicon/android-icon-36x36.png b/apps/design-system/public/favicon/android-icon-36x36.png
new file mode 100644
index 0000000000000..35ad4f1c585fa
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-36x36.png differ
diff --git a/apps/design-system/public/favicon/android-icon-48x48.png b/apps/design-system/public/favicon/android-icon-48x48.png
new file mode 100644
index 0000000000000..9aa3e5e8a83e5
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-48x48.png differ
diff --git a/apps/design-system/public/favicon/android-icon-72x72.png b/apps/design-system/public/favicon/android-icon-72x72.png
new file mode 100644
index 0000000000000..99ef50933b2eb
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-72x72.png differ
diff --git a/apps/design-system/public/favicon/android-icon-96x96.png b/apps/design-system/public/favicon/android-icon-96x96.png
new file mode 100644
index 0000000000000..e318028484792
Binary files /dev/null and b/apps/design-system/public/favicon/android-icon-96x96.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-114x114.png b/apps/design-system/public/favicon/apple-icon-114x114.png
new file mode 100644
index 0000000000000..92fe03ae5dc1e
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-114x114.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-120x120.png b/apps/design-system/public/favicon/apple-icon-120x120.png
new file mode 100644
index 0000000000000..3274a504b873a
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-120x120.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-144x144.png b/apps/design-system/public/favicon/apple-icon-144x144.png
new file mode 100644
index 0000000000000..0b375991a844d
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-144x144.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-152x152.png b/apps/design-system/public/favicon/apple-icon-152x152.png
new file mode 100644
index 0000000000000..fed0b817e8c49
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-152x152.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-180x180.png b/apps/design-system/public/favicon/apple-icon-180x180.png
new file mode 100644
index 0000000000000..456f3c7dd9d66
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-180x180.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-57x57.png b/apps/design-system/public/favicon/apple-icon-57x57.png
new file mode 100644
index 0000000000000..e8f2032bff597
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-57x57.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-60x60.png b/apps/design-system/public/favicon/apple-icon-60x60.png
new file mode 100644
index 0000000000000..7619397e3e3d1
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-60x60.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-72x72.png b/apps/design-system/public/favicon/apple-icon-72x72.png
new file mode 100644
index 0000000000000..99ef50933b2eb
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-72x72.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-76x76.png b/apps/design-system/public/favicon/apple-icon-76x76.png
new file mode 100644
index 0000000000000..83af926e5d5d7
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-76x76.png differ
diff --git a/apps/design-system/public/favicon/apple-icon-precomposed.png b/apps/design-system/public/favicon/apple-icon-precomposed.png
new file mode 100644
index 0000000000000..d84f05675057b
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon-precomposed.png differ
diff --git a/apps/design-system/public/favicon/apple-icon.png b/apps/design-system/public/favicon/apple-icon.png
new file mode 100644
index 0000000000000..d84f05675057b
Binary files /dev/null and b/apps/design-system/public/favicon/apple-icon.png differ
diff --git a/apps/design-system/public/favicon/browserconfig.xml b/apps/design-system/public/favicon/browserconfig.xml
new file mode 100644
index 0000000000000..1a8136def88cb
--- /dev/null
+++ b/apps/design-system/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/design-system/public/favicon/favicon-128.png b/apps/design-system/public/favicon/favicon-128.png
new file mode 100644
index 0000000000000..2482e4433b328
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-128.png differ
diff --git a/apps/design-system/public/favicon/favicon-16x16.png b/apps/design-system/public/favicon/favicon-16x16.png
new file mode 100644
index 0000000000000..b65de8d0cd344
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-16x16.png differ
diff --git a/apps/design-system/public/favicon/favicon-180x180.png b/apps/design-system/public/favicon/favicon-180x180.png
new file mode 100644
index 0000000000000..456f3c7dd9d66
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-180x180.png differ
diff --git a/apps/design-system/public/favicon/favicon-196x196.png b/apps/design-system/public/favicon/favicon-196x196.png
new file mode 100644
index 0000000000000..a8c2c723f794b
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-196x196.png differ
diff --git a/apps/design-system/public/favicon/favicon-32x32.png b/apps/design-system/public/favicon/favicon-32x32.png
new file mode 100644
index 0000000000000..737dee885eaa2
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-32x32.png differ
diff --git a/apps/design-system/public/favicon/favicon-48x48.png b/apps/design-system/public/favicon/favicon-48x48.png
new file mode 100644
index 0000000000000..eb6a7ec729aba
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-48x48.png differ
diff --git a/apps/design-system/public/favicon/favicon-96x96.png b/apps/design-system/public/favicon/favicon-96x96.png
new file mode 100644
index 0000000000000..e318028484792
Binary files /dev/null and b/apps/design-system/public/favicon/favicon-96x96.png differ
diff --git a/apps/design-system/public/favicon/favicon.ico b/apps/design-system/public/favicon/favicon.ico
new file mode 100644
index 0000000000000..49c20b9d6ec59
Binary files /dev/null and b/apps/design-system/public/favicon/favicon.ico differ
diff --git a/apps/design-system/public/favicon/manifest.json b/apps/design-system/public/favicon/manifest.json
new file mode 100644
index 0000000000000..9da79d27be69b
--- /dev/null
+++ b/apps/design-system/public/favicon/manifest.json
@@ -0,0 +1,46 @@
+{
+  "name": "Supabase Design System",
+  "short_name": "Supabase Design System",
+  "description": "Design resources for building consistent user experiences at Supabase.",
+  "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/design-system/public/favicon/ms-icon-144x144.png b/apps/design-system/public/favicon/ms-icon-144x144.png
new file mode 100644
index 0000000000000..0b375991a844d
Binary files /dev/null and b/apps/design-system/public/favicon/ms-icon-144x144.png differ
diff --git a/apps/design-system/public/favicon/ms-icon-150x150.png b/apps/design-system/public/favicon/ms-icon-150x150.png
new file mode 100644
index 0000000000000..a87e8ae2378c6
Binary files /dev/null and b/apps/design-system/public/favicon/ms-icon-150x150.png differ
diff --git a/apps/design-system/public/favicon/ms-icon-310x310.png b/apps/design-system/public/favicon/ms-icon-310x310.png
new file mode 100644
index 0000000000000..6cb63ac25b01c
Binary files /dev/null and b/apps/design-system/public/favicon/ms-icon-310x310.png differ
diff --git a/apps/design-system/public/favicon/ms-icon-70x70.png b/apps/design-system/public/favicon/ms-icon-70x70.png
new file mode 100644
index 0000000000000..5d6b8e395c2c8
Binary files /dev/null and b/apps/design-system/public/favicon/ms-icon-70x70.png differ