diff --git a/package.json b/package.json
index f9b4029c..eb771cbb 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@prisma/extension-read-replicas": "^0.3.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.12.2",
-    "@umami/prisma-client": "^0.13.0",
+    "@umami/prisma-client": "^0.14.0",
     "@umami/redis-client": "^0.18.0",
     "chalk": "^4.1.1",
     "chart.js": "^4.2.1",
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 74be8292..a906739c 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Loading } from 'react-basics';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx
index 86d1db71..ed29df13 100644
--- a/src/app/(main)/NavBar.tsx
+++ b/src/app/(main)/NavBar.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
diff --git a/src/app/(main)/UpdateNotice.tsx b/src/app/(main)/UpdateNotice.tsx
index c56d3ce4..54ad05c9 100644
--- a/src/app/(main)/UpdateNotice.tsx
+++ b/src/app/(main)/UpdateNotice.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect, useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from 'react-basics';
diff --git a/src/app/(main)/console/ConsolePage.tsx b/src/app/(main)/console/ConsolePage.tsx
new file mode 100644
index 00000000..db1acbfe
--- /dev/null
+++ b/src/app/(main)/console/ConsolePage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import TestConsole from './TestConsole';
+
+export default function ConsolePage({ websiteId }) {
+  return <TestConsole websiteId={websiteId} />;
+}
diff --git a/src/app/(main)/console/TestConsole.module.css b/src/app/(main)/console/TestConsole.module.css
index 7d973529..88b70ab3 100644
--- a/src/app/(main)/console/TestConsole.module.css
+++ b/src/app/(main)/console/TestConsole.module.css
@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: 30px;
+  padding-bottom: 40px;
 }
 
 .actions {
diff --git a/src/app/(main)/console/TestConsole.tsx b/src/app/(main)/console/TestConsole.tsx
index 2e11e4b0..9d8ecb24 100644
--- a/src/app/(main)/console/TestConsole.tsx
+++ b/src/app/(main)/console/TestConsole.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button } from 'react-basics';
 import Head from 'next/head';
 import Link from 'next/link';
diff --git a/src/app/(main)/console/[[...websiteId]]/page.tsx b/src/app/(main)/console/[[...websiteId]]/page.tsx
index 0c69f4a5..e9a6f722 100644
--- a/src/app/(main)/console/[[...websiteId]]/page.tsx
+++ b/src/app/(main)/console/[[...websiteId]]/page.tsx
@@ -1,5 +1,5 @@
-import TestConsole from '../TestConsole';
 import { Metadata } from 'next';
+import ConsolePage from '../ConsolePage';
 
 async function getEnabled() {
   return !!process.env.ENABLE_TEST_CONSOLE;
@@ -12,7 +12,7 @@ export default async function ({ params: { websiteId } }) {
     return null;
   }
 
-  return <TestConsole websiteId={websiteId?.[0]} />;
+  return <ConsolePage websiteId={websiteId?.[0]} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/dashboard/DashboardEdit.tsx b/src/app/(main)/dashboard/DashboardEdit.tsx
index d934bf04..d702612f 100644
--- a/src/app/(main)/dashboard/DashboardEdit.tsx
+++ b/src/app/(main)/dashboard/DashboardEdit.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useMemo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
diff --git a/src/app/(main)/dashboard/Dashboard.tsx b/src/app/(main)/dashboard/DashboardPage.tsx
similarity index 97%
rename from src/app/(main)/dashboard/Dashboard.tsx
rename to src/app/(main)/dashboard/DashboardPage.tsx
index d669ca6f..0b8a7d90 100644
--- a/src/app/(main)/dashboard/Dashboard.tsx
+++ b/src/app/(main)/dashboard/DashboardPage.tsx
@@ -10,7 +10,7 @@ import { useMessages, useLocale, useTeamUrl, useWebsites } from 'components/hook
 import useDashboard from 'store/dashboard';
 import LinkButton from 'components/common/LinkButton';
 
-export function Dashboard() {
+export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();
   const { teamId, renderTeamUrl } = useTeamUrl();
   const { showCharts, editing } = useDashboard();
@@ -68,4 +68,4 @@ export function Dashboard() {
   );
 }
 
-export default Dashboard;
+export default DashboardPage;
diff --git a/src/app/(main)/dashboard/DashboardSettingsButton.tsx b/src/app/(main)/dashboard/DashboardSettingsButton.tsx
index e276dc39..9e1d3dbc 100644
--- a/src/app/(main)/dashboard/DashboardSettingsButton.tsx
+++ b/src/app/(main)/dashboard/DashboardSettingsButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
 import Icons from 'components/icons';
 import { saveDashboard } from 'store/dashboard';
diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx
index 50c08f47..634a2616 100644
--- a/src/app/(main)/dashboard/page.tsx
+++ b/src/app/(main)/dashboard/page.tsx
@@ -1,8 +1,8 @@
-import Dashboard from 'app/(main)/dashboard/Dashboard';
+import DashboardPage from './DashboardPage';
 import { Metadata } from 'next';
 
 export default function () {
-  return <Dashboard />;
+  return <DashboardPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/layout.module.css b/src/app/(main)/layout.module.css
index 58c1cacf..09b2eab7 100644
--- a/src/app/(main)/layout.module.css
+++ b/src/app/(main)/layout.module.css
@@ -19,3 +19,15 @@
   height: calc(100vh - 60px);
   overflow-y: auto;
 }
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 20px;
+  min-height: calc(100vh - 60px);
+}
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index f5aeab67..bcc86bff 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,3 +1,4 @@
+'use client';
 import App from './App';
 import NavBar from './NavBar';
 import Page from 'components/layout/Page';
diff --git a/src/app/(main)/profile/DateRangeSetting.tsx b/src/app/(main)/profile/DateRangeSetting.tsx
index 50be068b..a1ae7bc7 100644
--- a/src/app/(main)/profile/DateRangeSetting.tsx
+++ b/src/app/(main)/profile/DateRangeSetting.tsx
@@ -1,4 +1,3 @@
-'use client';
 import DateFilter from 'components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
 import { useDateRange, useMessages } from 'components/hooks';
diff --git a/src/app/(main)/profile/LanguageSetting.tsx b/src/app/(main)/profile/LanguageSetting.tsx
index 0fefb6eb..3004af1e 100644
--- a/src/app/(main)/profile/LanguageSetting.tsx
+++ b/src/app/(main)/profile/LanguageSetting.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
 import { useLocale, useMessages } from 'components/hooks';
diff --git a/src/app/(main)/profile/PasswordChangeButton.tsx b/src/app/(main)/profile/PasswordChangeButton.tsx
index 11649172..552663ca 100644
--- a/src/app/(main)/profile/PasswordChangeButton.tsx
+++ b/src/app/(main)/profile/PasswordChangeButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
 import PasswordEditForm from 'app/(main)/profile/PasswordEditForm';
 import Icons from 'components/icons';
diff --git a/src/app/(main)/profile/PasswordEditForm.tsx b/src/app/(main)/profile/PasswordEditForm.tsx
index 6cbb2e9e..1402efa2 100644
--- a/src/app/(main)/profile/PasswordEditForm.tsx
+++ b/src/app/(main)/profile/PasswordEditForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
 import { useApi, useMessages } from 'components/hooks';
diff --git a/src/app/(main)/profile/ProfileHeader.tsx b/src/app/(main)/profile/ProfileHeader.tsx
index 35aeb0e6..e2d69cc7 100644
--- a/src/app/(main)/profile/ProfileHeader.tsx
+++ b/src/app/(main)/profile/ProfileHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 
diff --git a/src/app/(main)/profile/page.module.css b/src/app/(main)/profile/ProfilePage.module.css
similarity index 100%
rename from src/app/(main)/profile/page.module.css
rename to src/app/(main)/profile/ProfilePage.module.css
diff --git a/src/app/(main)/profile/ProfilePage.tsx b/src/app/(main)/profile/ProfilePage.tsx
new file mode 100644
index 00000000..428ce284
--- /dev/null
+++ b/src/app/(main)/profile/ProfilePage.tsx
@@ -0,0 +1,13 @@
+'use client';
+import ProfileHeader from './ProfileHeader';
+import ProfileSettings from './ProfileSettings';
+import styles from './ProfilePage.module.css';
+
+export default function () {
+  return (
+    <div className={styles.container}>
+      <ProfileHeader />
+      <ProfileSettings />
+    </div>
+  );
+}
diff --git a/src/app/(main)/profile/ProfileSettings.tsx b/src/app/(main)/profile/ProfileSettings.tsx
index 59f30fbe..1021c37e 100644
--- a/src/app/(main)/profile/ProfileSettings.tsx
+++ b/src/app/(main)/profile/ProfileSettings.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Form, FormRow } from 'react-basics';
 import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
 import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
@@ -11,7 +10,7 @@ import { ROLES } from 'lib/constants';
 export function ProfileSettings() {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const cloudMode = Boolean(process.env.cloudMode);
+  const cloudMode = !!process.env.cloudMode;
 
   if (!user) {
     return null;
@@ -24,7 +23,7 @@ export function ProfileSettings() {
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
+      return formatMessage(labels.administrator);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
diff --git a/src/app/(main)/profile/ThemeSetting.tsx b/src/app/(main)/profile/ThemeSetting.tsx
index 3c714320..577728b7 100644
--- a/src/app/(main)/profile/ThemeSetting.tsx
+++ b/src/app/(main)/profile/ThemeSetting.tsx
@@ -1,4 +1,3 @@
-'use client';
 import classNames from 'classnames';
 import { Button, Icon } from 'react-basics';
 import { useTheme } from 'components/hooks';
diff --git a/src/app/(main)/profile/TimezoneSetting.tsx b/src/app/(main)/profile/TimezoneSetting.tsx
index 101e7b34..671125f4 100644
--- a/src/app/(main)/profile/TimezoneSetting.tsx
+++ b/src/app/(main)/profile/TimezoneSetting.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { listTimeZones } from 'timezone-support';
diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx
index d774e528..c653624b 100644
--- a/src/app/(main)/profile/page.tsx
+++ b/src/app/(main)/profile/page.tsx
@@ -1,15 +1,8 @@
-import ProfileHeader from './ProfileHeader';
-import ProfileSettings from './ProfileSettings';
 import { Metadata } from 'next';
-import styles from './page.module.css';
+import ProfilePage from './ProfilePage';
 
 export default function () {
-  return (
-    <div className={styles.container}>
-      <ProfileHeader />
-      <ProfileSettings />
-    </div>
-  );
+  return <ProfilePage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/ReportDeleteButton.tsx b/src/app/(main)/reports/ReportDeleteButton.tsx
index c0f16469..99e39d71 100644
--- a/src/app/(main)/reports/ReportDeleteButton.tsx
+++ b/src/app/(main)/reports/ReportDeleteButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
diff --git a/src/app/(main)/reports/ReportsDataTable.tsx b/src/app/(main)/reports/ReportsDataTable.tsx
index 5e0de599..cf5953e8 100644
--- a/src/app/(main)/reports/ReportsDataTable.tsx
+++ b/src/app/(main)/reports/ReportsDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useReports } from 'components/hooks';
 import ReportsTable from './ReportsTable';
 import DataTable from 'components/common/DataTable';
diff --git a/src/app/(main)/reports/ReportsHeader.tsx b/src/app/(main)/reports/ReportsHeader.tsx
index e0b0c10a..068c0369 100644
--- a/src/app/(main)/reports/ReportsHeader.tsx
+++ b/src/app/(main)/reports/ReportsHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { Icon, Icons, Text } from 'react-basics';
 import { useMessages, useTeamUrl } from 'components/hooks';
diff --git a/src/app/(main)/reports/ReportsPage.tsx b/src/app/(main)/reports/ReportsPage.tsx
new file mode 100644
index 00000000..498bce57
--- /dev/null
+++ b/src/app/(main)/reports/ReportsPage.tsx
@@ -0,0 +1,15 @@
+'use client';
+import ReportsHeader from './ReportsHeader';
+import ReportsDataTable from './ReportsDataTable';
+
+export default function ReportsPage({ teamId }: { teamId: string }) {
+  return (
+    <>
+      <ReportsHeader />
+      <ReportsDataTable teamId={teamId} />
+    </>
+  );
+}
+export const metadata = {
+  title: 'Reports | Umami',
+};
diff --git a/src/app/(main)/reports/ReportsTable.tsx b/src/app/(main)/reports/ReportsTable.tsx
index 184fb43f..7cb9cca7 100644
--- a/src/app/(main)/reports/ReportsTable.tsx
+++ b/src/app/(main)/reports/ReportsTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
diff --git a/src/app/(main)/reports/[reportId]/BaseParameters.tsx b/src/app/(main)/reports/[reportId]/BaseParameters.tsx
index 3f02fab8..1da70d2b 100644
--- a/src/app/(main)/reports/[reportId]/BaseParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/BaseParameters.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { FormRow } from 'react-basics';
 import { parseDateRange } from 'lib/date';
diff --git a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
index ac7bff5b..9db472d8 100644
--- a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from 'lib/constants';
diff --git a/src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx b/src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx
index 68463b33..6b5bf636 100644
--- a/src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Form, FormRow, Menu, Item } from 'react-basics';
 import { useMessages } from 'components/hooks';
 
diff --git a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx
index c06e83b6..63504ed1 100644
--- a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useMemo } from 'react';
 import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
 import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
diff --git a/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx b/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx
index 9219d779..dfd402cf 100644
--- a/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Menu, Item, Form, FormRow } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import styles from './FieldSelectForm.module.css';
diff --git a/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx b/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx
index 2654bfc5..4f9b9264 100644
--- a/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Loading } from 'react-basics';
 import { subDays } from 'date-fns';
