diff --git a/apps/reference/docs/about.mdx b/apps/reference/docs/about.mdx
index 13ed94d8911..38ba6b3b8df 100755
--- a/apps/reference/docs/about.mdx
+++ b/apps/reference/docs/about.mdx
@@ -27,14 +27,14 @@ const frameworks = [
   {
     name: 'Angular',
     logo: AngularLogo,
-    href: '/docs/guides/with-angular',
+    href: '/guides/with-angular',
   },
   {
     name: 'Expo',
     logo: ExpoLogo,
     href: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/expo-todo-list',
   },
-  { name: 'Flutter', logo: DartLogo, href: '/docs/guides/with-flutter' },
+  { name: 'Flutter', logo: DartLogo, href: '/guides/with-flutter' },
   {
     name: 'JavaScript',
     logo: JavascriptLogo,
@@ -47,13 +47,17 @@ const frameworks = [
       dark: '/img/libraries/nextjs-dark-icon.svg',
       light: '/img/libraries/nextjs-light-icon.svg',
     },
-    href: '/docs/guides/with-nextjs',
+    href: '/guides/with-nextjs',
   },
-  { name: 'React', logo: ReactLogo, href: '/docs/guides/with-react' },
-  { name: 'RedwoodJS', logo: RedwoodJsLogo, href: '/docs/guides/with-redwoodjs' },
-  { name: 'SolidJS', logo: SolidJSLogo, href: '/docs/guides/with-solidjs' },
-  { name: 'Svelte', logo: SvelteLogo, href: '/docs/guides/with-svelte' },
-  { name: 'Vue', logo: VuejsLogo, href: '/docs/guides/with-vue-3' },
+  { name: 'React', logo: ReactLogo, href: '/guides/with-react' },
+  {
+    name: 'RedwoodJS',
+    logo: RedwoodJsLogo,
+    href: '/guides/with-redwoodjs',
+  },
+  { name: 'SolidJS', logo: SolidJSLogo, href: '/guides/with-solidjs' },
+  { name: 'Svelte', logo: SvelteLogo, href: '/guides/with-svelte' },
+  { name: 'Vue', logo: VuejsLogo, href: '/guides/with-vue-3' },
 ]
 
 Supabase is an open source Firebase alternative providing all the backend features you need to build a product.
