diff --git a/docs/scripts/generate-platform-navigation.js b/docs/scripts/generate-platform-navigation.js
index 8fd7c74d0..80d3b9d5b 100644
--- a/docs/scripts/generate-platform-navigation.js
+++ b/docs/scripts/generate-platform-navigation.js
@@ -61,7 +61,7 @@ function joinUrlPath(...segments: string[]): string {
   return segments
     .filter(segment => segment && segment.length > 0)
     .join('/')
-    .replace(/\/+/g, '/'); // Remove duplicate slashes
+    .replace(/\\/+/g, '/'); // Remove duplicate slashes
 }
 
 /**
@@ -79,7 +79,7 @@ export function pageExistsForPlatform(path: string, platform: Platform): boolean
   if (!page && !pathWithExt.includes('/index.mdx')) {
     const indexPath = normalizedPath.endsWith('.mdx')
       ? normalizedPath.replace('.mdx', '/index.mdx')
-      : joinUrlPath(normalizedPath, 'index.mdx');
+      : \`\${normalizedPath}/index.mdx\`;
     page = PLATFORM_PAGES.find(p => p.path === indexPath);
   }
 
diff --git a/docs/src/components/layouts/docs-layout-router.tsx b/docs/src/components/layouts/docs-layout-router.tsx
index b026cf310..49c1239e1 100644
--- a/docs/src/components/layouts/docs-layout-router.tsx
+++ b/docs/src/components/layouts/docs-layout-router.tsx
@@ -30,8 +30,8 @@ import type { PageTree } from 'fumadocs-core/server';
 import { usePathname } from 'next/navigation';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { getSmartRedirectUrl } from '../../lib/navigation-utils';
-import { getCurrentPlatform, PLATFORMS } from '../../lib/platform-utils';
+import { getSmartRedirectUrl, platformSupportsComponents, platformSupportsSDK } from '../../lib/navigation-utils';
+import { getCurrentPlatform, PLATFORMS, type Platform } from '../../lib/platform-utils';
 import type { Option } from '../layout/root-toggle';
 import { PlatformRedirect } from '../platform-redirect';
 import { ApiSidebarContent } from './api/api-sidebar';
@@ -149,18 +149,39 @@ export function DynamicDocsLayout({ children, ...props }: DynamicDocsLayoutProps
     // Extract current platform from pathname
     const currentPlatform = getCurrentPlatform(pathname);
 
+    // Helper function to safely cast platform to Platform type
+    const isPlatform = (platform: string): platform is Platform => {
+      return ['next', 'react', 'js', 'python'].includes(platform);
+    };
+
     return PLATFORMS.map(platform => {
+      // Safe type guard - if this fails, something is seriously wrong with PLATFORMS constant
+      if (!isPlatform(platform)) {
+        console.error(`Invalid platform in PLATFORMS array: ${platform}`);
+        // Fallback to a safe default to prevent runtime errors
+        platform = 'next';
+      }
+
+      const platformType = platform as Platform;
       let url: string;
 
       if (isInSdkSection(pathname)) {
-        // For SDK section: /docs/platform/sdk
-        url = `/docs/${platform}/sdk`;
+        // For SDK section: check if platform supports SDK, otherwise use smart redirect
+        if (platformSupportsSDK(platformType)) {
+          url = `/docs/${platform}/sdk`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platformType);
+        }
       } else if (isInComponentsSection(pathname)) {
-        // For Components section: /docs/platform/components
-        url = `/docs/${platform}/components`;
+        // For Components section: check if platform supports components, otherwise use smart redirect
+        if (platformSupportsComponents(platformType)) {
+          url = `/docs/${platform}/components`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platformType);
+        }
       } else {
         // For normal docs: use smart redirect
-        url = getSmartRedirectUrl(pathname, platform);
+        url = getSmartRedirectUrl(pathname, platformType);
       }
 
       return {
diff --git a/docs/templates/components/index.mdx b/docs/templates/components/index.mdx
index 972933895..712f07c2d 100644
--- a/docs/templates/components/index.mdx
+++ b/docs/templates/components/index.mdx
@@ -42,7 +42,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## Sign In and Sign Up
 
   <CardGroup>
-    <Card href="../components/sign-in" >
+    <Card href="./components/sign-in" >
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/sign-in.png" alt="SignIn" className="stack-200h" />
@@ -50,7 +50,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;SignIn /&gt;
       </div>
     </Card>
-    <Card href="../components/sign-up">
+    <Card href="./components/sign-up">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/sign-up.png" alt="SignUp" className="stack-200h" />
@@ -58,7 +58,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;SignUp /&gt;
       </div>
     </Card>
-    <Card href="../components/credential-sign-in">
+    <Card href="./components/credential-sign-in">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-150h" />
@@ -66,7 +66,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;CredentialSignIn /&gt;
       </div>
     </Card>
-    <Card href="../components/credential-sign-up">
+    <Card href="./components/credential-sign-up">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-200h" />
@@ -74,7 +74,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;CredentialSignUp /&gt;
       </div>
     </Card>
-    <Card href="../components/oauth-button">
+    <Card href="./components/oauth-button">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
@@ -82,7 +82,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;OAuthButton /&gt;
       </div>
     </Card>
-    <Card href="../components/oauth-button-group">
+    <Card href="./components/oauth-button-group">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-200h" />
@@ -96,7 +96,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## User
 
   <CardGroup>
-    <Card href="../components/user-button">
+    <Card href="./components/user-button">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/user-button.png" alt="UserButton" className="stack-200h" />
@@ -104,7 +104,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
         &lt;UserButton /&gt;
       </div>
     </Card>
-    <Card href="../components/account-settings">
+    <Card href="./components/account-settings">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/account-settings.png" alt="AccountSettings" className="stack-100h" />
@@ -118,7 +118,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     ## Teams & Organizations
 
   <CardGroup>
-    <Card href="../components/selected-team-switcher">
+    <Card href="./components/selected-team-switcher">
       <div className="components-card-content">
         <div className="img-wrapper">
           <img src="/imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-200h" />
@@ -131,17 +131,17 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
   ## Utilities
 
   <CardGroup>
-    <Card href="../components/stack-handler">
+    <Card href="./components/stack-handler">
       <div className="components-card-content">
         &lt;StackHandler /&gt;
       </div>
     </Card>
-    <Card href="../components/stack-provider">
+    <Card href="./components/stack-provider">
       <div className="components-card-content">
         &lt;StackProvider /&gt;
       </div>
     </Card>
-    <Card href="../components/stack-theme">
+    <Card href="./components/stack-theme">
       <div className="components-card-content">
         &lt;StackTheme /&gt;
       </div>