diff --git a/components/messages.js b/components/messages.js
index a87ed093..a5683d20 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -5,11 +5,108 @@ export const labels = defineMessages({
   required: { id: 'label.required', defaultMessage: 'Required' },
   save: { id: 'label.save', defaultMessage: 'Save' },
   cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
+  continue: { id: 'label.continue', defaultMessage: 'Continue' },
+  delete: { id: 'label.delete', defaultMessage: 'Delete' },
+  users: { id: 'label.users', defaultMessage: 'Users' },
+  createUser: { id: 'label.create-user', defaultMessage: 'Create user' },
+  username: { id: 'label.username', defaultMessage: 'Username' },
+  password: { id: 'label.password', defaultMessage: 'Password' },
+  role: { id: 'label.role', defaultMessage: 'Role' },
+  user: { id: 'label.user', defaultMessage: 'User' },
+  admin: { id: 'label.admin', defaultMessage: 'Admin' },
+  confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
+  details: { id: 'label.details', defaultMessage: 'Details' },
+  websites: { id: 'label.websites', defaultMessage: 'Websites' },
+  created: { id: 'label.created', defaultMessage: 'Created' },
+  edit: { id: 'label.edit', defaultMessage: 'Edit' },
+  name: { id: 'label.name', defaultMessage: 'Name' },
+  members: { id: 'label.members', defaultMessage: 'Members' },
+  accessCode: { id: 'label.access-code', defaultMessage: 'Access code' },
+  teamId: { id: 'label.team-id', defaultMessage: 'Team ID' },
+  team: { id: 'label.team', defaultMessage: 'Team' },
+  regenerate: { id: 'label.regenerate', defaultMessage: 'Regenerate' },
+  remove: { id: 'label.remove', defaultMessage: 'Remove' },
+  createTeam: { id: 'label.create-team', defaultMessage: 'Create team' },
+  settings: { id: 'label.settings', defaultMessage: 'Settings' },
+  teamOwner: { id: 'label.team-owner', defaultMessage: 'Team owner' },
+  teamMember: { id: 'label.team-member', defaultMessage: 'Team member' },
+  teamGuest: { id: 'label.team-guest', defaultMessage: 'Team guest' },
+  enableShareUrl: { id: 'label.enable-share-url', defaultMessage: 'Enable share URL' },
+  data: { id: 'label.data', defaultMessage: 'Data' },
+  trackingCode: { id: 'label.tracking-code', defaultMessage: 'Tracking code' },
+  shareUrl: { id: 'label.share-url', defaultMessage: 'Share URL' },
+  actions: { id: 'label.actions', defaultMessage: 'Actions' },
+  view: { id: 'label.view', defaultMessage: 'View' },
+  domain: { id: 'label.domain', defaultMessage: 'Domain' },
+  websiteId: { id: 'label.website-id', defaultMessage: 'Website ID' },
+  resetWebsite: { id: 'label.reset-website', defaultMessage: 'Reset website' },
+  deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
+  reset: { id: 'label.reset', defaultMessage: 'Reset' },
+  addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
+  changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
+  currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
+  newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
+  confirmPassword: { id: 'label.confirm-password', defaultMessage: 'Confirm password' },
+  timezone: { id: 'label.timezone', defaultMessage: 'Timezone' },
+  dateRange: { id: 'label.default-date-range', defaultMessage: 'Default date range' },
+  language: { id: 'label.language', defaultMessage: 'Language' },
+  theme: { id: 'label.theme', defaultMessage: 'Theme' },
+  profile: { id: 'label.profile', defaultMessage: 'Profile' },
 });
 
 export const messages = defineMessages({
   error: { id: 'message.error', defaultMessage: 'Something went wrong.' },
-  saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
+  saved: { id: 'message.saved', defaultMessage: 'Saved successfully.' },
+  noUsers: { id: 'message.no-users', defaultMessage: 'There are no users.' },
+  userDeleted: { id: 'message.user-deleted', defaultMessage: 'User deleted successfully.' },
+  noData: { id: 'message.no-data', defaultMessage: 'No data available.' },
+  deleteUserWarning: {
+    id: 'message.delete-user-warning',
+    defaultMessage: 'Are you sure you want to delete {username}?',
+  },
+  minPasswordLength: {
+    id: 'message.min-password-length',
+    defaultMessage: 'Minimum length of 8 characters',
+  },
+  noTeams: {
+    id: 'message.no-teams',
+    defaultMessage: 'You have no created any teams.',
+  },
+  shareUrl: {
+    id: 'message.share-url',
+    defaultMessage: 'Your website stats are publically available at the following URL:',
+  },
+  trackingCode: {
+    id: 'message.tracking-code',
+    defaultMessage:
+      'To track stats for this website, place the following code in the <head> section of your HTML.',
+  },
+  deleteWebsite: {
+    id: 'message.delete-website',
+    defaultMessage: 'To delete this website, type {confirmation} in the box below to confirm.',
+  },
+  resetWebsite: {
+    id: 'message.reset-website',
+    defaultMessage: 'To reset this website, type {confirmation} in the box below to confirm.',
+  },
+  invalidDomain: {
+    id: 'message.invalid-domain',
+    defaultMessage: 'Invalid domain. Do not include http/https.',
+  },
+  resetWebsiteWarning: {
+    id: 'message.reset-website-warning',
+    defaultMessage:
+      'All statistics for this website will be deleted, but your settings will remain intact.',
+  },
+  deleteWebsiteWarning: {
+    id: 'message.delete-website-warning',
+    defaultMessage: 'All website data will be deleted.',
+  },
+  noWebsites: {
+    id: 'messages.no-websites',
+    defaultMessage: 'You do not have any websites configured.',
+  },
+  noMatchPassword: { id: 'message.no-match-password', defaultMessage: 'Passwords do not match.' },
 });
 
 export const devices = defineMessages({
diff --git a/components/pages/settings/profile/DateRangeSetting.js b/components/pages/settings/profile/DateRangeSetting.js
index 4f129045..a5139cb3 100644
--- a/components/pages/settings/profile/DateRangeSetting.js
+++ b/components/pages/settings/profile/DateRangeSetting.js
@@ -1,10 +1,12 @@
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import DateFilter from 'components/common/DateFilter';
 import { Button, Flexbox } from 'react-basics';
 import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import { labels } from 'components/messages';
 
 export default function DateRangeSetting() {
+  const { formatMessage } = useIntl();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
 
@@ -13,9 +15,7 @@ export default function DateRangeSetting() {
   return (
     <Flexbox width={400} gap={10}>
       <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
-      <Button onClick={handleReset}>
-        <FormattedMessage id="label.reset" defaultMessage="Reset" />
-      </Button>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
     </Flexbox>
   );
 }
diff --git a/components/pages/settings/profile/LanguageSetting.js b/components/pages/settings/profile/LanguageSetting.js
index 70857a20..d5aa064f 100644
--- a/components/pages/settings/profile/LanguageSetting.js
+++ b/components/pages/settings/profile/LanguageSetting.js
@@ -1,12 +1,9 @@
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
 import useLocale from 'hooks/useLocale';
 import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
-
-const messages = defineMessages({
-  reset: { id: 'label.reset', defaultMessage: 'Reset' },
-});
+import { labels } from 'components/messages';
 
 export default function LanguageSetting() {
   const { formatMessage } = useIntl();
@@ -28,7 +25,7 @@ export default function LanguageSetting() {
       >
         {item => <Item key={item}>{languages[item].label}</Item>}
       </Dropdown>
-      <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
     </Flexbox>
   );
 }
diff --git a/components/pages/settings/profile/PasswordChangeButton.js b/components/pages/settings/profile/PasswordChangeButton.js
index 1cac0083..26cff377 100644
--- a/components/pages/settings/profile/PasswordChangeButton.js
+++ b/components/pages/settings/profile/PasswordChangeButton.js
@@ -1,46 +1,29 @@
-import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Button, Icon, Text, Modal, useToast } from 'react-basics';
+import { useIntl } from 'react-intl';
+import { Button, Icon, Text, useToast, ModalTrigger } from 'react-basics';
 import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
 import { Lock } from 'components/icons';
-
-const messages = defineMessages({
-  changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
-  saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
-});
+import { labels, messages } from 'components/messages';
 
 export default function PasswordChangeButton() {
   const { formatMessage } = useIntl();
-  const [edit, setEdit] = useState(false);
   const { toast, showToast } = useToast();
 
   const handleSave = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    setEdit(false);
-  };
-
-  const handleEdit = () => {
-    setEdit(true);
-  };
-
-  const handleClose = () => {
-    setEdit(false);
   };
 
   return (
     <>
       {toast}
-      <Button onClick={handleEdit}>
-        <Icon>
-          <Lock />
-        </Icon>
-        <Text>{formatMessage(messages.changePassword)}</Text>
-      </Button>
-      {edit && (
-        <Modal title={formatMessage(messages.changePassword)} onClose={handleClose}>
-          {() => <PasswordEditForm onSave={handleSave} onClose={handleClose} />}
-        </Modal>
-      )}
+      <ModalTrigger modalProps={{ title: formatMessage(labels.changePassword) }}>
+        <Button>
+          <Icon>
+            <Lock />
+          </Icon>
+          <Text>{formatMessage(labels.changePassword)}</Text>
+        </Button>
+        {close => <PasswordEditForm onSave={handleSave} onClose={close} />}
+      </ModalTrigger>
     </>
   );
 }
diff --git a/components/pages/settings/profile/PasswordEditForm.js b/components/pages/settings/profile/PasswordEditForm.js
index 6b446d75..c11c96f4 100644
--- a/components/pages/settings/profile/PasswordEditForm.js
+++ b/components/pages/settings/profile/PasswordEditForm.js
@@ -1,75 +1,65 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
-import useUser from 'hooks/useUser';
+import { labels, messages } from 'components/messages';
 
-export default function PasswordEditForm({ userId, onSave, onClose }) {
-  const user = useUser();
-  const isCurrentUser = !userId || user?.id === userId;
-  const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
+export default function PasswordEditForm({ onSave, onClose }) {
+  const { formatMessage } = useIntl();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post(url, data));
+  const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
   const ref = useRef(null);
 
   const handleSubmit = async data => {
-    const payload = isCurrentUser
-      ? data
-      : {
-          password: data.newPassword,
-        };
-
-    mutate(payload, {
+    mutate(data, {
       onSuccess: async () => {
         onSave();
-        ref.current.reset();
       },
     });
   };
 
   const samePassword = value => {
     if (value !== ref?.current?.getValues('newPassword')) {
-      return "Passwords don't match";
+      return formatMessage(messages.noMatchPassword);
     }
     return true;
   };
 
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error}>
-      {isCurrentUser && (
-        <FormRow label="Current password">
-          <FormInput name="currentPassword" rules={{ required: 'Required' }}>
-            <PasswordField autoComplete="off" />
-          </FormInput>
-        </FormRow>
-      )}
-      <FormRow label="New password">
+      <FormRow label={formatMessage(labels.currentPassword)}>
+        <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+          <PasswordField autoComplete="current-password" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.newPassword)}>
         <FormInput
           name="newPassword"
           rules={{
             required: 'Required',
-            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength) },
           }}
         >