@@ -67,7 +71,11 @@ You can use it completely, or just the features you need.
   <div class="row is-multiline">
     {/* Database */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/database" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/database')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>Database</h4>
           <p>A dedicated, scalable Postgres database.</p>
@@ -76,7 +84,11 @@ You can use it completely, or just the features you need.
     </div>
     {/* API */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/api" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/api')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>Auto-generated APIs</h4>
           <p>Instantly generate APIs for your database.</p>
@@ -85,7 +97,11 @@ You can use it completely, or just the features you need.
     </div>
     {/* Functions */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/functions" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/functions')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>Edge Functions</h4>
           <p>Server-side functions, distributed globally.</p>
@@ -94,7 +110,11 @@ You can use it completely, or just the features you need.
     </div>
     {/* Auth */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/auth" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/auth')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>Auth</h4>
           <p>User management with Row Level Security.</p>
@@ -103,7 +123,11 @@ You can use it completely, or just the features you need.
     </div>
     {/* Storage */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/storage" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/storage')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>File Storage</h4>
           <p>Store, organize, and serve large files.</p>
@@ -112,7 +136,11 @@ You can use it completely, or just the features you need.
     </div>
     {/* Observability */}
     <div class="col col--4">
-      <Link class="card" to="/docs/guides/platform/logs" style={{ height: '100%' }}>
+      <Link
+        class="card"
+        to={useBaseUrl('/guides/platform/logs')}
+        style={{ height: '100%' }}
+      >
         <div class="card__body">
           <h4>Observability</h4>
           <p>Monitor and debug your infrastucture.</p>
@@ -131,10 +159,17 @@ Supabase is just Postgres, which makes it compatible with a large number of tool
   <div class="row is-multiline">
     {frameworks.map((x) => (
       <div key={x.name} class="col col--3">
-        <Link class="card" to={x.href}>
-          <div class="card__body" style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+        <Link class="card" to={useBaseUrl(x.href)}>
+          <div
+            class="card__body"
+            style={{ display: 'flex', gap: 20, alignItems: 'center' }}
+          >
             {x.logo && !x.themed ? (
-              <x.logo width="20" alt={x.name} style={{ display: 'block', maxHeight: 20 }} />
+              <x.logo
+                width="20"
+                alt={x.name}
+                style={{ display: 'block', maxHeight: 20 }}
+              />
             ) : (
               <ThemedImage
                 style={{ display: 'block', maxHeight: 20 }}
diff --git a/apps/reference/docs/guides/auth/intro.mdx b/apps/reference/docs/guides/auth/intro.mdx
index 104a5359024..b8eb573829f 100644
--- a/apps/reference/docs/guides/auth/intro.mdx
+++ b/apps/reference/docs/guides/auth/intro.mdx
@@ -7,12 +7,13 @@ description: Use Supabase to Authenticate and Authorize your users.
 ---
 
 import Link from '@docusaurus/Link'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import providers from '@site/src/data/authProviders'
 
 <iframe
-  className="w-full video-with-border"
+  className="video-with-border w-full"
   width="640"
   height="385"
   src="https://www.youtube-nocookie.com/embed/6ow_jW4epf8"
@@ -41,27 +42,48 @@ You can authenticate your users in several ways:
   <div class="row is-multiline">
     {providers.map((x) => (
       <div key={x.name} class="col col--6">
-        <Link class="card" to={x.href}>
+        <Link class="card" to={useBaseUrl(x.href)}>
           <div class="card__body">
-            <div class="" style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
+            <div
+              class=""
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 10,
+              }}
+            >
               {x.logo && <img src={x.logo} alt={x.name} width="20" />}
               <p>{x.name}</p>
               <p>
-                {x.official ? <span class={`badge badge--official`}>
-                  Official
-                </span>: 
-                <span class={`badge badge--unofficial`}>
-                  Unofficial
-                </span>
-                }
+                {x.official ? (
+                  <span class={`badge badge--official`}>Official</span>
+                ) : (
+                  <span class={`badge badge--unofficial`}>Unofficial</span>
+                )}
               </p>
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
-              <div class="code-block" style={{ width: '100%',  display: 'flex', justifyContent: 'space-between', fontSize: '0.7rem' }}>
+              <div
+                class="code-block"
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  fontSize: '0.7rem',
+                }}
+              >
                 <span>Platform:</span>
                 <span>{x.platform.toString()}</span>
               </div>
-              <div class="code-block" style={{ width: '100%',  display: 'flex', justifyContent: 'space-between', fontSize: '0.7rem' }}>
+              <div
+                class="code-block"
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  fontSize: '0.7rem',
+                }}
+              >
                 <span>Self-Hosted:</span>
                 <span>{x.selfHosted.toString()}</span>
               </div>
@@ -73,12 +95,10 @@ You can authenticate your users in several ways:
   </div>
 </div>
 
-
 ## Authorization
 
-
 When you need granular authorization rules, nothing beats PostgreSQL's Row Level Security (RLS).
 
 Policies are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
 
-Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-security).
\ No newline at end of file
+Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-security).
diff --git a/apps/reference/src/data/authProviders.js b/apps/reference/src/data/authProviders.js
index 38b4dedc561..f9a32a71454 100644
--- a/apps/reference/src/data/authProviders.js
+++ b/apps/reference/src/data/authProviders.js
@@ -20,7 +20,7 @@ const authProviders = [
   {
     name: 'Apple',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-apple',
+    href: '/guides/auth/auth-apple',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -29,7 +29,7 @@ const authProviders = [
   {
     name: 'Azure',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-azure',
+    href: '/guides/auth/auth-azure',
     official: false,
     supporter: 'TBD',
     platform: true,
@@ -38,7 +38,7 @@ const authProviders = [
   {
     name: 'Bitbucket',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-bitbucket',
+    href: '/guides/auth/auth-bitbucket',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -47,7 +47,7 @@ const authProviders = [
   {
     name: 'Discord',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-discord',
+    href: '/guides/auth/auth-discord',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -56,7 +56,7 @@ const authProviders = [
   {
     name: 'Facebook',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-facebook',
+    href: '/guides/auth/auth-facebook',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -65,7 +65,7 @@ const authProviders = [
   {
     name: 'GitHub',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-github',
+    href: '/guides/auth/auth-github',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -74,7 +74,7 @@ const authProviders = [
   {
     name: 'GitLab',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-gitlab',
+    href: '/guides/auth/auth-gitlab',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -83,7 +83,7 @@ const authProviders = [
   {
     name: 'Google',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-google',
+    href: '/guides/auth/auth-google',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -91,7 +91,7 @@ const authProviders = [
   },
   {
     name: 'Keycloak',
-    href: '/docs/guides/auth/auth-keycloak',
+    href: '/guides/auth/auth-keycloak',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -100,7 +100,7 @@ const authProviders = [
   {
     name: 'LinkedIn',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-linkedin',
+    href: '/guides/auth/auth-linkedin',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -109,7 +109,7 @@ const authProviders = [
   {
     name: 'MessageBird',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-messagebird',
+    href: '/guides/auth/auth-messagebird',
     official: false,
     supporter: 'MessageBird',
     platform: true,
@@ -118,7 +118,7 @@ const authProviders = [
   {
     name: 'Notion',
     // logo: '/img/libraries/notion-icon.svg',
-    href: '/docs/guides/auth/auth-notion',
+    href: '/guides/auth/auth-notion',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -127,7 +127,7 @@ const authProviders = [
   {
     name: 'Slack',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-slack',
+    href: '/guides/auth/auth-slack',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -136,7 +136,7 @@ const authProviders = [
   {
     name: 'Spotify',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-spotify',
+    href: '/guides/auth/auth-spotify',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -145,7 +145,7 @@ const authProviders = [
   {
     name: 'Twitter',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-twitter',
+    href: '/guides/auth/auth-twitter',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -154,7 +154,7 @@ const authProviders = [
   {
     name: 'Twitch',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-twitch',
+    href: '/guides/auth/auth-twitch',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -163,7 +163,7 @@ const authProviders = [
   {
     name: 'Zoom',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-zoom',
+    href: '/guides/auth/auth-zoom',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -172,7 +172,7 @@ const authProviders = [
   {
     name: 'Twilio',
     // logo: '/img/libraries/dart-icon.svg',
-    href: '/docs/guides/auth/auth-twilio',
+    href: '/guides/auth/auth-twilio',
     official: true,
     supporter: 'Supabase',
     platform: true,
@@ -180,7 +180,7 @@ const authProviders = [
   },
   {
     name: 'Vonage',
-    href: '/docs/guides/auth/auth-vonage',
+    href: '/guides/auth/auth-vonage',
     official: false,
     supporter: 'Supabase',
     platform: true,