diff --git a/docs/scripts/generate-platform-navigation.js b/docs/scripts/generate-platform-navigation.js
index b61aec58a..97c8fa7f8 100644
--- a/docs/scripts/generate-platform-navigation.js
+++ b/docs/scripts/generate-platform-navigation.js
@@ -62,7 +62,17 @@ export function pageExistsForPlatform(path: string, platform: Platform): boolean
   const normalizedPath = path.replace(/^\\//, '');
   const pathWithExt = normalizedPath.endsWith('.mdx') ? normalizedPath : \`\${normalizedPath}.mdx\`;
 
-  const page = PLATFORM_PAGES.find(p => p.path === pathWithExt);
+  // First try to find exact match
+  let page = PLATFORM_PAGES.find(p => p.path === pathWithExt);
+  
+  // If not found and path doesn't end with index, try appending /index.mdx
+  if (!page && !pathWithExt.includes('/index.mdx')) {
+    const indexPath = normalizedPath.endsWith('.mdx') 
+      ? normalizedPath.replace('.mdx', '/index.mdx')
+      : \`\${normalizedPath}/index.mdx\`;
+    page = PLATFORM_PAGES.find(p => p.path === indexPath);
+  }
+  
   return page?.platforms.includes(platform) ?? false;
 }
 
diff --git a/docs/src/components/layouts/docs-layout-router.tsx b/docs/src/components/layouts/docs-layout-router.tsx
index b026cf310..9c6849183 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';
@@ -153,14 +153,22 @@ export function DynamicDocsLayout({ children, ...props }: DynamicDocsLayoutProps
       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(platform as Platform)) {
+          url = `/docs/${platform}/sdk`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platform as Platform);
+        }
       } 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(platform as Platform)) {
+          url = `/docs/${platform}/components`;
+        } else {
+          url = getSmartRedirectUrl(pathname, platform as Platform);
+        }
       } else {
         // For normal docs: use smart redirect
-        url = getSmartRedirectUrl(pathname, platform);
+        url = getSmartRedirectUrl(pathname, platform as Platform);
       }
 
       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>