diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 2a00ca424..852c9c88e 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   type ButtonProps,
   Column,
@@ -13,24 +12,17 @@ import {
 } from '@umami/react-zen';
 import Link from 'next/link';
 import type { Key } from 'react';
+import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 import { IconLabel } from '@/components/common/IconLabel';
-import { useGlobalState, useMessages, useNavigation, useWebsiteNavItems } from '@/components/hooks';
-import {
-  ArrowLeft,
-  Globe,
-  Grid2x2,
-  LayoutDashboard,
-  LinkIcon,
-  PanelLeft,
-} from '@/components/icons';
+import { useGlobalState, useMessages, useNavigation } from '@/components/hooks';
+import { Globe, Grid2x2, LayoutDashboard, LinkIcon, PanelLeft } from '@/components/icons';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { NavButton } from '@/components/input/NavButton';
-import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 import { Logo } from '@/components/svg';
 
 export function SideNav(props: any) {
   const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl, websiteId, teamId, router } = useNavigation();
+  const { pathname, renderUrl, websiteId, router } = useNavigation();
   const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
 
   const hasNav = !!(websiteId || pathname.startsWith('/admin') || pathname.includes('/settings'));
@@ -66,10 +58,6 @@ export function SideNav(props: any) {
     router.push(id === 'user' ? '/websites' : `/teams/${id}/websites`);
   };
 
