From 7450b76e6d4dde625fc449427f9876887b5bd408 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 9 Jan 2023 23:59:26 -0800
Subject: [PATCH] Refactored settings components.

---
 assets/lock.svg                               |   1 +
 assets/user.svg                               |   2 +-
 components/common/DateFilter.js               |   2 +-
 components/common/EventDataButton.js          |   2 +-
 components/common/HamburgerButton.js          |   5 +-
 components/forms/Form.module.css              |  63 -----------
 components/forms/TrackingCodeForm.js          |  23 ----
 components/layout/Header.js                   |  14 ---
 components/layout/Layout.js                   |  12 ---
 components/layout/Page.js                     |   2 +-
 .../{forms => metrics}/DatePickerForm.js      |   0
 .../DatePickerForm.module.css                 |   0
 .../{forms => metrics}/EventDataForm.js       |   2 +-
 .../EventDataForm.module.css                  |   0
 components/nav/Nav.js                         |   8 +-
 components/pages/{ => console}/TestConsole.js |   0
 .../{ => console}/TestConsole.module.css      |   0
 components/pages/{ => dashboard}/Dashboard.js |   4 +-
 .../pages/{ => dashboard}/DashboardEdit.js    |   0
 .../{ => dashboard}/DashboardEdit.module.css  |   0
 .../{forms => pages/login}/LoginForm.js       |   7 +-
 .../login}/LoginForm.module.css               |   0
 .../pages/{ => realtime}/RealtimeDashboard.js |   0
 .../RealtimeDashboard.module.css              |   0
 .../SettingsLayout.js}                        |   4 +-
 .../SettingsLayout.module.css}                |   0
 .../pages/settings/account/AccountDetails.js  |  69 ++++++++++++
 .../pages/settings/account/AccountEditForm.js |  39 +++++++
 .../settings/account/ApiKeyDeleteForm.js      |  29 +++++
 .../pages/settings/account/ApiKeysList.js     |  46 ++++++++
 .../pages/settings/account/ApiKeysTable.js    | 100 ++++++++++++++++++
 .../settings/account/ApiKeysTable.module.css  |  31 ++++++
 .../settings/account/PasswordEditForm.js      |  67 ++++++++++++
 .../settings/account/PasswordResetForm.js     |  50 +++++++++
 .../{ => settings/profile}/ProfileSettings.js |   2 +-
 .../settings/teams}/TeamAddForm.js            |   6 +-
 .../pages/{ => settings/teams}/TeamDetails.js |  17 ++-
 .../settings/teams}/TeamEditForm.js           |  35 +++++-
 .../pages/settings/teams/TeamMembers.js       |  16 +++
 .../settings/teams}/TeamMembersTable.js       |  27 +++--
 .../pages/{ => settings/teams}/TeamsList.js   |  27 ++---
 .../settings/teams}/TeamsTable.js             |  11 +-
 .../settings/teams}/TeamsTable.module.css     |   0
 .../pages/{ => settings/users}/UserDelete.js  |   2 +-
 .../settings/users}/UserDeleteForm.js         |   7 +-
 .../settings/users}/UserEditForm.js           |   0
 .../settings/users}/UserForm.module.css       |   0
 .../settings/users}/UserPasswordForm.js       |   0
 .../users}/UserPasswordForm.module.css        |   0
 .../{ => settings/users}/UserSettings.js      |   6 +-
 .../pages/{ => settings/users}/UsersList.js   |   2 +-
 .../settings/users}/UsersTable.js             |   0
 .../settings/users}/UsersTable.module.css     |   0
 .../settings/websites/ShareUrl.js}            |   4 +-
 .../pages/settings/websites/TrackingCode.js   |  16 +++
 .../settings/websites}/WebsiteAddForm.js      |   6 +-
 .../settings/websites}/WebsiteDeleteForm.js   |  10 +-
 .../websites/WebsiteDetails.js}               |  27 +++--
 .../settings/websites}/WebsiteEditForm.js     |   3 +-
 .../settings/websites}/WebsiteReset.js        |   4 +-
 .../settings/websites}/WebsiteResetForm.js    |  10 +-
 .../{ => settings/websites}/WebsitesList.js   |  28 +++--
 .../settings/websites}/WebsitesTable.js       |   6 +-
 .../websites}/WebsitesTable.module.css        |   0
 .../pages/{ => websites}/WebsiteChartList.js  |   0
 .../pages/{ => websites}/WebsiteDetails.js    |   6 +-
 .../{ => websites}/WebsiteDetails.module.css  |   0
 .../{ => websites}/WebsiteList.module.css     |   0
 lib/constants.ts                              |   1 +
 package.json                                  |   2 +-
 pages/404.js                                  |  12 ++-
 pages/_app.js                                 |  16 +++
 pages/console/[[...id]].js                    |   2 +-
 pages/dashboard/[[...id]].js                  |   2 +-
 pages/login.js                                |   2 +-
 pages/profile/index.js                        |  17 ---
 pages/realtime.js                             |   2 +-
 pages/settings/index.js                       |  10 ++
 pages/settings/profile/index.js               |  10 ++
 pages/{ => settings}/teams/[...id].js         |   8 +-
 pages/settings/teams/index.js                 |  17 +++
 pages/{ => settings}/users/[...id].js         |   8 +-
 pages/{ => settings}/users/index.js           |   8 +-
 .../websites/[id]/index.js}                   |  10 +-
 pages/{ => settings}/websites/index.js        |   8 +-
 pages/share/[...id].js                        |   2 +-
 pages/teams/index.js                          |  17 ---
 pages/websites/[id]/index.js                  |   2 +-
 styles/index.css                              |  36 +------
 styles/locale.css                             |  29 +++++
 yarn.lock                                     |   8 +-
 91 files changed, 736 insertions(+), 353 deletions(-)
 create mode 100644 assets/lock.svg
 delete mode 100644 components/forms/Form.module.css
 delete mode 100644 components/forms/TrackingCodeForm.js
 rename components/{forms => metrics}/DatePickerForm.js (100%)
 rename components/{forms => metrics}/DatePickerForm.module.css (100%)
 rename components/{forms => metrics}/EventDataForm.js (99%)
 rename components/{forms => metrics}/EventDataForm.module.css (100%)
 rename components/pages/{ => console}/TestConsole.js (100%)
 rename components/pages/{ => console}/TestConsole.module.css (100%)
 rename components/pages/{ => dashboard}/Dashboard.js (92%)
 rename components/pages/{ => dashboard}/DashboardEdit.js (100%)
 rename components/pages/{ => dashboard}/DashboardEdit.module.css (100%)
 rename components/{forms => pages/login}/LoginForm.js (85%)
 rename components/{forms => pages/login}/LoginForm.module.css (100%)
 rename components/pages/{ => realtime}/RealtimeDashboard.js (100%)
 rename components/pages/{ => realtime}/RealtimeDashboard.module.css (100%)
 rename components/pages/{Settings.js => settings/SettingsLayout.js} (80%)
 rename components/pages/{Settings.module.css => settings/SettingsLayout.module.css} (100%)
 create mode 100644 components/pages/settings/account/AccountDetails.js
 create mode 100644 components/pages/settings/account/AccountEditForm.js
 create mode 100644 components/pages/settings/account/ApiKeyDeleteForm.js
 create mode 100644 components/pages/settings/account/ApiKeysList.js
 create mode 100644 components/pages/settings/account/ApiKeysTable.js
 create mode 100644 components/pages/settings/account/ApiKeysTable.module.css
 create mode 100644 components/pages/settings/account/PasswordEditForm.js
 create mode 100644 components/pages/settings/account/PasswordResetForm.js
 rename components/pages/{ => settings/profile}/ProfileSettings.js (94%)
 rename components/{forms => pages/settings/teams}/TeamAddForm.js (81%)
 rename components/pages/{ => settings/teams}/TeamDetails.js (73%)
 rename components/{forms => pages/settings/teams}/TeamEditForm.js (51%)
 create mode 100644 components/pages/settings/teams/TeamMembers.js
 rename components/{tables => pages/settings/teams}/TeamMembersTable.js (69%)
 rename components/pages/{ => settings/teams}/TeamsList.js (63%)
 rename components/{tables => pages/settings/teams}/TeamsTable.js (82%)
 rename components/{tables => pages/settings/teams}/TeamsTable.module.css (100%)
 rename components/pages/{ => settings/users}/UserDelete.js (91%)
 rename components/{forms => pages/settings/users}/UserDeleteForm.js (78%)
 rename components/{forms => pages/settings/users}/UserEditForm.js (100%)
 rename components/{forms => pages/settings/users}/UserForm.module.css (100%)
 rename components/{forms => pages/settings/users}/UserPasswordForm.js (100%)
 rename components/{forms => pages/settings/users}/UserPasswordForm.module.css (100%)
 rename components/pages/{ => settings/users}/UserSettings.js (91%)
 rename components/pages/{ => settings/users}/UsersList.js (94%)
 rename components/{tables => pages/settings/users}/UsersTable.js (100%)
 rename components/{tables => pages/settings/users}/UsersTable.module.css (100%)
 rename components/{forms/ShareUrlForm.js => pages/settings/websites/ShareUrl.js} (93%)
 create mode 100644 components/pages/settings/websites/TrackingCode.js
 rename components/{forms => pages/settings/websites}/WebsiteAddForm.js (86%)
 rename components/{forms => pages/settings/websites}/WebsiteDeleteForm.js (72%)
 rename components/pages/{WebsiteSettings.js => settings/websites/WebsiteDetails.js} (67%)
 rename components/{forms => pages/settings/websites}/WebsiteEditForm.js (94%)
 rename components/{forms => pages/settings/websites}/WebsiteReset.js (89%)
 rename components/{forms => pages/settings/websites}/WebsiteResetForm.js (72%)
 rename components/pages/{ => settings/websites}/WebsitesList.js (64%)
 rename components/{tables => pages/settings/websites}/WebsitesTable.js (92%)
 rename components/{tables => pages/settings/websites}/WebsitesTable.module.css (100%)
 rename components/pages/{ => websites}/WebsiteChartList.js (100%)
 rename components/pages/{ => websites}/WebsiteDetails.js (97%)
 rename components/pages/{ => websites}/WebsiteDetails.module.css (100%)
 rename components/pages/{ => websites}/WebsiteList.module.css (100%)
 delete mode 100644 pages/profile/index.js
 create mode 100644 pages/settings/index.js
 create mode 100644 pages/settings/profile/index.js
 rename pages/{ => settings}/teams/[...id].js (61%)
 create mode 100644 pages/settings/teams/index.js
 rename pages/{ => settings}/users/[...id].js (61%)
 rename pages/{ => settings}/users/index.js (60%)
 rename pages/{websites/[id]/settings.js => settings/websites/[id]/index.js} (54%)
 rename pages/{ => settings}/websites/index.js (62%)
 delete mode 100644 pages/teams/index.js
 create mode 100644 styles/locale.css

