diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index e997936f5f2..db10c1d02b0 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -158,6 +158,7 @@ const SideNav = () => {
   const isHomeActive = 'home' === level
   const isGettingStartedActive = 'gettingstarted' === level
   const isDatabaseActive = 'database' === level
+  const isAuthActive = 'auth' === level
   const isFunctionsActive = 'functions' === level
   const isRealtimeActive = 'realtime' === level
   const isStorageActive = 'storage' === level
@@ -166,13 +167,23 @@ const SideNav = () => {
   const isIntegrationsActive = 'integrations' === level
   const isReferenceActive = 'reference' === level
 
+  const isReference_Javascript_V1 = 'reference_javascript_v1' === level
+  const isReference_Javascript_V2 = 'reference_javascript_v2' === level
+  const isReference_Dart_V0 = 'reference_dart_v0' === level
+  const isReference_Dart_V1 = 'reference_dart_v1' === level
+  const isReference_Cli = 'reference_cli' === level
+  const isReference_Api = 'reference_api' === level
+  const isReference_Self_Hosting_Auth = 'reference_self_hosting_auth' === level
+  const isReference_Self_Hosting_Storage = 'reference_self_hosting_storage' === level
+  const isReference_Self_Hosting_Realtime = 'reference_self_hosting_realtime' === level
+
   return (
     <div className="flex relative">
       {/* // main menu */}
       <NavigationMenuHome active={isHomeActive} />
       <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
       <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
-      <NavigationMenuGuideList id={'auth'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'auth'} active={isAuthActive} />
       <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
       <NavigationMenuGuideList id={'realtime'} active={isRealtimeActive} />
       <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
@@ -184,6 +195,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v1'}
+        active={isReference_Javascript_V1}
         commonSections={libCommonSections}
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v1)}
@@ -191,6 +203,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-js-menu'}
         id={'reference_javascript_v2'}
+        active={isReference_Javascript_V2}
         commonSections={libCommonSections}
         lib="javascript"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_js_v2)}
@@ -198,6 +211,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v0'}
+        active={isReference_Dart_V0}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v0)}
@@ -205,6 +219,7 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-dart-menu'}
         id={'reference_dart_v1'}
+        active={isReference_Dart_V1}
         commonSections={libCommonSections}
         lib="dart"
         allowedClientKeys={generateAllowedClientLibKeys(libCommonSections, spec_dart_v1)}
@@ -213,12 +228,14 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-cli-menu'}
         id={'reference_cli'}
+        active={isReference_Cli}
         commonSections={cliCommonSections}
         lib="cli"
       />
       <NavigationMenuRefList
         key={'reference-api-menu'}
         id={'reference_api'}
+        active={isReference_Api}
         commonSections={apiCommonSections}
         lib="api"
       />
@@ -226,18 +243,21 @@ const SideNav = () => {
       <NavigationMenuRefList
         key={'reference-self-hosting-auth-menu'}
         id={'reference_self_hosting_auth'}
+        active={isReference_Self_Hosting_Auth}
         commonSections={authServerCommonSections}
         lib="self-hosting-auth"
       />
       <NavigationMenuRefList
         key={'reference-self-hosting-storage-menu'}
         id={'reference_self_hosting_storage'}
+        active={isReference_Self_Hosting_Storage}
         commonSections={storageServerCommonSections}
         lib="self-hosting-storage"
       />
       <NavigationMenuRefList
         key={'reference-self-hosting-realtime-menu'}
         id={'reference_self_hosting_realtime'}
+        active={isReference_Self_Hosting_Realtime}
         commonSections={realtimeServerCommonSections}
         lib="self-hosting-auth"
       />
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 2180e345af8..d680ecc3dcb 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -36,7 +36,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
 
         // disabled
         // level !== 'home' && level !== id ? '-ml-8' : '',
-        active ? 'opacity-0 invisible absolute' : '',
+        !active ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
       <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index e2db35f487a..908c55ee475 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -80,6 +80,7 @@ interface INavigationMenuRefList {
   // the keys of menu items that are allowed to be shown on the side menu
   // if undefined, we show all the menu items
   allowedClientKeys?: string[]
+  active: boolean
 }
 
 const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
@@ -87,6 +88,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   lib,
   commonSections,
   allowedClientKeys,
+  active,
 }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
@@ -150,12 +152,12 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
       className={[
         'transition-all ml-8 duration-150 ease-out',
         // enabled
-        level === id && 'opacity-100 ml-0 delay-150 h-auto',
+        active && 'opacity-100 ml-0 delay-150 h-auto',
         // move menu back to margin-left
-        level === 'home' && 'ml-12',
+        // level === 'home' && 'ml-12',
         // disabled
-        level !== 'home' && level !== id ? '-ml-8' : '',
-        level !== id ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
+        // level !== 'home' && level !== id ? '-ml-8' : '',
+        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
       ].join(' ')}
     >
       <div className={'w-full flex flex-col gap-0 sticky top-8'}>
diff --git a/apps/docs/hooks/useMenuState.ts b/apps/docs/hooks/useMenuState.ts
index 760796e1244..52977307542 100644
--- a/apps/docs/hooks/useMenuState.ts
+++ b/apps/docs/hooks/useMenuState.ts
@@ -7,7 +7,7 @@ export const menuState = proxy({
   setMenuActiveRefId: (value) => {
     menuState.menuActiveRefId = value
   },
-  menuLevelId: '',
+  menuLevelId: 'home',
   setMenuLevelId: (value) => {
     menuState.menuMobileOpen = false
     menuState.menuLevelId = value