-  const handleWebsiteChange = (value: string) => {
-    router.push(renderUrl(`/websites/${value}`));
-  };
-
   return (
     <Column
       {...props}
@@ -83,9 +71,10 @@ export function SideNav(props: any) {
       style={{
         width: isCollapsed ? '55px' : '240px',
         transition: 'width 0.2s ease-in-out',
+        overflow: 'hidden',
       }}
     >
-      <Column overflowY="auto" style={{ minHeight: 0 }}>
+      <Column style={{ minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
         <Row
           alignItems="center"
           justifyContent="space-between"
@@ -105,12 +94,7 @@ export function SideNav(props: any) {
           <NavButton showText={!isCollapsed} onAction={handleSelect} />
         </Row>
         {websiteId ? (
-          <WebsiteNavSection
-            websiteId={websiteId}
-            teamId={teamId}
-            isCollapsed={isCollapsed}
-            onWebsiteChange={handleWebsiteChange}
-          />
+          <WebsiteNav websiteId={websiteId} isCollapsed={isCollapsed} />
         ) : (
           <Column gap="2">
             {links.map(({ id, path, label, icon }) => {
@@ -143,95 +127,6 @@ export function SideNav(props: any) {
   );
 }
 
-function WebsiteNavSection({
-  websiteId,
-  teamId,
-  isCollapsed,
-  onWebsiteChange,
-}: {
-  websiteId: string;
-  teamId: string;
-  isCollapsed: boolean;
-  onWebsiteChange: (value: string) => void;
-}) {
-  const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
-  const { items, selectedKey } = useWebsiteNavItems(websiteId);
-
-  const renderValue = (value: any) => {
-    return (
-      <Text truncate style={{ maxWidth: 160, lineHeight: 1 }}>
-        {value?.selectedItem?.name}
-      </Text>
-    );
-  };
-
-  return (
-    <Column gap="2">
-      <Link href={renderUrl('/websites', false)} role="button">
-        <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
-          <Focusable>
-            <Row
-              alignItems="center"
-              hover={{ backgroundColor: 'surface-sunken' }}
-              borderRadius
-              minHeight="40px"
-            >
-              <IconLabel
-                icon={<ArrowLeft />}
-                label={isCollapsed ? '' : formatMessage(labels.back)}
-                padding
-              />
-            </Row>
-          </Focusable>
-          <Tooltip placement="right">{formatMessage(labels.back)}</Tooltip>
-        </TooltipTrigger>
-      </Link>
-      {!isCollapsed && (
-        <Box marginBottom="2">
-          <WebsiteSelect
-            websiteId={websiteId}
-            teamId={teamId}
-            onChange={onWebsiteChange}
-            renderValue={renderValue}
-            buttonProps={{ style: { outline: 'none' } }}
-          />
-        </Box>
-      )}
-      {items.map(({ label: sectionLabel, items: sectionItems }, index) => (
-        <Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
-          {!isCollapsed && (
-            <Row padding>
-              <Text weight="bold">{sectionLabel}</Text>
-            </Row>
-          )}
-          {sectionItems.map(({ id, path, label, icon }) => {
-            const isSelected = selectedKey === id;
-            return (
-              <Link key={id} href={path} role="button">
-                <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
-                  <Focusable>
-                    <Row
-                      alignItems="center"
-                      hover={{ backgroundColor: 'surface-sunken' }}
-                      backgroundColor={isSelected ? 'surface-sunken' : undefined}
-                      borderRadius
-                      minHeight="40px"
-                    >
-                      <IconLabel icon={icon} label={isCollapsed ? '' : label} padding />
-                    </Row>
-                  </Focusable>
-                  <Tooltip placement="right">{label}</Tooltip>
-                </TooltipTrigger>
-              </Link>
-            );
-          })}
-        </Column>
-      ))}
-    </Column>
-  );
-}
-
 const PanelButton = (props: ButtonProps) => {
   const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
   return (
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
index a301e015c..d43a1c141 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
@@ -1,15 +1,30 @@
-import { Column, Text } from '@umami/react-zen';
+import {
+  Box,
+  Column,
+  Focusable,
+  Label,
+  Row,
+  Text,
+  Tooltip,
+  TooltipTrigger,
+} from '@umami/react-zen';
+import Link from 'next/link';
+import { IconLabel } from '@/components/common/IconLabel';
 import { NavMenu } from '@/components/common/NavMenu';
-import { useNavigation, useWebsiteNavItems } from '@/components/hooks';
+import { useMessages, useNavigation, useWebsiteNavItems } from '@/components/hooks';
+import { ArrowLeft } from '@/components/icons';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function WebsiteNav({
   websiteId,
+  isCollapsed,
   onItemClick,
 }: {
   websiteId: string;
+  isCollapsed?: boolean;
   onItemClick?: () => void;
 }) {
+  const { formatMessage, labels } = useMessages();
   const { teamId, router, renderUrl } = useNavigation();
   const { items, selectedKey } = useWebsiteNavItems(websiteId);
 
@@ -25,6 +40,73 @@ export function WebsiteNav({
     );
   };
 
+  if (isCollapsed !== undefined) {
+    return (
+      <Column gap="2">
+        <Link href={renderUrl('/websites', false)} role="button">
+          <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
+            <Focusable>
+              <Row
+                alignItems="center"
+                hover={{ backgroundColor: 'surface-sunken' }}
+                borderRadius
+                minHeight="40px"
+              >
+                <IconLabel
+                  icon={<ArrowLeft />}
+                  label={isCollapsed ? '' : formatMessage(labels.back)}
+                  padding
+                />
+              </Row>
+            </Focusable>
+            <Tooltip placement="right">{formatMessage(labels.back)}</Tooltip>
+          </TooltipTrigger>
+        </Link>
+        {!isCollapsed && (
+          <Box marginBottom="2">
+            <WebsiteSelect
+              websiteId={websiteId}
+              teamId={teamId}
+              onChange={handleChange}
+              renderValue={renderValue}
+              buttonProps={{ style: { outline: 'none' } }}
+            />
+          </Box>
+        )}
+        {items.map(({ label: sectionLabel, items: sectionItems }, index) => (
+          <Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
+            {!isCollapsed && (
+              <Row padding>
+                <Text weight="bold">{sectionLabel}</Text>
+              </Row>
+            )}
+            {sectionItems.map(({ id, path, label, icon }) => {
+              const isSelected = selectedKey === id;
+              return (
+                <Link key={id} href={path} role="button">
+                  <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
+                    <Focusable>
+                      <Row
+                        alignItems="center"
+                        hover={{ backgroundColor: 'surface-sunken' }}
+                        backgroundColor={isSelected ? 'surface-sunken' : undefined}
+                        borderRadius
+                        minHeight="40px"
+                      >
+                        <IconLabel icon={icon} label={isCollapsed ? '' : label} padding />
+                      </Row>
+                    </Focusable>
+                    <Tooltip placement="right">{label}</Tooltip>
+                  </TooltipTrigger>
+                </Link>
+              );
+            })}
+          </Column>
+        ))}
+      </Column>
+    );
+  }
+
   return (
     <Column padding="2" position="sticky" top="0" gap>
       <WebsiteSelect