diff --git a/assets/lock.svg b/assets/lock.svg
new file mode 100644
index 00000000..c13fb7c7
--- /dev/null
+++ b/assets/lock.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 9H18V6c0-3.309-2.691-6-6-6S6 2.691 6 6v3h-.75A2.253 2.253 0 0 0 3 11.25v10.5C3 22.991 4.01 24 5.25 24h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5C21 10.009 19.99 9 18.75 9zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v3H8zm5 10.722V19a1 1 0 1 1-2 0v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z"/></svg>
\ No newline at end of file
diff --git a/assets/user.svg b/assets/user.svg
index 62df2c42..133b1bc1 100644
--- a/assets/user.svg
+++ b/assets/user.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1652 1652"><g data-name="Layer 2"><path d="M1587.07 504.47A828.56 828.56 0 1 0 1652 826a823.13 823.13 0 0 0-64.93-321.53ZM826 1577a747.29 747.29 0 0 1-464.48-161.26 39.94 39.94 0 0 0 2.8-11.35 458.82 458.82 0 0 1 34.29-135.74 464.15 464.15 0 0 1 854.78 0 458.82 458.82 0 0 1 34.29 135.74 39.94 39.94 0 0 0 2.8 11.35A747.29 747.29 0 0 1 826 1577ZM719.81 866.57A274 274 0 1 1 826 888a272.1 272.1 0 0 1-106.19-21.43Zm641.28 485.87c-36.11-201.1-182.78-363.82-374.86-423 114.28-58.37 192.53-177.22 192.53-314.35 0-194.83-157.94-352.76-352.76-352.76S473.24 420.29 473.24 615.12c0 137.13 78.25 256 192.53 314.35-192.08 59.15-338.75 221.87-374.86 423C157.46 1216.81 75 1030.86 75 826 75 411.9 411.9 75 826 75s751 336.9 751 751c0 204.86-82.46 390.81-215.91 526.44Z" data-name="Layer 1"/></g></svg>
\ No newline at end of file
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"/></svg>
\ No newline at end of file
diff --git a/components/common/DateFilter.js b/components/common/DateFilter.js
index e48a7925..3c0431c4 100644
--- a/components/common/DateFilter.js
+++ b/components/common/DateFilter.js
@@ -1,5 +1,5 @@
 import Calendar from 'assets/calendar-alt.svg';
-import DatePickerForm from 'components/forms/DatePickerForm';
+import DatePickerForm from 'components/metrics/DatePickerForm';
 import { endOfYear, isSameDay } from 'date-fns';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
diff --git a/components/common/EventDataButton.js b/components/common/EventDataButton.js
index 66f06871..683bcf20 100644
--- a/components/common/EventDataButton.js
+++ b/components/common/EventDataButton.js
@@ -1,5 +1,5 @@
 import List from 'assets/list-ul.svg';
