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 f6b0a08b..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';
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..cf7ae21c 100644
--- a/src/app/(main)/reports/[reportId]/BaseParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/BaseParameters.tsx
@@ -1,11 +1,10 @@
-'use client';
 import { useContext } from 'react';
 import { FormRow } from 'react-basics';
 import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import { useMessages, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './Report';
+import { ReportContext } from './ReportPage';
 
 export interface BaseParametersProps {
   showWebsiteSelect?: boolean;
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]/ReportBody.tsx b/src/app/(main)/reports/[reportId]/ReportBody.tsx
index de7b0665..c9c3220e 100644
--- a/src/app/(main)/reports/[reportId]/ReportBody.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportBody.tsx
@@ -1,7 +1,6 @@
-'use client';
 import styles from './ReportBody.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './Report';
+import { ReportContext } from './ReportPage';
 
 export function ReportBody({ children }) {
   const { report } = useContext(ReportContext);
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..1c6cea6c 100644
--- a/src/app/(main)/reports/[reportId]/ReportHeader.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportHeader.tsx
@@ -1,8 +1,7 @@
-'use client';
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './Report';
+import { ReportContext } from './ReportPage';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from 'lib/constants';
 
diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.tsx b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
index 0f6684a5..4b2e7d83 100644
--- a/src/app/(main)/reports/[reportId]/ReportMenu.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
@@ -1,7 +1,6 @@
-'use client';
 import styles from './ReportMenu.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './Report';
+import { ReportContext } from './ReportPage';
 
 export function ReportMenu({ children }) {
   const { report } = useContext(ReportContext);
diff --git a/src/app/(main)/reports/[reportId]/Report.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
similarity index 80%
rename from src/app/(main)/reports/[reportId]/Report.tsx
rename to src/app/(main)/reports/[reportId]/ReportPage.tsx
index c1cc502f..badc4a7f 100644
--- a/src/app/(main)/reports/[reportId]/Report.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportPage.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 ReportPage({
+  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) {
@@ -28,4 +30,4 @@ export function Report({ reportId, defaultParameters, children, className }: Rep
   );
 }
 
-export default Report;
+export default ReportPage;
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..4d95088f 100644
--- a/src/app/(main)/reports/event-data/EventDataParameters.tsx
+++ b/src/app/(main)/reports/event-data/EventDataParameters.tsx
@@ -1,11 +1,10 @@
-'use client';
 import { useContext } from 'react';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 import Empty from 'components/common/Empty';
 import Icons from 'components/icons';
 import { useApi, useMessages } from 'components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import FieldAddForm from '../[reportId]/FieldAddForm';
 import ParameterList from '../[reportId]/ParameterList';
 import BaseParameters from '../[reportId]/BaseParameters';
diff --git a/src/app/(main)/reports/event-data/EventDataReport.tsx b/src/app/(main)/reports/event-data/EventDataReport.tsx
index f4d674e5..9d761f22 100644
--- a/src/app/(main)/reports/event-data/EventDataReport.tsx
+++ b/src/app/(main)/reports/event-data/EventDataReport.tsx
@@ -1,5 +1,4 @@
-'use client';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -14,7 +13,7 @@ const defaultParameters = {
 
 export default function EventDataReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Nodes />} />
       <ReportMenu>
         <EventDataParameters />
@@ -22,6 +21,6 @@ export default function EventDataReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <EventDataTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }
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..e9a2b876 100644
--- a/src/app/(main)/reports/event-data/EventDataTable.tsx
+++ b/src/app/(main)/reports/event-data/EventDataTable.tsx
@@ -1,8 +1,7 @@
-'use client';
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 
 export function EventDataTable() {
   const { report } = useContext(ReportContext);
diff --git a/src/app/(main)/reports/event-data/page.tsx b/src/app/(main)/reports/event-data/page.tsx
index fe0fdb55..b8a11749 100644
--- a/src/app/(main)/reports/event-data/page.tsx
+++ b/src/app/(main)/reports/event-data/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import EventDataReport from './EventDataReport';
 
-export default function EventDataReportPage() {
+export default function () {
   return <EventDataReport />;
 }
 
diff --git a/src/app/(main)/reports/funnel/FunnelChart.tsx b/src/app/(main)/reports/funnel/FunnelChart.tsx
index e643967f..e7ec7b59 100644
--- a/src/app/(main)/reports/funnel/FunnelChart.tsx
+++ b/src/app/(main)/reports/funnel/FunnelChart.tsx
@@ -1,10 +1,9 @@
-'use client';
 import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
 import { useMessages, useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx
index 5a3bdada..676c18d4 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 {
@@ -14,7 +13,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
diff --git a/src/app/(main)/reports/funnel/FunnelReport.tsx b/src/app/(main)/reports/funnel/FunnelReport.tsx
index 4013f073..47987348 100644
--- a/src/app/(main)/reports/funnel/FunnelReport.tsx
+++ b/src/app/(main)/reports/funnel/FunnelReport.tsx
@@ -1,8 +1,7 @@
-'use client';
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -16,7 +15,7 @@ const defaultParameters = {
 
 export default function FunnelReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Funnel />} />
       <ReportMenu>
         <FunnelParameters />
@@ -25,6 +24,6 @@ export default function FunnelReport({ reportId }: { reportId?: string }) {
         <FunnelChart />
         <FunnelTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }
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..67a2444a 100644
--- a/src/app/(main)/reports/funnel/FunnelTable.tsx
+++ b/src/app/(main)/reports/funnel/FunnelTable.tsx
@@ -1,8 +1,7 @@
-'use client';
 import { useContext } from 'react';
 import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 
 export function FunnelTable() {
   const { report } = useContext(ReportContext);
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..3799ec8c 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 {
@@ -13,7 +12,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import BaseParameters from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import ParameterList from '../[reportId]/ParameterList';
 import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';
diff --git a/src/app/(main)/reports/insights/InsightsReport.tsx b/src/app/(main)/reports/insights/InsightsReport.tsx
index 3c199003..306b3e76 100644
--- a/src/app/(main)/reports/insights/InsightsReport.tsx
+++ b/src/app/(main)/reports/insights/InsightsReport.tsx
@@ -1,5 +1,4 @@
-'use client';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -15,7 +14,7 @@ const defaultParameters = {
 
 export default function InsightsReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Lightbulb />} />
       <ReportMenu>
         <InsightsParameters />
@@ -23,6 +22,6 @@ export default function InsightsReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <InsightsTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }
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..f19aaa14 100644
--- a/src/app/(main)/reports/insights/InsightsTable.tsx
+++ b/src/app/(main)/reports/insights/InsightsTable.tsx
@@ -1,8 +1,7 @@
-'use client';
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {
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..461dd90b 100644
--- a/src/app/(main)/reports/retention/RetentionParameters.tsx
+++ b/src/app/(main)/reports/retention/RetentionParameters.tsx
@@ -1,8 +1,7 @@
-'use client';
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import { MonthSelect } from 'components/input/MonthSelect';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { parseDateRange } from 'lib/date';
diff --git a/src/app/(main)/reports/retention/RetentionReport.tsx b/src/app/(main)/reports/retention/RetentionReport.tsx
index f02e5bb1..37fc5820 100644
--- a/src/app/(main)/reports/retention/RetentionReport.tsx
+++ b/src/app/(main)/reports/retention/RetentionReport.tsx
@@ -1,7 +1,6 @@
-'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -21,7 +20,7 @@ const defaultParameters = {
 
 export default function RetentionReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Magnet />} />
       <ReportMenu>
         <RetentionParameters />
@@ -29,6 +28,6 @@ export default function RetentionReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <RetentionTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }
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..2ad36177 100644
--- a/src/app/(main)/reports/retention/RetentionTable.tsx
+++ b/src/app/(main)/reports/retention/RetentionTable.tsx
@@ -1,7 +1,6 @@
-'use client';
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { useMessages, useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
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 65d79e51..787d51c7 100644
--- a/src/app/(main)/settings/teams/TeamsTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
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]/members/TeamMemberRemoveButton.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx
index bae0e723..0b4ca500 100644
--- a/src/app/(main)/settings/teams/[teamId]/members/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]/members/TeamMembersDataTable.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
index ff95e522..996283a7 100644
--- a/src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import { useTeamMembers } from 'components/hooks';
diff --git a/src/app/(main)/settings/teams/[teamId]/members/TeamMembers.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx
similarity index 62%
rename from src/app/(main)/settings/teams/[teamId]/members/TeamMembers.tsx
rename to src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx
index 34cb248c..ef0e12d1 100644
--- a/src/app/(main)/settings/teams/[teamId]/members/TeamMembers.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx
@@ -1,17 +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 TeamMembers({ teamId }: { teamId: string }) {
+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 TeamMembers;
+export default TeamMembersPage;
diff --git a/src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx b/src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx
index aceb5894..d993bbc0 100644
--- a/src/app/(main)/settings/teams/[teamId]/members/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
index 295b3f15..e36e9214 100644
--- a/src/app/(main)/settings/teams/[teamId]/members/page.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/members/page.tsx
@@ -1,13 +1,8 @@
-import TeamMembers from './TeamMembers';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamMembersPage from './TeamMembersPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamMembers teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamMembersPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
index ff20989a..582012d4 100644
--- a/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from './TeamDeleteForm';
diff --git a/src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx
index aa2b1d3f..33694495 100644
--- a/src/app/(main)/settings/teams/[teamId]/team/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]/team/Team.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx
similarity index 94%
rename from src/app/(main)/settings/teams/[teamId]/team/Team.tsx
rename to src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx
index 18e0c014..4162e83f 100644
--- a/src/app/(main)/settings/teams/[teamId]/team/Team.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';
@@ -10,7 +9,7 @@ import TeamAdmin from './TeamAdmin';
 import LinkButton from 'components/common/LinkButton';
 import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
-export function Team({ teamId }: { teamId: string }) {
+export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -42,4 +41,4 @@ export function Team({ teamId }: { teamId: string }) {
   );
 }
 
-export default Team;
+export default TeamDetails;
diff --git a/src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx b/src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx
index 7e158191..cee3c3f1 100644
--- a/src/app/(main)/settings/teams/[teamId]/team/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
index e23b670e..de2c9657 100644
--- a/src/app/(main)/settings/teams/[teamId]/team/page.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/team/page.tsx
@@ -1,13 +1,8 @@
-import Team from './Team';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import { Metadata } from 'next';
+import TeamPage from './TeamPage';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <Team teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx
index 843b76d3..336e151a 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/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]/websites/TeamWebsitesDataTable.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
index 794ce948..9e2985d4 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx
@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useTeamWebsites } from 'components/hooks';
 import TeamWebsitesTable from './TeamWebsitesTable';
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsites.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx
similarity index 62%
rename from src/app/(main)/settings/teams/[teamId]/websites/TeamWebsites.tsx
rename to src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx
index 36f8d39b..56582c04 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsites.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx
@@ -1,17 +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 TeamWebsites({ teamId }: { teamId: string }) {
+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 TeamWebsites;
+export default TeamWebsitesPage;
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
index 0d54763e..b07f3dbf 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/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';
diff --git a/src/app/(main)/settings/teams/[teamId]/websites/page.tsx b/src/app/(main)/settings/teams/[teamId]/websites/page.tsx
index 31b02065..ac4eb94f 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/page.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/page.tsx
@@ -1,15 +1,10 @@
-import TeamWebsites from './TeamWebsites';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamWebsitesPage from './TeamWebsitesPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamWebsites teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamWebsitesPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Teams websites - Umami',
+  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 0632165c..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,
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 53384285..12c5afbc 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,
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 3ffc1a95..e0d3860a 100644
--- a/src/app/(main)/settings/websites/WebsitesHeader.tsx
+++ b/src/app/(main)/settings/websites/WebsitesHeader.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';
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..53f27b26 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,
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)/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/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]/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]/reports/WebsiteReports.tsx b/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
index 5ea6f614..60c36cc6 100644
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';
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..80543ef6 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,23 +1,7 @@
-import LoginForm from './LoginForm';
 import { Metadata } from 'next';
-import styles from './page.module.css';
-
-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>
-  );
+  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/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/index.ts b/src/index.ts
index 2d7b6015..4fecde0e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,17 +1,17 @@
 export * from 'components/hooks';
 
 export * from 'app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton';
-export * from 'app/(main)/settings/teams/[teamId]/members/TeamMembers';
+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/Team';
+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/TeamWebsites';
+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';