New settings layouts. Segment management screen.

next.config.ts

@@ -97,7 +97,12 @@ const headers = [
   },
 ];
 
-const rewrites = [];
+const rewrites = [
+  {
+    source: '/teams/:id/settings/:path*',
+    destination: '/settings/:path*',
+  },
+];
 
 if (trackerScriptURL) {
   rewrites.push({

package.json

@@ -82,7 +82,7 @@
     "@react-spring/web": "^9.7.3",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.83.0",
-    "@umami/react-zen": "^0.154.0",
+    "@umami/react-zen": "^0.157.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.4.1",

pnpm-lock.yaml

@@ -45,8 +45,8 @@ importers:
         specifier: ^5.83.0
         version: 5.83.0(react@19.1.0)
       '@umami/react-zen':
-        specifier: ^0.154.0
+        specifier: ^0.157.0
-        version: 0.154.0(@babel/core@7.27.1)(@types/react@19.1.8)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
+        version: 0.157.0(@babel/core@7.27.1)(@types/react@19.1.8)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
       '@umami/redis-client':
         specifier: ^0.27.0
         version: 0.27.0
@@ -2544,8 +2544,8 @@ packages:
     resolution: {integrity: sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@umami/react-zen@0.154.0':
+  '@umami/react-zen@0.157.0':
-    resolution: {integrity: sha512-waVMJNwGPSDereFWTnbtdJjQGQhJIi1n7Hs2EnuS9OSMUbj9THgA1A9722zyO3w46KmbIBMqmIxur4ykpHOYlg==}
+    resolution: {integrity: sha512-QZqZcah1t6KniDvFTF+GxBDkaEYUuQOyj1olao5p5rtZBMW1/v4GaVcL+8UAzWyWIUnsrRI3e5HoytapJg6VfQ==}
 
   '@umami/redis-client@0.27.0':
     resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@@ -5984,8 +5984,8 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-hook-form@7.61.1:
+  react-hook-form@7.62.0:
-    resolution: {integrity: sha512-2vbXUFDYgqEgM2RcXcAT2PwDW/80QARi+PKmHy5q2KhuKvOlG8iIYgf7eIlIANR5trW9fJbP4r5aub3a4egsew==}
+    resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -9751,7 +9751,7 @@ snapshots:
       '@typescript-eslint/types': 8.38.0
       eslint-visitor-keys: 4.2.1
 
-  '@umami/react-zen@0.154.0(@babel/core@7.27.1)(@types/react@19.1.8)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
+  '@umami/react-zen@0.157.0(@babel/core@7.27.1)(@types/react@19.1.8)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
     dependencies:
       '@fontsource/jetbrains-mono': 5.2.6
       '@internationalized/date': 3.8.2
@@ -9765,7 +9765,7 @@ snapshots:
       react: 19.1.0
       react-aria-components: 1.9.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-dom: 19.1.0(react@19.1.0)
-      react-hook-form: 7.61.1(react@19.1.0)
+      react-hook-form: 7.62.0(react@19.1.0)
       react-icons: 5.5.0(react@19.1.0)
       thenby: 1.3.4
       zustand: 5.0.6(@types/react@19.1.8)(immer@9.0.21)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
@@ -13763,7 +13763,7 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  react-hook-form@7.61.1(react@19.1.0):
+  react-hook-form@7.62.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 

src/app/(main)/App.tsx

@@ -4,7 +4,6 @@ import Script from 'next/script';
 import { usePathname } from 'next/navigation';
 import { UpdateNotice } from './UpdateNotice';
 import { SideNav } from '@/app/(main)/SideNav';
-import { TopNav } from '@/app/(main)/TopNav';
 import { useLoginQuery, useConfig } from '@/components/hooks';
 
 export function App({ children }) {
@@ -31,7 +30,6 @@ export function App({ children }) {
         <SideNav />
       </Column>
       <Column alignItems="center" overflow="auto" position="relative">
-        <TopNav />
         {children}
       </Column>
       <UpdateNotice user={user} config={config} />

src/app/(main)/SideNav.tsx

@@ -17,15 +17,20 @@ import {
   LockKeyhole,
 } from '@/components/icons';
 import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
-import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 import { TeamsButton } from '@/components/input/TeamsButton';
 import { PanelButton } from '@/components/input/PanelButton';
 
 export function SideNav(props: SidebarProps) {
   const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl, websiteId, teamId } = useNavigation();
+  const { pathname, renderUrl, websiteId } = useNavigation();
   const [isCollapsed] = useGlobalState('sidenav-collapsed');
-  const isWebsite = websiteId && !pathname.includes('/settings');
+
+  const hasNav = !!(
+    websiteId ||
+    pathname.startsWith('/admin') ||
+    pathname.startsWith('/settings') ||
+    pathname.endsWith('/settings')
+  );
 
   const links = [
     {
@@ -71,12 +76,7 @@ export function SideNav(props: SidebarProps) {
 
   return (
     <Row height="100%" backgroundColor border="right">
-      <Sidebar
+      <Sidebar {...props} isCollapsed={isCollapsed || hasNav} muteItems={false} showBorder={false}>
-        {...props}
-        isCollapsed={isCollapsed || isWebsite}
-        muteItems={false}
-        showBorder={false}
-      >
         <SidebarSection>
           <SidebarHeader label="umami" icon={<Logo />} />
         </SidebarSection>
@@ -90,23 +90,21 @@ export function SideNav(props: SidebarProps) {
           })}
         </SidebarSection>
         <SidebarSection>
-          {!teamId &&
+          {bottomLinks.map(({ id, path, label, icon }) => {
-            bottomLinks.map(({ id, path, label, icon }) => {
+            return (
-              return (
+              <Link key={id} href={path} role="button">
-                <Link key={id} href={path} role="button">
+                <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
-                  <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
+              </Link>
-                </Link>
+            );
-              );
+          })}
-            })}
         </SidebarSection>
         <SidebarSection>
           <TeamsButton showText={!isCollapsed} />
           <Row>
-            <PanelButton isDisabled={!!isWebsite} />
+            <PanelButton isDisabled={hasNav} />
           </Row>
         </SidebarSection>
       </Sidebar>
-      {isWebsite && <WebsiteNav websiteId={websiteId} />}
     </Row>
   );
 }

src/app/(main)/admin/AdminLayout.tsx

@@ -2,9 +2,8 @@
 import { ReactNode } from 'react';
 import { Grid, Column } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import { User, Users, Globe } from '@/components/icons';
 import { SideMenu } from '@/components/common/SideMenu';
-import { PageHeader } from '@/components/common/PageHeader';
-import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';
 
 export function AdminLayout({ children }: { children: ReactNode }) {
@@ -18,37 +17,45 @@ export function AdminLayout({ children }: { children: ReactNode }) {
 
   const items = [
     {
-      id: 'users',
+      label: formatMessage(labels.application),
-      label: formatMessage(labels.users),
+      items: [
-      url: '/admin/users',
+        {
-    },
+          id: 'users',
-    {
+          label: formatMessage(labels.users),
-      id: 'websites',
+          path: '/admin/users',
-      label: formatMessage(labels.websites),
+          icon: <User />,
-      url: '/admin/websites',
+        },
-    },
+        {
-    {
+          id: 'websites',
-      id: 'teams',
+          label: formatMessage(labels.websites),
-      label: formatMessage(labels.teams),
+          path: '/admin/websites',
-      url: '/admin/teams',
+          icon: <Globe />,
+        },
+        {
+          id: 'teams',
+          label: formatMessage(labels.teams),
+          path: '/admin/teams',
+          icon: <Users />,
+        },
+      ],
     },
   ];
 
-  const value = items.find(({ url }) => pathname.includes(url))?.id;
+  const selectedKey = items
+    .flatMap(e => e.items)
+    ?.find(({ path }) => path && pathname.startsWith(path))?.id;
 
   return (
-    <PageBody>
+    <Grid columns="auto 1fr" width="100%" height="100%">
-      <Column gap="6">
+      <Column height="100%" border="right" backgroundColor>
-        <PageHeader title={formatMessage(labels.admin)} />
+        <SideMenu
-        <Grid columns="200px 1fr" gap>
+          items={items}
-          <Column>
+          title={formatMessage(labels.admin)}
-            <SideMenu items={items} selectedKey={value} />
+          selectedKey={selectedKey}
-          </Column>
+          allowMinimize={false}
-          <Column>
+        />
-            <Panel minHeight="300px">{children}</Panel>
-          </Column>
-        </Grid>
       </Column>
-    </PageBody>
+      <PageBody>{children}</PageBody>
+    </Grid>
   );
 }

src/app/(main)/admin/teams/AdminTeamsPage.tsx

@@ -1,16 +1,19 @@
 'use client';
 import { AdminTeamsDataTable } from './AdminTeamsDataTable';
 import { Column } from '@umami/react-zen';
-import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function AdminTeamsPage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={formatMessage(labels.teams)} />
+      <PageHeader title={formatMessage(labels.teams)} />
-      <AdminTeamsDataTable />
+      <Panel>
+        <AdminTeamsDataTable />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/admin/teams/AdminTeamsTable.tsx

@@ -32,7 +32,9 @@ export function AdminTeamsTable({
         <DataColumn id="owner" label={formatMessage(labels.owner)} width="200px">
           {(row: any) => (
             <Text title={row?.teamUser?.[0]?.user?.username} truncate>
-              {row?.teamUser?.[0]?.user?.username}
+              <Link href={`/admin/users/${row?.teamUser?.[0]?.user?.id}`}>
+                {row?.teamUser?.[0]?.user?.username}
+              </Link>
             </Text>
           )}
         </DataColumn>

src/app/(main)/admin/teams/[teamId]/AdminTeamPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
-import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamProvider } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 
 export function AdminTeamPage({ teamId }: { teamId: string }) {
   return (

src/app/(main)/admin/users/UsersPage.tsx

@@ -1,9 +1,10 @@
 'use client';
 import { UsersDataTable } from './UsersDataTable';
 import { Column } from '@umami/react-zen';
-import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
 import { UserAddButton } from './UserAddButton';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function UsersPage() {
   const { formatMessage, labels } = useMessages();
@@ -11,11 +12,13 @@ export function UsersPage() {
   const handleSave = () => {};
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={formatMessage(labels.users)}>
+      <PageHeader title={formatMessage(labels.users)}>
         <UserAddButton onSave={handleSave} />
-      </SectionHeader>
+      </PageHeader>
-      <UsersDataTable />
+      <Panel>
+        <UsersDataTable />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/admin/users/[userId]/UserHeader.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { User } from '@/components/icons';
+import { PageHeader } from '@/components/common/PageHeader';
+import { UserContext } from '@/app/(main)/admin/users/[userId]/UserProvider';
+
+export function UserHeader() {
+  const user = useContext(UserContext);
+
+  return <PageHeader title={user?.username} icon={<User />} />;
+}

src/app/(main)/admin/users/[userId]/UserPage.tsx

@@ -1,11 +1,19 @@
 'use client';
+import { Column } from '@umami/react-zen';
 import { UserSettings } from './UserSettings';
 import { UserProvider } from './UserProvider';
+import { UserHeader } from '@/app/(main)/admin/users/[userId]/UserHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function UserPage({ userId }: { userId: string }) {
   return (
     <UserProvider userId={userId}>
-      <UserSettings userId={userId} />
+      <Column gap="6">
+        <UserHeader />
+        <Panel>
+          <UserSettings userId={userId} />
+        </Panel>
+      </Column>
     </UserProvider>
   );
 }

src/app/(main)/admin/users/[userId]/UserSettings.tsx

@@ -1,19 +1,13 @@
-import { useContext } from 'react';
+import { Column, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
-import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
-import { User } from '@/components/icons';
 import { UserEditForm } from './UserEditForm';
-import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
 import { UserWebsites } from './UserWebsites';
-import { UserContext } from './UserProvider';
 
 export function UserSettings({ userId }: { userId: string }) {
   const { formatMessage, labels } = useMessages();
-  const user = useContext(UserContext);
 
   return (
-    <>
+    <Column gap="6">
-      <SectionHeader title={user?.username} icon={<User />} />
       <Tabs>
         <TabList>
           <Tab id="details">{formatMessage(labels.details)}</Tab>
@@ -26,6 +20,6 @@ export function UserSettings({ userId }: { userId: string }) {
           <UserWebsites userId={userId} />
         </TabPanel>
       </Tabs>
-    </>
+    </Column>
   );
 }

src/app/(main)/admin/websites/AdminWebsitesPage.tsx

@@ -1,16 +1,19 @@
 'use client';
 import { AdminWebsitesDataTable } from './AdminWebsitesDataTable';
 import { Column } from '@umami/react-zen';
-import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function AdminWebsitesPage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={formatMessage(labels.websites)} />
+      <PageHeader title={formatMessage(labels.websites)} />
-      <AdminWebsitesDataTable />
+      <Panel>
+        <AdminWebsitesDataTable />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/admin/websites/AdminWebsitesTable.tsx

@@ -55,7 +55,7 @@ export function AdminWebsitesTable({ data = [] }: { data: any[] }) {
 
             return (
               <MenuButton>
-                <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
+                <MenuItem href={`/admin/websites/${id}`} data-test="link-button-edit">
                   <Row alignItems="center" gap>
                     <Icon>
                       <Edit />

src/app/(main)/admin/websites/[websiteId]/AdminWebsitePage.tsx

@@ -1,11 +1,14 @@
 'use client';
 import { WebsiteSettings } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettings';
 import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import { Panel } from '@/components/common/Panel';
 
 export function AdminWebsitePage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <WebsiteSettings websiteId={websiteId} />
+      <Panel>
+        <WebsiteSettings websiteId={websiteId} />
+      </Panel>
     </WebsiteProvider>
   );
 }

src/app/(main)/admin/websites/[websiteId]/page.tsx

@@ -1,10 +1,10 @@
-import { AdminWebsitePage } from './AdminWebsitePage';
 import { Metadata } from 'next';
+import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
 
 export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
   const { websiteId } = await params;
 
-  return <AdminWebsitePage websiteId={websiteId} />;
+  return <WebsiteSettingsPage websiteId={websiteId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/SettingsLayout.tsx

@@ -2,44 +2,60 @@
 import { ReactNode } from 'react';
 import { Grid, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
-import { PageHeader } from '@/components/common/PageHeader';
-import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';
+import { SideMenu } from '@/components/common/SideMenu';
+import { UserCircle, Users, Knobs } from '@/components/icons';
 
 export function SettingsLayout({ children }: { children: ReactNode }) {
   const { formatMessage, labels } = useMessages();
-  const { pathname } = useNavigation();
+  const { renderUrl, pathname } = useNavigation();
 
   const items = [
     {
-      id: 'preferences',
+      label: formatMessage(labels.application),
-      label: formatMessage(labels.preferences),
+      items: [
-      url: '/settings/preferences',
+        {
+          id: 'preferences',
+          label: formatMessage(labels.preferences),
+          path: renderUrl('/settings/preferences'),
+          icon: <Knobs />,
+        },
+        {
+          id: 'teams',
+          label: formatMessage(labels.teams),
+          path: renderUrl('/settings/teams'),
+          icon: <Users />,
+        },
+      ],
     },
     {
-      id: 'profile',
+      label: formatMessage(labels.account),
-      label: formatMessage(labels.profile),
+      items: [
-      url: '/settings/profile',
+        {
+          id: 'profile',
+          label: formatMessage(labels.profile),
+          path: renderUrl('/settings/profile'),
+          icon: <UserCircle />,
+        },
+      ],
     },
-    { id: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
   ];
 
-  const value = items.find(({ url }) => pathname.includes(url))?.id;
+  const selectedKey =
+    items.flatMap(e => e.items)?.find(({ path }) => path && pathname.endsWith(path))?.id ||
+    'overview';
 
   return (
-    <PageBody>
+    <Grid columns="auto 1fr" width="100%" height="100%">
-      <Column gap="6">
+      <Column height="100%" border="right" backgroundColor>
-        <PageHeader title={formatMessage(labels.settings)} />
+        <SideMenu
-        <Grid columns="200px 1fr" gap>
+          items={items}
-          <Column>
+          title={formatMessage(labels.settings)}
-            <SideMenu items={items} selectedKey={value} />
+          selectedKey={selectedKey}
-          </Column>
+          allowMinimize={false}
-          <Column>
+        />
-            <Panel minHeight="300px">{children}</Panel>
-          </Column>
-        </Grid>
       </Column>
-    </PageBody>
+      <PageBody gap="6">{children}</PageBody>
+    </Grid>
   );
 }

src/app/(main)/settings/preferences/PreferenceSettings.tsx

@@ -19,17 +19,14 @@ export function PreferenceSettings() {
         <Label>{formatMessage(labels.defaultDateRange)}</Label>
         <DateRangeSetting />
       </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.language)}</Label>
-        <LanguageSetting />
-      </Column>
-
       <Column>
         <Label>{formatMessage(labels.timezone)}</Label>
         <TimezoneSetting />
       </Column>
-
+      <Column>
+        <Label>{formatMessage(labels.language)}</Label>
+        <LanguageSetting />
+      </Column>
       <Column>
         <Label>{formatMessage(labels.theme)}</Label>
         <ThemeSetting />

src/app/(main)/settings/preferences/PreferencesPage.tsx

@@ -1,16 +1,19 @@
 'use client';
 import { Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { Panel } from '@/components/common/Panel';
 import { PreferenceSettings } from './PreferenceSettings';
+import { PageHeader } from '@/components/common/PageHeader';
 
 export function PreferencesPage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={formatMessage(labels.preferences)} />
+      <PageHeader title={formatMessage(labels.preferences)} />
-      <PreferenceSettings />
+      <Panel>
+        <PreferenceSettings />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/settings/profile/ProfilePage.tsx

@@ -1,16 +1,19 @@
 'use client';
 import { ProfileSettings } from './ProfileSettings';
 import { useMessages } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { Panel } from '@/components/common/Panel';
 import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
 
 export function ProfilePage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={formatMessage(labels.profile)} />
+      <PageHeader title={formatMessage(labels.profile)} />
-      <ProfileSettings />
+      <Panel>
+        <ProfileSettings />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -34,12 +34,10 @@ export function ProfileSettings() {
         <Label>{formatMessage(labels.username)}</Label>
         {username}
       </Column>
-
       <Column>
         <Label>{formatMessage(labels.role)}</Label>
         {renderRole(role)}
       </Column>
-
       {!cloudMode && (
         <Column>
           <Label>{formatMessage(labels.password)}</Label>

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -1,5 +1,5 @@
 import { Row } from '@umami/react-zen';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { PageHeader } from '@/components/common/PageHeader';
 import { ROLES } from '@/lib/constants';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';
@@ -11,11 +11,11 @@ export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const cloudMode = !!process.env.cloudMode;
 
   return (
-    <SectionHeader title={formatMessage(labels.teams)}>
+    <PageHeader title={formatMessage(labels.teams)}>
       <Row gap="3">
         {!cloudMode && <TeamsJoinButton />}
         {allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
       </Row>
-    </SectionHeader>
+    </PageHeader>
   );
 }

src/app/(main)/settings/teams/TeamsSettingsPage.tsx

@@ -2,12 +2,15 @@
 import { TeamsDataTable } from './TeamsDataTable';
 import { TeamsHeader } from './TeamsHeader';
 import { Column } from '@umami/react-zen';
+import { Panel } from '@/components/common/Panel';
 
 export function TeamsSettingsPage() {
   return (
-    <Column gap>
+    <Column gap="6">
       <TeamsHeader />
-      <TeamsDataTable />
+      <Panel>
+        <TeamsDataTable />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 
 export function TeamsTable({
   data = [],
-  showActions = true,
+  showActions = false,
 }: {
   data: any[];
   allowEdit?: boolean;
@@ -29,7 +29,7 @@ export function TeamsTable({
       <DataColumn id="members" label={formatMessage(labels.members)}>
         {(row: any) => row._count.teamUser}
       </DataColumn>
-      {showActions && (
+      {showActions ? (
         <DataColumn id="action" label=" " align="end">
           {(row: any) => {
             const { id } = row;
@@ -56,7 +56,7 @@ export function TeamsTable({
             );
           }}
         </DataColumn>
-      )}
+      ) : null}
     </DataTable>
   );
 }

src/app/(main)/settings/teams/[teamId]/TeamDetails.tsx

@@ -1,8 +1,8 @@
 import { useContext, useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+
 import { ROLES } from '@/lib/constants';
 import { Users } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
@@ -10,6 +10,8 @@ import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
 import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
@@ -33,30 +35,32 @@ export function TeamDetails({ teamId }: { teamId: string }) {
       user.role !== ROLES.viewOnly);
 
   return (
-    <Column gap>
+    <Column gap="6">
-      <SectionHeader title={team?.name} icon={<Users />}>
+      <PageHeader title={team?.name} icon={<Users />}>
         {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
-      </SectionHeader>
+      </PageHeader>
-      <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+      <Panel>
-        <TabList>
+        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
-          <Tab id="details">{formatMessage(labels.details)}</Tab>
+          <TabList>
-          <Tab id="members">{formatMessage(labels.members)}</Tab>
+            <Tab id="details">{formatMessage(labels.details)}</Tab>
-          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
+            <Tab id="members">{formatMessage(labels.members)}</Tab>
-          {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
+            <Tab id="websites">{formatMessage(labels.websites)}</Tab>
-        </TabList>
+            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
-        <TabPanel id="details" style={{ width: 500 }}>
+          </TabList>
-          <TeamEditForm teamId={teamId} allowEdit={canEdit} />
+          <TabPanel id="details" style={{ width: 500 }}>
-        </TabPanel>
+            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
-        <TabPanel id="members">
+          </TabPanel>
-          <TeamMembersDataTable teamId={teamId} allowEdit />
+          <TabPanel id="members">
-        </TabPanel>
+            <TeamMembersDataTable teamId={teamId} allowEdit />
-        <TabPanel id="websites">
+          </TabPanel>
-          <TeamWebsitesDataTable teamId={teamId} allowEdit />
+          <TabPanel id="websites">
-        </TabPanel>
+            <TeamWebsitesDataTable teamId={teamId} allowEdit />
-        <TabPanel id="manage">
+          </TabPanel>
-          <TeamManage teamId={teamId} />
+          <TabPanel id="manage">
-        </TabPanel>
+            <TeamManage teamId={teamId} />
-      </Tabs>
+          </TabPanel>
+        </Tabs>
+      </Panel>
     </Column>
   );
 }

src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx

@@ -10,7 +10,7 @@ import {
 import { getRandomChars } from '@/lib/crypto';
 import { useContext } from 'react';
 import { useApi, useMessages, useModified } from '@/components/hooks';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 
 const generateId = () => `team_${getRandomChars(16)}`;
 

src/app/(main)/settings/teams/[teamId]/TeamMemberEditButton.tsx

@@ -1,6 +1,7 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Row, Button, Icon, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
+import { Dialog, useToast } from '@umami/react-zen';
 import { TeamMemberEditForm } from './TeamMemberEditForm';
+import { ActionButton } from '@/components/input/ActionButton';
 import { Edit } from '@/components/icons';
 
 export function TeamMemberEditButton({
@@ -25,27 +26,18 @@ export function TeamMemberEditButton({
   };
 
   return (
-    <DialogTrigger>
+    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
-      <Button variant="quiet">
+      <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
-        <Row alignItems="center" gap>
+        {({ close }) => (
-          <Icon>
+          <TeamMemberEditForm
-            <Edit />
+            teamId={teamId}
-          </Icon>
+            userId={userId}
-        </Row>
+            role={role}
-      </Button>
+            onSave={handleSave}
-      <Modal>
+            onClose={close}
-        <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
+          />
-          {({ close }) => (
+        )}
-            <TeamMemberEditForm
+      </Dialog>
-              teamId={teamId}
+    </ActionButton>
-              userId={userId}
-              role={role}
-              onSave={handleSave}
-              onClose={close}
-            />
-          )}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
   );
 }

src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -2,7 +2,8 @@ import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { messages } from '@/components/messages';
 import { Trash } from '@/components/icons';
-import { Button, Icon, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -34,29 +35,22 @@ export function TeamMemberRemoveButton({
   };
 
   return (
-    <DialogTrigger>
+    <ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
-      <Button variant="quiet">
+      <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
-        <Icon>
+        {({ close }) => (
-          <Trash />
+          <ConfirmationForm
-        </Icon>
+            message={formatMessage(messages.confirmRemove, {
-      </Button>
+              target: userName,
-      <Modal>
+            })}
-        <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
+            isLoading={isPending}
-          {({ close }) => (
+            error={error}
-            <ConfirmationForm
+            onConfirm={handleConfirm.bind(null, close)}
-              message={formatMessage(messages.confirmRemove, {
+            onClose={close}
-                target: userName,
+            buttonLabel={formatMessage(labels.remove)}
-              })}
+            buttonVariant="danger"
-              isLoading={isPending}
+          />
-              error={error}
+        )}
-              onConfirm={handleConfirm.bind(null, close)}
+      </Dialog>
-              onClose={close}
+    </ActionButton>
-              buttonLabel={formatMessage(labels.remove)}
-              buttonVariant="danger"
-            />
-          )}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
   );
 }

src/app/(main)/settings/teams/[teamId]/TeamSettingsPage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamProvider } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
 
 export function TeamSettingsPage({ teamId }: { teamId: string }) {

src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx

@@ -1,58 +1,19 @@
-import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
-import { useLoginQuery, useMessages } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
-import { Eye, Edit } from '@/components/icons';
-import { MenuButton } from '@/components/input/MenuButton';
 import Link from 'next/link';
 
-export function TeamWebsitesTable({
+export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
-  teamId,
-  data = [],
-  allowEdit = false,
-}: {
-  teamId: string;
-  data: any[];
-  allowEdit?: boolean;
-}) {
-  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
 
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={`/settings/websites/${row.id}`}>{row.name}</Link>}
+        {(row: any) => <Link href={`/teams/${teamId}/websites/${row.id}`}>{row.name}</Link>}
       </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       <DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
         {(row: any) => row?.createUser?.username}
       </DataColumn>
-      <DataColumn id="action" label=" " align="end">
-        {(row: any) => {
-          const { id: websiteId } = row;
-
-          return (
-            <MenuButton>
-              <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <Eye />
-                  </Icon>
-                  <Text>{formatMessage(labels.view)}</Text>
-                </Row>
-              </MenuItem>
-              {allowEdit && (teamId || user?.isAdmin) && (
-                <MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Row>
-                </MenuItem>
-              )}
-            </MenuButton>
-          );
-        }}
-      </DataColumn>
     </DataTable>
   );
 }

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -57,7 +57,7 @@ export function WebsitesTable({
                   </MenuItem>
                 )}
                 {allowEdit && (
-                  <MenuItem href={`/settings/websites/${websiteId}`}>
+                  <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">
                         <SquarePen />

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -1,5 +1,4 @@
 import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
-import { useRouter } from 'next/navigation';
 import {
   useLoginQuery,
   useMessages,
@@ -17,9 +16,9 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useLoginQuery();
   const { touch } = useModified();
-  const { teamId, renderUrl } = useNavigation();
+  const { router, pathname, teamId, renderUrl } = useNavigation();
-  const router = useRouter();
   const { data: teams } = useUserTeamsQuery(user.id);
+  const isAdmin = pathname.startsWith('/admin');
 
   const canTransferWebsite =
     (
@@ -49,21 +48,23 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
 
   return (
     <Column gap="6">
-      <ActionForm
+      {!isAdmin && (
-        label={formatMessage(labels.transferWebsite)}
+        <ActionForm
-        description={formatMessage(messages.transferWebsite)}
+          label={formatMessage(labels.transferWebsite)}
-      >
+          description={formatMessage(messages.transferWebsite)}
-        <DialogTrigger>
+        >
-          <Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
+          <DialogTrigger>
-          <Modal>
+            <Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
-            <Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
+            <Modal>
-              {({ close }) => (
+              <Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
-                <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
+                {({ close }) => (
-              )}
+                  <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
-            </Dialog>
+                )}
-          </Modal>
+              </Dialog>
-        </DialogTrigger>
+            </Modal>
-      </ActionForm>
+          </DialogTrigger>
+        </ActionForm>
+      )}
 
       <ActionForm
         label={formatMessage(labels.resetWebsite)}

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -1,55 +1,36 @@
 import { useContext } from 'react';
-import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
+import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
-import { Globe, Eye } from '@/components/icons';
-import { SectionHeader } from '@/components/common/SectionHeader';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
-import { LinkButton } from '@/components/common/LinkButton';
 
-export function WebsiteSettings({
+export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
-  websiteId,
-  openExternal = false,
-}: {
-  websiteId: string;
-  openExternal?: boolean;
-}) {
   const website = useContext(WebsiteContext);
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <Tabs>
-      <SectionHeader title={website?.name} icon={<Globe />}>
+      <TabList>
-        <LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
+        <Tab id="details">{formatMessage(labels.details)}</Tab>
-          <Icon>
+        <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
-            <Eye />
+        <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
-          </Icon>
+        <Tab id="manage">{formatMessage(labels.manage)}</Tab>
-          <Text>{formatMessage(labels.view)}</Text>
+      </TabList>
-        </LinkButton>
+      <TabPanel id="details" style={{ width: 500 }}>
-      </SectionHeader>
+        <WebsiteEditForm websiteId={websiteId} />
-      <Tabs>
+      </TabPanel>
-        <TabList>
+      <TabPanel id="tracking">
-          <Tab id="details">{formatMessage(labels.details)}</Tab>
+        <WebsiteTrackingCode websiteId={websiteId} />
-          <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
+      </TabPanel>
-          <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
+      <TabPanel id="share" style={{ width: 500 }}>
-          <Tab id="manage">{formatMessage(labels.manage)}</Tab>
+        <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
-        </TabList>
+      </TabPanel>
-        <TabPanel id="details" style={{ width: 500 }}>
+      <TabPanel id="manage">
-          <WebsiteEditForm websiteId={websiteId} />
+        <WebsiteData websiteId={websiteId} />
-        </TabPanel>
+      </TabPanel>
-        <TabPanel id="tracking">
+    </Tabs>
-          <WebsiteTrackingCode websiteId={websiteId} />
-        </TabPanel>
-        <TabPanel id="share" style={{ width: 500 }}>
-          <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
-        </TabPanel>
-        <TabPanel id="manage">
-          <WebsiteData websiteId={websiteId} />
-        </TabPanel>
-      </Tabs>
-    </>
   );
 }

src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Globe } from '@/components/icons';
+
+export function WebsiteSettingsHeader() {
+  const website = useContext(WebsiteContext);
+
+  return <PageHeader title={website?.name} icon={<Globe />} />;
+}

src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx

@@ -1,11 +1,19 @@
 'use client';
+import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { WebsiteSettings } from './WebsiteSettings';
+import { WebsiteSettingsHeader } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader';
+import { Panel } from '@/components/common/Panel';
 
 export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <WebsiteSettings websiteId={websiteId} />
+      <Column gap="6">
+        <WebsiteSettingsHeader />
+        <Panel>
+          <WebsiteSettings websiteId={websiteId} />
+        </Panel>
+      </Column>
     </WebsiteProvider>
   );
 }

src/app/(main)/teams/[teamId]/layout.tsx

@@ -1,18 +0,0 @@
-import { TeamProvider } from './TeamProvider';
-import { Metadata } from 'next';
-
-export default async function ({
-  children,
-  params,
-}: {
-  children: any;
-  params: Promise<{ teamId: string }>;
-}) {
-  const { teamId } = await params;
-
-  return <TeamProvider teamId={teamId}>{children}</TeamProvider>;
-}
-
-export const metadata: Metadata = {
-  title: 'Teams',
-};

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
 import { ListFilter } from '@/components/icons';
-import { FilterEditForm } from '@/components/common/FilterEditForm';
+import { FilterEditForm } from '@/components/input/FilterEditForm';
 import { useMessages, useNavigation, useFilters } from '@/components/hooks';
 import { filtersArrayToObject } from '@/lib/params';
 

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -5,11 +5,17 @@ import { Share, Edit } from '@/components/icons';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 import { WebsiteShareForm } from '@/app/(main)/settings/websites/[websiteId]/WebsiteShareForm';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function WebsiteHeader() {
   const website = useWebsite();
+  const { renderUrl, pathname } = useNavigation();
+  const isSettings = pathname.endsWith('/settings');
+
+  if (isSettings) {
+    return null;
+  }
 
   return (
     <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
@@ -17,7 +23,7 @@ export function WebsiteHeader() {
         <ActiveUsers websiteId={website.id} />
         <Row alignItems="center" gap>
           <ShareButton websiteId={website.id} shareId={website.shareId} />
-          <LinkButton href={`/settings/websites/${website.id}`}>
+          <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
             <Icon>
               <Edit />
             </Icon>

src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx

@@ -1,17 +1,23 @@
 'use client';
 import { ReactNode } from 'react';
-import { Column } from '@umami/react-zen';
+import { Column, Grid } from '@umami/react-zen';
 import { WebsiteProvider } from './WebsiteProvider';
 import { PageBody } from '@/components/common/PageBody';
 import { WebsiteHeader } from './WebsiteHeader';
+import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <PageBody gap>
+      <Grid columns="auto 1fr" width="100%" height="100%">
-        <WebsiteHeader />
+        <Column height="100%" border="right" backgroundColor>
-        <Column>{children}</Column>
+          <WebsiteNav websiteId={websiteId} />
-      </PageBody>
+        </Column>
+        <PageBody gap>
+          <WebsiteHeader />
+          <Column>{children}</Column>
+        </PageBody>
+      </Grid>
     </WebsiteProvider>
   );
 }

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -1,4 +1,3 @@
-import { Icon, Text, Row, NavMenu, NavMenuItem, NavMenuGroup, Column } from '@umami/react-zen';
 import {
   Eye,
   Lightning,
@@ -16,14 +15,16 @@ import {
   ChartPie,
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
-import Link from 'next/link';
+import { SideMenu } from '@/components/common/SideMenu';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function WebsiteNav({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { pathname, renderUrl, teamId } = useNavigation();
 
-  const links = [
+  const renderPath = (path: string) => renderUrl(`/websites/${websiteId}${path}`);
+
+  const items = [
     {
       label: formatMessage(labels.traffic),
       items: [
@@ -31,25 +32,31 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
           id: 'overview',
           label: formatMessage(labels.overview),
           icon: <Eye />,
-          path: '',
+          path: renderPath(''),
         },
         {
           id: 'events',
           label: formatMessage(labels.events),
           icon: <Lightning />,
-          path: '/events',
+          path: renderPath('/events'),
         },
         {
           id: 'sessions',
           label: formatMessage(labels.sessions),
           icon: <User />,
-          path: '/sessions',
+          path: renderPath('/sessions'),
         },
         {
           id: 'realtime',
           label: formatMessage(labels.realtime),
           icon: <Clock />,
-          path: '/realtime',
+          path: renderPath('/realtime'),
+        },
+        {
+          id: 'breakdown',
+          label: formatMessage(labels.breakdown),
+          icon: <Sheet />,
+          path: renderPath('/breakdown'),
         },
       ],
     },
@@ -60,48 +67,42 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
           id: 'goals',
           label: formatMessage(labels.goals),
           icon: <Target />,
-          path: '/goals',
+          path: renderPath('/goals'),
         },
         {
           id: 'funnel',
           label: formatMessage(labels.funnels),
           icon: <Funnel />,
-          path: '/funnels',
+          path: renderPath('/funnels'),
         },
         {
           id: 'journeys',
           label: formatMessage(labels.journeys),
           icon: <Path />,
-          path: '/journeys',
+          path: renderPath('/journeys'),
         },
         {
           id: 'retention',
           label: formatMessage(labels.retention),
           icon: <Magnet />,
-          path: '/retention',
+          path: renderPath('/retention'),
         },
       ],
     },
     {
       label: formatMessage(labels.segments),
       items: [
-        {
-          id: 'breakdown',
-          label: formatMessage(labels.breakdown),
-          icon: <Sheet />,
-          path: '/breakdown',
-        },
         {
           id: 'segments',
           label: formatMessage(labels.segments),
           icon: <ChartPie />,
-          path: '/segments',
+          path: renderPath('/segments'),
         },
         {
           id: 'cohorts',
           label: formatMessage(labels.cohorts),
           icon: <UserPlus />,
-          path: '/cohorts',
+          path: renderPath('/cohorts'),
         },
       ],
     },
@@ -112,53 +113,31 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
           id: 'utm',
           label: formatMessage(labels.utm),
           icon: <Tag />,
-          path: '/utm',
+          path: renderPath('/utm'),
         },
         {
           id: 'revenue',
           label: formatMessage(labels.revenue),
           icon: <Money />,
-          path: '/revenue',
+          path: renderPath('/revenue'),
         },
         {
           id: 'attribution',
           label: formatMessage(labels.attribution),
           icon: <Network />,
-          path: '/attribution',
+          path: renderPath('/attribution'),
         },
       ],
     },
   ];
 
-  const selected =
+  const selectedKey =
-    links.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
+    items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
     'overview';
 
   return (
-    <Column gap padding width="240px" border="left" overflowY="auto">
+    <SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>
       <WebsiteSelect buttonProps={{ variant: 'quiet' }} websiteId={websiteId} teamId={teamId} />
-      <NavMenu muteItems={false}>
+    </SideMenu>
-        {links.map(({ label, items }) => {
-          return (
-            <NavMenuGroup title={label} key={label} gap="1">
-              {items.map(({ id, label, icon, path }) => {
-                const isSelected = selected === id;
-
-                return (
-                  <Link key={id} href={renderUrl(`/websites/${websiteId}${path}`)}>
-                    <NavMenuItem isSelected={isSelected}>
-                      <Row alignItems="center" gap>
-                        <Icon>{icon}</Icon>
-                        <Text>{label}</Text>
-                      </Row>
-                    </NavMenuItem>
-                  </Link>
-                );
-              })}
-            </NavMenuGroup>
-          );
-        })}
-      </NavMenu>
-    </Column>
   );
 }

src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx

@@ -3,7 +3,7 @@ import { useMessages, useWebsiteEventsQuery } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 
 export function EventsDataTable({
   websiteId,

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -1,6 +1,6 @@
 import { useFormat } from '@/components//hooks/useFormat';
 import { Empty } from '@/components/common/Empty';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import { useCountryNames, useLocale, useMessages, useTimezone } from '@/components/hooks';
 import { Eye, Visitor, Bolt } from '@/components/icons';
 import { BROWSERS, OS_NAMES } from '@/lib/constants';

src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx

@@ -6,7 +6,7 @@ import { ListTable } from '@/components/metrics/ListTable';
 import { useMessages } from '@/components/hooks';
 import { RealtimeData } from '@/lib/types';
 import { WebsiteContext } from '../WebsiteProvider';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 
 const FILTER_REFERRERS = 'filter-referrers';
 const FILTER_PAGES = 'filter-pages';

src/app/(main)/websites/[websiteId]/segments/SegmentAddButton.tsx

@@ -1,7 +1,7 @@
 import { Button, DialogTrigger, Modal, Text, Icon, Dialog } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { Plus } from '@/components/icons';
-import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
+import { SegmentEditForm } from './SegmentEditForm';
 
 export function SegmentAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton.tsx

@@ -0,0 +1,55 @@
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
+import { Trash } from '@/components/icons';
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { messages } from '@/components/messages';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+
+export function SegmentDeleteButton({
+  segmentId,
+  websiteId,
+  name,
+  onSave,
+}: {
+  segmentId: string;
+  websiteId: string;
+  name: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/websites/${websiteId}/segments/${segmentId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('segments');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
+      <Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
+        {({ close }) => (
+          <ConfirmationForm
+            message={formatMessage(messages.confirmRemove, {
+              target: name,
+            })}
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.delete)}
+            buttonVariant="danger"
+          />
+        )}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx

@@ -0,0 +1,34 @@
+import { ActionButton } from '@/components/input/ActionButton';
+import { Edit } from '@/components/icons';
+import { Dialog } from '@umami/react-zen';
+import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
+import { useMessages } from '@/components/hooks';
+
+export function SegmentEditButton({
+  segmentId,
+  websiteId,
+  filters,
+}: {
+  segmentId: string;
+  websiteId: string;
+  filters: any[];
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
+        {({ close }) => {
+          return (
+            <SegmentEditForm
+              segmentId={segmentId}
+              websiteId={websiteId}
+              filters={filters}
+              onClose={close}
+            />
+          );
+        }}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx

@@ -6,24 +6,30 @@ import {
   FormSubmitButton,
   TextField,
   Label,
+  Loading,
 } from '@umami/react-zen';
 import { subMonths, endOfDay } from 'date-fns';
 import { FieldFilters } from '@/components/input/FieldFilters';
 import { useState } from 'react';
-import { useApi, useMessages, useModified } from '@/components/hooks';
+import { useApi, useMessages, useModified, useWebsiteSegmentQuery } from '@/components/hooks';
 import { filtersArrayToObject } from '@/lib/params';
 
 export function SegmentEditForm({
+  segmentId,
   websiteId,
   filters = [],
+  showFilters = true,
   onSave,
   onClose,
 }: {
+  segmentId: string;
   websiteId: string;
   filters?: any[];
+  showFilters?: boolean;
   onSave?: () => void;
   onClose?: () => void;
 }) {
+  const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
   const { touch } = useModified();
@@ -33,7 +39,10 @@ export function SegmentEditForm({
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: (data: any) =>
-      post(`/websites/${websiteId}/segments`, { ...data, type: 'segment' }),
+      post(`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`, {
+        ...data,
+        type: 'segment',
+      }),
   });
 
   const handleSubmit = async (data: any) => {
@@ -49,28 +58,40 @@ export function SegmentEditForm({
     );
   };
 
+  if (segmentId && !data) {
+    return <Loading position="page" />;
+  }
+
   return (
-    <Form error={error} onSubmit={handleSubmit}>
+    <Form error={error} onSubmit={handleSubmit} defaultValues={data}>
       <FormField
         name="name"
         label={formatMessage(labels.name)}
         rules={{ required: formatMessage(labels.required) }}
       >
-        <TextField />
+        <TextField autoFocus />
       </FormField>
-      <Label>{formatMessage(labels.filters)}</Label>
+      {showFilters && (
-      <FieldFilters
+        <>
-        websiteId={websiteId}
+          <Label>{formatMessage(labels.filters)}</Label>
-        filters={currentFilters}
+          <FieldFilters
-        startDate={startDate}
+            websiteId={websiteId}
-        endDate={endDate}
+            filters={currentFilters}
-        onSave={setCurrentFilters}
+            startDate={startDate}
-      />
+            endDate={endDate}
+            onSave={setCurrentFilters}
+          />
+        </>
+      )}
       <FormButtons>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
-        <FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
+        <FormSubmitButton
+          variant="primary"
+          data-test="button-submit"
+          isDisabled={isPending || currentFilters.length === 0}
+        >
           {formatMessage(labels.save)}
         </FormSubmitButton>
       </FormButtons>

src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx

@@ -1,12 +1,14 @@
-import { DataTable, DataColumn, Icon, Row, Text, MenuItem } from '@umami/react-zen';
+import { DataTable, DataColumn, Row } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
-import { Edit, Trash } from '@/components/icons';
 import { DateDistance } from '@/components/common/DateDistance';
-import { MenuButton } from '@/components/input/MenuButton';
+import { filtersObjectToArray } from '@/lib/params';
+import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
+import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
 
 export function SegmentsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
+  const { websiteId } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
@@ -20,27 +22,17 @@ export function SegmentsTable({ data = [] }) {
       </DataColumn>
       <DataColumn id="action" align="end" width="100px">
         {(row: any) => {
-          const { id } = row;
+          const { id, name, parameters } = row;
 
           return (
-            <MenuButton>
+            <Row>
-              <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
+              <SegmentEditButton
-                <Row alignItems="center" gap>
+                segmentId={id}
-                  <Icon>
+                websiteId={websiteId}
-                    <Edit />
+                filters={filtersObjectToArray(parameters)}
-                  </Icon>
+              />
-                  <Text>{formatMessage(labels.edit)}</Text>
+              <SegmentDeleteButton segmentId={id} websiteId={websiteId} name={name} />
-                </Row>
+            </Row>
-              </MenuItem>
-              <MenuItem id="delete" onAction={null} data-test="link-button-delete">
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <Trash />
-                  </Icon>
-                  <Text>{formatMessage(labels.delete)}</Text>
-                </Row>
-              </MenuItem>
-            </MenuButton>
           );
         }}
       </DataColumn>

src/app/(main)/websites/[websiteId]/settings/SettingsPage.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { Column, Icon, Row, Text } from '@umami/react-zen';
+import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
+import { LinkButton } from '@/components/common/LinkButton';
+import { Arrow } from '@/components/icons';
+import { useNavigation } from '@/components/hooks';
+
+export function SettingsPage({ websiteId }: { websiteId: string }) {
+  const { pathname } = useNavigation();
+  return (
+    <Column gap>
+      <Row marginTop="3">
+        <LinkButton href={pathname.replace('/settings', '')}>
+          <Row alignItems="center" gap>
+            <Icon rotate={180}>
+              <Arrow />
+            </Icon>
+            <Text>Back</Text>
+          </Row>
+        </LinkButton>
+      </Row>
+      <WebsiteSettingsPage websiteId={websiteId} />
+    </Column>
+  );
+}

src/app/(main)/websites/[websiteId]/settings/page.tsx

@@ -0,0 +1,12 @@
+import { SettingsPage } from './SettingsPage';
+import { Metadata } from 'next';
+
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
+  const { websiteId } = await params;
+
+  return <SettingsPage websiteId={websiteId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Settings',
+};

src/components/common/PageHeader.tsx

@@ -27,7 +27,7 @@ export function PageHeader({
       {...props}
     >
       <Row alignItems="center" gap="3">
-        {icon && <Icon>{icon}</Icon>}
+        {icon && <Icon size="md">{icon}</Icon>}
         {title && <Heading size="4">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}
       </Row>

src/components/common/SideMenu.tsx

@@ -1,27 +1,68 @@
-import { ReactNode } from 'react';
+import {
-import { Text, NavMenu, NavMenuItem, Icon, Row } from '@umami/react-zen';
+  Text,
+  Heading,
+  NavMenu,
+  NavMenuItem,
+  Icon,
+  Row,
+  Column,
+  NavMenuGroup,
+} from '@umami/react-zen';
 import Link from 'next/link';
 
 export interface SideMenuProps {
-  items: { id: string; label: string; url: string; icon?: ReactNode }[];
+  items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[];
+  title?: string;
   selectedKey?: string;
+  allowMinimize?: boolean;
 }
 
-export function SideMenu({ items, selectedKey }: SideMenuProps) {
+export function SideMenu({ items, title, selectedKey, allowMinimize, children }: SideMenuProps) {
   return (
-    <NavMenu highlightColor="3">
+    <Column
-      {items.map(({ id, label, url, icon }) => {
+      gap
-        return (
+      padding
-          <Link key={id} href={url}>
+      width="240px"
-            <NavMenuItem isSelected={id === selectedKey}>
+      overflowY="auto"
-              <Row alignItems="center" gap>
+      justifyContent="space-between"
-                {icon && <Icon>{icon}</Icon>}
+      position="sticky"
-                <Text>{label}</Text>
+      top="0"
-              </Row>
+      backgroundColor
-            </NavMenuItem>
+    >
-          </Link>
+      {children}
-        );
+      {title && (
-      })}
+        <Row padding>
-    </NavMenu>
+          <Heading size="1">{title}</Heading>
+        </Row>
+      )}
+      <NavMenu muteItems={false} gap="6">
+        {items.map(({ label, items }) => {
+          return (
+            <NavMenuGroup
+              title={label}
+              key={label}
+              gap="1"
+              allowMinimize={allowMinimize}
+              marginBottom="3"
+            >
+              {items.map(({ id, label, icon, path }) => {
+                const isSelected = selectedKey === id;
+
+                return (
+                  <Link key={id} href={path}>
+                    <NavMenuItem isSelected={isSelected}>
+                      <Row alignItems="center" gap>
+                        <Icon>{icon}</Icon>
+                        <Text>{label}</Text>
+                      </Row>
+                    </NavMenuItem>
+                  </Link>
+                );
+              })}
+            </NavMenuGroup>
+          );
+        })}
+      </NavMenu>
+    </Column>
   );
 }

src/components/icons.ts

@@ -35,6 +35,7 @@ export {
   Plus,
   RefreshCw as Refresh,
   Settings,
+  Settings2 as Knobs,
   Share,
   Sheet,
   Slash,

src/components/input/ActionButton.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Button, Icon, Modal, DialogTrigger, TooltipTrigger, Tooltip } from '@umami/react-zen';
+
+export function ActionButton({
+  onClick,
+  icon,
+  tooltip,
+  children,
+}: {
+  onSave?: () => void;
+  icon?: ReactNode;
+  tooltip?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <DialogTrigger>
+      <TooltipTrigger delay={0}>
+        <Button variant="quiet" onPress={onClick}>
+          <Icon>{icon}</Icon>
+        </Button>
+        <Tooltip>{tooltip}</Tooltip>
+      </TooltipTrigger>
+      <Modal>{children}</Modal>
+    </DialogTrigger>
+  );
+}

src/components/input/FilterBar.tsx

@@ -1,4 +1,14 @@
-import { Button, Icon, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Text,
+  Row,
+  TooltipTrigger,
+  Tooltip,
+  Modal,
+  Dialog,
+  DialogTrigger,
+} from '@umami/react-zen';
 import {
   useNavigation,
   useMessages,
@@ -6,8 +16,9 @@ import {
   useFilters,
   useWebsiteSegmentQuery,
 } from '@/components/hooks';
-import { Close } from '@/components/icons';
+import { Close, Bookmark } from '@/components/icons';
 import { isSearchOperator } from '@/lib/params';
+import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
 
 export function FilterBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -65,16 +76,37 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
           );
         })}
       </Row>
-      <TooltipTrigger delay={0}>
+      <Row alignItems="center">
-        <Button variant="zero" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
+        <DialogTrigger>
-          <Icon>
+          <TooltipTrigger delay={0}>
-            <Close />
+            <Button variant="zero">
-          </Icon>
+              <Icon>
-        </Button>
+                <Bookmark />
-        <Tooltip>
+              </Icon>
-          <Text>{formatMessage(labels.clearAll)}</Text>
+            </Button>
-        </Tooltip>
+            <Tooltip>
-      </TooltipTrigger>
+              <Text>{formatMessage(labels.saveSegment)}</Text>
+            </Tooltip>
+          </TooltipTrigger>
+          <Modal>
+            <Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
+              {({ close }) => {
+                return <SegmentEditForm websiteId={websiteId} onClose={close} />;
+              }}
+            </Dialog>
+          </Modal>
+        </DialogTrigger>
+        <TooltipTrigger delay={0}>
+          <Button variant="zero" onPress={handleResetFilter}>
+            <Icon>
+              <Close />
+            </Icon>
+          </Button>
+          <Tooltip>
+            <Text>{formatMessage(labels.clearAll)}</Text>
+          </Tooltip>
+        </TooltipTrigger>
+      </Row>
     </Row>
   );
 }

src/components/input/FilterEditForm.tsx

@@ -57,7 +57,7 @@ export function FilterEditForm({
             onSave={setCurrentFilters}
           />
         </TabPanel>
-        <TabPanel id="segments">
+        <TabPanel id="segments" style={{ height: 400 }}>
           <SegmentFilters
             websiteId={websiteId}
             segmentId={currentSegment}
@@ -65,7 +65,7 @@ export function FilterEditForm({
           />
         </TabPanel>
       </Tabs>
-      <Row alignItems="center" justifyContent="space-between" gridColumn="span 2" gap>
+      <Row alignItems="center" justifyContent="space-between" gridColumn="span 2" marginTop="6" gap>
         <Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
         <Row alignItems="center" justifyContent="flex-end" gridColumn="span 2" gap>
           <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>

src/components/input/ProfileButton.tsx

@@ -9,6 +9,7 @@ import {
   MenuSeparator,
   MenuSection,
   Text,
+  Row,
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import { useMessages, useLoginQuery } from '@/components/hooks';
@@ -36,25 +37,31 @@ export function ProfileButton() {
           <MenuSection title={user.username}>
             <MenuSeparator />
             <MenuItem id="settings">
-              <Icon>
+              <Row alignItems="center" gap>
-                <Settings />
+                <Icon>
-              </Icon>
+                  <Settings />
-              <Text>{formatMessage(labels.settings)}</Text>
+                </Icon>
+                <Text>{formatMessage(labels.settings)}</Text>
+              </Row>
             </MenuItem>
             {user.isAdmin && (
               <MenuItem id="admin">
-                <Icon>
+                <Row alignItems="center" gap>
-                  <LockKeyhole />
+                  <Icon>
-                </Icon>
+                    <LockKeyhole />
-                <Text>{formatMessage(labels.admin)}</Text>
+                  </Icon>
+                  <Text>{formatMessage(labels.admin)}</Text>
+                </Row>
               </MenuItem>
             )}
             {!cloudMode && (
               <MenuItem data-test="item-logout" id="logout">
-                <Icon>
+                <Row alignItems="center" gap>
-                  <LogOut />
+                  <Icon>
-                </Icon>
+                    <LogOut />
-                <Text>{formatMessage(labels.logout)}</Text>
+                  </Icon>
+                  <Text>{formatMessage(labels.logout)}</Text>
+                </Row>
               </MenuItem>
             )}
           </MenuSection>

src/components/input/SegmentFilters.tsx

@@ -1,4 +1,4 @@
-import { List, Column, ListItem } from '@umami/react-zen';
+import { List, ListItem } from '@umami/react-zen';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 
@@ -9,25 +9,23 @@ export interface SegmentFiltersProps {
 }
 
 export function SegmentFilters({ websiteId, segmentId, onSave }: SegmentFiltersProps) {
-  const { data, isLoading } = useWebsiteSegmentsQuery(websiteId, { type: 'segment' });
+  const { data, isLoading, isFetching } = useWebsiteSegmentsQuery(websiteId, { type: 'segment' });
 
   const handleChange = (id: string) => {
     onSave?.(id);
   };
 
   return (
-    <Column height="400px" gap>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} overflowY="auto">
-      <LoadingPanel data={data} isLoading={isLoading} overflowY="auto">
+      <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
-        <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
+        {data?.data?.map(item => {
-          {data?.data?.map(item => {
+          return (
-            return (
+            <ListItem key={item.id} id={item.id}>
-              <ListItem key={item.id} id={item.id}>
+              {item.name}
-                {item.name}
+            </ListItem>
-              </ListItem>
+          );
-            );
+        })}
-          })}
+      </List>
-        </List>
+    </LoadingPanel>
-      </LoadingPanel>
-    </Column>
   );
 }

src/components/input/SegmentSaveButton.tsx

@@ -0,0 +1,26 @@
+import { Button, DialogTrigger, Modal, Text, Icon, Dialog } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { Plus } from '@/components/icons';
+import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
+
+export function SegmentSaveButton({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DialogTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.segment)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
+          {({ close }) => {
+            return <SegmentEditForm websiteId={websiteId} onClose={close} />;
+          }}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/components/input/TeamsButton.tsx

@@ -15,7 +15,7 @@ import {
   Pressable,
 } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
-import { Chevron, User, Users } from '@/components/icons';
+import { Chevron, User, Users, LogOut } from '@/components/icons';
 
 export function TeamsButton({ showText = true }: { showText?: boolean }) {
   const { user } = useLoginQuery();
@@ -81,6 +81,17 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
                 </MenuItem>
               ))}
             </MenuSection>
+            <MenuSeparator />
+            <MenuSection>
+              <MenuItem id="logout">
+                <Row alignItems="center" gap>
+                  <Icon size="sm">
+                    <LogOut />
+                  </Icon>
+                  <Text wrap="nowrap">{formatMessage(labels.logout)}</Text>
+                </Row>
+              </MenuItem>
+            </MenuSection>
           </Menu>
         </Box>
       </Popover>

src/components/input/WebsiteSelect.tsx

@@ -33,13 +33,13 @@ export function WebsiteSelect({
       items={data?.['data'] || []}
       value={websiteId}
       isLoading={isLoading}
-      buttonProps={buttonProps}
+      buttonProps={{ ...buttonProps }}
       allowSearch={true}
       searchValue={search}
       onSearch={handleSearch}
       onChange={handleSelect}
       renderValue={() => (
-        <Text truncate style={{ maxWidth: 160 }}>
+        <Text truncate weight="bold" style={{ maxWidth: 160, lineHeight: 1 }}>
           {website?.name}
         </Text>
       )}

src/components/messages.ts

@@ -342,6 +342,10 @@ export const labels = defineMessages({
   traffic: { id: 'label.traffic', defaultMessage: 'Traffic' },
   behavior: { id: 'label.behavior', defaultMessage: 'Behavior' },
   growth: { id: 'label.growth', defaultMessage: 'Growth' },
+  account: { id: 'label.account', defaultMessage: 'Account' },
+  application: { id: 'label.application', defaultMessage: 'Application' },
+  saveSegment: { id: 'label.save-segment', defaultMessage: 'Save segment' },
+  saveCohort: { id: 'label.save-cohort', defaultMessage: 'Save cohort' },
 });
 
 export const messages = defineMessages({

src/components/metrics/PagesTable.tsx

@@ -1,5 +1,5 @@
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import { FilterLink } from '@/components/common/FilterLink';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { emptyFilter } from '@/lib/filters';

src/components/metrics/QueryParametersTable.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Row, Text } from '@umami/react-zen';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import { emptyFilter, paramFilter } from '@/lib/filters';
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';

src/components/metrics/ReferrersTable.tsx

@@ -1,7 +1,7 @@
 import { Row } from '@umami/react-zen';
 import { FilterLink } from '@/components/common/FilterLink';
 import { Favicon } from '@/components/common/Favicon';
-import { FilterButtons } from '@/components/common/FilterButtons';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
 import thenby from 'thenby';

src/index.ts

@@ -17,6 +17,7 @@ export * from '@/app/(main)/settings/teams/TeamAddForm';
 export * from '@/app/(main)/settings/teams/TeamJoinForm';
 export * from '@/app/(main)/settings/teams/TeamLeaveButton';
 export * from '@/app/(main)/settings/teams/TeamLeaveForm';
+export * from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
 export * from '@/app/(main)/settings/teams/TeamsAddButton';
 export * from '@/app/(main)/settings/teams/TeamsDataTable';
 export * from '@/app/(main)/settings/teams/TeamsHeader';
@@ -37,7 +38,6 @@ export * from '@/app/(main)/settings/websites/WebsitesDataTable';
 export * from '@/app/(main)/settings/websites/WebsitesHeader';
 export * from '@/app/(main)/settings/websites/WebsitesTable';
 
-export * from '@/app/(main)/teams/[teamId]/TeamProvider';
 export * from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 
 export * from '@/components/common/ConfirmationForm';
@@ -46,7 +46,7 @@ export * from '@/components/common/Empty';
 export * from '@/components/common/ErrorBoundary';
 export * from '@/components/common/ErrorMessage';
 export * from '@/components/common/Favicon';
-export * from '@/components/common/FilterButtons';
+export * from '@/components/input/FilterButtons';
 export * from '@/components/common/FilterLink';
 export * from '@/components/common/HamburgerButton';
 export * from '@/components/common/LinkButton';