diff --git a/src/app/(main)/reports/[reportId]/ParameterList.tsx b/src/app/(main)/reports/[reportId]/ParameterList.tsx
index 6ea92375..eb1a646a 100644
--- a/src/app/(main)/reports/[reportId]/ParameterList.tsx
+++ b/src/app/(main)/reports/[reportId]/ParameterList.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import { Icon, TooltipPopup } from 'react-basics';
 import Icons from 'components/icons';
diff --git a/src/app/(main)/reports/[reportId]/PopupForm.tsx b/src/app/(main)/reports/[reportId]/PopupForm.tsx
index 81cad4ed..f2666199 100644
--- a/src/app/(main)/reports/[reportId]/PopupForm.tsx
+++ b/src/app/(main)/reports/[reportId]/PopupForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './PopupForm.module.css';
diff --git a/src/app/(main)/reports/[reportId]/Report.tsx b/src/app/(main)/reports/[reportId]/Report.tsx
index c1cc502f..76f73595 100644
--- a/src/app/(main)/reports/[reportId]/Report.tsx
+++ b/src/app/(main)/reports/[reportId]/Report.tsx
@@ -1,20 +1,22 @@
-'use client';
 import { createContext, ReactNode } from 'react';
 import { Loading } from 'react-basics';
+import classNames from 'classnames';
 import { useReport } from 'components/hooks';
 import styles from './Report.module.css';
-import classNames from 'classnames';
 
 export const ReportContext = createContext(null);
 