-import EventDataForm from 'components/forms/EventDataForm';
+import EventDataForm from 'components/metrics/EventDataForm';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { Button, Icon, Modal } from 'react-basics';
diff --git a/components/common/HamburgerButton.js b/components/common/HamburgerButton.js
index 67a1c83a..cb362297 100644
--- a/components/common/HamburgerButton.js
+++ b/components/common/HamburgerButton.js
@@ -12,7 +12,10 @@ const menuItems = [
     value: '/dashboard',
   },
   { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
-  { label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
+  {
+    label: <FormattedMessage id="label.settings" defaultMessage="SettingsLayout" />,
+    value: '/settings',
+  },
   {
     label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
     value: '/settings/profile',
diff --git a/components/forms/Form.module.css b/components/forms/Form.module.css
deleted file mode 100644
index 9185da43..00000000
--- a/components/forms/Form.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  width: 300px;
-  margin: 0 auto;
-}
-
-.header {
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
-  margin: 30px auto;
-}
-
-.info {
-  text-align: center;
-  padding: 30px 0;
-}
-
-.footer {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  font-size: 14px;
-  text-align: center;
-  margin: 30px auto;
-}
-
-.footer a {
-  font-weight: 600;
-}
-
-.buttons {
-  justify-content: center;
-}
-
-.button {
-  flex: 1;
-  justify-content: center;
-}
-
-.error {
-  width: 600px;
-  margin: 0 auto 30px;
-  background: var(--base50);
-  padding: 16px;
-  color: var(--red400);
-  border: 1px solid var(--red400);
-  border-radius: 5px;
-  text-align: center;
-}
-
-.success {
-  width: 600px;
-  margin: 60px auto;
-  background: var(--base50);
-  padding: 16px;
-  color: var(--green400);
-  border: 1px solid var(--green400);
-  border-radius: 5px;
-  text-align: center;
-}
diff --git a/components/forms/TrackingCodeForm.js b/components/forms/TrackingCodeForm.js
deleted file mode 100644
index 191248f5..00000000
--- a/components/forms/TrackingCodeForm.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import useConfig from 'hooks/useConfig';
-import { useRef } from 'react';
-import { Form, FormRow, TextArea } from 'react-basics';
-
-export default function TrackingCodeForm({ websiteId }) {
-  const ref = useRef(null);
-  const { trackerScriptName } = useConfig();
-  const code = `<script async defer src="${trackerScriptName}" data-website-id="${websiteId}"></script>`;
-
-  return (
-    <>
-      <Form ref={ref}>
-        <FormRow>
-          <p>
-            To track stats for this website, place the following code in the{' '}
-            <code>&lt;head&gt;</code> section of your HTML.
-          </p>
-          <TextArea rows={4} value={code} readOnly allowCopy />
-        </FormRow>
-      </Form>
-    </>
-  );
-}
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 53f5d6ee..695e78e3 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -10,7 +10,6 @@ import useUser from 'hooks/useUser';
 import { HOMEPAGE_URL } from 'lib/constants';
 import { useRouter } from 'next/router';
 import { Column, Icon, Row } from 'react-basics';
-import { FormattedMessage } from 'react-intl';
 import SettingsButton from '../settings/SettingsButton';
 import styles from './Header.module.css';
 
@@ -33,19 +32,6 @@ export default function Header() {
             <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
           </Column>
           <HamburgerButton />
-          {user && !adminDisabled && (
-            <div className={styles.links}>
-              <Link href="/dashboard">
-                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-              </Link>
-              <Link href="/realtime">
-                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-              </Link>
-              <Link href="/websites">
-                <FormattedMessage id="label.settings" defaultMessage="Settings" />
-              </Link>
-            </div>
-          )}
           <Column className={styles.buttons}>
             <ThemeButton />
             <LanguageButton menuAlign="right" />
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 1a8d4887..f1c31bb0 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -3,26 +3,14 @@ import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
 import useLocale from 'hooks/useLocale';
-import { useRouter } from 'next/router';
 
 export default function Layout({ title, children, header = true, footer = true }) {
   const { dir } = useLocale();
-  const { basePath } = useRouter();
 
   return (
     <Container dir={dir} style={{ maxWidth: 1140 }}>
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
-        <link rel="icon" href={`${basePath}/favicon.ico`} />
-        <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
-        <link rel="manifest" href={`${basePath}/site.webmanifest`} />
-        <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
-        <meta name="msapplication-TileColor" content="#da532c" />
-        <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
-        <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       {header && <Header />}
       <main>{children}</main>
diff --git a/components/layout/Page.js b/components/layout/Page.js
index cc402e56..ff6e049d 100644
--- a/components/layout/Page.js
+++ b/components/layout/Page.js
@@ -8,7 +8,7 @@ export default function Page({ className, error, loading, children }) {
   }
 
   if (loading) {
-    return <Loading />;
+    return <Loading icon="spinner" size="xl" position="page" />;
   }
 
   return <div className={classNames(styles.page, className)}>{children}</div>;
diff --git a/components/forms/DatePickerForm.js b/components/metrics/DatePickerForm.js
similarity index 100%
rename from components/forms/DatePickerForm.js
rename to components/metrics/DatePickerForm.js
diff --git a/components/forms/DatePickerForm.module.css b/components/metrics/DatePickerForm.module.css
similarity index 100%
rename from components/forms/DatePickerForm.module.css
rename to components/metrics/DatePickerForm.module.css
diff --git a/components/forms/EventDataForm.js b/components/metrics/EventDataForm.js
similarity index 99%
rename from components/forms/EventDataForm.js
rename to components/metrics/EventDataForm.js
index 2795ff6b..c30377f5 100644
--- a/components/forms/EventDataForm.js
+++ b/components/metrics/EventDataForm.js
@@ -19,7 +19,7 @@ import {
   TextField,
 } from 'react-basics';
 import { FormattedMessage } from 'react-intl';
-import { FormMessage } from './../layout/FormLayout';
+import { FormMessage } from '../layout/FormLayout';
 import styles from './EventDataForm.module.css';
 
 export const filterOptions = [
diff --git a/components/forms/EventDataForm.module.css b/components/metrics/EventDataForm.module.css
similarity index 100%
rename from components/forms/EventDataForm.module.css
rename to components/metrics/EventDataForm.module.css
diff --git a/components/nav/Nav.js b/components/nav/Nav.js
index 722074bd..a1aa61c1 100644
--- a/components/nav/Nav.js
+++ b/components/nav/Nav.js
@@ -19,10 +19,10 @@ export default function Nav() {
   const handleSelect = () => {};
 
   const items = [
-    { icon: <Website />, label: 'Websites', url: '/websites' },
-    { icon: <User />, label: 'Users', url: '/users', hidden: !user.isAdmin },
-    { icon: <Team />, label: 'Teams', url: '/teams' },
-    { icon: <User />, label: 'Profile', url: '/profile' },
+    { icon: <Website />, label: 'Websites', url: '/settings/websites' },
+    { icon: <User />, label: 'Users', url: '/settings/users' },
+    { icon: <Team />, label: 'Teams', url: '/settings/teams' },
+    { icon: <User />, label: 'Profile', url: '/settings/profile' },
   ];
 
   return (
diff --git a/components/pages/TestConsole.js b/components/pages/console/TestConsole.js
similarity index 100%
rename from components/pages/TestConsole.js
rename to components/pages/console/TestConsole.js
diff --git a/components/pages/TestConsole.module.css b/components/pages/console/TestConsole.module.css
similarity index 100%
rename from components/pages/TestConsole.module.css
rename to components/pages/console/TestConsole.module.css
diff --git a/components/pages/Dashboard.js b/components/pages/dashboard/Dashboard.js
similarity index 92%
rename from components/pages/Dashboard.js
rename to components/pages/dashboard/Dashboard.js
index 113476c2..660e0c10 100644
--- a/components/pages/Dashboard.js
+++ b/components/pages/dashboard/Dashboard.js
@@ -3,13 +3,13 @@ import { Button, Loading } from 'react-basics';
 import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteChartList from 'components/pages/WebsiteChartList';
+import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
 import useApi from 'hooks/useApi';
 import useRequireLogin from 'hooks/useRequireLogin';
 import useDashboard from 'store/dashboard';
 import DashboardEdit from './DashboardEdit';
-import styles from './WebsiteList.module.css';
+import styles from '../websites/WebsiteList.module.css';
 
 const messages = defineMessages({
   dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
diff --git a/components/pages/DashboardEdit.js b/components/pages/dashboard/DashboardEdit.js
similarity index 100%
rename from components/pages/DashboardEdit.js
rename to components/pages/dashboard/DashboardEdit.js
diff --git a/components/pages/DashboardEdit.module.css b/components/pages/dashboard/DashboardEdit.module.css
similarity index 100%
rename from components/pages/DashboardEdit.module.css
rename to components/pages/dashboard/DashboardEdit.module.css
diff --git a/components/forms/LoginForm.js b/components/pages/login/LoginForm.js
similarity index 85%
rename from components/forms/LoginForm.js
rename to components/pages/login/LoginForm.js
index e7a31b9b..a05f87e8 100644
--- a/components/forms/LoginForm.js
+++ b/components/pages/login/LoginForm.js
@@ -14,7 +14,6 @@ import useApi from 'hooks/useApi';
 import { setUser } from 'store/app';
 import { setClientAuthToken } from 'lib/client';
 import Logo from 'assets/logo.svg';
-import styles from './Form.module.css';
 
 export default function LoginForm() {
   const router = useRouter();
@@ -34,13 +33,13 @@ export default function LoginForm() {
 
   return (
     <>
-      <div className={styles.header}>
+      <div>
         <Icon size="xl">
           <Logo />
         </Icon>
         <p>umami</p>
       </div>
-      <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+      <Form onSubmit={handleSubmit} error={error}>
         <FormRow label="Username">
           <FormInput name="username" rules={{ required: 'Required' }}>
             <TextField autoComplete="off" />
@@ -52,7 +51,7 @@ export default function LoginForm() {
           </FormInput>
         </FormRow>
         <FormButtons>
-          <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+          <SubmitButton variant="primary" disabled={isLoading}>
             Log in
           </SubmitButton>
         </FormButtons>
diff --git a/components/forms/LoginForm.module.css b/components/pages/login/LoginForm.module.css
similarity index 100%
rename from components/forms/LoginForm.module.css
rename to components/pages/login/LoginForm.module.css
diff --git a/components/pages/RealtimeDashboard.js b/components/pages/realtime/RealtimeDashboard.js
similarity index 100%
rename from components/pages/RealtimeDashboard.js
rename to components/pages/realtime/RealtimeDashboard.js
diff --git a/components/pages/RealtimeDashboard.module.css b/components/pages/realtime/RealtimeDashboard.module.css
similarity index 100%
rename from components/pages/RealtimeDashboard.module.css
rename to components/pages/realtime/RealtimeDashboard.module.css
diff --git a/components/pages/Settings.js b/components/pages/settings/SettingsLayout.js
similarity index 80%
rename from components/pages/Settings.js
rename to components/pages/settings/SettingsLayout.js
index f9e6401a..7e107596 100644
--- a/components/pages/Settings.js
+++ b/components/pages/settings/SettingsLayout.js
@@ -1,9 +1,9 @@
 import Layout from 'components/layout/Layout';
 import Menu from 'components/nav/Nav';
 import useRequireLogin from 'hooks/useRequireLogin';
-import styles from './Settings.module.css';
+import styles from './SettingsLayout.module.css';
 
-export default function Settings({ children }) {
+export default function SettingsLayout({ children }) {
   const { user } = useRequireLogin();
 
   if (!user) {
diff --git a/components/pages/Settings.module.css b/components/pages/settings/SettingsLayout.module.css
similarity index 100%
rename from components/pages/Settings.module.css
rename to components/pages/settings/SettingsLayout.module.css
diff --git a/components/pages/settings/account/AccountDetails.js b/components/pages/settings/account/AccountDetails.js
new file mode 100644
index 00000000..4ebd329f
--- /dev/null
+++ b/components/pages/settings/account/AccountDetails.js
@@ -0,0 +1,69 @@
+import { Button, Modal, useToast, Icon, Tabs, Item } from 'react-basics';
+import { useEffect, useState } from 'react';
+import useApi from 'hooks/useApi';
+import PasswordEditForm from 'components/pages/settings/account/PasswordEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import AccountEditForm from 'components/pages/settings/account/AccountEditForm';
+import Lock from 'assets/lock.svg';
+import Page from 'components/layout/Page';
+import ApiKeysList from 'components/pages/settings/account/ApiKeysList';
+import useUser from 'hooks/useUser';
+
+export default function AccountDetails() {
+  const { user } = useUser();
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('detail');
+  const [showForm, setShowForm] = useState(false);
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['account'], () => get(`/accounts/${user.id}`), {
+    cacheTime: 0,
+  });
+  const { toast, showToast } = useToast();
+
+  const handleChangePassword = () => setShowForm(true);
+
+  const handleClose = () => {
+    setShowForm(false);
+  };
+
+  const handleSave = data => {
+    setValues(data);
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+  };
+
+  const handlePasswordSave = () => {
+    setShowForm(false);
+    showToast({ message: 'Password successfully changed', variant: 'success' });
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader title="Account">
+        <Button onClick={handleChangePassword}>
+          <Icon>
+            <Lock />
+          </Icon>
+          Change password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="detail">Details</Item>
+        <Item key="apiKey">API Keys</Item>
+      </Tabs>
+      {tab === 'detail' && <AccountEditForm data={values} onSave={handleSave} />}
+      {tab === 'apiKey' && <ApiKeysList />}
+      {data && showForm && (
+        <Modal title="Change password" onClose={handleClose} style={{ fontWeight: 'bold' }}>
+          {close => <PasswordEditForm onSave={handlePasswordSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}
diff --git a/components/pages/settings/account/AccountEditForm.js b/components/pages/settings/account/AccountEditForm.js
new file mode 100644
index 00000000..6f4ce184
--- /dev/null
+++ b/components/pages/settings/account/AccountEditForm.js
@@ -0,0 +1,39 @@
+import { Form, FormRow, FormButtons, FormInput, TextField, SubmitButton } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'hooks/useApi';
+
+export default function AccountEditForm({ data, onSave }) {
+  const { id } = data;
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(({ name }) => post(`/accounts/${id}`, { name }));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Form key={id} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+        <FormRow label="Name">
+          <FormInput name="name">
+            <TextField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Email">
+          <FormInput name="email">
+            <TextField readOnly />
+          </FormInput>
+        </FormRow>
+        <FormButtons>
+          <SubmitButton variant="primary">Save</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
diff --git a/components/pages/settings/account/ApiKeyDeleteForm.js b/components/pages/settings/account/ApiKeyDeleteForm.js
new file mode 100644
index 00000000..ec5abdc8
--- /dev/null
+++ b/components/pages/settings/account/ApiKeyDeleteForm.js
@@ -0,0 +1,29 @@
+import useApi from 'hooks/useApi';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+
+export default function ApiKeyDeleteForm({ apiKeyId, onSave, onClose }) {
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/api-key/${apiKeyId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>Are you sure you want to delete this API KEY?</div>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Delete
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}
diff --git a/components/pages/settings/account/ApiKeysList.js b/components/pages/settings/account/ApiKeysList.js
new file mode 100644
index 00000000..6211a2b2
--- /dev/null
+++ b/components/pages/settings/account/ApiKeysList.js
@@ -0,0 +1,46 @@
+import { Text, Icon, useToast, Banner, LoadingButton, Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import ApiKeysTable from 'components/pages/settings/account/ApiKeysTable';
+
+export default function ApiKeysList() {
+  const { toast, showToast } = useToast();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, isLoading: isUpdating } = useMutation(data => post('/api-key', data));
+  const { data, refetch, isLoading, error } = useQuery(['api-key'], () => get(`/api-key`));
+  const hasData = data && data.length !== 0;
+
+  const handleCreate = () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          showToast({ message: 'API key saved.', variant: 'success' });
+          await handleSave();
+        },
+      },
+    );
+  };
+
+  const handleSave = async () => {
+    await refetch();
+  };
+
+  if (error) {
+    return <Banner variant="error">Something went wrong.</Banner>;
+  }
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return (
+    <>
+      {toast}
+      <LoadingButton loading={isUpdating} onClick={handleCreate}>
+        <Icon icon="plus" /> Create key
+      </LoadingButton>
+      {hasData && <ApiKeysTable data={data} onSave={handleSave} />}
+      {!hasData && <Text>You don&apos;t have any API keys.</Text>}
+    </>
+  );
+}
diff --git a/components/pages/settings/account/ApiKeysTable.js b/components/pages/settings/account/ApiKeysTable.js
new file mode 100644
index 00000000..236e76af
--- /dev/null
+++ b/components/pages/settings/account/ApiKeysTable.js
@@ -0,0 +1,100 @@
+import { formatDistance } from 'date-fns';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Modal,
+  PasswordField,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Text,
+} from 'react-basics';
+import ApiKeyDeleteForm from 'components/pages/settings/account/ApiKeyDeleteForm';
+import Trash from 'assets/trash.svg';
+import styles from './ApiKeysTable.module.css';
+
+const columns = [
+  { name: 'apiKey', label: 'Key', style: { flex: 3 } },
+  { name: 'created', label: 'Created', style: { flex: 1 } },
+  { name: 'action', label: ' ', style: { flex: 1 } },
+];
+
+export default function ApiKeysTable({ data = [], onSave }) {
+  const [apiKeyId, setApiKeyId] = useState(null);
+
+  const handleSave = () => {
+    setApiKeyId(null);
+    onSave();
+  };
+
+  const handleClose = () => {
+    setApiKeyId(null);
+  };
+
+  const handleDelete = id => {
+    setApiKeyId(id);
+  };
+
+  return (
+    <>
+      <Table className={styles.table} columns={columns} rows={data}>
+        <TableHeader>
+          {(column, index) => {
+            return (
+              <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+                {column.label}
+              </TableColumn>
+            );
+          }}
+        </TableHeader>
+        <TableBody>
+          {(row, keys, rowIndex) => {
+            row.apiKey = <PasswordField className={styles.input} value={row.key} readOnly={true} />;
+
+            row.created = formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+            });
+
+            row.action = (
+              <div className={styles.actions}>
+                <a target="_blank">
+                  <Button onClick={() => handleDelete(row.id)}>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>Delete</Text>
+                  </Button>
+                </a>
+              </div>
+            );
+
+            return (
+              <TableRow key={rowIndex} data={row} keys={keys}>
+                {(data, key, colIndex) => {
+                  return (
+                    <TableCell
+                      key={colIndex}
+                      className={styles.cell}
+                      style={{ ...columns[colIndex]?.style }}
+                    >
+                      {data[key]}
+                    </TableCell>
+                  );
+                }}
+              </TableRow>
+            );
+          }}
+        </TableBody>
+      </Table>
+      {apiKeyId && (
+        <Modal title="Delete API key" onClose={handleClose}>
+          {close => <ApiKeyDeleteForm apiKeyId={apiKeyId} onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/components/pages/settings/account/ApiKeysTable.module.css b/components/pages/settings/account/ApiKeysTable.module.css
new file mode 100644
index 00000000..cc2feee5
--- /dev/null
+++ b/components/pages/settings/account/ApiKeysTable.module.css
@@ -0,0 +1,31 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.header:first-child,
+.cell:first-child {
+  min-width: 320px;
+}
+
+.input {
+  flex: 2;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.empty {
+  min-height: 300px;
+}
diff --git a/components/pages/settings/account/PasswordEditForm.js b/components/pages/settings/account/PasswordEditForm.js
new file mode 100644
index 00000000..17cc8447
--- /dev/null
+++ b/components/pages/settings/account/PasswordEditForm.js
@@ -0,0 +1,67 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+import useUser from 'hooks/useUser';
+
+export default function PasswordEditForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { user } = useUser();
+  const { mutate, error, isLoading } = useMutation(data =>
+    post(`/accounts/${user.id}/change-password`, data),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label="Current password">
+        <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="New password">
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Confirm password">
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button onClick={onClose}>Cancel</Button>
+      </FormButtons>
+    </Form>
+  );
+}
diff --git a/components/pages/settings/account/PasswordResetForm.js b/components/pages/settings/account/PasswordResetForm.js
new file mode 100644
index 00000000..ef562208
--- /dev/null
+++ b/components/pages/settings/account/PasswordResetForm.js
@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, SubmitButton } from 'react-basics';
+import useApi from 'hooks/useApi';
+
+export default function PasswordResetForm({ token, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data =>
+    post('/accounts/reset-password', { ...data, token }),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <>
+      <Form ref={ref} onSubmit={handleSubmit} error={error}>
+        <h2>Reset your password</h2>
+        <FormRow label="New password">
+          <FormInput name="newPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Confirm password">
+          <FormInput
+            name="confirmPassword"
+            rules={{ required: 'Required', validate: samePassword }}
+          >
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormButtons align="center">
+          <SubmitButton variant="primary">Update password</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
diff --git a/components/pages/ProfileSettings.js b/components/pages/settings/profile/ProfileSettings.js
similarity index 94%
rename from components/pages/ProfileSettings.js
rename to components/pages/settings/profile/ProfileSettings.js
index 44b93f05..03f73a8a 100644
--- a/components/pages/ProfileSettings.js
+++ b/components/pages/settings/profile/ProfileSettings.js
@@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from 'components/settings/ProfileDetails';
 import { useState } from 'react';
 import { Breadcrumbs, Icon, Item, Tabs, useToast, Modal, Button } from 'react-basics';
-import UserPasswordForm from 'components/forms/UserPasswordForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
 import Pen from 'assets/pen.svg';
 
 export default function ProfileSettings() {
diff --git a/components/forms/TeamAddForm.js b/components/pages/settings/teams/TeamAddForm.js
similarity index 81%
rename from components/forms/TeamAddForm.js
rename to components/pages/settings/teams/TeamAddForm.js
index ff47931d..b7d2e599 100644
--- a/components/forms/TeamAddForm.js
+++ b/components/pages/settings/teams/TeamAddForm.js
@@ -1,11 +1,9 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
-import styles from './Form.module.css';
-import { useMutation } from '@tanstack/react-query';
 
 export default function TeamAddForm({ onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
   const ref = useRef(null);
 
@@ -18,7 +16,7 @@ export default function TeamAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label="Name">
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />
diff --git a/components/pages/TeamDetails.js b/components/pages/settings/teams/TeamDetails.js
similarity index 73%
rename from components/pages/TeamDetails.js
rename to components/pages/settings/teams/TeamDetails.js
index 979d34ab..c00b714a 100644
--- a/components/pages/TeamDetails.js
+++ b/components/pages/settings/teams/TeamDetails.js
@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
-import { useQuery } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
-import TeamEditForm from 'components/forms/TeamEditForm';
+import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import TeamMembersTable from '../tables/TeamMembersTable';
+import TeamMembers from 'components/pages/settings/teams/TeamMembers';
 
 export default function TeamDetails({ teamId }) {
   const [values, setValues] = useState(null);
-  const [tab, setTab] = useState('general');
-  const { get } = useApi();
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['team', teamId],
@@ -40,18 +39,18 @@ export default function TeamDetails({ teamId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/teams">Teams</Link>
+            <Link href="/settings/teams">Teams</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="general">General</Item>
+        <Item key="details">Details</Item>
         <Item key="members">Members</Item>
         <Item key="websites">Websites</Item>
       </Tabs>
-      {tab === 'general' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
-      {tab === 'members' && <TeamMembersTable teamId={teamId} />}
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} />}
     </Page>
   );
 }
diff --git a/components/forms/TeamEditForm.js b/components/pages/settings/teams/TeamEditForm.js
similarity index 51%
rename from components/forms/TeamEditForm.js
rename to components/pages/settings/teams/TeamEditForm.js
index e4fa2c6b..03ca7215 100644
--- a/components/forms/TeamEditForm.js
+++ b/components/pages/settings/teams/TeamEditForm.js
@@ -1,12 +1,24 @@
-import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
-import { useMutation } from '@tanstack/react-query';
-import { useRef } from 'react';
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useRef, useState } from 'react';
 import useApi from 'hooks/useApi';
 
+const generateId = () => getRandomChars(16);
+
 export default function TeamEditForm({ teamId, data, onSave }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
   const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(data.accessCode);
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -17,6 +29,15 @@ export default function TeamEditForm({ teamId, data, onSave }) {
     });
   };
 
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
       <FormRow label="Team ID">
@@ -27,6 +48,12 @@ export default function TeamEditForm({ teamId, data, onSave }) {
           <TextField />
         </FormInput>
       </FormRow>
+      <FormRow label="Access code">
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          <Button onClick={handleRegenerate}>Regenerate</Button>
+        </Flexbox>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary">Save</SubmitButton>
       </FormButtons>
diff --git a/components/pages/settings/teams/TeamMembers.js b/components/pages/settings/teams/TeamMembers.js
new file mode 100644
index 00000000..f4319955
--- /dev/null
+++ b/components/pages/settings/teams/TeamMembers.js
@@ -0,0 +1,16 @@
+import { Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
+
+export default function TeamMembers({ teamId }) {
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['team-members', teamId], () =>
+    get(`/teams/${teamId}/users`),
+  );
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return <TeamMembersTable data={data} />;
+}
diff --git a/components/tables/TeamMembersTable.js b/components/pages/settings/teams/TeamMembersTable.js
similarity index 69%
rename from components/tables/TeamMembersTable.js
rename to components/pages/settings/teams/TeamMembersTable.js
index 30b946fc..a4b92fb8 100644
--- a/components/tables/TeamMembersTable.js
+++ b/components/pages/settings/teams/TeamMembersTable.js
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import {
   Table,
   TableHeader,
@@ -11,9 +10,15 @@ import {
 } from 'react-basics';
 import styles from './TeamsTable.module.css';
 
-export default function TeamMembersTable({ columns = [], rows = [] }) {
+const columns = [
+  { name: 'username', label: 'Username', style: { flex: 4 } },
+  { name: 'role', label: 'Role' },
+  { name: 'action', label: '' },
+];
+
+export default function TeamMembersTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={rows}>
+    <Table className={styles.table} columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -25,18 +30,12 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
       </TableHeader>
       <TableBody>
         {(row, keys, rowIndex) => {
-          const { id } = row;
-
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/teams/${id}`} shallow>
-                <a>
-                  <Button>
-                    <Icon icon="arrow-right" />
-                    Settings
-                  </Button>
-                </a>
-              </Link>
+              <Button>
+                <Icon icon="cross" />
+                Remove
+              </Button>
             </div>
           );
 
@@ -49,7 +48,7 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
                     className={styles.cell}
                     style={{ ...columns[colIndex]?.style }}
                   >
-                    {data[key]}
+                    {data[key] ?? data?.user?.[key]}
                   </TableCell>
                 );
               }}
diff --git a/components/pages/TeamsList.js b/components/pages/settings/teams/TeamsList.js
similarity index 63%
rename from components/pages/TeamsList.js
rename to components/pages/settings/teams/TeamsList.js
index 50dee246..b1a30f80 100644
--- a/components/pages/TeamsList.js
+++ b/components/pages/settings/teams/TeamsList.js
@@ -1,26 +1,20 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
+import { Button, Icon, Modal, useToast } from 'react-basics';
 import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import TeamAddForm from 'components/forms/TeamAddForm';
+import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
-import TeamsTable from 'components/tables/TeamsTable';
+import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
-import { useQuery } from '@tanstack/react-query';
 
 export default function TeamsList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();
 
-  const columns = [
-    { name: 'name', label: 'Name', style: { flex: 2 } },
-    { name: 'action', label: ' ' },
-  ];
-
   const handleAdd = () => {
     setEdit(true);
   };
@@ -43,15 +37,12 @@ export default function TeamsList() {
           <Icon icon="plus" /> Create team
         </Button>
       </PageHeader>
-
-      {hasData && <TeamsTable columns={columns} rows={data} />}
+      {hasData && <TeamsTable data={data} />}
       {!hasData && (
-        <EmptyPlaceholder msg="You don't have any teams configured.">
-          <Flexbox justifyContent="center" alignItems="center">
-            <Button variant="primary" onClick={handleAdd}>
-              <Icon icon="plus" /> Create team
-            </Button>
-          </Flexbox>
+        <EmptyPlaceholder message="You don't have any teams configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Create team
+          </Button>
         </EmptyPlaceholder>
       )}
       {edit && (
diff --git a/components/tables/TeamsTable.js b/components/pages/settings/teams/TeamsTable.js
similarity index 82%
rename from components/tables/TeamsTable.js
rename to components/pages/settings/teams/TeamsTable.js
index 3d5bd16d..9082187a 100644
--- a/components/tables/TeamsTable.js
+++ b/components/pages/settings/teams/TeamsTable.js
@@ -11,9 +11,14 @@ import {
 } from 'react-basics';
 import styles from './TeamsTable.module.css';
 
-export default function TeamsTable({ columns = [], rows = [] }) {
+const columns = [
+  { name: 'name', label: 'Name', style: { flex: 2 } },
+  { name: 'action', label: ' ' },
+];
+
+export default function TeamsTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={rows}>
+    <Table className={styles.table} columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -29,7 +34,7 @@ export default function TeamsTable({ columns = [], rows = [] }) {
 
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/teams/${id}`} shallow>
+              <Link href={`/settings/teams/${id}`}>
                 <a>
                   <Button>
                     <Icon icon="arrow-right" />
diff --git a/components/tables/TeamsTable.module.css b/components/pages/settings/teams/TeamsTable.module.css
similarity index 100%
rename from components/tables/TeamsTable.module.css
rename to components/pages/settings/teams/TeamsTable.module.css
diff --git a/components/pages/UserDelete.js b/components/pages/settings/users/UserDelete.js
similarity index 91%
rename from components/pages/UserDelete.js
rename to components/pages/settings/users/UserDelete.js
index fe4423b9..756dce9c 100644
--- a/components/pages/UserDelete.js
+++ b/components/pages/settings/users/UserDelete.js
@@ -1,4 +1,4 @@
-import UserDeleteForm from 'components/forms/UserDeleteForm';
+import UserDeleteForm from 'components/pages/settings/users/UserDeleteForm';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Button, Form, FormRow, Modal } from 'react-basics';
diff --git a/components/forms/UserDeleteForm.js b/components/pages/settings/users/UserDeleteForm.js
similarity index 78%
rename from components/forms/UserDeleteForm.js
rename to components/pages/settings/users/UserDeleteForm.js
index 0370c8db..a63ee6cd 100644
--- a/components/forms/UserDeleteForm.js
+++ b/components/pages/settings/users/UserDeleteForm.js
@@ -9,7 +9,6 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
@@ -26,7 +25,7 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <p>
         To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </p>
@@ -36,10 +35,10 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>
diff --git a/components/forms/UserEditForm.js b/components/pages/settings/users/UserEditForm.js
similarity index 100%
rename from components/forms/UserEditForm.js
rename to components/pages/settings/users/UserEditForm.js
diff --git a/components/forms/UserForm.module.css b/components/pages/settings/users/UserForm.module.css
similarity index 100%
rename from components/forms/UserForm.module.css
rename to components/pages/settings/users/UserForm.module.css
diff --git a/components/forms/UserPasswordForm.js b/components/pages/settings/users/UserPasswordForm.js
similarity index 100%
rename from components/forms/UserPasswordForm.js
rename to components/pages/settings/users/UserPasswordForm.js
diff --git a/components/forms/UserPasswordForm.module.css b/components/pages/settings/users/UserPasswordForm.module.css
similarity index 100%
rename from components/forms/UserPasswordForm.module.css
rename to components/pages/settings/users/UserPasswordForm.module.css
diff --git a/components/pages/UserSettings.js b/components/pages/settings/users/UserSettings.js
similarity index 91%
rename from components/pages/UserSettings.js
rename to components/pages/settings/users/UserSettings.js
index 32edcb48..596fd725 100644
--- a/components/pages/UserSettings.js
+++ b/components/pages/settings/users/UserSettings.js
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
-import UserDelete from 'components/pages/UserDelete';
-import UserEditForm from 'components/forms/UserEditForm';
-import UserPasswordForm from 'components/forms/UserPasswordForm';
+import UserDelete from 'components/pages/settings/users/UserDelete';
+import UserEditForm from 'components/pages/settings/users/UserEditForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import useApi from 'hooks/useApi';
diff --git a/components/pages/UsersList.js b/components/pages/settings/users/UsersList.js
similarity index 94%
rename from components/pages/UsersList.js
rename to components/pages/settings/users/UsersList.js
index 194d5e01..5f057747 100644
--- a/components/pages/UsersList.js
+++ b/components/pages/settings/users/UsersList.js
@@ -1,6 +1,6 @@
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import UsersTable from 'components/tables/UsersTable';
+import UsersTable from 'components/pages/settings/users/UsersTable';
 import { useState } from 'react';
 import { Button, Icon, useToast } from 'react-basics';
 import { useMutation } from '@tanstack/react-query';
diff --git a/components/tables/UsersTable.js b/components/pages/settings/users/UsersTable.js
similarity index 100%
rename from components/tables/UsersTable.js
rename to components/pages/settings/users/UsersTable.js
diff --git a/components/tables/UsersTable.module.css b/components/pages/settings/users/UsersTable.module.css
similarity index 100%
rename from components/tables/UsersTable.module.css
rename to components/pages/settings/users/UsersTable.module.css
diff --git a/components/forms/ShareUrlForm.js b/components/pages/settings/websites/ShareUrl.js
similarity index 93%
rename from components/forms/ShareUrlForm.js
rename to components/pages/settings/websites/ShareUrl.js
index 355feac5..a8327ebf 100644
--- a/components/forms/ShareUrlForm.js
+++ b/components/pages/settings/websites/ShareUrl.js
@@ -14,7 +14,7 @@ import useApi from 'hooks/useApi';
 
 const generateId = () => getRandomChars(16);
 
-export default function ShareUrlForm({ websiteId, data, onSave }) {
+export default function ShareUrl({ websiteId, data, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
@@ -23,7 +23,7 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
   );
   const ref = useRef(null);
   const url = useMemo(
-    () => `${location.origin}/share/${id}/${encodeURIComponent(name)}`,
+    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
     [id, name],
   );
 
diff --git a/components/pages/settings/websites/TrackingCode.js b/components/pages/settings/websites/TrackingCode.js
new file mode 100644
index 00000000..dd2b351a
--- /dev/null
+++ b/components/pages/settings/websites/TrackingCode.js
@@ -0,0 +1,16 @@
+import { TextArea } from 'react-basics';
+import { TRACKER_SCRIPT_URL } from 'lib/constants';
+
+export default function TrackingCode({ websiteId }) {
+  const code = `<script async src="${TRACKER_SCRIPT_URL}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <>
+      <p>
+        To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
+        section of your HTML.
+      </p>
+      <TextArea rows={4} value={code} readOnly allowCopy />
+    </>
+  );
+}
diff --git a/components/forms/WebsiteAddForm.js b/components/pages/settings/websites/WebsiteAddForm.js
similarity index 86%
rename from components/forms/WebsiteAddForm.js
rename to components/pages/settings/websites/WebsiteAddForm.js
index 43abec78..6669af93 100644
--- a/components/forms/WebsiteAddForm.js
+++ b/components/pages/settings/websites/WebsiteAddForm.js
@@ -9,12 +9,10 @@ import {
   SubmitButton,
 } from 'react-basics';
 import useApi from 'hooks/useApi';
-import styles from './Form.module.css';
-import { useMutation } from '@tanstack/react-query';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
   const ref = useRef(null);
 
@@ -27,7 +25,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label="Name">
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />
diff --git a/components/forms/WebsiteDeleteForm.js b/components/pages/settings/websites/WebsiteDeleteForm.js
similarity index 72%
rename from components/forms/WebsiteDeleteForm.js
rename to components/pages/settings/websites/WebsiteDeleteForm.js
index 195c5a76..8dc72a10 100644
--- a/components/forms/WebsiteDeleteForm.js
+++ b/components/pages/settings/websites/WebsiteDeleteForm.js
@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import {
   Button,
@@ -9,12 +8,11 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
-  const { del } = useApi();
+  const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
 
   const handleSubmit = async data => {
@@ -26,7 +24,7 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <div>
         To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
@@ -36,10 +34,10 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>
diff --git a/components/pages/WebsiteSettings.js b/components/pages/settings/websites/WebsiteDetails.js
similarity index 67%
rename from components/pages/WebsiteSettings.js
rename to components/pages/settings/websites/WebsiteDetails.js
index b9738d41..d0002f42 100644
--- a/components/pages/WebsiteSettings.js
+++ b/components/pages/settings/websites/WebsiteDetails.js
@@ -1,20 +1,19 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
-import { useQuery } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
-import WebsiteEditForm from 'components/forms/WebsiteEditForm';
-import WebsiteReset from 'components/forms/WebsiteReset';
+import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
+import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
 import PageHeader from 'components/layout/PageHeader';
-import TrackingCodeForm from 'components/forms/TrackingCodeForm';
-import ShareUrlForm from 'components/forms/ShareUrlForm';
+import TrackingCode from 'components/pages/settings/websites/TrackingCode';
+import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import ExternalLink from 'assets/external-link.svg';
 
-export default function Websites({ websiteId }) {
+export default function WebsiteDetails({ websiteId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['website', websiteId],
@@ -43,7 +42,7 @@ export default function Websites({ websiteId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/websites">Websites</Link>
+            <Link href="/settings/websites">Websites</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
@@ -58,18 +57,18 @@ export default function Websites({ websiteId }) {
           </a>
         </Link>
       </PageHeader>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="details">General</Item>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">Details</Item>
         <Item key="tracking">Tracking code</Item>
         <Item key="share">Share URL</Item>
-        <Item key="danger">Danger zone</Item>
+        <Item key="actions">Actions</Item>
       </Tabs>
       {tab === 'details' && (
         <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
       )}
-      {tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />}
-      {tab === 'share' && <ShareUrlForm websiteId={websiteId} data={values} onSave={handleSave} />}
-      {tab === 'danger' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
+      {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'actions' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
     </Page>
   );
 }
diff --git a/components/forms/WebsiteEditForm.js b/components/pages/settings/websites/WebsiteEditForm.js
similarity index 94%
rename from components/forms/WebsiteEditForm.js
rename to components/pages/settings/websites/WebsiteEditForm.js
index 91bfd2f9..87e43e30 100644
--- a/components/forms/WebsiteEditForm.js
+++ b/components/pages/settings/websites/WebsiteEditForm.js
@@ -1,11 +1,10 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
-import { useMutation } from '@tanstack/react-query';
 import { useRef } from 'react';
 import useApi from 'hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteEditForm({ websiteId, data, onSave }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
   const ref = useRef(null);
 
diff --git a/components/forms/WebsiteReset.js b/components/pages/settings/websites/WebsiteReset.js
similarity index 89%
rename from components/forms/WebsiteReset.js
rename to components/pages/settings/websites/WebsiteReset.js
index 6534798b..f37b9e81 100644
--- a/components/forms/WebsiteReset.js
+++ b/components/pages/settings/websites/WebsiteReset.js
@@ -1,5 +1,5 @@
-import WebsiteDeleteForm from 'components/forms/WebsiteDeleteForm';
-import WebsiteResetForm from 'components/forms/WebsiteResetForm';
+import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
+import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Button, Form, FormRow, Modal } from 'react-basics';
diff --git a/components/forms/WebsiteResetForm.js b/components/pages/settings/websites/WebsiteResetForm.js
similarity index 72%
rename from components/forms/WebsiteResetForm.js
rename to components/pages/settings/websites/WebsiteResetForm.js
index 36307f32..2d58b37b 100644
--- a/components/forms/WebsiteResetForm.js
+++ b/components/pages/settings/websites/WebsiteResetForm.js
@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import {
   Button,
@@ -9,12 +8,11 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'RESET';
 
 export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data =>
     post(`/websites/${websiteId}/reset`, data),
   );
@@ -28,7 +26,7 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <div>
         To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
@@ -38,10 +36,10 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>
diff --git a/components/pages/WebsitesList.js b/components/pages/settings/websites/WebsitesList.js
similarity index 64%
rename from components/pages/WebsitesList.js
rename to components/pages/settings/websites/WebsitesList.js
index 8618db74..a4efcf2e 100644
--- a/components/pages/WebsitesList.js
+++ b/components/pages/settings/websites/WebsitesList.js
@@ -1,20 +1,18 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
+import { Button, Icon, Modal, useToast } from 'react-basics';
 import useApi from 'hooks/useApi';
-import { useQuery } from '@tanstack/react-query';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import WebsiteAddForm from 'components/forms/WebsiteAddForm';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import PageHeader from 'components/layout/PageHeader';
-import WebsitesTable from 'components/tables/WebsitesTable';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import Page from 'components/layout/Page';
 import useUser from 'hooks/useUser';
 
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
-  const [update, setUpdate] = useState(0);
-  const { get } = useApi();
-  const user = useUser();
-  const { data, isLoading, error } = useQuery(['websites', update], () =>
+  const { get, useQuery } = useApi();
+  const { user } = useUser();
+  const { data, isLoading, error, refetch } = useQuery(['websites', user.id], () =>
     get(`/users/${user.id}/websites`),
   );
   const hasData = data && data.length !== 0;
@@ -30,9 +28,9 @@ export default function WebsitesList() {
     setEdit(true);
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
+    await refetch();
     setEdit(false);
-    setUpdate(state => state + 1);
     showToast({ message: 'Website saved.', variant: 'success' });
   };
 
@@ -51,12 +49,10 @@ export default function WebsitesList() {
 
       {hasData && <WebsitesTable columns={columns} rows={data} />}
       {!hasData && (
-        <EmptyPlaceholder msg="You don't have any websites configured.">
-          <Flexbox justifyContent="center" alignItems="center">
-            <Button variant="primary" onClick={handleAdd}>
-              <Icon icon="plus" /> Add website
-            </Button>
-          </Flexbox>
+        <EmptyPlaceholder message="You don't have any websites configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Add website
+          </Button>
         </EmptyPlaceholder>
       )}
       {edit && (
diff --git a/components/tables/WebsitesTable.js b/components/pages/settings/websites/WebsitesTable.js
similarity index 92%
rename from components/tables/WebsitesTable.js
rename to components/pages/settings/websites/WebsitesTable.js
index d0b33420..0eec09d8 100644
--- a/components/tables/WebsitesTable.js
+++ b/components/pages/settings/websites/WebsitesTable.js
@@ -30,7 +30,7 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
 
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/websites/${id}/settings`} shallow>
+              <Link href={`/settings/websites/${id}`}>
                 <a>
                   <Button>
                     <Icon icon="arrow-right" />
@@ -38,8 +38,8 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
                   </Button>
                 </a>
               </Link>
-              <Link href={`/websites/${id}`}>
-                <a>
+              <Link href={`/analytics/websites/${id}`}>
+                <a target="_blank">
                   <Button>
                     <Icon>
                       <ExternalLink />
diff --git a/components/tables/WebsitesTable.module.css b/components/pages/settings/websites/WebsitesTable.module.css
similarity index 100%
rename from components/tables/WebsitesTable.module.css
rename to components/pages/settings/websites/WebsitesTable.module.css
diff --git a/components/pages/WebsiteChartList.js b/components/pages/websites/WebsiteChartList.js
similarity index 100%
rename from components/pages/WebsiteChartList.js
rename to components/pages/websites/WebsiteChartList.js
diff --git a/components/pages/WebsiteDetails.js b/components/pages/websites/WebsiteDetails.js
similarity index 97%
rename from components/pages/WebsiteDetails.js
rename to components/pages/websites/WebsiteDetails.js
index 88fa72f8..8b3b7242 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/websites/WebsiteDetails.js
@@ -21,9 +21,9 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import { useState } from 'react';
 import { Column, Loading } from 'react-basics';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import EventDataButton from './../common/EventDataButton';
-import EventsChart from './../metrics/EventsChart';
-import EventsTable from './../metrics/EventsTable';
+import EventDataButton from '../../common/EventDataButton';
+import EventsChart from '../../metrics/EventsChart';
+import EventsTable from '../../metrics/EventsTable';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({
diff --git a/components/pages/WebsiteDetails.module.css b/components/pages/websites/WebsiteDetails.module.css
similarity index 100%
rename from components/pages/WebsiteDetails.module.css
rename to components/pages/websites/WebsiteDetails.module.css
diff --git a/components/pages/WebsiteList.module.css b/components/pages/websites/WebsiteList.module.css
similarity index 100%
rename from components/pages/WebsiteList.module.css
rename to components/pages/websites/WebsiteList.module.css
diff --git a/lib/constants.ts b/lib/constants.ts
index c2be8f51..4819eb53 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -12,6 +12,7 @@ export const HOMEPAGE_URL = 'https://umami.is';
 export const REPO_URL = 'https://github.com/umami-software/umami';
 export const UPDATES_URL = 'https://api.umami.is/v1/updates';
 export const TELEMETRY_PIXEL = 'https://i.umami.is/a.png';
+export const TRACKER_SCRIPT_URL = '/script.js';
 
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_THEME = 'light';
diff --git a/package.json b/package.json
index 492aee24..f1037f4b 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
-    "react-basics": "^0.48.0",
+    "react-basics": "^0.50.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",
diff --git a/pages/404.js b/pages/404.js
index 0d8d8c7f..bd0e5a20 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,13 +1,17 @@
 import Layout from 'components/layout/Layout';
-import { FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
+});
 
 export default function Custom404() {
+  const { formatMessage } = useIntl();
+
   return (
     <Layout>
       <div className="row justify-content-center">
-        <h1>
-          <FormattedMessage id="message.page-not-found" defaultMessage="Page not found" />
-        </h1>
+        <h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
       </div>
     </Layout>
   );
diff --git a/pages/_app.js b/pages/_app.js
index 10fa09ec..a4ba51a5 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,9 +1,12 @@
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
 import useLocale from 'hooks/useLocale';
 import useConfig from 'hooks/useConfig';
 import 'react-basics/dist/styles.css';
 import 'styles/variables.css';
+import 'styles/locale.css';
 import 'styles/index.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/600.css';
@@ -12,6 +15,7 @@ const client = new QueryClient();
 
 export default function App({ Component, pageProps }) {
   const { locale, messages } = useLocale();
+  const { basePath } = useRouter();
   useConfig();
 
   const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@@ -23,6 +27,18 @@ export default function App({ Component, pageProps }) {
   return (
     <QueryClientProvider client={client}>
       <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
+        <Head>
+          <link rel="icon" href={`${basePath}/favicon.ico`} />
+          <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
+          <link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
+          <link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
+          <link rel="manifest" href={`${basePath}/site.webmanifest`} />
+          <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
+          <meta name="msapplication-TileColor" content="#da532c" />
+          <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+          <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+        </Head>
         <Component {...pageProps} />
       </IntlProvider>
     </QueryClientProvider>
diff --git a/pages/console/[[...id]].js b/pages/console/[[...id]].js
index 7a94378f..7f459cb6 100644
--- a/pages/console/[[...id]].js
+++ b/pages/console/[[...id]].js
@@ -1,5 +1,5 @@
 import Layout from 'components/layout/Layout';
-import TestConsole from 'components/pages/TestConsole';
+import TestConsole from 'components/pages/console/TestConsole';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function ConsolePage({ pageDisabled }) {
diff --git a/pages/dashboard/[[...id]].js b/pages/dashboard/[[...id]].js
index 5a185677..2fca7cca 100644
--- a/pages/dashboard/[[...id]].js
+++ b/pages/dashboard/[[...id]].js
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import Dashboard from 'components/pages/Dashboard';
+import Dashboard from 'components/pages/dashboard/Dashboard';
 import useConfig from 'hooks/useConfig';
 import useRequireLogin from 'hooks/useRequireLogin';
 
diff --git a/pages/login.js b/pages/login.js
index 43244a80..507eb2e5 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,5 +1,5 @@
 import Layout from 'components/layout/Layout';
-import LoginForm from 'components/forms/LoginForm';
+import LoginForm from 'components/pages/login/LoginForm';
 
 export default function LoginPage({ pageDisabled }) {
   if (pageDisabled) {
diff --git a/pages/profile/index.js b/pages/profile/index.js
deleted file mode 100644
index aa560b55..00000000
--- a/pages/profile/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Settings from 'components/pages/Settings';
-import ProfileSettings from 'components/pages/ProfileSettings';
-import useUser from 'hooks/useUser';
-
-export default function TeamsPage() {
-  const user = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <Settings>
-      <ProfileSettings />
-    </Settings>
-  );
-}
diff --git a/pages/realtime.js b/pages/realtime.js
index b8d7f664..2cb7f837 100644
--- a/pages/realtime.js
+++ b/pages/realtime.js
@@ -1,5 +1,5 @@
 import Layout from 'components/layout/Layout';
-import RealtimeDashboard from 'components/pages/RealtimeDashboard';
+import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function RealtimePage() {
diff --git a/pages/settings/index.js b/pages/settings/index.js
new file mode 100644
index 00000000..70e8d249
--- /dev/null
+++ b/pages/settings/index.js
@@ -0,0 +1,10 @@
+export default () => null;
+
+export async function getServerSideProps() {
+  return {
+    redirect: {
+      destination: '/settings/websites',
+      permanent: true,
+    },
+  };
+}
diff --git a/pages/settings/profile/index.js b/pages/settings/profile/index.js
new file mode 100644
index 00000000..f0576b0b
--- /dev/null
+++ b/pages/settings/profile/index.js
@@ -0,0 +1,10 @@
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
+
+export default function ProfilePage() {
+  return (
+    <SettingsLayout>
+      <ProfileSettings />
+    </SettingsLayout>
+  );
+}
diff --git a/pages/teams/[...id].js b/pages/settings/teams/[...id].js
similarity index 61%
rename from pages/teams/[...id].js
rename to pages/settings/teams/[...id].js
index 7afebd0c..a9ebe2b7 100644
--- a/pages/teams/[...id].js
+++ b/pages/settings/teams/[...id].js
@@ -1,5 +1,5 @@
-import Settings from 'components/pages/Settings';
-import TeamDetails from 'components/pages/TeamDetails';
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import TeamDetails from 'components/pages/settings/teams/TeamDetails';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
 
@@ -13,8 +13,8 @@ export default function TeamDetailPage() {
   }
 
   return (
-    <Settings>
+    <SettingsLayout>
       <TeamDetails teamId={id} />
-    </Settings>
+    </SettingsLayout>
   );
 }
diff --git a/pages/settings/teams/index.js b/pages/settings/teams/index.js
new file mode 100644
index 00000000..792ed63f
--- /dev/null
+++ b/pages/settings/teams/index.js
@@ -0,0 +1,17 @@
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import TeamsList from 'components/pages/settings/teams/TeamsList';
+import useUser from 'hooks/useUser';
+
+export default function TeamsPage() {
+  const user = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <SettingsLayout>
+      <TeamsList />
+    </SettingsLayout>
+  );
+}
diff --git a/pages/users/[...id].js b/pages/settings/users/[...id].js
similarity index 61%
rename from pages/users/[...id].js
rename to pages/settings/users/[...id].js
index ba18ef69..ddd19344 100644
--- a/pages/users/[...id].js
+++ b/pages/settings/users/[...id].js
@@ -1,5 +1,5 @@
-import Settings from 'components/pages/Settings';
-import UserSettings from 'components/pages/UserSettings';
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import UserSettings from 'components/pages/settings/users/UserSettings';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
 
@@ -13,8 +13,8 @@ export default function TeamDetailPage() {
   }
 
   return (
-    <Settings>
+    <SettingsLayout>
       <UserSettings userId={id} />
-    </Settings>
+    </SettingsLayout>
   );
 }
diff --git a/pages/users/index.js b/pages/settings/users/index.js
similarity index 60%
rename from pages/users/index.js
rename to pages/settings/users/index.js
index 1412e1b7..12444b8a 100644
--- a/pages/users/index.js
+++ b/pages/settings/users/index.js
@@ -1,8 +1,8 @@
-import Settings from 'components/pages/Settings';
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 
-import UsersList from 'components/pages/UsersList';
+import UsersList from 'components/pages/settings/users/UsersList';
 
 export default function UsersPage() {
   const user = useUser();
@@ -13,8 +13,8 @@ export default function UsersPage() {
   }
 
   return (
-    <Settings>
+    <SettingsLayout>
       <UsersList />
-    </Settings>
+    </SettingsLayout>
   );
 }
diff --git a/pages/websites/[id]/settings.js b/pages/settings/websites/[id]/index.js
similarity index 54%
rename from pages/websites/[id]/settings.js
rename to pages/settings/websites/[id]/index.js
index ba2d326b..ada39db2 100644
--- a/pages/websites/[id]/settings.js
+++ b/pages/settings/websites/[id]/index.js
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
-import WebsiteSettings from 'components/pages/WebsiteSettings';
+import WebsiteDetails from 'components/pages/settings/websites/WebsiteDetails';
 import useUser from 'hooks/useUser';
-import Settings from 'components/pages/Settings';
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
 
 export default function WebsiteSettingsPage() {
   const user = useUser();
@@ -13,8 +13,8 @@ export default function WebsiteSettingsPage() {
   }
 
   return (
-    <Settings>
-      <WebsiteSettings websiteId={id} />
-    </Settings>
+    <SettingsLayout>
+      <WebsiteDetails websiteId={id} />
+    </SettingsLayout>
   );
 }
diff --git a/pages/websites/index.js b/pages/settings/websites/index.js
similarity index 62%
rename from pages/websites/index.js
rename to pages/settings/websites/index.js
index e09978a7..bb832062 100644
--- a/pages/websites/index.js
+++ b/pages/settings/websites/index.js
@@ -1,7 +1,7 @@
-import Settings from 'components/pages/Settings';
+import SettingsLayout from 'components/pages/settings/SettingsLayout';
 import useConfig from 'hooks/useConfig';
 import useRequireLogin from 'hooks/useRequireLogin';
-import WebsitesList from 'components/pages/WebsitesList';
+import WebsitesList from 'components/pages/settings/websites/WebsitesList';
 
 export default function WebsitesPage() {
   const { user } = useRequireLogin();
@@ -12,8 +12,8 @@ export default function WebsitesPage() {
   }
 
   return (
-    <Settings>
+    <SettingsLayout>
       <WebsitesList />
-    </Settings>
+    </SettingsLayout>
   );
 }
diff --git a/pages/share/[...id].js b/pages/share/[...id].js
index 863fb3f7..8be7f0ba 100644
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteDetails from 'components/pages/WebsiteDetails';
+import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
 import useShareToken from 'hooks/useShareToken';
 
 export default function SharePage() {
diff --git a/pages/teams/index.js b/pages/teams/index.js
deleted file mode 100644
index c7b91576..00000000
--- a/pages/teams/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Settings from 'components/pages/Settings';
-import TeamsList from 'components/pages/TeamsList';
-import useUser from 'hooks/useUser';
-
-export default function TeamsPage() {
-  const user = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <Settings>
-      <TeamsList />
-    </Settings>
-  );
-}
diff --git a/pages/websites/[id]/index.js b/pages/websites/[id]/index.js
index f249cc97..2972638a 100644
--- a/pages/websites/[id]/index.js
+++ b/pages/websites/[id]/index.js
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteDetails from 'components/pages/WebsiteDetails';
+import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DetailsPage() {
diff --git a/styles/index.css b/styles/index.css
index 982523a3..1e0daa12 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,9 +3,9 @@ body {
   font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
     Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol';
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.8;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.5rem;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -17,36 +17,6 @@ body {
   background: var(--background200);
 }
 
-.zh-CN {
-  font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
-    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
-}
-
-.zh-TW {
-  font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
-    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
-}
-
-.ja-JP {
-  font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
-    'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
-}
-
-.ko-KR {
-  font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
-    'Noto Sans CJK KR', sans-serif !important;
-}
-
-.ar-SA {
-  font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
-    'Times New Roman', serif !important;
-}
-
-.he-IL {
-  font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
-    'Noto Sans Hebrew', sans-serif !important;
-}
-
 *,
 *:before,
 *:after {
diff --git a/styles/locale.css b/styles/locale.css
new file mode 100644
index 00000000..dddf495b
--- /dev/null
+++ b/styles/locale.css
@@ -0,0 +1,29 @@
+.zh-CN {
+  font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
+    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
+}
+
+.zh-TW {
+  font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
+    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
+}
+
+.ja-JP {
+  font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
+    'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
+}
+
+.ko-KR {
+  font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
+    'Noto Sans CJK KR', sans-serif !important;
+}
+
+.ar-SA {
+  font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
+    'Times New Roman', serif !important;
+}
+
+.he-IL {
+  font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
+    'Noto Sans Hebrew', sans-serif !important;
+}
diff --git a/yarn.lock b/yarn.lock
index c3807215..7451b337 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6438,10 +6438,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.48.0:
-  version "0.48.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.48.0.tgz#f86924b6e0fbe67e55e3c27763390f4d3796edb4"
-  integrity sha512-0pbPsylQevm08VGY7aqqToLh9Xl764FNDPp6NxnwHlJSL9jvYRxhW2ajivsZOfeIPJgRiWbmmEBGmTmSwwhiIQ==
+react-basics@^0.50.0:
+  version "0.50.0"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.50.0.tgz#1784ce05f0361dd208804a273954dd50b8ec8b6f"
+  integrity sha512-hf9pbYuVSNqI7tlhO/5Ry1GfcWINKJgDkmDbFVCKSYYyiiycqDcsIyaXGn+pSxvWUj3Lk8YJep7INFeUMxA35A==
   dependencies:
     classnames "^2.3.1"
     react "^18.2.0"