-          <PasswordField autoComplete="off" />
+          <PasswordField autoComplete="new-password" />
         </FormInput>
       </FormRow>
-      <FormRow label="Confirm password">
+      <FormRow label={formatMessage(labels.confirmPassword)}>
         <FormInput
           name="confirmPassword"
           rules={{
-            required: 'Required',
-            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            required: formatMessage(labels.required),
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength) },
             validate: samePassword,
           }}
         >
-          <PasswordField autoComplete="off" />
+          <PasswordField autoComplete="confirm-password" />
         </FormInput>
       </FormRow>
       <FormButtons flex>
         <Button type="submit" variant="primary" disabled={isLoading}>
-          Save
+          {formatMessage(labels.save)}
         </Button>
-        <Button onClick={onClose}>Close</Button>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/settings/profile/ProfileDetails.js b/components/pages/settings/profile/ProfileDetails.js
index 5413fbea..346ca17a 100644
--- a/components/pages/settings/profile/ProfileDetails.js
+++ b/components/pages/settings/profile/ProfileDetails.js
@@ -1,19 +1,11 @@
 import { Form, FormRow } from 'react-basics';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
 import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
 import ThemeSetting from 'components/buttons/ThemeSetting';
 import useUser from 'hooks/useUser';
-
-const messages = defineMessages({
-  username: { id: 'label.username', defaultMessage: 'Username' },
-  role: { id: 'label.role', defaultMessage: 'Role' },
-  timezone: { id: 'label.timezone', defaultMessage: 'Timezone' },
-  dateRange: { id: 'label.default-date-range', defaultMessage: 'Default date range' },
-  language: { id: 'label.language', defaultMessage: 'Language' },
-  theme: { id: 'label.theme', defaultMessage: 'Theme' },
-});
+import { labels } from 'components/messages';
 
 export default function ProfileDetails() {
   const { user } = useUser();
@@ -27,18 +19,18 @@ export default function ProfileDetails() {
 
   return (
     <Form>
-      <FormRow label={formatMessage(messages.username)}>{username}</FormRow>
-      <FormRow label={formatMessage(messages.role)}>{role}</FormRow>
-      <FormRow label={formatMessage(messages.language)} inline>
+      <FormRow label={formatMessage(labels.username)}>{username}</FormRow>
+      <FormRow label={formatMessage(labels.role)}>{role}</FormRow>
+      <FormRow label={formatMessage(labels.language)} inline>
         <LanguageSetting />
       </FormRow>
-      <FormRow label={formatMessage(messages.timezone)} inline>
+      <FormRow label={formatMessage(labels.timezone)} inline>
         <TimezoneSetting />
       </FormRow>
-      <FormRow label={formatMessage(messages.dateRange)} inline>
+      <FormRow label={formatMessage(labels.dateRange)} inline>
         <DateRangeSetting />
       </FormRow>
-      <FormRow label={formatMessage(messages.theme)}>
+      <FormRow label={formatMessage(labels.theme)}>
         <ThemeSetting />
       </FormRow>
     </Form>
diff --git a/components/pages/settings/profile/ProfileDetails.module.css b/components/pages/settings/profile/ProfileDetails.module.css
deleted file mode 100644
index fdd8252f..00000000
--- a/components/pages/settings/profile/ProfileDetails.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.list dd {
-  display: flex;
-}
diff --git a/components/pages/settings/profile/ProfileSettings.js b/components/pages/settings/profile/ProfileSettings.js
index 700ae640..d4d35db7 100644
--- a/components/pages/settings/profile/ProfileSettings.js
+++ b/components/pages/settings/profile/ProfileSettings.js
@@ -1,13 +1,10 @@
 import { Breadcrumbs, Item } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from './ProfileDetails';
 import PasswordChangeButton from './PasswordChangeButton';
-
-const messages = defineMessages({
-  profile: { id: 'label.profile', defaultMessage: 'Profile' },
-});
+import { labels } from 'components/messages';
 
 export default function ProfileSettings() {
   const { formatMessage } = useIntl();
@@ -16,7 +13,7 @@ export default function ProfileSettings() {
     <Page>
       <PageHeader>
         <Breadcrumbs>
-          <Item>{formatMessage(messages.profile)}</Item>
+          <Item>{formatMessage(labels.profile)}</Item>
         </Breadcrumbs>
         <PasswordChangeButton />
       </PageHeader>
diff --git a/components/pages/settings/profile/TimezoneSetting.js b/components/pages/settings/profile/TimezoneSetting.js
index 6e8a42a0..11cc450e 100644
--- a/components/pages/settings/profile/TimezoneSetting.js
+++ b/components/pages/settings/profile/TimezoneSetting.js
@@ -1,12 +1,9 @@
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
 import useTimezone from 'hooks/useTimezone';
 import { getTimezone } from 'lib/date';
-
-const messages = defineMessages({
-  reset: { id: 'label.reset', defaultMessage: 'Reset' },
-});
+import { labels } from 'components/messages';
 
 export default function TimezoneSetting() {
   const { formatMessage } = useIntl();
@@ -25,7 +22,7 @@ export default function TimezoneSetting() {
       >
         {item => <Item key={item}>{item}</Item>}
       </Dropdown>
-      <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
     </Flexbox>
   );
 }
diff --git a/components/pages/settings/teams/TeamAddForm.js b/components/pages/settings/teams/TeamAddForm.js
index b7d2e599..7ee3b985 100644
--- a/components/pages/settings/teams/TeamAddForm.js
+++ b/components/pages/settings/teams/TeamAddForm.js
@@ -1,8 +1,19 @@
 import { useRef } from 'react';
-import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
+import { useIntl } from 'react-intl';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
 import useApi from 'hooks/useApi';
+import { labels } from 'components/messages';
 
 export default function TeamAddForm({ onSave, onClose }) {
+  const { formatMessage } = useIntl();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
   const ref = useRef(null);
@@ -17,17 +28,17 @@ export default function TeamAddForm({ onSave, onClose }) {
 
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error}>
-      <FormRow label="Name">
+      <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <Button type="submit" variant="primary" disabled={isLoading}>
-          Save
-        </Button>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          {formatMessage(labels.save)}
+        </SubmitButton>
         <Button disabled={isLoading} onClick={onClose}>
-          Cancel
+          {formatMessage(labels.cancel)}
         </Button>
       </FormButtons>
     </Form>
diff --git a/components/pages/settings/teams/TeamEditForm.js b/components/pages/settings/teams/TeamEditForm.js
index 03ca7215..5b19a0ef 100644
--- a/components/pages/settings/teams/TeamEditForm.js
+++ b/components/pages/settings/teams/TeamEditForm.js
@@ -8,13 +8,16 @@ import {
   Button,
   Flexbox,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
 import useApi from 'hooks/useApi';
+import { labels } from 'components/messages';
 
 const generateId = () => getRandomChars(16);
 
 export default function TeamEditForm({ teamId, data, onSave }) {
+  const { formatMessage } = useIntl();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
   const ref = useRef(null);
@@ -40,22 +43,22 @@ export default function TeamEditForm({ teamId, data, onSave }) {
 
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
-      <FormRow label="Team ID">
+      <FormRow label={formatMessage(labels.teamId)}>
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>
-      <FormRow label="Name">
+      <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField />
         </FormInput>
       </FormRow>
-      <FormRow label="Access code">
+      <FormRow label={formatMessage(labels.accessCode)}>
         <Flexbox gap={10}>
           <TextField value={accessCode} readOnly allowCopy />
-          <Button onClick={handleRegenerate}>Regenerate</Button>
+          <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
         </Flexbox>
       </FormRow>
       <FormButtons>
-        <SubmitButton variant="primary">Save</SubmitButton>
+        <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/settings/teams/TeamMembersTable.js b/components/pages/settings/teams/TeamMembersTable.js
index a4b92fb8..a90d2d6d 100644
--- a/components/pages/settings/teams/TeamMembersTable.js
+++ b/components/pages/settings/teams/TeamMembersTable.js
@@ -7,18 +7,27 @@ import {
   TableColumn,
   Button,
   Icon,
+  Icons,
+  Flexbox,
+  Text,
 } from 'react-basics';
-import styles from './TeamsTable.module.css';
+import { ROLES } from 'lib/constants';
+import { labels } from 'components/messages';
+import { useIntl } from 'react-intl';
 
-const columns = [
-  { name: 'username', label: 'Username', style: { flex: 4 } },
-  { name: 'role', label: 'Role' },
-  { name: 'action', label: '' },
-];
+const { Close } = Icons;
 
 export default function TeamMembersTable({ data = [] }) {
+  const { formatMessage } = useIntl();
+
+  const columns = [
+    { name: 'username', label: formatMessage(labels.username), style: { flex: 4 } },
+    { name: 'role', label: formatMessage(labels.role) },
+    { name: 'action', label: '' },
+  ];
+
   return (
-    <Table className={styles.table} columns={columns} rows={data}>
+    <Table columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -30,25 +39,35 @@ export default function TeamMembersTable({ data = [] }) {
       </TableHeader>
       <TableBody>
         {(row, keys, rowIndex) => {
-          row.action = (
-            <div className={styles.actions}>
-              <Button>
-                <Icon icon="cross" />
-                Remove
-              </Button>
-            </div>
-          );
+          const rowData = {
+            username: row?.user?.username,
+            role: formatMessage(
+              labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
+            ),
+            action: (
+              <div>
+                <Button>
+                  <Icon>
+                    <Close />
+                  </Icon>
+                  <Text>{formatMessage(labels.remove)}</Text>
+                </Button>
+              </div>
+            ),
+          };
 
           return (
-            <TableRow key={rowIndex} data={row} keys={keys}>
+            <TableRow key={rowIndex} data={rowData} keys={keys}>
               {(data, key, colIndex) => {
                 return (
-                  <TableCell
-                    key={colIndex}
-                    className={styles.cell}
-                    style={{ ...columns[colIndex]?.style }}
-                  >
-                    {data[key] ?? data?.user?.[key]}
+                  <TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
+                    <Flexbox
+                      flex={1}
+                      alignItems="center"
+                      justifyContent={key === 'action' ? 'end' : undefined}
+                    >
+                      {data[key]}
+                    </Flexbox>
                   </TableCell>
                 );
               }}
diff --git a/components/pages/settings/teams/TeamDetails.js b/components/pages/settings/teams/TeamSettings.js
similarity index 71%
rename from components/pages/settings/teams/TeamDetails.js
rename to components/pages/settings/teams/TeamSettings.js
index c00b714a..3bcfedfc 100644
--- a/components/pages/settings/teams/TeamDetails.js
+++ b/components/pages/settings/teams/TeamSettings.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
@@ -6,8 +7,11 @@ import Page from 'components/layout/Page';
 import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
 import PageHeader from 'components/layout/PageHeader';
 import TeamMembers from 'components/pages/settings/teams/TeamMembers';
+import { labels, messages } from 'components/messages';
+import TeamWebsites from './TeamWebsites';
 
-export default function TeamDetails({ teamId }) {
+export default function TeamSettings({ teamId }) {
+  const { formatMessage } = useIntl();
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
@@ -23,7 +27,7 @@ export default function TeamDetails({ teamId }) {
   );
 
   const handleSave = data => {
-    showToast({ message: 'Saved successfully.', variant: 'success' });
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
     setValues(state => ({ ...state, ...data }));
   };
 
@@ -44,13 +48,14 @@ export default function TeamDetails({ teamId }) {
           <Item>{values?.name}</Item>
         </Breadcrumbs>
       </PageHeader>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="details">Details</Item>
-        <Item key="members">Members</Item>
-        <Item key="websites">Websites</Item>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="members">{formatMessage(labels.members)}</Item>
+        <Item key="websites">{formatMessage(labels.websites)}</Item>
       </Tabs>
       {tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
       {tab === 'members' && <TeamMembers teamId={teamId} />}
+      {tab === 'websites' && <TeamWebsites teamId={teamId} />}
     </Page>
   );
 }
diff --git a/components/pages/settings/teams/TeamWebsites.js b/components/pages/settings/teams/TeamWebsites.js
new file mode 100644
index 00000000..f611fbbb
--- /dev/null
+++ b/components/pages/settings/teams/TeamWebsites.js
@@ -0,0 +1,25 @@
+import { Loading } from 'react-basics';
+import { useIntl } from 'react-intl';
+import useApi from 'hooks/useApi';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
+import { messages } from 'components/messages';
+
+export default function TeamWebsites({ teamId }) {
+  const { formatMessage } = useIntl();
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['team/websites', teamId], () =>
+    get(`/teams/${teamId}/websites`),
+  );
+  const hasData = data && data.length !== 0;
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return (
+    <div>
+      {hasData && <WebsitesTable data={data} />}
+      {!hasData && formatMessage(messages.noData)}
+    </div>
+  );
+}
diff --git a/components/pages/settings/teams/TeamsList.js b/components/pages/settings/teams/TeamsList.js
index b1a30f80..fab1bc38 100644
--- a/components/pages/settings/teams/TeamsList.js
+++ b/components/pages/settings/teams/TeamsList.js
@@ -1,13 +1,18 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast } from 'react-basics';
+import { Button, Icon, Modal, useToast, Icons, Text } from 'react-basics';
+import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
+import { labels, messages } from 'components/messages';
+
+const { Plus } = Icons;
 
 export default function TeamsList() {
+  const { formatMessage } = useIntl();
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
   const { get, useQuery } = useApi();
@@ -22,7 +27,7 @@ export default function TeamsList() {
   const handleSave = () => {
     setEdit(false);
     setUpdate(state => state + 1);
-    showToast({ message: 'Team saved.', variant: 'success' });
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
   const handleClose = () => {
@@ -32,21 +37,27 @@ export default function TeamsList() {
   return (
     <Page loading={isLoading} error={error}>
       {toast}
-      <PageHeader title="Teams">
-        <Button onClick={handleAdd}>
-          <Icon icon="plus" /> Create team
+      <PageHeader title={formatMessage(labels.team)}>
+        <Button variant="primary" onClick={handleAdd}>
+          <Icon>
+            <Plus />
+          </Icon>
+          <Text>{formatMessage(labels.createTeam)}</Text>
         </Button>
       </PageHeader>
       {hasData && <TeamsTable data={data} />}
       {!hasData && (
-        <EmptyPlaceholder message="You don't have any teams configured.">
+        <EmptyPlaceholder message={formatMessage(messages.noTeams)}>
           <Button variant="primary" onClick={handleAdd}>
-            <Icon icon="plus" /> Create team
+            <Icon>
+              <Plus />
+            </Icon>
+            <Text>{formatMessage(labels.createTeam)}</Text>
           </Button>
         </EmptyPlaceholder>
       )}
       {edit && (
-        <Modal title="Create team" onClose={handleClose}>
+        <Modal title={formatMessage(labels.createTeam)} onClose={handleClose}>
           {close => <TeamAddForm onSave={handleSave} onClose={close} />}
         </Modal>
       )}
diff --git a/components/pages/settings/teams/TeamsTable.js b/components/pages/settings/teams/TeamsTable.js
index 9082187a..ae4c0116 100644
--- a/components/pages/settings/teams/TeamsTable.js
+++ b/components/pages/settings/teams/TeamsTable.js
@@ -8,17 +8,25 @@ import {
   TableColumn,
   Button,
   Icon,
+  Flexbox,
+  Icons,
+  Text,
 } from 'react-basics';
-import styles from './TeamsTable.module.css';
+import { useIntl } from 'react-intl';
+import { labels } from 'components/messages';
 
-const columns = [
-  { name: 'name', label: 'Name', style: { flex: 2 } },
-  { name: 'action', label: ' ' },
-];
+const { ArrowRight } = Icons;
 
 export default function TeamsTable({ data = [] }) {
+  const { formatMessage } = useIntl();
+
+  const columns = [
+    { name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
+    { name: 'action', label: ' ' },
+  ];
+
   return (
-    <Table className={styles.table} columns={columns} rows={data}>
+    <Table columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -33,28 +41,28 @@ export default function TeamsTable({ data = [] }) {
           const { id } = row;
 
           row.action = (
-            <div className={styles.actions}>
+            <Flexbox flex={1} justifyContent="end">
               <Link href={`/settings/teams/${id}`}>
                 <a>
                   <Button>
-                    <Icon icon="arrow-right" />
-                    Settings
+                    <Icon>
+                      <ArrowRight />
+                    </Icon>
+                    <Text>{formatMessage(labels.settings)}</Text>
                   </Button>
                 </a>
               </Link>
-            </div>
+            </Flexbox>
           );
 
           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 key={colIndex} style={{ ...columns[colIndex]?.style }}>
+                    <Flexbox flex={1} alignItems="center">
+                      {data[key]}
+                    </Flexbox>
                   </TableCell>
                 );
               }}
diff --git a/components/pages/settings/teams/TeamsTable.module.css b/components/pages/settings/teams/TeamsTable.module.css
deleted file mode 100644
index b0579f34..00000000
--- a/components/pages/settings/teams/TeamsTable.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.table th,
-.table td {
-  flex: 2;
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-}
-
-.cell:last-child {
-  justify-content: flex-end;
-}
-
-.actions {
-  display: flex;
-  gap: 12px;
-}
diff --git a/components/pages/settings/users/UserAddButton.js b/components/pages/settings/users/UserAddButton.js
index 88601065..7f1ba624 100644
--- a/components/pages/settings/users/UserAddButton.js
+++ b/components/pages/settings/users/UserAddButton.js
@@ -1,16 +1,12 @@
 import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
 import UserAddForm from './UserAddForm';
+import { labels, messages } from 'components/messages';
 
 const { Plus } = Icons;
 
-const messages = defineMessages({
-  createUser: { id: 'label.create-user', defaultMessage: 'Create user' },
-  saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
-});
-
-export default function UserAddButton() {
+export default function UserAddButton({ onSave }) {
   const { formatMessage } = useIntl();
   const [edit, setEdit] = useState(false);
   const { toast, showToast } = useToast();
@@ -18,6 +14,7 @@ export default function UserAddButton() {
   const handleSave = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
     setEdit(false);
+    onSave();
   };
 
   const handleAdd = () => {
@@ -35,11 +32,11 @@ export default function UserAddButton() {
         <Icon>
           <Plus />
         </Icon>
-        <Text>{formatMessage(messages.createUser)}</Text>
+        <Text>{formatMessage(labels.createUser)}</Text>
       </Button>
       {edit && (
-        <Modal title={formatMessage(messages.createUser)} onClose={handleClose}>
-          {() => <UserAddForm onSave={handleSave} onClose={handleClose} />}
+        <Modal title={formatMessage(labels.createUser)} onClose={handleClose}>
+          <UserAddForm onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
     </>
diff --git a/components/pages/settings/users/UserAddForm.js b/components/pages/settings/users/UserAddForm.js
index f7d9ee81..efa04b65 100644
--- a/components/pages/settings/users/UserAddForm.js
+++ b/components/pages/settings/users/UserAddForm.js
@@ -10,19 +10,11 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
 import { labels } from 'components/messages';
 
-const messages = defineMessages({
-  username: { id: 'label.username', defaultMessage: 'Username' },
-  password: { id: 'label.password', defaultMessage: 'Password' },
-  role: { id: 'label.role', defaultMessage: 'Role' },
-  user: { id: 'label.user', defaultMessage: 'User' },
-  admin: { id: 'label.admin', defaultMessage: 'Admin' },
-});
-
 export default function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
@@ -38,30 +30,30 @@ export default function UserAddForm({ onSave, onClose }) {
 
   const renderValue = value => {
     if (value === ROLES.user) {
-      return formatMessage(messages.user);
+      return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(messages.admin);
+      return formatMessage(labels.admin);
     }
   };
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <FormRow label={formatMessage(messages.username)}>
+      <FormRow label={formatMessage(labels.username)}>
         <FormInput name="username" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="new-username" />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(messages.password)}>
+      <FormRow label={formatMessage(labels.password)}>
         <FormInput name="password" rules={{ required: formatMessage(labels.required) }}>
           <PasswordField autoComplete="new-password" />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(messages.role)}>
+      <FormRow label={formatMessage(labels.role)}>
         <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
-          <Dropdown renderValue={renderValue} style={{ width: 200 }}>
-            <Item key={ROLES.user}>{formatMessage(messages.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(messages.admin)}</Item>
+          <Dropdown renderValue={renderValue}>
+            <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>
diff --git a/components/pages/settings/users/UserDeleteForm.js b/components/pages/settings/users/UserDeleteForm.js
index e7ca37e9..a464ae4f 100644
--- a/components/pages/settings/users/UserDeleteForm.js
+++ b/components/pages/settings/users/UserDeleteForm.js
@@ -1,36 +1,29 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
-import { labels } from 'components/messages';
+import { useIntl } from 'react-intl';
+import { labels, messages } from 'components/messages';
 
-const messages = defineMessages({
-  confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
-  warning: {
-    id: 'message.confirm-delete-user',
-    defaultMessage: 'Are you sure you want to delete this user?',
-  },
-});
-
-export default function UserDeleteForm({ userId, onSave, onClose }) {
+export default function UserDeleteForm({ userId, username, onSave, onClose }) {
   const { formatMessage } = useIntl();
   const { del } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
+  const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
 
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
         onSave();
+        onClose();
       },
     });
   };
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <p>{formatMessage(messages.warning)}</p>
+      <p>{formatMessage(messages.deleteUserWarning, { username })}</p>
       <FormButtons flex>
         <SubmitButton variant="primary" disabled={isLoading}>
-          {formatMessage(labels.save)}
+          {formatMessage(labels.delete)}
         </SubmitButton>
         <Button disabled={isLoading} onClick={onClose}>
           {formatMessage(labels.cancel)}
diff --git a/components/pages/settings/users/UserEditForm.js b/components/pages/settings/users/UserEditForm.js
index 41f88006..057ab9b4 100644
--- a/components/pages/settings/users/UserEditForm.js
+++ b/components/pages/settings/users/UserEditForm.js
@@ -9,23 +9,10 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
-import { labels } from 'components/messages';
-
-const messages = defineMessages({
-  username: { id: 'label.username', defaultMessage: 'Username' },
-
-  password: { id: 'label.password', defaultMessage: 'Password' },
-  role: { id: 'label.role', defaultMessage: 'Role' },
-  user: { id: 'label.user', defaultMessage: 'User' },
-  admin: { id: 'label.admin', defaultMessage: 'Admin' },
-  minLength: {
-    id: 'message.min-password-length',
-    defaultMessage: 'Minimum length of 8 characters',
-  },
-});
+import { labels, messages } from 'components/messages';
 
 export default function UserEditForm({ userId, data, onSave }) {
   const { formatMessage } = useIntl();
@@ -42,35 +29,35 @@ export default function UserEditForm({ userId, data, onSave }) {
 
   const renderValue = value => {
     if (value === ROLES.user) {
-      return formatMessage(messages.user);
+      return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(messages.admin);
+      return formatMessage(labels.admin);
     }
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
-      <FormRow label={formatMessage(messages.username)}>
+    <Form onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
+      <FormRow label={formatMessage(labels.username)}>
         <FormInput name="username">
           <TextField />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(messages.password)}>
+      <FormRow label={formatMessage(labels.password)}>
         <FormInput
           name="newPassword"
           rules={{
-            minLength: { value: 8, message: formatMessage(messages.minLength) },
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength) },
           }}
         >
           <PasswordField autoComplete="new-password" />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(messages.role)}>
+      <FormRow label={formatMessage(labels.role)}>
         <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
-          <Dropdown renderValue={renderValue} style={{ width: 200 }}>
-            <Item key={ROLES.user}>{formatMessage(messages.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(messages.admin)}</Item>
+          <Dropdown renderValue={renderValue}>
+            <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>
diff --git a/components/pages/settings/users/UserSettings.js b/components/pages/settings/users/UserSettings.js
index 8d15070c..c41b9ce4 100644
--- a/components/pages/settings/users/UserSettings.js
+++ b/components/pages/settings/users/UserSettings.js
@@ -1,23 +1,13 @@
 import { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import UserDeleteForm from 'components/pages/settings/users/UserDeleteForm';
 import UserEditForm from 'components/pages/settings/users//UserEditForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import useApi from 'hooks/useApi';
-import WebsitesTable from '../websites/WebsitesTable';
-
-const messages = defineMessages({
-  users: { id: 'label.users', defaultMessage: 'Users' },
-  details: { id: 'label.details', defaultMessage: 'Details' },
-  websites: { id: 'label.websites', defaultMessage: 'Websites' },
-  actions: { id: 'label.actions', defaultMessage: 'Actions' },
-  saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
-  delete: { id: 'message.delete-successfully', defaultMessage: 'Delete successfully.' },
-});
+import { labels, messages } from 'components/messages';
+import UserWebsites from './UserWebsites';
 
 export default function UserSettings({ userId }) {
   const { formatMessage } = useIntl();
@@ -26,7 +16,6 @@ export default function UserSettings({ userId }) {
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
   const { toast, showToast } = useToast();
-  const router = useRouter();
   const { data, isLoading } = useQuery(
     ['user', userId],
     () => {
@@ -48,11 +37,6 @@ export default function UserSettings({ userId }) {
     }
   };
 
-  const handleDelete = async () => {
-    showToast({ message: formatMessage(messages.delete), variant: 'danger' });
-    await router.push('/users');
-  };
-
   useEffect(() => {
     if (data) {
       setValues(data);
@@ -65,19 +49,17 @@ export default function UserSettings({ userId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/settings/users">{formatMessage(messages.users)}</Link>
+            <Link href="/settings/users">{formatMessage(labels.users)}</Link>
           </Item>
           <Item>{values?.username}</Item>
         </Breadcrumbs>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="details">{formatMessage(messages.details)}</Item>
-        <Item key="websites">{formatMessage(messages.websites)}</Item>
-        <Item key="delete">{formatMessage(messages.actions)}</Item>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="websites">{formatMessage(labels.websites)}</Item>
       </Tabs>
       {tab === 'details' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
-      {tab === 'websites' && <WebsitesTable />}
-      {tab === 'delete' && <UserDeleteForm userId={userId} onSave={handleDelete} />}
+      {tab === 'websites' && <UserWebsites userId={userId} />}
     </Page>
   );
 }
diff --git a/components/pages/settings/users/UserWebsites.js b/components/pages/settings/users/UserWebsites.js
new file mode 100644
index 00000000..28fddaa4
--- /dev/null
+++ b/components/pages/settings/users/UserWebsites.js
@@ -0,0 +1,25 @@
+import { Loading } from 'react-basics';
+import { useIntl } from 'react-intl';
+import useApi from 'hooks/useApi';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
+import { messages } from 'components/messages';
+
+export default function UserWebsites({ userId }) {
+  const { formatMessage } = useIntl();
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['user/websites', userId], () =>
+    get(`/users/${userId}/websites`),
+  );
+  const hasData = data && data.length !== 0;
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return (
+    <div>
+      {hasData && <WebsitesTable data={data} />}
+      {!hasData && formatMessage(messages.noData)}
+    </div>
+  );
+}
diff --git a/components/pages/settings/users/UsersList.js b/components/pages/settings/users/UsersList.js
index 901a986f..daa1b3cf 100644
--- a/components/pages/settings/users/UsersList.js
+++ b/components/pages/settings/users/UsersList.js
@@ -1,4 +1,4 @@
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -6,33 +6,35 @@ import UsersTable from './UsersTable';
 import UserAddButton from './UserAddButton';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
-
-const messages = defineMessages({
-  noUsers: {
-    id: 'messages.no-users',
-    defaultMessage: "You don't have any users.",
-  },
-  users: { id: 'label.users', defaultMessage: 'Users' },
-  createUser: { id: 'label.create-user', defaultMessage: 'Create user' },
-});
+import { useToast } from 'react-basics';
+import { labels, messages } from 'components/messages';
 
 export default function UsersList() {
   const { formatMessage } = useIntl();
   const { user } = useUser();
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(['user'], () => get(`/users`), {
+  const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
     enabled: !!user,
   });
+  const { toast, showToast } = useToast();
   const hasData = data && data.length !== 0;
 
-  const addButton = <UserAddButton />;
+  const handleSave = () => refetch();
+
+  const handleDelete = () =>
+    showToast({ message: formatMessage(messages.deleted), variant: 'success' });
 
   return (
     <Page loading={isLoading} error={error}>
-      <PageHeader title={formatMessage(messages.users)}>{addButton}</PageHeader>
-      {hasData && <UsersTable data={data} />}
+      {toast}
+      <PageHeader title={formatMessage(labels.users)}>
+        <UserAddButton onSave={handleSave} />
+      </PageHeader>
+      {hasData && <UsersTable data={data} onDelete={handleDelete} />}
       {!hasData && (
-        <EmptyPlaceholder message={formatMessage(messages.noUsers)}>{addButton}</EmptyPlaceholder>
+        <EmptyPlaceholder message={formatMessage(messages.noUsers)}>
+          <UserAddButton onSave={handleSave} />
+        </EmptyPlaceholder>
       )}
     </Page>
   );
diff --git a/components/pages/settings/users/UsersTable.js b/components/pages/settings/users/UsersTable.js
index 16cf0870..7f0c03d5 100644
--- a/components/pages/settings/users/UsersTable.js
+++ b/components/pages/settings/users/UsersTable.js
@@ -8,26 +8,38 @@ import {
   TableColumn,
   TableHeader,
   TableRow,
+  Flexbox,
+  Icons,
+  ModalTrigger,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { Edit } from 'components/icons';
-import styles from './UsersTable.module.css';
+import useUser from 'hooks/useUser';
+import UserDeleteForm from './UserDeleteForm';
+import { labels } from 'components/messages';
+import { ROLES } from 'lib/constants';
 
-const columns = [
-  { name: 'username', label: 'Username', style: { flex: 2 } },
-  { name: 'role', label: 'Role', style: { flex: 2 } },
-  { name: 'created', label: 'Created' },
-  { name: 'action', label: ' ' },
-];
+const { Trash } = Icons;
+
+export default function UsersTable({ data = [], onDelete }) {
+  const { formatMessage } = useIntl();
+  const { user } = useUser();
+
+  const columns = [
+    { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
+    { name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
+    { name: 'created', label: formatMessage(labels.created), style: { flex: 1 } },
+    { name: 'action', label: ' ', style: { flex: 2 } },
+  ];
 
-export default function UsersTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={data}>
+    <Table columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
-            <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+            <TableColumn key={index} style={{ ...column.style }}>
               {column.label}
             </TableColumn>
           );
@@ -35,33 +47,57 @@ export default function UsersTable({ data = [] }) {
       </TableHeader>
       <TableBody>
         {(row, keys, rowIndex) => {
-          row.created = formatDistance(new Date(row.createdAt), new Date(), {
-            addSuffix: true,
-          });
-
-          row.action = (
-            <div className={styles.actions}>
-              <Link href={`/settings/users/${row.id}`}>
-                <Button>
-                  <Icon>
-                    <Edit />
-                  </Icon>
-                  <Text>Edit</Text>
-                </Button>
-              </Link>
-            </div>
-          );
+          const rowData = {
+            ...row,
+            created: formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+            }),
+            role: formatMessage(
+              labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
+            ),
+            action: (
+              <>
+                <Link href={`/settings/users/${row.id}`}>
+                  <Button>
+                    <Icon>
+                      <Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Button>
+                </Link>
+                <ModalTrigger disabled={row.id === user.id}>
+                  <Button disabled={row.id === user.id}>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>{formatMessage(labels.delete)}</Text>
+                  </Button>
+                  {close => (
+                    <UserDeleteForm
+                      userId={row.id}
+                      username={row.username}
+                      onSave={onDelete}
+                      onClose={close}
+                    />
+                  )}
+                </ModalTrigger>
+              </>
+            ),
+          };
 
           return (
-            <TableRow key={rowIndex} data={row} keys={keys}>
+            <TableRow key={rowIndex} data={rowData} keys={keys}>
               {(data, key, colIndex) => {
                 return (
-                  <TableCell
-                    key={colIndex}
-                    className={styles.cell}
-                    style={{ ...columns[colIndex]?.style }}
-                  >
-                    {data[key]}
+                  <TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
+                    <Flexbox
+                      flex={1}
+                      gap={10}
+                      alignItems="center"
+                      justifyContent={key === 'action' ? 'end' : undefined}
+                    >
+                      {data[key]}
+                    </Flexbox>
                   </TableCell>
                 );
               }}
diff --git a/components/pages/settings/users/UsersTable.module.css b/components/pages/settings/users/UsersTable.module.css
deleted file mode 100644
index a105bede..00000000
--- a/components/pages/settings/users/UsersTable.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.table th,
-.table td {
-  flex: 2;
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-}
-
-.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/websites/ShareUrl.js b/components/pages/settings/websites/ShareUrl.js
index 88997bae..b3a5e82d 100644
--- a/components/pages/settings/websites/ShareUrl.js
+++ b/components/pages/settings/websites/ShareUrl.js
@@ -8,13 +8,16 @@ import {
   Button,
   Toggle,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getRandomChars } from 'next-basics';
 import useApi from 'hooks/useApi';
+import { labels, messages } from 'components/messages';
 
 const generateId = () => getRandomChars(16);
 
 export default function ShareUrl({ websiteId, data, onSave }) {
+  const { formatMessage } = useIntl();
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
@@ -62,26 +65,24 @@ export default function ShareUrl({ websiteId, data, onSave }) {
   }, [id, shareId]);
 
   return (
-    <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
-      <FormRow>
-        <Toggle checked={Boolean(id)} onChecked={handleCheck}>
-          Enable share URL
-        </Toggle>
-      </FormRow>
+    <>
+      <Toggle checked={Boolean(id)} onChecked={handleCheck} style={{ marginBottom: 30 }}>
+        {formatMessage(labels.enableShareUrl)}
+      </Toggle>
       {id && (
-        <>
+        <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
           <FormRow>
-            <p>Your website stats are publically available at the following URL:</p>
+            <p>{formatMessage(messages.shareUrl)}</p>
             <Flexbox gap={10}>
               <TextField value={url} readOnly allowCopy />
-              <Button onClick={handleGenerate}>Regenerate URL</Button>
+              <Button onClick={handleGenerate}>{formatMessage(labels.regenerate)}</Button>
             </Flexbox>
           </FormRow>
           <FormButtons>
-            <SubmitButton variant="primary">Save</SubmitButton>
+            <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
           </FormButtons>
-        </>
+        </Form>
       )}
-    </Form>
+    </>
   );
 }
diff --git a/components/pages/settings/websites/TrackingCode.js b/components/pages/settings/websites/TrackingCode.js
index 99fb51e1..2822cbdf 100644
--- a/components/pages/settings/websites/TrackingCode.js
+++ b/components/pages/settings/websites/TrackingCode.js
@@ -1,7 +1,10 @@
 import { TextArea } from 'react-basics';
 import { TRACKER_SCRIPT_URL } from 'lib/constants';
+import { messages } from 'components/messages';
+import { useIntl } from 'react-intl';
 
 export default function TrackingCode({ websiteId }) {
+  const { formatMessage } = useIntl();
   const url = TRACKER_SCRIPT_URL.startsWith('http')
     ? TRACKER_SCRIPT_URL
     : `${location.origin}${TRACKER_SCRIPT_URL}`;
@@ -10,10 +13,7 @@ export default function TrackingCode({ websiteId }) {
 
   return (
     <>
-      <p>
-        To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
-        section of your HTML.
-      </p>
+      <p>{formatMessage(messages.trackingCode)}</p>
       <TextArea rows={4} value={code} readOnly allowCopy />
     </>
   );
diff --git a/components/pages/settings/websites/WebsiteAddForm.js b/components/pages/settings/websites/WebsiteAddForm.js
index 5231e8ac..40128f7a 100644
--- a/components/pages/settings/websites/WebsiteAddForm.js
+++ b/components/pages/settings/websites/WebsiteAddForm.js
@@ -31,12 +31,12 @@ export default function WebsiteAddForm({ onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <FormRow label="Name">
+      <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
-      <FormRow label="Domain">
+      <FormRow label={formatMessage(labels.domain)}>
         <FormInput
           name="domain"
           rules={{
diff --git a/components/pages/settings/websites/WebsiteDeleteForm.js b/components/pages/settings/websites/WebsiteDeleteForm.js
index 8dc72a10..7a173525 100644
--- a/components/pages/settings/websites/WebsiteDeleteForm.js
+++ b/components/pages/settings/websites/WebsiteDeleteForm.js
@@ -1,4 +1,3 @@
-import useApi from 'hooks/useApi';
 import {
   Button,
   Form,
@@ -8,12 +7,16 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
+import { labels, messages } from 'components/messages';
+import useApi from 'hooks/useApi';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+  const { formatMessage } = useIntl();
   const { del, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
+  const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -25,21 +28,15 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <div>
-        To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
-      </div>
-      <FormRow label="Confirm">
+      <p>{formatMessage(messages.deleteWebsite, { confirmation: CONFIRM_VALUE })}</p>
+      <FormRow label={formatMessage(labels.confirm)}>
         <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" disabled={isLoading}>
-          Save
-        </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
-          Cancel
-        </Button>
+        <SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/settings/websites/WebsiteEditForm.js b/components/pages/settings/websites/WebsiteEditForm.js
index 802929b6..5b8f7926 100644
--- a/components/pages/settings/websites/WebsiteEditForm.js
+++ b/components/pages/settings/websites/WebsiteEditForm.js
@@ -1,9 +1,12 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useRef } from 'react';
+import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
+import { labels, messages } from 'components/messages';
 
 export default function WebsiteEditForm({ websiteId, data, onSave }) {
+  const { formatMessage } = useIntl();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
   const ref = useRef(null);
@@ -19,22 +22,22 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
 
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
-      <FormRow label="Website ID">
+      <FormRow label={formatMessage(labels.websiteId)}>
         <TextField value={websiteId} readOnly allowCopy />
       </FormRow>
-      <FormRow label="Name">
-        <FormInput name="name" rules={{ required: 'Required' }}>
+      <FormRow label={formatMessage(labels.name)}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField />
         </FormInput>
       </FormRow>
-      <FormRow label="Domain">
+      <FormRow label={formatMessage(labels.domain)}>
         <FormInput
           name="domain"
           rules={{
-            required: 'Required',
+            required: formatMessage(labels.required),
             pattern: {
               value: DOMAIN_REGEX,
-              message: 'Invalid domain',
+              message: formatMessage(messages.invalidDomain),
             },
           }}
         >
@@ -42,7 +45,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
         </FormInput>
       </FormRow>
       <FormButtons>
-        <SubmitButton variant="primary">Save</SubmitButton>
+        <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/settings/websites/WebsiteReset.js b/components/pages/settings/websites/WebsiteReset.js
index f37b9e81..9c20627c 100644
--- a/components/pages/settings/websites/WebsiteReset.js
+++ b/components/pages/settings/websites/WebsiteReset.js
@@ -1,10 +1,13 @@
-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';
+import { useIntl } from 'react-intl';
+import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
+import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
+import { labels, messages } from 'components/messages';
 
 export default function WebsiteReset({ websiteId, onSave }) {
+  const { formatMessage } = useIntl();
   const [modal, setModal] = useState(null);
   const router = useRouter();
 
@@ -22,23 +25,21 @@ export default function WebsiteReset({ websiteId, onSave }) {
 
   return (
     <Form>
-      <FormRow label="Reset website">
-        <p>
-          All statistics for this website will be deleted, but your settings will remain intact.
-        </p>
-        <Button onClick={() => setModal('reset')}>Reset</Button>
+      <FormRow label={formatMessage(labels.resetWebsite)}>
+        <p>{formatMessage(messages.resetWebsiteWarning)}</p>
+        <Button onClick={() => setModal('reset')}>{formatMessage(labels.reset)}</Button>
       </FormRow>
-      <FormRow label="Delete website">
-        <p>All website data will be deleted.</p>
+      <FormRow label={formatMessage(labels.deleteWebsite)}>
+        <p>{formatMessage(messages.deleteWebsiteWarning)}</p>
         <Button onClick={() => setModal('delete')}>Delete</Button>
       </FormRow>
       {modal === 'reset' && (
-        <Modal title="Reset website" onClose={handleClose}>
+        <Modal title={formatMessage(labels.resetWebsite)} onClose={handleClose}>
           {close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
         </Modal>
       )}
       {modal === 'delete' && (
-        <Modal title="Delete website" onClose={handleClose}>
+        <Modal title={formatMessage(labels.deleteWebsite)} onClose={handleClose}>
           {close => (
             <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
           )}
diff --git a/components/pages/settings/websites/WebsiteResetForm.js b/components/pages/settings/websites/WebsiteResetForm.js
index 2d58b37b..68ebdea9 100644
--- a/components/pages/settings/websites/WebsiteResetForm.js
+++ b/components/pages/settings/websites/WebsiteResetForm.js
@@ -1,4 +1,3 @@
-import useApi from 'hooks/useApi';
 import {
   Button,
   Form,
@@ -8,14 +7,16 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
+import useApi from 'hooks/useApi';
+import { useIntl } from 'react-intl';
+import { labels, messages } from 'components/messages';
 
 const CONFIRM_VALUE = 'RESET';
 
 export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
+  const { formatMessage } = useIntl();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data =>
-    post(`/websites/${websiteId}/reset`, data),
-  );
+  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -27,21 +28,15 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <div>
-        To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
-      </div>
-      <FormRow label="Confirmation">
+      <p>{formatMessage(messages.resetWebsite, { confirmation: CONFIRM_VALUE })}</p>
+      <FormRow label={formatMessage(labels.confirm)}>
         <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" disabled={isLoading}>
-          Save
-        </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
-          Cancel
-        </Button>
+        <SubmitButton variant="danger">{formatMessage(labels.reset)}</SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/settings/websites/WebsiteSettings.js b/components/pages/settings/websites/WebsiteSettings.js
index d240a859..c6ad4bcd 100644
--- a/components/pages/settings/websites/WebsiteSettings.js
+++ b/components/pages/settings/websites/WebsiteSettings.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -9,19 +9,10 @@ import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
 import TrackingCode from 'components/pages/settings/websites/TrackingCode';
 import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import useApi from 'hooks/useApi';
+import { labels, messages } from 'components/messages';
 
 const { External } = Icons;
 
-const messages = defineMessages({
-  websites: { id: 'label.websites', defaultMessage: 'Websites' },
-  details: { id: 'label.details', defaultMessage: 'Details' },
-  trackingCode: { id: 'label.tracking-code', defaultMessage: 'Tracking code' },
-  shareUrl: { id: 'label.share-url', defaultMessage: 'Share URL' },
-  actions: { id: 'label.actions', defaultMessage: 'Actions' },
-  view: { id: 'label.view', defaultMessage: 'View' },
-  saved: { id: 'message.saved-successfully', defaultMessage: 'Save successfully.' },
-});
-
 export default function WebsiteSettings({ websiteId }) {
   const { formatMessage } = useIntl();
   const [values, setValues] = useState(null);
@@ -55,7 +46,7 @@ export default function WebsiteSettings({ websiteId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/settings/websites">{formatMessage(messages.websites)}</Link>
+            <Link href="/settings/websites">{formatMessage(labels.websites)}</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
@@ -65,23 +56,23 @@ export default function WebsiteSettings({ websiteId }) {
               <Icon>
                 <External />
               </Icon>
-              <Text>{formatMessage(messages.view)}</Text>
+              <Text>{formatMessage(labels.view)}</Text>
             </Button>
           </a>
         </Link>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
-        <Item key="details">{formatMessage(messages.details)}</Item>
-        <Item key="tracking">{formatMessage(messages.trackingCode)}</Item>
-        <Item key="share">{formatMessage(messages.shareUrl)}</Item>
-        <Item key="actions">{formatMessage(messages.actions)}</Item>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
+        <Item key="share">{formatMessage(labels.shareUrl)}</Item>
+        <Item key="data">{formatMessage(labels.data)}</Item>
       </Tabs>
       {tab === 'details' && (
         <WebsiteEditForm websiteId={websiteId} data={values} 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} />}
+      {tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
     </Page>
   );
 }
diff --git a/components/pages/settings/websites/WebsitesList.js b/components/pages/settings/websites/WebsitesList.js
index 1e5c1419..52908b47 100644
--- a/components/pages/settings/websites/WebsitesList.js
+++ b/components/pages/settings/websites/WebsitesList.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -8,16 +8,7 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
-
-const messages = defineMessages({
-  saved: { id: 'messages.website-saved', defaultMessage: 'Website saved.' },
-  noWebsites: {
-    id: 'messages.no-websites',
-    defaultMessage: "You don't have any websites configured.",
-  },
-  websites: { id: 'label.websites', defaultMessage: 'Websites' },
-  addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
-});
+import { labels, messages } from 'components/messages';
 
 const { Plus } = Icons;
 
@@ -49,14 +40,14 @@ export default function WebsitesList() {
       <Icon>
         <Plus />
       </Icon>
-      <Text>{formatMessage(messages.addWebsite)}</Text>
+      <Text>{formatMessage(labels.addWebsite)}</Text>
     </Button>
   );
 
   return (
     <Page loading={isLoading} error={error}>
       {toast}
-      <PageHeader title={formatMessage(messages.websites)}>{addButton}</PageHeader>
+      <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
       {hasData && <WebsitesTable data={data} />}
       {!hasData && (
         <EmptyPlaceholder message={formatMessage(messages.noWebsites)}>
@@ -64,7 +55,7 @@ export default function WebsitesList() {
         </EmptyPlaceholder>
       )}
       {edit && (
-        <Modal title={formatMessage(messages.addWebsite)} onClose={handleClose}>
+        <Modal title={formatMessage(labels.addWebsite)} onClose={handleClose}>
           {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
         </Modal>
       )}
diff --git a/components/pages/settings/websites/WebsitesTable.js b/components/pages/settings/websites/WebsitesTable.js
index 4a718f42..251b9d7e 100644
--- a/components/pages/settings/websites/WebsitesTable.js
+++ b/components/pages/settings/websites/WebsitesTable.js
@@ -9,20 +9,28 @@ import {
   Button,
   Icon,
   Icons,
+  Flexbox,
 } from 'react-basics';
-import styles from './WebsitesTable.module.css';
+import { defineMessages, useIntl } from 'react-intl';
 
 const { ArrowRight, External } = Icons;
 
-const columns = [
-  { name: 'name', label: 'Name', style: { flex: 2 } },
-  { name: 'domain', label: 'Domain' },
-  { name: 'action', label: ' ' },
-];
+const messages = defineMessages({
+  name: { id: 'label.name', defaultMessage: 'Name' },
+  domain: { id: 'label.domain', defaultMessage: 'Domain' },
+});
 
 export default function WebsitesTable({ data = [] }) {
+  const { formatMessage } = useIntl();
+
+  const columns = [
+    { name: 'name', label: formatMessage(messages.name), style: { flex: 2 } },
+    { name: 'domain', label: formatMessage(messages.domain) },
+    { name: 'action', label: ' ' },
+  ];
+
   return (
-    <Table className={styles.table} columns={columns} rows={data}>
+    <Table columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -37,7 +45,7 @@ export default function WebsitesTable({ data = [] }) {
           const { id } = row;
 
           row.action = (
-            <div className={styles.actions}>
+            <Flexbox flex={1} justifyContent="end" gap={10}>
               <Link href={`/settings/websites/${id}`}>
                 <a>
                   <Button>
@@ -58,19 +66,17 @@ export default function WebsitesTable({ data = [] }) {
                   </Button>
                 </a>
               </Link>
-            </div>
+            </Flexbox>
           );
 
           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 key={colIndex} style={{ ...columns[colIndex]?.style }}>
+                    <Flexbox flex={1} alignItems="center">
+                      {data[key]}
+                    </Flexbox>
                   </TableCell>
                 );
               }}
diff --git a/components/pages/settings/websites/WebsitesTable.module.css b/components/pages/settings/websites/WebsitesTable.module.css
deleted file mode 100644
index b0579f34..00000000
--- a/components/pages/settings/websites/WebsitesTable.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.table th,
-.table td {
-  flex: 2;
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-}
-
-.cell:last-child {
-  justify-content: flex-end;
-}
-
-.actions {
-  display: flex;
-  gap: 12px;
-}
diff --git a/package.json b/package.json
index 94095153..1846eb9d 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.55.0",
+    "react-basics": "^0.62.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",
diff --git a/pages/api/teams/[id]/websites.ts b/pages/api/teams/[id]/websites.ts
index 0e610649..fbb07423 100644
--- a/pages/api/teams/[id]/websites.ts
+++ b/pages/api/teams/[id]/websites.ts
@@ -23,7 +23,7 @@ export default async (
   const { id: teamId } = req.query;
 
   if (req.method === 'GET') {
-    if (await canViewTeam(req.auth, teamId)) {
+    if (!(await canViewTeam(req.auth, teamId))) {
       return unauthorized(res);
     }
 
diff --git a/pages/api/users/[id]/index.ts b/pages/api/users/[id]/index.ts
index 25fa337b..4a3e55d5 100644
--- a/pages/api/users/[id]/index.ts
+++ b/pages/api/users/[id]/index.ts
@@ -76,7 +76,7 @@ export default async (
     }
 
     if (id === userId) {
-      return badRequest(res, 'You cannot delete your own user.');
+      return badRequest(res, 'You cannot delete yourself.');
     }
 
     await deleteUser(id);
diff --git a/pages/api/users/[id]/websites.ts b/pages/api/users/[id]/websites.ts
index ec151c95..7a6f7dc1 100644
--- a/pages/api/users/[id]/websites.ts
+++ b/pages/api/users/[id]/websites.ts
@@ -26,9 +26,10 @@ export default async (
   const {
     user: { id: userId },
   } = req.auth;
+  const { id } = req.query;
 
   if (req.method === 'GET') {
-    const websites = await getUserWebsites(userId);
+    const websites = await getUserWebsites(id as string);
 
     return ok(res, websites);
   }
diff --git a/pages/settings/teams/[...id].js b/pages/settings/teams/[...id].js
index fe288301..fbfea344 100644
--- a/pages/settings/teams/[...id].js
+++ b/pages/settings/teams/[...id].js
@@ -1,5 +1,5 @@
 import AppLayout from 'components/layout/AppLayout';
-import TeamDetails from 'components/pages/settings/teams/TeamDetails';
+import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
 
@@ -14,7 +14,7 @@ export default function TeamDetailPage() {
 
   return (
     <AppLayout>
-      <TeamDetails teamId={id} />
+      <TeamSettings teamId={id} />
     </AppLayout>
   );
 }
diff --git a/queries/admin/user.ts b/queries/admin/user.ts
index a1cfd901..10b8c92e 100644
--- a/queries/admin/user.ts
+++ b/queries/admin/user.ts
@@ -29,6 +29,9 @@ export async function getUser(
 
 export async function getUsers(): Promise<User[]> {
   return prisma.client.user.findMany({
+    where: {
+      deletedAt: null,
+    },
     orderBy: [
       {
         username: 'asc',
diff --git a/yarn.lock b/yarn.lock
index 6cb3a5b0..efdba584 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6562,10 +6562,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.55.0:
-  version "0.55.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.55.0.tgz#b9c3dbba33a3ce118e63322ddcb822139a3ea547"
-  integrity sha512-30ygRxj7l0KjbmOGF2xcptCOSr8Bw85n6U7I4RzHI5VKvzq7CliKaXr+xvGrRFPvNQ6TnrY25uFdUd7BFDHvGA==
+react-basics@^0.62.0:
+  version "0.62.0"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.62.0.tgz#7d4890632d9a0086e54f7472b9e59db0c973dd86"
+  integrity sha512-/m9LXHwRCX3uqT8exJp+D0PsDqQBAfg4BXpqRuXmQBMmEYjixQo+qBLHcbnJ0/6qLrsyb/5y4VBrorWQ2HtKiQ==
   dependencies:
     classnames "^2.3.1"
     react "^18.2.0"