-export interface ReportProps {
+export function Report({
+  reportId,
+  defaultParameters,
+  children,
+  className,
+}: {
   reportId: string;
   defaultParameters: { [key: string]: any };
   children: ReactNode;
   className?: string;
-}
-
-export function Report({ reportId, defaultParameters, children, className }: ReportProps) {
+}) {
   const report = useReport(reportId, defaultParameters);
 
   if (!report) {
diff --git a/src/app/(main)/reports/[reportId]/ReportBody.tsx b/src/app/(main)/reports/[reportId]/ReportBody.tsx
index de7b0665..6f4627f6 100644
--- a/src/app/(main)/reports/[reportId]/ReportBody.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportBody.tsx
@@ -1,4 +1,3 @@
-'use client';
 import styles from './ReportBody.module.css';
 import { useContext } from 'react';
 import { ReportContext } from './Report';
diff --git a/src/app/(main)/reports/[reportId]/ReportDetails.tsx b/src/app/(main)/reports/[reportId]/ReportDetails.tsx
index e4d4688a..40d58e92 100644
--- a/src/app/(main)/reports/[reportId]/ReportDetails.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportDetails.tsx
@@ -1,4 +1,3 @@
-'use client';
 import FunnelReport from '../funnel/FunnelReport';
 import EventDataReport from '../event-data/EventDataReport';
 import InsightsReport from '../insights/InsightsReport';
diff --git a/src/app/(main)/reports/[reportId]/ReportHeader.tsx b/src/app/(main)/reports/[reportId]/ReportHeader.tsx
index 90b776b0..69ed46a9 100644
--- a/src/app/(main)/reports/[reportId]/ReportHeader.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.tsx b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
index 0f6684a5..9478a903 100644
--- a/src/app/(main)/reports/[reportId]/ReportMenu.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
@@ -1,4 +1,3 @@
-'use client';
 import styles from './ReportMenu.module.css';
 import { useContext } from 'react';
 import { ReportContext } from './Report';
diff --git a/src/app/(main)/reports/[reportId]/ReportPage.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
new file mode 100644
index 00000000..227efa8d
--- /dev/null
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import ReportDetails from './ReportDetails';
+
+export default function ReportPage({ reportId }) {
+  return <ReportDetails reportId={reportId} />;
+}
diff --git a/src/app/(main)/reports/[reportId]/page.tsx b/src/app/(main)/reports/[reportId]/page.tsx
index 179ee2ff..12bf553a 100644
--- a/src/app/(main)/reports/[reportId]/page.tsx
+++ b/src/app/(main)/reports/[reportId]/page.tsx
@@ -1,12 +1,8 @@
-import ReportDetails from './ReportDetails';
 import { Metadata } from 'next';
+import ReportPage from './ReportPage';
 
-export default function ReportDetailsPage({ params: { reportId } }) {
-  if (!reportId) {
-    return null;
-  }
-
-  return <ReportDetails reportId={reportId} />;
+export default function ({ params: { reportId } }) {
+  return <ReportPage reportId={reportId} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/create/ReportCreatePage.tsx b/src/app/(main)/reports/create/ReportCreatePage.tsx
new file mode 100644
index 00000000..ff3a761a
--- /dev/null
+++ b/src/app/(main)/reports/create/ReportCreatePage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import ReportTemplates from './ReportTemplates';
+
+export default function ReportCreatePage() {
+  return <ReportTemplates />;
+}
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx
index 3fa58b50..ae84046a 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/src/app/(main)/reports/create/ReportTemplates.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Link from 'next/link';
 import { Button, Icons, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -8,30 +7,6 @@ import Magnet from 'assets/magnet.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages, useTeamUrl } from 'components/hooks';
 
-function ReportItem({ title, description, url, icon }) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <div className={styles.report}>
-      <div className={styles.title}>
-        <Icon size="lg">{icon}</Icon>
-        <Text>{title}</Text>
-      </div>
-      <div className={styles.description}>{description}</div>
-      <div className={styles.buttons}>
-        <Link href={url}>
-          <Button variant="primary">
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            <Text>{formatMessage(labels.create)}</Text>
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
-}
-
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
@@ -71,4 +46,28 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
   );
 }
 
+function ReportItem({ title, description, url, icon }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.report}>
+      <div className={styles.title}>
+        <Icon size="lg">{icon}</Icon>
+        <Text>{title}</Text>
+      </div>
+      <div className={styles.description}>{description}</div>
+      <div className={styles.buttons}>
+        <Link href={url}>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.create)}</Text>
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
 export default ReportTemplates;
diff --git a/src/app/(main)/reports/create/page.tsx b/src/app/(main)/reports/create/page.tsx
index 8726f435..4a592845 100644
--- a/src/app/(main)/reports/create/page.tsx
+++ b/src/app/(main)/reports/create/page.tsx
@@ -1,8 +1,8 @@
-import ReportTemplates from './ReportTemplates';
+import ReportCreatePage from './ReportCreatePage';
 import { Metadata } from 'next';
 
-export default function ReportsCreatePage() {
-  return <ReportTemplates />;
+export default function () {
+  return <ReportCreatePage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/event-data/EventDataParameters.tsx b/src/app/(main)/reports/event-data/EventDataParameters.tsx
index 44f3e8e3..2ee77a43 100644
--- a/src/app/(main)/reports/event-data/EventDataParameters.tsx
+++ b/src/app/(main)/reports/event-data/EventDataParameters.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 import Empty from 'components/common/Empty';
diff --git a/src/app/(main)/reports/event-data/EventDataReport.tsx b/src/app/(main)/reports/event-data/EventDataReport.tsx
index f4d674e5..fb786b31 100644
--- a/src/app/(main)/reports/event-data/EventDataReport.tsx
+++ b/src/app/(main)/reports/event-data/EventDataReport.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
diff --git a/src/app/(main)/reports/event-data/EventDataReportPage.tsx b/src/app/(main)/reports/event-data/EventDataReportPage.tsx
new file mode 100644
index 00000000..8276acfb
--- /dev/null
+++ b/src/app/(main)/reports/event-data/EventDataReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import EventDataReport from './EventDataReport';
+
+export default function EventDataReportPage() {
+  return <EventDataReport />;
+}
diff --git a/src/app/(main)/reports/event-data/EventDataTable.tsx b/src/app/(main)/reports/event-data/EventDataTable.tsx
index cf593759..740cbce4 100644
--- a/src/app/(main)/reports/event-data/EventDataTable.tsx
+++ b/src/app/(main)/reports/event-data/EventDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/reports/event-data/page.tsx b/src/app/(main)/reports/event-data/page.tsx
index fe0fdb55..1f2936e6 100644
--- a/src/app/(main)/reports/event-data/page.tsx
+++ b/src/app/(main)/reports/event-data/page.tsx
@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import EventDataReport from './EventDataReport';
+import EventDataReportPage from './EventDataReportPage';
 
-export default function EventDataReportPage() {
-  return <EventDataReport />;
+export default function () {
+  return <EventDataReportPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/funnel/FunnelChart.tsx b/src/app/(main)/reports/funnel/FunnelChart.tsx
index e643967f..38373517 100644
--- a/src/app/(main)/reports/funnel/FunnelChart.tsx
+++ b/src/app/(main)/reports/funnel/FunnelChart.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
 import { useMessages, useTheme } from 'components/hooks';
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx
index 5a3bdada..c4f8f384 100644
--- a/src/app/(main)/reports/funnel/FunnelParameters.tsx
+++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import {
diff --git a/src/app/(main)/reports/funnel/FunnelReport.tsx b/src/app/(main)/reports/funnel/FunnelReport.tsx
index 4013f073..1fd1a80f 100644
--- a/src/app/(main)/reports/funnel/FunnelReport.tsx
+++ b/src/app/(main)/reports/funnel/FunnelReport.tsx
@@ -1,4 +1,3 @@
-'use client';
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
diff --git a/src/app/(main)/reports/funnel/FunnelReportPage.tsx b/src/app/(main)/reports/funnel/FunnelReportPage.tsx
new file mode 100644
index 00000000..a114a8cc
--- /dev/null
+++ b/src/app/(main)/reports/funnel/FunnelReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import FunnelReport from './FunnelReport';
+
+export default function FunnelReportPage() {
+  return <FunnelReport />;
+}
diff --git a/src/app/(main)/reports/funnel/FunnelTable.tsx b/src/app/(main)/reports/funnel/FunnelTable.tsx
index d74bdeb4..1fe1fdd9 100644
--- a/src/app/(main)/reports/funnel/FunnelTable.tsx
+++ b/src/app/(main)/reports/funnel/FunnelTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/reports/funnel/UrlAddForm.tsx b/src/app/(main)/reports/funnel/UrlAddForm.tsx
index 9aa342f7..88c27ae9 100644
--- a/src/app/(main)/reports/funnel/UrlAddForm.tsx
+++ b/src/app/(main)/reports/funnel/UrlAddForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { useMessages } from 'components/hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
diff --git a/src/app/(main)/reports/funnel/page.tsx b/src/app/(main)/reports/funnel/page.tsx
index 7a2f2a5a..e00cfd51 100644
--- a/src/app/(main)/reports/funnel/page.tsx
+++ b/src/app/(main)/reports/funnel/page.tsx
@@ -1,8 +1,8 @@
-import FunnelReport from './FunnelReport';
+import FunnelReportPage from './FunnelReportPage';
 import { Metadata } from 'next';
 
-export default function FunnelReportPage() {
-  return <FunnelReport />;
+export default function () {
+  return <FunnelReportPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/insights/InsightsParameters.tsx b/src/app/(main)/reports/insights/InsightsParameters.tsx
index 5adfc58e..a5a98dd2 100644
--- a/src/app/(main)/reports/insights/InsightsParameters.tsx
+++ b/src/app/(main)/reports/insights/InsightsParameters.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { useFormat, useMessages, useFilters } from 'components/hooks';
 import {
diff --git a/src/app/(main)/reports/insights/InsightsReport.tsx b/src/app/(main)/reports/insights/InsightsReport.tsx
index 3c199003..adfbbd20 100644
--- a/src/app/(main)/reports/insights/InsightsReport.tsx
+++ b/src/app/(main)/reports/insights/InsightsReport.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
diff --git a/src/app/(main)/reports/insights/InsightsReportPage.tsx b/src/app/(main)/reports/insights/InsightsReportPage.tsx
new file mode 100644
index 00000000..7525b767
--- /dev/null
+++ b/src/app/(main)/reports/insights/InsightsReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import InsightsReport from './InsightsReport';
+
+export default function InsightsReportPage() {
+  return <InsightsReport />;
+}
diff --git a/src/app/(main)/reports/insights/InsightsTable.tsx b/src/app/(main)/reports/insights/InsightsTable.tsx
index f69d8ccc..2cccc24c 100644
--- a/src/app/(main)/reports/insights/InsightsTable.tsx
+++ b/src/app/(main)/reports/insights/InsightsTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
diff --git a/src/app/(main)/reports/insights/page.tsx b/src/app/(main)/reports/insights/page.tsx
index e09565c0..cb3b9016 100644
--- a/src/app/(main)/reports/insights/page.tsx
+++ b/src/app/(main)/reports/insights/page.tsx
@@ -1,8 +1,8 @@
-import InsightsReport from './InsightsReport';
+import InsightsReportPage from './InsightsReportPage';
 import { Metadata } from 'next';
 
-export default function InsightsReportPage() {
-  return <InsightsReport />;
+export default function () {
+  return <InsightsReportPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/reports/page.tsx b/src/app/(main)/reports/page.tsx
index 0dc380a9..44a034a0 100644
--- a/src/app/(main)/reports/page.tsx
+++ b/src/app/(main)/reports/page.tsx
@@ -1,14 +1,10 @@
-import ReportsHeader from './ReportsHeader';
-import ReportsDataTable from './ReportsDataTable';
+import ReportsPage from './ReportsPage';
+import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }: { params: { teamId: string } }) {
-  return (
-    <>
-      <ReportsHeader />
-      <ReportsDataTable teamId={teamId} />
-    </>
-  );
+  return <ReportsPage teamId={teamId} />;
 }
-export const metadata = {
+
+export const metadata: Metadata = {
   title: 'Reports | Umami',
 };
diff --git a/src/app/(main)/reports/retention/RetentionParameters.tsx b/src/app/(main)/reports/retention/RetentionParameters.tsx
index 16955338..9bc1c548 100644
--- a/src/app/(main)/reports/retention/RetentionParameters.tsx
+++ b/src/app/(main)/reports/retention/RetentionParameters.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
diff --git a/src/app/(main)/reports/retention/RetentionReport.tsx b/src/app/(main)/reports/retention/RetentionReport.tsx
index f02e5bb1..81b565dc 100644
--- a/src/app/(main)/reports/retention/RetentionReport.tsx
+++ b/src/app/(main)/reports/retention/RetentionReport.tsx
@@ -1,4 +1,3 @@
-'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
 import Report from '../[reportId]/Report';
diff --git a/src/app/(main)/reports/retention/RetentionReportPage.tsx b/src/app/(main)/reports/retention/RetentionReportPage.tsx
new file mode 100644
index 00000000..f2500fb2
--- /dev/null
+++ b/src/app/(main)/reports/retention/RetentionReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import RetentionReport from './RetentionReport';
+
+export default function RetentionReportPage() {
+  return <RetentionReport />;
+}
diff --git a/src/app/(main)/reports/retention/RetentionTable.tsx b/src/app/(main)/reports/retention/RetentionTable.tsx
index b4384893..171c5bd3 100644
--- a/src/app/(main)/reports/retention/RetentionTable.tsx
+++ b/src/app/(main)/reports/retention/RetentionTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import classNames from 'classnames';
 import { ReportContext } from '../[reportId]/Report';
diff --git a/src/app/(main)/reports/retention/page.tsx b/src/app/(main)/reports/retention/page.tsx
index 41784372..81071403 100644
--- a/src/app/(main)/reports/retention/page.tsx
+++ b/src/app/(main)/reports/retention/page.tsx
@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import RetentionReport from './RetentionReport';
+import RetentionReportPage from './RetentionReportPage';
 
-export default function RetentionReportPage() {
-  return <RetentionReport />;
+export default function () {
+  return <RetentionReportPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/settings/Settings.tsx b/src/app/(main)/settings/SettingsLayout.tsx
similarity index 72%
rename from src/app/(main)/settings/Settings.tsx
rename to src/app/(main)/settings/SettingsLayout.tsx
index 85e9caee..28e9a074 100644
--- a/src/app/(main)/settings/Settings.tsx
+++ b/src/app/(main)/settings/SettingsLayout.tsx
@@ -1,9 +1,9 @@
 'use client';
 import { ReactNode } from 'react';
 import { useLogin, useMessages } from 'components/hooks';
-import SettingsLayout from 'components/layout/SettingsLayout';
+import MenuLayout from 'components/layout/MenuLayout';
 
-export default function Settings({ children }: { children: ReactNode }) {
+export default function SettingsLayout({ children }: { children: ReactNode }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
 
@@ -21,5 +21,5 @@ export default function Settings({ children }: { children: ReactNode }) {
     },
   ].filter(n => n);
 
-  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+  return <MenuLayout items={items}>{children}</MenuLayout>;
 }
diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx
index 6829e966..eb382e3b 100644
--- a/src/app/(main)/settings/layout.tsx
+++ b/src/app/(main)/settings/layout.tsx
@@ -1,5 +1,5 @@
-import Settings from './Settings';
+import SettingsLayout from './SettingsLayout';
 
 export default function ({ children }) {
-  return <Settings>{children}</Settings>;
+  return <SettingsLayout>{children}</SettingsLayout>;
 }
diff --git a/src/app/(main)/settings/teams/TeamAddForm.tsx b/src/app/(main)/settings/teams/TeamAddForm.tsx
index a3caf25f..9bcf7840 100644
--- a/src/app/(main)/settings/teams/TeamAddForm.tsx
+++ b/src/app/(main)/settings/teams/TeamAddForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,
diff --git a/src/app/(main)/settings/teams/TeamJoinForm.tsx b/src/app/(main)/settings/teams/TeamJoinForm.tsx
index b448a368..385ff1df 100644
--- a/src/app/(main)/settings/teams/TeamJoinForm.tsx
+++ b/src/app/(main)/settings/teams/TeamJoinForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useRef } from 'react';
 import {
   Form,
diff --git a/src/app/(main)/settings/teams/TeamLeaveButton.tsx b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
index db9dc050..8b246a3b 100644
--- a/src/app/(main)/settings/teams/TeamLeaveButton.tsx
+++ b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useMessages, useLocale, useLogin } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';
diff --git a/src/app/(main)/settings/teams/TeamLeaveForm.tsx b/src/app/(main)/settings/teams/TeamLeaveForm.tsx
index eba448f1..466fbab3 100644
--- a/src/app/(main)/settings/teams/TeamLeaveForm.tsx
+++ b/src/app/(main)/settings/teams/TeamLeaveForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import ConfirmationForm from 'components/common/ConfirmationForm';
diff --git a/src/app/(main)/settings/teams/TeamsAddButton.tsx b/src/app/(main)/settings/teams/TeamsAddButton.tsx
index 94519358..871cdb76 100644
--- a/src/app/(main)/settings/teams/TeamsAddButton.tsx
+++ b/src/app/(main)/settings/teams/TeamsAddButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/settings/teams/TeamsDataTable.tsx b/src/app/(main)/settings/teams/TeamsDataTable.tsx
index c48617f2..1890af8a 100644
--- a/src/app/(main)/settings/teams/TeamsDataTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import { useTeams } from 'components/hooks';
diff --git a/src/app/(main)/settings/teams/TeamsHeader.tsx b/src/app/(main)/settings/teams/TeamsHeader.tsx
index 0148d97b..4c040691 100644
--- a/src/app/(main)/settings/teams/TeamsHeader.tsx
+++ b/src/app/(main)/settings/teams/TeamsHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
diff --git a/src/app/(main)/settings/teams/TeamsJoinButton.tsx b/src/app/(main)/settings/teams/TeamsJoinButton.tsx
index 04bb9824..45a2142e 100644
--- a/src/app/(main)/settings/teams/TeamsJoinButton.tsx
+++ b/src/app/(main)/settings/teams/TeamsJoinButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/settings/teams/TeamsPage.tsx b/src/app/(main)/settings/teams/TeamsPage.tsx
new file mode 100644
index 00000000..33ddda3d
--- /dev/null
+++ b/src/app/(main)/settings/teams/TeamsPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+import TeamsDataTable from './TeamsDataTable';
+import TeamsHeader from './TeamsHeader';
+
+export default function TeamsPage() {
+  return (
+    <>
+      <TeamsHeader />
+      <TeamsDataTable />
+    </>
+  );
+}
diff --git a/src/app/(main)/settings/teams/TeamsTable.tsx b/src/app/(main)/settings/teams/TeamsTable.tsx
index 76778271..787d51c7 100644
--- a/src/app/(main)/settings/teams/TeamsTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsTable.tsx
@@ -1,13 +1,11 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
-import { useMessages, useLogin } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { ROLES } from 'lib/constants';
 import LinkButton from 'components/common/LinkButton';
 
 export function TeamsTable({
   data = [],
-  allowEdit = false,
   showActions = true,
 }: {
   data: any[];
@@ -15,7 +13,6 @@ export function TeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (
@@ -30,34 +27,22 @@ export function TeamsTable({
       <GridColumn name="members" label={formatMessage(labels.members)}>
         {row => row._count.teamUser}
       </GridColumn>
-      <GridColumn name="action" label=" " alignment="end">
-        {row => {
-          const { id, teamUser } = row;
-          const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
-          const isOwner = user.id === owner?.userId;
+      {showActions && (
+        <GridColumn name="action" label=" " alignment="end">
+          {row => {
+            const { id } = row;
 
-          return (
-            showActions && (
-              <>
-                {allowEdit && isOwner && (
-                  <LinkButton href={`/teams/${id}/settings`}>
-                    <Icon>
-                      <Icons.Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </LinkButton>
-                )}
-                <LinkButton href={`/teams/${id}`}>
-                  <Icon>
-                    <Icons.Change />
-                  </Icon>
-                  <Text>{formatMessage(labels.switch)}</Text>
-                </LinkButton>
-              </>
-            )
-          );
-        }}
-      </GridColumn>
+            return (
+              <LinkButton href={`/teams/${id}/settings`}>
+                <Icon>
+                  <Icons.ArrowRight />
+                </Icon>
+                <Text>{formatMessage(labels.view)}</Text>
+              </LinkButton>
+            );
+          }}
+        </GridColumn>
+      )}
     </GridTable>
   );
 }
diff --git a/src/app/(main)/settings/teams/WebsiteTags.tsx b/src/app/(main)/settings/teams/WebsiteTags.tsx
index 9e71e3d6..4a0f109d 100644
--- a/src/app/(main)/settings/teams/WebsiteTags.tsx
+++ b/src/app/(main)/settings/teams/WebsiteTags.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './WebsiteTags.module.css';
 
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx
similarity index 98%
rename from src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx
rename to src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx
index bae0e723..0b4ca500 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { touch } from 'store/modified';
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamMembers.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
similarity index 70%
rename from src/app/(main)/settings/teams/[teamId]/TeamMembers.tsx
rename to src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
index 1fedc55f..996283a7 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamMembers.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
@@ -1,9 +1,14 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import { useTeamMembers } from 'components/hooks';
 
-export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+export function TeamMembersDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
   const queryResult = useTeamMembers(teamId);
 
   return (
@@ -13,4 +18,4 @@ export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit:
   );
 }
 
-export default TeamMembers;
+export default TeamMembersDataTable;
diff --git a/src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx
new file mode 100644
index 00000000..ef0e12d1
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx
@@ -0,0 +1,18 @@
+'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamMembersDataTable from './TeamMembersDataTable';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <TeamProvider teamId={teamId}>
+      <PageHeader title={formatMessage(labels.members)} />
+      <TeamMembersDataTable teamId={teamId} allowEdit={true} />
+    </TeamProvider>
+  );
+}
+
+export default TeamMembersPage;
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamMembersTable.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx
similarity index 98%
rename from src/app/(main)/settings/teams/[teamId]/TeamMembersTable.tsx
rename to src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx
index aceb5894..d993bbc0 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamMembersTable.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
diff --git a/src/app/(main)/settings/teams/[teamId]/members/page.tsx b/src/app/(main)/settings/teams/[teamId]/members/page.tsx
new file mode 100644
index 00000000..e36e9214
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/members/page.tsx
@@ -0,0 +1,10 @@
+import TeamMembersPage from './TeamMembersPage';
+import { Metadata } from 'next';
+
+export default function ({ params: { teamId } }) {
+  return <TeamMembersPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Team members - Umami',
+};
diff --git a/src/app/(main)/settings/teams/[teamId]/page.tsx b/src/app/(main)/settings/teams/[teamId]/page.tsx
deleted file mode 100644
index ef37b536..00000000
--- a/src/app/(main)/settings/teams/[teamId]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import TeamSettings from './TeamSettings';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
-
-export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamSettings teamId={teamId} />
-    </TeamProvider>
-  );
-}
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamData.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
similarity index 81%
rename from src/app/(main)/settings/teams/[teamId]/TeamData.tsx
rename to src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
index facee764..582012d4 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamData.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
@@ -1,9 +1,8 @@
-'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import TeamDeleteForm from '../TeamDeleteForm';
+import TeamDeleteForm from './TeamDeleteForm';
 
-export function TeamData({ teamId }: { teamId: string }) {
+export function TeamAdmin({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
 
   return (
@@ -21,4 +20,4 @@ export function TeamData({ teamId }: { teamId: string }) {
   );
 }
 
-export default TeamData;
+export default TeamAdmin;
diff --git a/src/app/(main)/settings/teams/TeamDeleteForm.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx
similarity index 98%
rename from src/app/(main)/settings/teams/TeamDeleteForm.tsx
rename to src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx
index aa2b1d3f..33694495 100644
--- a/src/app/(main)/settings/teams/TeamDeleteForm.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamSettings.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx
similarity index 57%
rename from src/app/(main)/settings/teams/[teamId]/TeamSettings.tsx
rename to src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx
index 9ebfc973..4162e83f 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamSettings.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useState } from 'react';
 import { Item, Tabs, Flexbox, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -6,13 +5,11 @@ import { ROLES } from 'lib/constants';
 import Icons from 'components/icons';
 import { useLogin, useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
-import TeamMembers from './TeamMembers';
-import TeamWebsites from './TeamWebsites';
-import TeamData from './TeamData';
+import TeamAdmin from './TeamAdmin';
 import LinkButton from 'components/common/LinkButton';
 import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
-export function TeamSettings({ teamId }: { teamId: string }) {
+export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -25,25 +22,23 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   return (
     <Flexbox direction="column">
       <PageHeader title={team?.name} icon={<Icons.Users />}>
-        <LinkButton href={`/teams/${teamId}`} variant="primary">
-          <Icon>
-            <Icons.Change />
-          </Icon>
-          <Text>{formatMessage(labels.view)}</Text>
-        </LinkButton>
+        {!canEdit && (
+          <LinkButton href={`/teams/${teamId}`}>
+            <Icon>
+              <Icons.Logout />
+            </Icon>
+            <Text>{formatMessage(labels.leaveTeam)}</Text>
+          </LinkButton>
+        )}
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
-        <Item key="members">{formatMessage(labels.members)}</Item>
-        <Item key="websites">{formatMessage(labels.websites)}</Item>
-        <Item key="data">{formatMessage(labels.data)}</Item>
+        <Item key="admin">{formatMessage(labels.admin)}</Item>
       </Tabs>
       {tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
-      {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
-      {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
-      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+      {canEdit && tab === 'admin' && <TeamAdmin teamId={teamId} />}
     </Flexbox>
   );
 }
 
-export default TeamSettings;
+export default TeamDetails;
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx
similarity index 99%
rename from src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx
rename to src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx
index 7e158191..cee3c3f1 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   SubmitButton,
   Form,
diff --git a/src/app/(main)/settings/teams/[teamId]/team/TeamPage.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamPage.tsx
new file mode 100644
index 00000000..82abcf8d
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamPage.tsx
@@ -0,0 +1,13 @@
+'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamDetails from './TeamDetails';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamDetails teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export default TeamMembersPage;
diff --git a/src/app/(main)/settings/teams/[teamId]/team/page.tsx b/src/app/(main)/settings/teams/[teamId]/team/page.tsx
new file mode 100644
index 00000000..de2c9657
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/team/page.tsx
@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import TeamPage from './TeamPage';
+
+export default function ({ params: { teamId } }) {
+  return <TeamPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams Settings - Umami',
+};
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx
similarity index 98%
rename from src/app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton.tsx
rename to src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx
index 843b76d3..336e151a 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamWebsites.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
similarity index 70%
rename from src/app/(main)/settings/teams/[teamId]/TeamWebsites.tsx
rename to src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
index 0bd49883..9e2985d4 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamWebsites.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
@@ -1,9 +1,14 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useTeamWebsites } from 'components/hooks';
 import TeamWebsitesTable from './TeamWebsitesTable';
 
-export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+export function TeamWebsitesDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
   const queryResult = useTeamWebsites(teamId);
 
   return (
@@ -13,4 +18,4 @@ export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit:
   );
 }
 
-export default TeamWebsites;
+export default TeamWebsitesDataTable;
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx
new file mode 100644
index 00000000..56582c04
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx
@@ -0,0 +1,18 @@
+'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamWebsitesDataTable from './TeamWebsitesDataTable';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function TeamWebsitesPage({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <TeamProvider teamId={teamId}>
+      <PageHeader title={formatMessage(labels.websites)} />
+      <TeamWebsitesDataTable teamId={teamId} allowEdit={true} />
+    </TeamProvider>
+  );
+}
+
+export default TeamWebsitesPage;
diff --git a/src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
similarity index 96%
rename from src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx
rename to src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
index fdd0169a..b07f3dbf 100644
--- a/src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
@@ -35,7 +34,7 @@ export function TeamWebsitesTable({
               )}
               <LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
                 <Icon>
-                  <Icons.Change />
+                  <Icons.ArrowRight />
                 </Icon>
                 <Text>{formatMessage(labels.view)}</Text>
               </LinkButton>
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/page.tsx b/src/app/(main)/settings/teams/[teamId]/websites/page.tsx
new file mode 100644
index 00000000..ac4eb94f
--- /dev/null
+++ b/src/app/(main)/settings/teams/[teamId]/websites/page.tsx
@@ -0,0 +1,10 @@
+import TeamWebsitesPage from './TeamWebsitesPage';
+import { Metadata } from 'next';
+
+export default function ({ params: { teamId } }) {
+  return <TeamWebsitesPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams Websites - Umami',
+};
diff --git a/src/app/(main)/settings/teams/page.tsx b/src/app/(main)/settings/teams/page.tsx
index 98ce95fb..e45d6f2d 100644
--- a/src/app/(main)/settings/teams/page.tsx
+++ b/src/app/(main)/settings/teams/page.tsx
@@ -1,14 +1,8 @@
 import { Metadata } from 'next';
-import TeamsDataTable from './TeamsDataTable';
-import TeamsHeader from './TeamsHeader';
+import TeamsPage from './TeamsPage';
 
 export default function () {
-  return (
-    <>
-      <TeamsHeader />
-      <TeamsDataTable />
-    </>
-  );
+  return <TeamsPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/settings/users/UserAddButton.tsx b/src/app/(main)/settings/users/UserAddButton.tsx
index 57f2ebc5..5746ff2a 100644
--- a/src/app/(main)/settings/users/UserAddButton.tsx
+++ b/src/app/(main)/settings/users/UserAddButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
 import UserAddForm from './UserAddForm';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/settings/users/UserAddForm.tsx b/src/app/(main)/settings/users/UserAddForm.tsx
index 2781e743..7ea72007 100644
--- a/src/app/(main)/settings/users/UserAddForm.tsx
+++ b/src/app/(main)/settings/users/UserAddForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Dropdown,
   Item,
@@ -30,12 +29,12 @@ export function UserAddForm({ onSave, onClose }) {
     });
   };
 
-  const renderValue = value => {
+  const renderValue = (value: string) => {
     if (value === ROLES.user) {
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
+      return formatMessage(labels.administrator);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -59,7 +58,7 @@ export function UserAddForm({ onSave, onClose }) {
           <Dropdown renderValue={renderValue}>
             <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>
diff --git a/src/app/(main)/settings/users/UserDeleteButton.tsx b/src/app/(main)/settings/users/UserDeleteButton.tsx
index cdfde6ae..9f1f8459 100644
--- a/src/app/(main)/settings/users/UserDeleteButton.tsx
+++ b/src/app/(main)/settings/users/UserDeleteButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import UserDeleteForm from './UserDeleteForm';
diff --git a/src/app/(main)/settings/users/UserDeleteForm.tsx b/src/app/(main)/settings/users/UserDeleteForm.tsx
index 0cce8d6d..97caf644 100644
--- a/src/app/(main)/settings/users/UserDeleteForm.tsx
+++ b/src/app/(main)/settings/users/UserDeleteForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import ConfirmationForm from 'components/common/ConfirmationForm';
 import { touch } from 'store/modified';
diff --git a/src/app/(main)/settings/users/UserEditForm.tsx b/src/app/(main)/settings/users/UserEditForm.tsx
index af2b7534..d904be47 100644
--- a/src/app/(main)/settings/users/UserEditForm.tsx
+++ b/src/app/(main)/settings/users/UserEditForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Dropdown,
   Item,
@@ -9,19 +8,13 @@ import {
   TextField,
   SubmitButton,
   PasswordField,
+  useToasts,
 } from 'react-basics';
 import { useApi, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
+import { useRef } from 'react';
 
-export function UserEditForm({
-  userId,
-  data,
-  onSave,
-}: {
-  userId: string;
-  data: object;
-  onSave?: (data: any) => void;
-}) {
+export function UserEditForm({ userId, data }: { userId: string; data: object }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
@@ -35,11 +28,14 @@ export function UserEditForm({
       role: string;
     }) => post(`/users/${userId}`, { username, password, role }),
   });
+  const ref = useRef(null);
+  const { showToast } = useToasts();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        onSave(data);
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
+        ref.current.reset(data);
       },
     });
   };
@@ -49,7 +45,7 @@ export function UserEditForm({
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
+      return formatMessage(labels.administrator);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -57,7 +53,7 @@ export function UserEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
       <FormRow label={formatMessage(labels.username)}>
         <FormInput name="username">
           <TextField />
@@ -78,7 +74,7 @@ export function UserEditForm({
           <Dropdown renderValue={renderValue}>
             <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>
diff --git a/src/app/(main)/settings/users/UsersDataTable.tsx b/src/app/(main)/settings/users/UsersDataTable.tsx
index a8e46cda..cfff4e71 100644
--- a/src/app/(main)/settings/users/UsersDataTable.tsx
+++ b/src/app/(main)/settings/users/UsersDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useUsers } from 'components/hooks';
 import UsersTable from './UsersTable';
diff --git a/src/app/(main)/settings/users/UsersHeader.tsx b/src/app/(main)/settings/users/UsersHeader.tsx
index 20c5f898..6f4387c7 100644
--- a/src/app/(main)/settings/users/UsersHeader.tsx
+++ b/src/app/(main)/settings/users/UsersHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 import UserAddButton from './UserAddButton';
diff --git a/src/app/(main)/settings/users/UsersPage.tsx b/src/app/(main)/settings/users/UsersPage.tsx
new file mode 100644
index 00000000..348c5a33
--- /dev/null
+++ b/src/app/(main)/settings/users/UsersPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+import UsersDataTable from './UsersDataTable';
+import UsersHeader from './UsersHeader';
+
+export default function UsersPage() {
+  return (
+    <>
+      <UsersHeader />
+      <UsersDataTable />
+    </>
+  );
+}
diff --git a/src/app/(main)/settings/users/UsersTable.tsx b/src/app/(main)/settings/users/UsersTable.tsx
index 523bd01c..88effa54 100644
--- a/src/app/(main)/settings/users/UsersTable.tsx
+++ b/src/app/(main)/settings/users/UsersTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import { ROLES } from 'lib/constants';
diff --git a/src/app/(main)/settings/users/[userId]/UserPage.tsx b/src/app/(main)/settings/users/[userId]/UserPage.tsx
new file mode 100644
index 00000000..285433eb
--- /dev/null
+++ b/src/app/(main)/settings/users/[userId]/UserPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import UserSettings from './UserSettings';
+
+export default function ({ userId }: { userId: string }) {
+  return <UserSettings userId={userId} />;
+}
diff --git a/src/app/(main)/settings/users/[userId]/UserSettings.tsx b/src/app/(main)/settings/users/[userId]/UserSettings.tsx
index eda38089..50a36487 100644
--- a/src/app/(main)/settings/users/[userId]/UserSettings.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserSettings.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Key, useState } from 'react';
 import { Item, Loading, Tabs } from 'react-basics';
 import Icons from 'components/icons';
diff --git a/src/app/(main)/settings/users/[userId]/UserWebsites.tsx b/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
index 429195cd..bfc6f74b 100644
--- a/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
@@ -1,4 +1,3 @@
-'use client';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
 import DataTable from 'components/common/DataTable';
 import { useWebsites } from 'components/hooks';
diff --git a/src/app/(main)/settings/users/[userId]/page.tsx b/src/app/(main)/settings/users/[userId]/page.tsx
index 2e2e4137..414ad483 100644
--- a/src/app/(main)/settings/users/[userId]/page.tsx
+++ b/src/app/(main)/settings/users/[userId]/page.tsx
@@ -1,5 +1,10 @@
-import UserSettings from './UserSettings';
+import UserPage from './UserPage';
+import { Metadata } from 'next';
 
 export default function ({ params: { userId } }) {
-  return <UserSettings userId={userId} />;
+  return <UserPage userId={userId} />;
 }
+
+export const metadata: Metadata = {
+  title: 'User Settings - Umami',
+};
diff --git a/src/app/(main)/settings/users/page.tsx b/src/app/(main)/settings/users/page.tsx
index 0be95a0d..fa63cf18 100644
--- a/src/app/(main)/settings/users/page.tsx
+++ b/src/app/(main)/settings/users/page.tsx
@@ -1,14 +1,8 @@
 import { Metadata } from 'next';
-import UsersDataTable from './UsersDataTable';
-import UsersHeader from './UsersHeader';
+import UsersPage from './UsersPage';
 
 export default function () {
-  return (
-    <>
-      <UsersHeader />
-      <UsersDataTable />
-    </>
-  );
+  return <UsersPage />;
 }
 export const metadata: Metadata = {
   title: 'Users | Umami',
diff --git a/src/app/(main)/settings/websites/WebsiteAddButton.tsx b/src/app/(main)/settings/websites/WebsiteAddButton.tsx
index 90fc15b1..35e9bbc3 100644
--- a/src/app/(main)/settings/websites/WebsiteAddButton.tsx
+++ b/src/app/(main)/settings/websites/WebsiteAddButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/settings/websites/WebsiteAddForm.tsx b/src/app/(main)/settings/websites/WebsiteAddForm.tsx
index 55054cd4..88cbb4ff 100644
--- a/src/app/(main)/settings/websites/WebsiteAddForm.tsx
+++ b/src/app/(main)/settings/websites/WebsiteAddForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,
diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.tsx b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
index 18502244..a9d99f9a 100644
--- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
 import DataTable from 'components/common/DataTable';
diff --git a/src/app/(main)/settings/websites/WebsitesHeader.tsx b/src/app/(main)/settings/websites/WebsitesHeader.tsx
index 7809b0c4..e0d3860a 100644
--- a/src/app/(main)/settings/websites/WebsitesHeader.tsx
+++ b/src/app/(main)/settings/websites/WebsitesHeader.tsx
@@ -1,19 +1,18 @@
-'use client';
 import { useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';
 
 export interface WebsitesHeaderProps {
   teamId?: string;
-  showActions?: boolean;
+  allowCreate?: boolean;
 }
 
-export function WebsitesHeader({ teamId, showActions = true }: WebsitesHeaderProps) {
+export function WebsitesHeader({ teamId, allowCreate = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>
-      {!process.env.cloudMode && showActions && <WebsiteAddButton teamId={teamId} />}
+      {allowCreate && !process.env.cloudMode && <WebsiteAddButton teamId={teamId} />}
     </PageHeader>
   );
 }
diff --git a/src/app/(main)/settings/websites/Websites.tsx b/src/app/(main)/settings/websites/WebsitesPage.tsx
similarity index 70%
rename from src/app/(main)/settings/websites/Websites.tsx
rename to src/app/(main)/settings/websites/WebsitesPage.tsx
index ffa197ad..4de8f105 100644
--- a/src/app/(main)/settings/websites/Websites.tsx
+++ b/src/app/(main)/settings/websites/WebsitesPage.tsx
@@ -3,12 +3,12 @@ import { useLogin } from 'components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
 
-export default function Websites({ teamId }: { teamId: string }) {
+export default function WebsitesPage({ teamId }: { teamId: string }) {
   const { user } = useLogin();
 
   return (
     <>
-      <WebsitesHeader teamId={teamId} showActions={user.role !== 'view-only'} />
+      <WebsitesHeader teamId={teamId} allowCreate={user.role !== 'view-only'} />
       <WebsitesDataTable teamId={teamId} userId={user.id} allowEdit={true} />
     </>
   );
diff --git a/src/app/(main)/settings/websites/WebsitesTable.tsx b/src/app/(main)/settings/websites/WebsitesTable.tsx
index 1f1353c0..cbd5e3a7 100644
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { useMessages, useTeamUrl } from 'components/hooks';
diff --git a/src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx b/src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx
index 13c07dd1..6fb543d0 100644
--- a/src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,
diff --git a/src/app/(main)/settings/websites/[websiteId]/TrackingCode.tsx b/src/app/(main)/settings/websites/[websiteId]/TrackingCode.tsx
index 0995c8ca..66222349 100644
--- a/src/app/(main)/settings/websites/[websiteId]/TrackingCode.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/TrackingCode.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { TextArea } from 'react-basics';
 import { useMessages, useConfig } from 'components/hooks';
 
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
index d22c0608..4dd5fde4 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Modal, ModalTrigger, ActionForm, useToasts } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import { useMessages } from 'components/hooks';
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
index be703d91..19755205 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
index cd4fb5d7..543261dd 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useRef } from 'react';
 import {
   SubmitButton,
@@ -14,12 +13,7 @@ import { DOMAIN_REGEX } from 'lib/constants';
 import { touch } from 'store/modified';
 import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
 
-export function WebsiteEditForm({
-  websiteId,
-}: {
-  websiteId: string;
-  onSave?: (data: any) => void;
-}) {
+export function WebsiteEditForm({ websiteId }: { websiteId: string }) {
   const website = useContext(WebsiteContext);
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsitePage.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsitePage.tsx
new file mode 100644
index 00000000..752fd33c
--- /dev/null
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsitePage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import WebsiteProvider from 'app/(main)/websites/[websiteId]/WebsiteProvider';
+import WebsiteSettings from './WebsiteSettings';
+
+export default function WebsitePage({ websiteId }: { websiteId: string }) {
+  return (
+    <WebsiteProvider websiteId={websiteId}>
+      <WebsiteSettings websiteId={websiteId} />
+    </WebsiteProvider>
+  );
+}
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteResetForm.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteResetForm.tsx
index f96a705c..c43f3efb 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteResetForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteResetForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
index fcb6316b..24bf3d02 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState, Key, useContext } from 'react';
 import { Item, Tabs, Button, Text, Icon } from 'react-basics';
 import Link from 'next/link';
diff --git a/src/app/(main)/settings/websites/[websiteId]/page.tsx b/src/app/(main)/settings/websites/[websiteId]/page.tsx
index fe6fc69d..b8eb8530 100644
--- a/src/app/(main)/settings/websites/[websiteId]/page.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/page.tsx
@@ -1,10 +1,10 @@
-import WebsiteProvider from 'app/(main)/websites/[websiteId]/WebsiteProvider';
-import WebsiteSettings from './WebsiteSettings';
+import WebsitePage from './WebsitePage';
+import { Metadata } from 'next';
 
-export default async function WebsiteSettingsPage({ params: { websiteId } }) {
-  return (
-    <WebsiteProvider websiteId={websiteId}>
-      <WebsiteSettings websiteId={websiteId} />
-    </WebsiteProvider>
-  );
+export default async function ({ params: { websiteId } }) {
+  return <WebsitePage websiteId={websiteId} />;
 }
+
+export const metadata: Metadata = {
+  title: 'Website settings - Umami',
+};
diff --git a/src/app/(main)/settings/websites/page.tsx b/src/app/(main)/settings/websites/page.tsx
index 70c64dd3..50a2df87 100644
--- a/src/app/(main)/settings/websites/page.tsx
+++ b/src/app/(main)/settings/websites/page.tsx
@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import Websites from './Websites';
+import WebsitesPage from './WebsitesPage';
 
 export default function ({ params: { teamId } }: { params: { teamId: string } }) {
-  return <Websites teamId={teamId} />;
+  return <WebsitesPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/teams/[teamId]/TeamProvider.tsx b/src/app/(main)/teams/[teamId]/TeamProvider.tsx
index a456f987..6f0e391b 100644
--- a/src/app/(main)/teams/[teamId]/TeamProvider.tsx
+++ b/src/app/(main)/teams/[teamId]/TeamProvider.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { createContext, ReactNode, useEffect } from 'react';
 import { useTeam } from 'components/hooks';
 import { Loading } from 'react-basics';
diff --git a/src/app/(main)/teams/[teamId]/layout.tsx b/src/app/(main)/teams/[teamId]/layout.tsx
deleted file mode 100644
index f18d802a..00000000
--- a/src/app/(main)/teams/[teamId]/layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import TeamProvider from './TeamProvider';
-
-export default function ({ children, params: { teamId } }) {
-  return <TeamProvider teamId={teamId}>{children}</TeamProvider>;
-}
diff --git a/src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx b/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
similarity index 83%
rename from src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx
rename to src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
index 4be58432..5c2f2502 100644
--- a/src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { ReactNode } from 'react';
-import SettingsLayout from 'components/layout/SettingsLayout';
+import MenuLayout from 'components/layout/MenuLayout';
 import { useMessages } from 'components/hooks';
 
 export default function ({ children, teamId }: { children: ReactNode; teamId: string }) {
@@ -24,5 +24,5 @@ export default function ({ children, teamId }: { children: ReactNode; teamId: st
     },
   ].filter(n => n);
 
-  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+  return <MenuLayout items={items}>{children}</MenuLayout>;
 }
diff --git a/src/app/(main)/teams/[teamId]/settings/layout.tsx b/src/app/(main)/teams/[teamId]/settings/layout.tsx
index a72ce3b7..c86d0196 100644
--- a/src/app/(main)/teams/[teamId]/settings/layout.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/layout.tsx
@@ -1,5 +1,5 @@
-import TeamSettings from './TeamSettings';
+import TeamSettingsLayout from './TeamSettingsLayout';
 
 export default function ({ children, params: { teamId } }) {
-  return <TeamSettings teamId={teamId}>{children}</TeamSettings>;
+  return <TeamSettingsLayout teamId={teamId}>{children}</TeamSettingsLayout>;
 }
diff --git a/src/app/(main)/teams/[teamId]/settings/members/Members.tsx b/src/app/(main)/teams/[teamId]/settings/members/Members.tsx
deleted file mode 100644
index 28639981..00000000
--- a/src/app/(main)/teams/[teamId]/settings/members/Members.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-import TeamMembers from 'app/(main)/settings/teams/[teamId]/TeamMembers';
-import PageHeader from 'components/layout/PageHeader';
-import { useMessages } from 'components/hooks';
-
-export default function ({ teamId }: { teamId: string }) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <>
-      <PageHeader title={formatMessage(labels.members)} />
-      <TeamMembers teamId={teamId} allowEdit={true} />
-    </>
-  );
-}
diff --git a/src/app/(main)/teams/[teamId]/settings/members/page.tsx b/src/app/(main)/teams/[teamId]/settings/members/page.tsx
index 04f89399..a4045ab4 100644
--- a/src/app/(main)/teams/[teamId]/settings/members/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/page.tsx
@@ -1,5 +1,3 @@
-import Members from './Members';
+import Page from 'app/(main)/settings/teams/[teamId]/members/page';
 
-export default function ({ params: { teamId } }) {
-  return <Members teamId={teamId} />;
-}
+export default Page;
diff --git a/src/app/(main)/teams/[teamId]/settings/team/Team.tsx b/src/app/(main)/teams/[teamId]/settings/team/Team.tsx
deleted file mode 100644
index 2da9c7a8..00000000
--- a/src/app/(main)/teams/[teamId]/settings/team/Team.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { useLogin, useMessages } from 'components/hooks';
-import PageHeader from 'components/layout/PageHeader';
-import { ROLES } from 'lib/constants';
-import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
-import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
-
-export default function Team({ teamId }: { teamId: string }) {
-  const team = useContext(TeamContext);
-  const { user } = useLogin();
-  const { formatMessage, labels } = useMessages();
-  const allowEdit = !!team?.teamUser?.find(
-    ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
-  );
-
-  return (
-    <>
-      <PageHeader title={formatMessage(labels.team)} />
-      <TeamEditForm teamId={teamId} allowEdit={allowEdit} />
-    </>
-  );
-}
diff --git a/src/app/(main)/teams/[teamId]/settings/team/page.tsx b/src/app/(main)/teams/[teamId]/settings/team/page.tsx
index 19edd98c..c36e667c 100644
--- a/src/app/(main)/teams/[teamId]/settings/team/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/team/page.tsx
@@ -1,5 +1,3 @@
-import Team from './Team';
+import Page from 'app/(main)/settings/teams/[teamId]/team/page';
 
-export default function ({ params: { teamId } }) {
-  return <Team teamId={teamId} />;
-}
+export default Page;
diff --git a/src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx b/src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx
index ad1a97dd..224ff4d5 100644
--- a/src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx
@@ -1,3 +1,3 @@
-import Page from 'app/(main)/settings/websites/[websiteId]/page';
+import Page from 'app/(main)/websites/[websiteId]/page';
 
 export default Page;
diff --git a/src/app/(main)/teams/[teamId]/settings/websites/page.tsx b/src/app/(main)/teams/[teamId]/settings/websites/page.tsx
index 66290215..897c60fe 100644
--- a/src/app/(main)/teams/[teamId]/settings/websites/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/page.tsx
@@ -1,3 +1,3 @@
-import Page from 'app/(main)/settings/websites/page';
+import Page from 'app/(main)/settings/teams/[teamId]/websites/page';
 
 export default Page;
diff --git a/src/app/(main)/websites/Websites.tsx b/src/app/(main)/websites/Websites.tsx
deleted file mode 100644
index 8769d6ad..00000000
--- a/src/app/(main)/websites/Websites.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-'use client';
-import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-
-export function Websites({ teamId, userId }: { teamId: string; userId: string }) {
-  return <WebsitesDataTable teamId={teamId} userId={userId} allowEdit={false} />;
-}
-
-export default Websites;
diff --git a/src/app/(main)/websites/WebsitesPage.tsx b/src/app/(main)/websites/WebsitesPage.tsx
new file mode 100644
index 00000000..fa2e9f71
--- /dev/null
+++ b/src/app/(main)/websites/WebsitesPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
+
+export default function WebsitesPage({ teamId, userId }: { teamId: string; userId: string }) {
+  return (
+    <>
+      <WebsitesHeader teamId={teamId} />
+      <WebsitesDataTable teamId={teamId} userId={userId} allowEdit={false} />
+    </>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
index fb04a6ad..c4df6e71 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useMemo } from 'react';
 import PageviewsChart from 'components/metrics/PageviewsChart';
 import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
index 6d069088..b35b6f1f 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Text, Icon, Icons } from 'react-basics';
 import { useMemo } from 'react';
 import { firstBy } from 'thenby';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
index 0a18c03f..e4203177 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
@@ -1,10 +1,8 @@
-'use client';
 import { Loading } from 'react-basics';
 import { usePathname } from 'next/navigation';
 import Page from 'components/layout/Page';
 import FilterTags from 'components/metrics/FilterTags';
-import { useNavigation } from 'components/hooks';
-import { useWebsite } from 'components/hooks';
+import { useNavigation, useWebsite } from 'components/hooks';
 import WebsiteChart from './WebsiteChart';
 import WebsiteExpandedView from './WebsiteExpandedView';
 import WebsiteHeader from './WebsiteHeader';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
index b47d435b..fcded254 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Icons, Icon, Text, Dropdown, Item } from 'react-basics';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import CountriesTable from 'components/metrics/CountriesTable';
@@ -13,8 +12,7 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
 import SideNav from 'components/layout/SideNav';
-import { useNavigation } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useNavigation, useMessages } from 'components/hooks';
 import LinkButton from 'components/common/LinkButton';
 import styles from './WebsiteExpandedView.module.css';
 
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
index 25174a53..998c73c4 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index 0af9e596..58ec225a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Text, Button, Icon } from 'react-basics';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index e4011ea2..3c5c4e9a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -1,4 +1,3 @@
-'use client';
 import classNames from 'classnames';
 import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx b/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
index 4ea5a032..e1d3da26 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { createContext, ReactNode, useEffect } from 'react';
 import { useWebsite } from 'components/hooks';
 import { Loading } from 'react-basics';
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
index 65b432cb..7cc415e5 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Grid, GridRow } from 'components/layout/Grid';
 import PagesTable from 'components/metrics/PagesTable';
diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataMetricsBar.tsx
index e4903a78..fceb86aa 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/EventDataMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataMetricsBar.tsx
@@ -1,7 +1,5 @@
-'use client';
-import { useApi, useDateRange } from 'components/hooks';
+import { useApi, useDateRange, useMessages } from 'components/hooks';
 import MetricCard from 'components/metrics/MetricCard';
-import { useMessages } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricsBar from 'components/metrics/MetricsBar';
 import styles from './EventDataMetricsBar.module.css';
diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataPage.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataPage.tsx
new file mode 100644
index 00000000..77d367e5
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+import WebsiteHeader from '../WebsiteHeader';
+import WebsiteEventData from './WebsiteEventData';
+
+export default function EventDataPage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <WebsiteEventData websiteId={websiteId} />
+    </>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx
index 94b9934e..71c36992 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Link from 'next/link';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx
index 8b7c8070..edf1fa15 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { GridTable, GridColumn, Icon, Text } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
 import Icons from 'components/icons';
diff --git a/src/app/(main)/websites/[websiteId]/event-data/WebsiteEventData.tsx b/src/app/(main)/websites/[websiteId]/event-data/WebsiteEventData.tsx
index 61a4dc62..27ccd96c 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/WebsiteEventData.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/WebsiteEventData.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Flexbox, Loading } from 'react-basics';
 import EventDataTable from './EventDataTable';
 import EventDataValueTable from './EventDataValueTable';
diff --git a/src/app/(main)/websites/[websiteId]/event-data/page.tsx b/src/app/(main)/websites/[websiteId]/event-data/page.tsx
index b35093f1..5ae0799a 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/page.tsx
@@ -1,15 +1,10 @@
-import WebsiteHeader from '../WebsiteHeader';
-import WebsiteEventData from './WebsiteEventData';
+import { Metadata } from 'next';
+import EventDataPage from './EventDataPage';
 
-export default function WebsiteEventDataPage({ params: { websiteId } }) {
-  if (!websiteId) {
-    return null;
-  }
-
-  return (
-    <>
-      <WebsiteHeader websiteId={websiteId} />
-      <WebsiteEventData websiteId={websiteId} />
-    </>
-  );
+export default async function ({ params: { websiteId } }) {
+  return <EventDataPage websiteId={websiteId} />;
 }
+
+export const metadata: Metadata = {
+  title: 'Event Data | Umami',
+};
diff --git a/src/app/(main)/websites/[websiteId]/page.tsx b/src/app/(main)/websites/[websiteId]/page.tsx
index a19315b1..d7e6fcd0 100644
--- a/src/app/(main)/websites/[websiteId]/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/page.tsx
@@ -1,3 +1,4 @@
+'use client';
 import WebsiteDetails from './WebsiteDetails';
 
 export default function WebsitePage({ params: { websiteId } }) {
diff --git a/src/app/(main)/websites/[websiteId]/realtime/Realtime.tsx b/src/app/(main)/websites/[websiteId]/realtime/Realtime.tsx
index 3990b820..6314fbb8 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/Realtime.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/Realtime.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useMemo, useState, useEffect } from 'react';
 import { subMinutes, startOfMinute } from 'date-fns';
 import thenby from 'thenby';
@@ -6,8 +5,7 @@ import { Grid, GridRow } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
 import WorldMap from 'components/metrics/WorldMap';
-import { useApi } from 'components/hooks';
-import { useWebsite } from 'components/hooks';
+import { useApi, useWebsite } from 'components/hooks';
 import { percentFilter } from 'lib/filters';
 import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
 import { RealtimeData } from 'lib/types';
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
index 47417e0d..506d5733 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
@@ -1,9 +1,6 @@
-'use client';
 import { useCallback } from 'react';
 import ListTable from 'components/metrics/ListTable';
-import { useLocale } from 'components/hooks';
-import { useCountryNames } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLocale, useCountryNames, useMessages } from 'components/hooks';
 import classNames from 'classnames';
 import styles from './RealtimeCountries.module.css';
 
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
index 228dbc00..80d3d8c6 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import MetricCard from 'components/metrics/MetricCard';
 import { useMessages } from 'components/hooks';
 import { RealtimeData } from 'lib/types';
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHome.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHome.tsx
index ee170c54..0ed5fbde 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHome.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHome.tsx
@@ -1,11 +1,9 @@
-'use client';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import { useApi } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { useMessages } from 'components/hooks';
 
 export function RealtimeHome() {
   const { formatMessage, labels, messages } = useMessages();
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
index 1380207d..d9aad35b 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useMemo, useState } from 'react';
 import { StatusLight, Icon, Text, SearchField } from 'react-basics';
 import { FixedSizeList } from 'react-window';
@@ -7,10 +6,8 @@ import thenby from 'thenby';
 import { safeDecodeURI } from 'next-basics';
 import FilterButtons from 'components/common/FilterButtons';
 import Empty from 'components/common/Empty';
-import { useLocale } from 'components/hooks';
-import { useCountryNames } from 'components/hooks';
+import { useLocale, useCountryNames, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
 import useFormat from 'components//hooks/useFormat';
 import { BROWSERS } from 'lib/constants';
 import { stringToColor } from 'lib/format';
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
index cdd810f7..b3726d6d 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Key, useMemo, useState } from 'react';
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 import thenby from 'thenby';
diff --git a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
new file mode 100644
index 00000000..7e538812
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import Realtime from './Realtime';
+
+export default function WebsiteRealtimePage({ websiteId }) {
+  return <Realtime websiteId={websiteId} />;
+}
diff --git a/src/app/(main)/websites/[websiteId]/realtime/page.tsx b/src/app/(main)/websites/[websiteId]/realtime/page.tsx
index 7990c3d1..1ce90b13 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/page.tsx
@@ -1,9 +1,5 @@
-import Realtime from './Realtime';
+import WebsiteRealtimePage from './WebsiteRealtimePage';
 
-export default function WebsiteRealtimePage({ params: { websiteId } }) {
-  if (!websiteId) {
-    return null;
-  }
-
-  return <Realtime websiteId={websiteId} />;
+export default function ({ params: { websiteId } }) {
+  return <WebsiteRealtimePage websiteId={websiteId} />;
 }
diff --git a/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
similarity index 89%
rename from src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
rename to src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
index 5ea6f614..84ad57d0 100644
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
@@ -5,7 +5,7 @@ import { useMessages } from 'components/hooks';
 import WebsiteHeader from '../WebsiteHeader';
 import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
 
-export function WebsiteReports({ websiteId }) {
+export function WebsiteReportsPage({ websiteId }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -26,4 +26,4 @@ export function WebsiteReports({ websiteId }) {
   );
 }
 
-export default WebsiteReports;
+export default WebsiteReportsPage;
diff --git a/src/app/(main)/websites/[websiteId]/reports/page.tsx b/src/app/(main)/websites/[websiteId]/reports/page.tsx
index f9492134..64353b59 100644
--- a/src/app/(main)/websites/[websiteId]/reports/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/page.tsx
@@ -1,9 +1,5 @@
-import WebsiteReports from './WebsiteReports';
+import WebsiteReportsPage from './WebsiteReportsPage';
 
 export default function WebsiteReportsPage({ params: { websiteId } }) {
-  if (!websiteId) {
-    return null;
-  }
-
-  return <WebsiteReports websiteId={websiteId} />;
+  return <WebsiteReportsPage websiteId={websiteId} />;
 }
diff --git a/src/app/(main)/websites/page.tsx b/src/app/(main)/websites/page.tsx
index 4f4d5e24..ee6e4336 100644
--- a/src/app/(main)/websites/page.tsx
+++ b/src/app/(main)/websites/page.tsx
@@ -1,14 +1,8 @@
-import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
-import Websites from './Websites';
+import WebsitesPage from './WebsitesPage';
 import { Metadata } from 'next';
 
-export default function WebsitesPage({ params: { teamId, userId } }) {
-  return (
-    <>
-      <WebsitesHeader teamId={teamId} />
-      <Websites teamId={teamId} userId={userId} />
-    </>
-  );
+export default function ({ params: { teamId, userId } }) {
+  return <WebsitesPage teamId={teamId} userId={userId} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/login/LoginForm.tsx b/src/app/login/LoginForm.tsx
index de92373c..28d79458 100644
--- a/src/app/login/LoginForm.tsx
+++ b/src/app/login/LoginForm.tsx
@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,
diff --git a/src/app/login/page.module.css b/src/app/login/LoginPage.module.css
similarity index 100%
rename from src/app/login/page.module.css
rename to src/app/login/LoginPage.module.css
diff --git a/src/app/login/LoginPage.tsx b/src/app/login/LoginPage.tsx
new file mode 100644
index 00000000..28a3c024
--- /dev/null
+++ b/src/app/login/LoginPage.tsx
@@ -0,0 +1,17 @@
+'use client';
+import LoginForm from './LoginForm';
+import styles from './LoginPage.module.css';
+
+export function LoginPage() {
+  if (process.env.loginDisabled) {
+    return null;
+  }
+
+  return (
+    <div className={styles.page}>
+      <LoginForm />
+    </div>
+  );
+}
+
+export default LoginPage;
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index aa2765c9..ee4c0a70 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,23 +1,8 @@
-import LoginForm from './LoginForm';
 import { Metadata } from 'next';
-import styles from './page.module.css';
+import LoginPage from './LoginPage';
 
-async function getDisabled() {
-  return !!process.env.LOGIN_DISABLED;
-}
-
-export default async function LoginPage() {
-  const disabled = await getDisabled();
-
-  if (disabled) {
-    return null;
-  }
-
-  return (
-    <div className={styles.page}>
-      <LoginForm />
-    </div>
-  );
+export default async function () {
+  return <LoginPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/logout/Logout.tsx b/src/app/logout/LogoutPage.tsx
similarity index 91%
rename from src/app/logout/Logout.tsx
rename to src/app/logout/LogoutPage.tsx
index a6f43f92..11d96329 100644
--- a/src/app/logout/Logout.tsx
+++ b/src/app/logout/LogoutPage.tsx
@@ -5,7 +5,7 @@ import { useApi } from 'components/hooks';
 import { setUser } from 'store/app';
 import { removeClientAuthToken } from 'lib/client';
 
-export function Logout() {
+export function LogoutPage() {
   const disabled = !!(process.env.disableLogin || process.env.cloudMode);
   const router = useRouter();
   const { post } = useApi();
@@ -29,4 +29,4 @@ export function Logout() {
   return null;
 }
 
-export default Logout;
+export default LogoutPage;
diff --git a/src/app/logout/page.tsx b/src/app/logout/page.tsx
index 11ee9b67..b74f6584 100644
--- a/src/app/logout/page.tsx
+++ b/src/app/logout/page.tsx
@@ -1,8 +1,8 @@
-import Logout from './Logout';
+import LogoutPage from './LogoutPage';
 import { Metadata } from 'next';
 
 export default function () {
-  return <Logout />;
+  return <LogoutPage />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a146801..4977c99b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { redirect } from 'next/navigation';
 
 export default function RootPage() {
diff --git a/src/app/share/[...shareId]/Footer.tsx b/src/app/share/[...shareId]/Footer.tsx
index 84d4162f..3a07c12a 100644
--- a/src/app/share/[...shareId]/Footer.tsx
+++ b/src/app/share/[...shareId]/Footer.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
 import styles from './Footer.module.css';
 
diff --git a/src/app/share/[...shareId]/Header.tsx b/src/app/share/[...shareId]/Header.tsx
index 2b82908d..ddfb52a5 100644
--- a/src/app/share/[...shareId]/Header.tsx
+++ b/src/app/share/[...shareId]/Header.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';
diff --git a/src/app/share/[...shareId]/Share.module.css b/src/app/share/[...shareId]/SharePage.module.css
similarity index 100%
rename from src/app/share/[...shareId]/Share.module.css
rename to src/app/share/[...shareId]/SharePage.module.css
diff --git a/src/app/share/[...shareId]/Share.tsx b/src/app/share/[...shareId]/SharePage.tsx
similarity index 73%
rename from src/app/share/[...shareId]/Share.tsx
rename to src/app/share/[...shareId]/SharePage.tsx
index d8b83fe7..b49d36ec 100644
--- a/src/app/share/[...shareId]/Share.tsx
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -1,12 +1,12 @@
 'use client';
-import WebsiteDetails from '../../(main)/websites/[websiteId]/WebsiteDetails';
+import WebsiteDetails from 'app/(main)/websites/[websiteId]/WebsiteDetails';
 import { useShareToken } from 'components/hooks';
-import styles from './Share.module.css';
 import Page from 'components/layout/Page';
 import Header from './Header';
 import Footer from './Footer';
+import styles from './SharePage.module.css';
 
-export default function Share({ shareId }) {
+export default function SharePage({ shareId }) {
   const { shareToken, isLoading } = useShareToken(shareId);
 
   if (isLoading || !shareToken) {
diff --git a/src/app/share/[...shareId]/page.tsx b/src/app/share/[...shareId]/page.tsx
index 5a0b2822..02d244e9 100644
--- a/src/app/share/[...shareId]/page.tsx
+++ b/src/app/share/[...shareId]/page.tsx
@@ -1,8 +1,8 @@
-import Share from './Share';
+import SharePage from './SharePage';
 import { Metadata } from 'next';
 
 export default function ({ params: { shareId } }) {
-  return <Share shareId={shareId[0]} />;
+  return <SharePage shareId={shareId[0]} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/components/common/ErrorBoundary.tsx b/src/components/common/ErrorBoundary.tsx
index 6bb1f4ed..9669580f 100644
--- a/src/components/common/ErrorBoundary.tsx
+++ b/src/components/common/ErrorBoundary.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
diff --git a/src/components/hooks/queries/useApi.ts b/src/components/hooks/queries/useApi.ts
index 88427bc7..e806d37e 100644
--- a/src/components/hooks/queries/useApi.ts
+++ b/src/components/hooks/queries/useApi.ts
@@ -1,4 +1,3 @@
-'use client';
 import * as reactQuery from '@tanstack/react-query';
 import { useApi as nextUseApi } from 'next-basics';
 import { getClientAuthToken } from 'lib/client';
diff --git a/src/components/hooks/queries/useConfig.ts b/src/components/hooks/queries/useConfig.ts
index 505a93f3..72fe095d 100644
--- a/src/components/hooks/queries/useConfig.ts
+++ b/src/components/hooks/queries/useConfig.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
 import { useApi } from './useApi';
diff --git a/src/components/hooks/queries/useFilterQuery.ts b/src/components/hooks/queries/useFilterQuery.ts
index 5d86c724..7e4c9a86 100644
--- a/src/components/hooks/queries/useFilterQuery.ts
+++ b/src/components/hooks/queries/useFilterQuery.ts
@@ -1,4 +1,3 @@
-'use client';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState, Dispatch, SetStateAction } from 'react';
 import { useApi } from './useApi';
diff --git a/src/components/hooks/queries/useLogin.ts b/src/components/hooks/queries/useLogin.ts
index 2f777a77..c17687b0 100644
--- a/src/components/hooks/queries/useLogin.ts
+++ b/src/components/hooks/queries/useLogin.ts
@@ -1,4 +1,3 @@
-'use client';
 import useStore, { setUser } from 'store/app';
 import useApi from './useApi';
 import { UseQueryResult } from '@tanstack/react-query';
diff --git a/src/components/hooks/queries/useReport.ts b/src/components/hooks/queries/useReport.ts
index 332ba755..38061761 100644
--- a/src/components/hooks/queries/useReport.ts
+++ b/src/components/hooks/queries/useReport.ts
@@ -1,4 +1,3 @@
-'use client';
 import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
 import { useApi } from './useApi';
diff --git a/src/components/hooks/queries/useReports.ts b/src/components/hooks/queries/useReports.ts
index 77ebdbe9..0e0f260b 100644
--- a/src/components/hooks/queries/useReports.ts
+++ b/src/components/hooks/queries/useReports.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import useModified from 'store/modified';
diff --git a/src/components/hooks/queries/useShareToken.ts b/src/components/hooks/queries/useShareToken.ts
index 8197fe66..189657be 100644
--- a/src/components/hooks/queries/useShareToken.ts
+++ b/src/components/hooks/queries/useShareToken.ts
@@ -1,4 +1,3 @@
-'use client';
 import useStore, { setShareToken } from 'store/app';
 import useApi from './useApi';
 
diff --git a/src/components/hooks/queries/useTeam.ts b/src/components/hooks/queries/useTeam.ts
index 1a8ccc54..e348531c 100644
--- a/src/components/hooks/queries/useTeam.ts
+++ b/src/components/hooks/queries/useTeam.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 
 export function useTeam(teamId: string) {
diff --git a/src/components/hooks/queries/useTeamMembers.ts b/src/components/hooks/queries/useTeamMembers.ts
index ccfd6c9b..064231d1 100644
--- a/src/components/hooks/queries/useTeamMembers.ts
+++ b/src/components/hooks/queries/useTeamMembers.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 
diff --git a/src/components/hooks/queries/useTeamWebsites.ts b/src/components/hooks/queries/useTeamWebsites.ts
index 036d715b..19bcdf76 100644
--- a/src/components/hooks/queries/useTeamWebsites.ts
+++ b/src/components/hooks/queries/useTeamWebsites.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 
diff --git a/src/components/hooks/queries/useTeams.ts b/src/components/hooks/queries/useTeams.ts
index 7628887f..020c9915 100644
--- a/src/components/hooks/queries/useTeams.ts
+++ b/src/components/hooks/queries/useTeams.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import { useLogin } from 'components/hooks';
diff --git a/src/components/hooks/queries/useUser.ts b/src/components/hooks/queries/useUser.ts
index 7ff73dac..61c22ecd 100644
--- a/src/components/hooks/queries/useUser.ts
+++ b/src/components/hooks/queries/useUser.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 
 export function useUser(userId: string, options?: { [key: string]: any }) {
diff --git a/src/components/hooks/queries/useUsers.ts b/src/components/hooks/queries/useUsers.ts
index 05f273d8..ab897c17 100644
--- a/src/components/hooks/queries/useUsers.ts
+++ b/src/components/hooks/queries/useUsers.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import useModified from 'store/modified';
diff --git a/src/components/hooks/queries/useWebsite.ts b/src/components/hooks/queries/useWebsite.ts
index 6aec87e8..4121f97b 100644
--- a/src/components/hooks/queries/useWebsite.ts
+++ b/src/components/hooks/queries/useWebsite.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 
 export function useWebsite(websiteId: string, options?: { [key: string]: any }) {
diff --git a/src/components/hooks/queries/useWebsiteEvents.ts b/src/components/hooks/queries/useWebsiteEvents.ts
index 613788e2..de18a1f9 100644
--- a/src/components/hooks/queries/useWebsiteEvents.ts
+++ b/src/components/hooks/queries/useWebsiteEvents.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 
diff --git a/src/components/hooks/queries/useWebsiteMetrics.ts b/src/components/hooks/queries/useWebsiteMetrics.ts
index 300e526d..8e7d00db 100644
--- a/src/components/hooks/queries/useWebsiteMetrics.ts
+++ b/src/components/hooks/queries/useWebsiteMetrics.ts
@@ -1,4 +1,3 @@
-'use client';
 import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 
diff --git a/src/components/hooks/queries/useWebsites.ts b/src/components/hooks/queries/useWebsites.ts
index 9449acc7..bb3e9a2d 100644
--- a/src/components/hooks/queries/useWebsites.ts
+++ b/src/components/hooks/queries/useWebsites.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useApi } from './useApi';
 import { useFilterQuery } from './useFilterQuery';
 import { useLogin } from './useLogin';
diff --git a/src/components/hooks/useCountryNames.ts b/src/components/hooks/useCountryNames.ts
index 47716449..acfada44 100644
--- a/src/components/hooks/useCountryNames.ts
+++ b/src/components/hooks/useCountryNames.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useEffect } from 'react';
 import { httpGet } from 'next-basics';
 import enUS from '../../../public/intl/country/en-US.json';
diff --git a/src/components/hooks/useDateRange.ts b/src/components/hooks/useDateRange.ts
index 8d7cf57c..e022d960 100644
--- a/src/components/hooks/useDateRange.ts
+++ b/src/components/hooks/useDateRange.ts
@@ -1,4 +1,3 @@
-'use client';
 import { getMinimumUnit, parseDateRange } from 'lib/date';
 import { setItem } from 'next-basics';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
diff --git a/src/components/hooks/useDocumentClick.ts b/src/components/hooks/useDocumentClick.ts
index dce9e106..eefd9366 100644
--- a/src/components/hooks/useDocumentClick.ts
+++ b/src/components/hooks/useDocumentClick.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect } from 'react';
 
 export function useDocumentClick(handler: (event: MouseEvent) => any) {
diff --git a/src/components/hooks/useEscapeKey.ts b/src/components/hooks/useEscapeKey.ts
index 567878b0..5c3350e7 100644
--- a/src/components/hooks/useEscapeKey.ts
+++ b/src/components/hooks/useEscapeKey.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect, useCallback, KeyboardEvent } from 'react';
 
 export function useEscapeKey(handler: (event: KeyboardEvent) => void) {
diff --git a/src/components/hooks/useFilters.ts b/src/components/hooks/useFilters.ts
index 51a5d972..e1a9a885 100644
--- a/src/components/hooks/useFilters.ts
+++ b/src/components/hooks/useFilters.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useMessages } from './useMessages';
 import { OPERATORS } from 'lib/constants';
 
diff --git a/src/components/hooks/useForceUpdate.ts b/src/components/hooks/useForceUpdate.ts
index 1798cdd8..35f7fe16 100644
--- a/src/components/hooks/useForceUpdate.ts
+++ b/src/components/hooks/useForceUpdate.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useCallback, useState } from 'react';
 
 export function useForceUpdate() {
diff --git a/src/components/hooks/useFormat.ts b/src/components/hooks/useFormat.ts
index 4d8994fc..3057e9d8 100644
--- a/src/components/hooks/useFormat.ts
+++ b/src/components/hooks/useFormat.ts
@@ -1,4 +1,3 @@
-'use client';
 import useMessages from './useMessages';
 import { BROWSERS } from 'lib/constants';
 import useLocale from './useLocale';
diff --git a/src/components/hooks/useLanguageNames.ts b/src/components/hooks/useLanguageNames.ts
index 95b1a97f..d4bfbf2f 100644
--- a/src/components/hooks/useLanguageNames.ts
+++ b/src/components/hooks/useLanguageNames.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useEffect } from 'react';
 import { httpGet } from 'next-basics';
 import enUS from '../../../public/intl/language/en-US.json';
diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts
index 00998ba4..5e4e1ce8 100644
--- a/src/components/hooks/useLocale.ts
+++ b/src/components/hooks/useLocale.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect } from 'react';
 import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
diff --git a/src/components/hooks/useMessages.ts b/src/components/hooks/useMessages.ts
index 8b82dd57..ab37cc19 100644
--- a/src/components/hooks/useMessages.ts
+++ b/src/components/hooks/useMessages.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { messages, labels } from 'components/messages';
 
diff --git a/src/components/hooks/useNavigation.ts b/src/components/hooks/useNavigation.ts
index 59731c3e..0ff7155a 100644
--- a/src/components/hooks/useNavigation.ts
+++ b/src/components/hooks/useNavigation.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from 'next-basics';
diff --git a/src/components/hooks/useSticky.ts b/src/components/hooks/useSticky.ts
index 39c57f6e..459c489a 100644
--- a/src/components/hooks/useSticky.ts
+++ b/src/components/hooks/useSticky.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useEffect, useRef } from 'react';
 
 export function useSticky({ enabled = true, threshold = 1 }) {
diff --git a/src/components/hooks/useTeamUrl.ts b/src/components/hooks/useTeamUrl.ts
index 3e1c3972..b2aa8ea7 100644
--- a/src/components/hooks/useTeamUrl.ts
+++ b/src/components/hooks/useTeamUrl.ts
@@ -1,4 +1,3 @@
-'use client';
 import { usePathname } from 'next/navigation';
 
 export function useTeamUrl(): {
diff --git a/src/components/hooks/useTheme.ts b/src/components/hooks/useTheme.ts
index cd19f702..099bf962 100644
--- a/src/components/hooks/useTheme.ts
+++ b/src/components/hooks/useTheme.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useEffect } from 'react';
 import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'next-basics';
diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts
index 0f5f8dbc..3dbb52b3 100644
--- a/src/components/hooks/useTimezone.ts
+++ b/src/components/hooks/useTimezone.ts
@@ -1,4 +1,3 @@
-'use client';
 import { useState, useCallback } from 'react';
 import { getTimezone } from 'lib/date';
 import { getItem, setItem } from 'next-basics';
diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx
index 34c80b5b..0c29afa6 100644
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
diff --git a/src/components/input/LogoutButton.tsx b/src/components/input/LogoutButton.tsx
index f3129207..ddc71142 100644
--- a/src/components/input/LogoutButton.tsx
+++ b/src/components/input/LogoutButton.tsx
@@ -9,7 +9,7 @@ export function LogoutButton({
 }) {
   const { formatMessage, labels } = useMessages();
   return (
-    <Link href="/src/app/logout/logout">
+    <Link href="/src/app/logout/LogoutPage">
       <TooltipPopup label={formatMessage(labels.logout)} position={tooltipPosition}>
         <Button variant="quiet">
           <Icon>
diff --git a/src/components/input/ProfileButton.module.css b/src/components/input/ProfileButton.module.css
index 981bf4a9..1eebcab6 100644
--- a/src/components/input/ProfileButton.module.css
+++ b/src/components/input/ProfileButton.module.css
@@ -20,3 +20,9 @@
   text-align: right;
   margin-right: 10px;
 }
+
+.name {
+  color: var(--font-color200);
+  background: var(--base75);
+  padding: var(--size300) var(--size600);
+}
diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx
index 2cabbff0..11cf1613 100644
--- a/src/components/input/ProfileButton.tsx
+++ b/src/components/input/ProfileButton.tsx
@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import Icons from 'components/icons';
 import { useMessages, useLogin, useLocale } from 'components/hooks';
 import { CURRENT_VERSION } from 'lib/constants';
-import Avatar from 'components/common/Avatar';
 import styles from './ProfileButton.module.css';
 
 export function ProfileButton() {
@@ -34,12 +33,7 @@ export function ProfileButton() {
       <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         {(close: () => void) => (
           <Menu onSelect={key => handleSelect(key, close)} className={styles.menu}>
-            <Item key="user" className={styles.item}>
-              <Icon size="lg">
-                <Avatar value={user.id} />
-              </Icon>
-              <Text>{user.username}</Text>
-            </Item>
+            <Text className={styles.name}>{user.username}</Text>
             <Item key="profile" className={styles.item} divider={true}>
               <Icon>
                 <Icons.User />
diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx
index 84937c75..a91cdb2f 100644
--- a/src/components/input/TeamsButton.tsx
+++ b/src/components/input/TeamsButton.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Key } from 'react';
 import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
 import classNames from 'classnames';
diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx
index 6adeb214..1ea8d392 100644
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
 import { useWebsite, useWebsites, useMessages } from 'components/hooks';
diff --git a/src/components/layout/SettingsLayout.module.css b/src/components/layout/MenuLayout.module.css
similarity index 100%
rename from src/components/layout/SettingsLayout.module.css
rename to src/components/layout/MenuLayout.module.css
diff --git a/src/components/layout/SettingsLayout.tsx b/src/components/layout/MenuLayout.tsx
similarity index 74%
rename from src/components/layout/SettingsLayout.tsx
rename to src/components/layout/MenuLayout.tsx
index 317c7e29..2edd1091 100644
--- a/src/components/layout/SettingsLayout.tsx
+++ b/src/components/layout/MenuLayout.tsx
@@ -1,10 +1,9 @@
-'use client';
 import { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
 import SideNav from 'components/layout/SideNav';
-import styles from './SettingsLayout.module.css';
+import styles from './MenuLayout.module.css';
 
-export function SettingsLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
+export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
   const pathname = usePathname();
   const cloudMode = !!process.env.cloudMode;
 
@@ -22,4 +21,4 @@ export function SettingsLayout({ items = [], children }: { items: any[]; childre
   );
 }
 
-export default SettingsLayout;
+export default MenuLayout;
diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx
index 83312d12..c2a0e241 100644
--- a/src/components/layout/Page.tsx
+++ b/src/components/layout/Page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading } from 'react-basics';
diff --git a/src/components/messages.ts b/src/components/messages.ts
index 7bf9a1f7..19f60b46 100644
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@@ -17,7 +17,8 @@ export const labels = defineMessages({
   role: { id: 'label.role', defaultMessage: 'Role' },
   user: { id: 'label.user', defaultMessage: 'User' },
   viewOnly: { id: 'label.view-only', defaultMessage: 'View only' },
-  admin: { id: 'label.admin', defaultMessage: 'Administrator' },
+  admin: { id: 'label.admin', defaultMessage: 'Admin' },
+  administrator: { id: 'label.administrator', defaultMessage: 'Administrator' },
   confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
   details: { id: 'label.details', defaultMessage: 'Details' },
   website: { id: 'label.website', defaultMessage: 'Website' },
diff --git a/src/index.ts b/src/index.ts
index f067d2fa..4fecde0e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,21 @@
 export * from 'components/hooks';
 
-export * from 'app/(main)/settings/teams/[teamId]/TeamData';
-export * from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
-export * from 'app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton';
-export * from 'app/(main)/settings/teams/[teamId]/TeamMembers';
-export * from 'app/(main)/settings/teams/[teamId]/TeamMembersTable';
-export * from 'app/(main)/settings/teams/[teamId]/TeamSettings';
-export * from 'app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton';
-export * from 'app/(main)/settings/teams/[teamId]/TeamWebsites';
-export * from 'app/(main)/settings/teams/[teamId]/TeamWebsitesTable';
+export * from 'app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton';
+export * from './app/(main)/settings/teams/[teamId]/members/TeamMembersPage';
+export * from 'app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable';
+export * from 'app/(main)/settings/teams/[teamId]/members/TeamMembersTable';
+
+export * from './app/(main)/settings/teams/[teamId]/team/TeamDetails';
+export * from 'app/(main)/settings/teams/[teamId]/team/TeamAdmin';
+export * from 'app/(main)/settings/teams/[teamId]/team/TeamDeleteForm';
+export * from 'app/(main)/settings/teams/[teamId]/team/TeamEditForm';
+
+export * from 'app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton';
+export * from './app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage';
+export * from 'app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable';
+export * from 'app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable';
+
 export * from 'app/(main)/settings/teams/TeamAddForm';
-export * from 'app/(main)/settings/teams/TeamDeleteForm';
 export * from 'app/(main)/settings/teams/TeamsHeader';
 export * from 'app/(main)/settings/teams/TeamJoinForm';
 export * from 'app/(main)/settings/teams/TeamLeaveForm';
diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts
index a210b72b..3831d836 100644
--- a/src/lib/prisma.ts
+++ b/src/lib/prisma.ts
@@ -195,7 +195,7 @@ async function pagedQuery<T>(model: string, criteria: T, filters: SearchFilter)
 
   const count = await prisma.client[model].count({ where: (criteria as any).where });
 
-  return { data, count, page: +page, pageSize, orderBy };
+  return { data, count, page: +page, pageSize: size, orderBy };
 }
 
 function getQueryMode(): Prisma.QueryMode {
diff --git a/src/pages/api/admin/users.ts b/src/pages/api/admin/users.ts
index 0eecb447..31b72ebf 100644
--- a/src/pages/api/admin/users.ts
+++ b/src/pages/api/admin/users.ts
@@ -47,7 +47,7 @@ export default async (
         include: {
           _count: {
             select: {
-              website: {
+              websiteUser: {
                 where: { deletedAt: null },
               },
             },
diff --git a/src/pages/api/teams/[teamId]/websites/index.ts b/src/pages/api/teams/[teamId]/websites/index.ts
index fa3afe23..e4919d20 100644
--- a/src/pages/api/teams/[teamId]/websites/index.ts
+++ b/src/pages/api/teams/[teamId]/websites/index.ts
@@ -48,7 +48,7 @@ export default async (
     const websites = await getTeamWebsites(teamId, {
       page,
       query,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, websites);
diff --git a/src/pages/api/teams/index.ts b/src/pages/api/teams/index.ts
index 7684f306..def8dfb8 100644
--- a/src/pages/api/teams/index.ts
+++ b/src/pages/api/teams/index.ts
@@ -40,7 +40,7 @@ export default async (
     const results = await getUserTeams(userId, {
       page,
       query,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, results);
diff --git a/src/pages/api/users/[userId]/teams.ts b/src/pages/api/users/[userId]/teams.ts
index 632a26a0..ac6b98ea 100644
--- a/src/pages/api/users/[userId]/teams.ts
+++ b/src/pages/api/users/[userId]/teams.ts
@@ -44,7 +44,7 @@ export default async (
     const teams = await getUserTeams(userId, {
       query,
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, teams);
diff --git a/src/pages/api/users/[userId]/websites.ts b/src/pages/api/users/[userId]/websites.ts
index e316dafb..2d48c177 100644
--- a/src/pages/api/users/[userId]/websites.ts
+++ b/src/pages/api/users/[userId]/websites.ts
@@ -30,7 +30,7 @@ export default async (req: NextApiRequestQueryBody, res: NextApiResponse) => {
 
     const websites = await getUserWebsites(userId, {
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
       query,
       ...rest,
     });
diff --git a/src/pages/api/websites/[websiteId]/reports.ts b/src/pages/api/websites/[websiteId]/reports.ts
index e0342430..5bb1652b 100644
--- a/src/pages/api/websites/[websiteId]/reports.ts
+++ b/src/pages/api/websites/[websiteId]/reports.ts
@@ -37,7 +37,7 @@ export default async (
 
     const data = await getWebsiteReports(websiteId, {
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
       query,
     });
 
diff --git a/src/queries/admin/website.ts b/src/queries/admin/website.ts
index 026158d6..53627f22 100644
--- a/src/queries/admin/website.ts
+++ b/src/queries/admin/website.ts
@@ -29,18 +29,15 @@ export async function getWebsites(
   filters: WebsiteSearchFilter,
 ): Promise<FilterResult<Website[]>> {
   const { query } = filters;
-  const mode = prisma.getQueryMode();
 
   const where: Prisma.WebsiteWhereInput = {
     ...criteria.where,
-    name: {
-      contains: query ? query : undefined,
-      mode,
-    },
-    domain: {
-      contains: query ? query : undefined,
-      mode,
-    },
+    ...prisma.getSearchParameters(query, [
+      {
+        name: 'contains',
+      },
+      { domain: 'contains' },
+    ]),
     deletedAt: null,
   };
 
diff --git a/yarn.lock b/yarn.lock
index cfe307cd..a22b41a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2597,15 +2597,14 @@
     "@typescript-eslint/types" "6.14.0"
     eslint-visitor-keys "^3.4.1"
 
-"@umami/prisma-client@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@umami/prisma-client/-/prisma-client-0.13.0.tgz#00ed90adf36e8e8cb7301ab557ad617dd946188f"
-  integrity sha512-HkhwTH7cxkbqlxw6LK8QGbEaIl0aYZeVf5bUwncv68C/RaQrQ0/g9x6TzHo6uKlSgk2LtavnGwxYmjxD1fdGQw==
+"@umami/prisma-client@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@umami/prisma-client/-/prisma-client-0.14.0.tgz#8489f23e7d766fdecb94790246b0b77b9d65223b"
+  integrity sha512-62aAE5s5m/M1T88JIvOyZk2LzQIJ/iEeF57ewd/qKKNZdgXfP1aib+IAQ74db85vq6TwFyHMaXBeXztNNby5Fw==
   dependencies:
     "@prisma/extension-read-replicas" "^0.3.0"
     chalk "^4.1.2"
     debug "^4.3.4"
-    sql-formatter "^15.1.2"
 
 "@umami/redis-client@^0.18.0":
   version "0.18.0"
@@ -3384,7 +3383,7 @@ commander@11.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.0.0.tgz#43e19c25dbedc8256203538e8d7e9346877a6f67"
   integrity sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==
 
-commander@2, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
+commander@2, commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3945,11 +3944,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-discontinuous-range@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-  integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -4810,11 +4804,6 @@ get-port-please@^3.1.1:
   resolved "https://registry.yarnpkg.com/get-port-please/-/get-port-please-3.1.1.tgz#2556623cddb4801d823c0a6a15eec038abb483be"
   integrity sha512-3UBAyM3u4ZBVYDsxOQfJDxEa6XTbpBDrOjp4mf7ExFRt5BKs/QywQQiJsh2B+hxcZLSapWqCRvElUe8DnKcFHA==
 
-get-stdin@=8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
-  integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
-
 get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
@@ -6344,11 +6333,6 @@ moment-timezone@^0.5.35:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-moo@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
-  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
-
 mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -6394,16 +6378,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-nearley@^2.20.1:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.20.1.tgz#246cd33eff0d012faf197ff6774d7ac78acdd474"
-  integrity sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==
-  dependencies:
-    commander "^2.19.0"
-    moo "^0.5.0"
-    railroad-diagrams "^1.0.0"
-    randexp "0.4.6"
-
 next-basics@^0.39.0:
   version "0.39.0"
   resolved "https://registry.yarnpkg.com/next-basics/-/next-basics-0.39.0.tgz#1ec448a1c12966a82067445bfb9319b7e883dd6a"
@@ -7558,19 +7532,6 @@ raf-schd@^4.0.2:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
-railroad-diagrams@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-  integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
-
-randexp@0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
-  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
-  dependencies:
-    discontinuous-range "1.0.0"
-    ret "~0.1.10"
-
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -7947,11 +7908,6 @@ restore-cursor@^4.0.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -8349,15 +8305,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sql-formatter@^15.1.2:
-  version "15.1.2"
-  resolved "https://registry.yarnpkg.com/sql-formatter/-/sql-formatter-15.1.2.tgz#86df2592eedf6d422244e10e00a74380c22791b7"
-  integrity sha512-zBrLBclCNurCsQaO6yMvkXzHvv7eJPjiF8LIEQ5HdBV/x6UuWIZwqss3mlZ/6HLj+VYhFKeHpQnyLuZWG2agKQ==
-  dependencies:
-    argparse "^2.0.1"
-    get-stdin "=8.0.0"
-    nearley "^2.20.1"
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"