From 8a84356cd1265457382d2f14aa4bedda0f697036 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Mar 2022 16:03:19 +0100
Subject: [PATCH] fix some things

---
 package-lock.json                             | 51 ++++-------
 package.json                                  |  2 +-
 src/lib/layout/navigation.svelte              | 10 ---
 .../collection/[collection]/attributes.svelte | 35 ++++----
 .../collection/[collection]/index.svelte      | 56 ++++++-------
 .../console/[project]/domains/index.svelte    | 57 -------------
 .../function/[function]/index.svelte          | 48 +++++------
 .../console/[project]/keys/index.svelte       | 40 +++++----
 .../[project]/settings/__layout.svelte        | 17 ++++
 .../[project]/settings/_createDomain.svelte   | 38 +++++++++
 .../console/[project]/settings/_tabs.svelte   | 44 ++++++++++
 .../console/[project]/settings/domains.svelte | 60 +++++++++++++
 .../index.svelte}                             | 10 +--
 .../console/[project]/settings/members.svelte | 41 +++++++++
 .../[project]/settings/services.svelte        |  6 ++
 .../storage/bucket/[bucket]/index.svelte      | 60 +++++++------
 .../console/[project]/users/index.svelte      | 84 +++++++++----------
 .../console/[project]/users/team/index.svelte | 48 +++++------
 .../users/user/[user]/activity.svelte         | 75 ++++++++---------
 .../console/[project]/webhooks/index.svelte   | 44 +++++-----
 20 files changed, 461 insertions(+), 365 deletions(-)
 delete mode 100644 src/routes/console/[project]/domains/index.svelte
 create mode 100644 src/routes/console/[project]/settings/__layout.svelte
 create mode 100644 src/routes/console/[project]/settings/_createDomain.svelte
 create mode 100644 src/routes/console/[project]/settings/_tabs.svelte
 create mode 100644 src/routes/console/[project]/settings/domains.svelte
 rename src/routes/console/[project]/{settings.svelte => settings/index.svelte} (86%)
 create mode 100644 src/routes/console/[project]/settings/members.svelte
 create mode 100644 src/routes/console/[project]/settings/services.svelte

diff --git a/package-lock.json b/package-lock.json
index 13aaa3f5a..6d94bdef7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
 				"@testing-library/user-event": "^13.5.0",
 				"@typescript-eslint/eslint-plugin": "^5.14.0",
 				"@typescript-eslint/parser": "^5.14.0",
-				"eslint": "^8.10.0",
+				"eslint": "^8.11.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte3": "^3.4.1",
 				"jest": "^27.5.1",
@@ -662,16 +662,16 @@
 			"dev": true
 		},
 		"node_modules/@eslint/eslintrc": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.0.tgz",
-			"integrity": "sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
+			"integrity": "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==",
 			"dev": true,
 			"dependencies": {
 				"ajv": "^6.12.4",
 				"debug": "^4.3.2",
 				"espree": "^9.3.1",
 				"globals": "^13.9.0",
-				"ignore": "^4.0.6",
+				"ignore": "^5.2.0",
 				"import-fresh": "^3.2.1",
 				"js-yaml": "^4.1.0",
 				"minimatch": "^3.0.4",
@@ -681,15 +681,6 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
-		"node_modules/@eslint/eslintrc/node_modules/ignore": {
-			"version": "4.0.6",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-			"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 4"
-			}
-		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
@@ -3207,12 +3198,12 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.10.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.10.0.tgz",
-			"integrity": "sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==",
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.11.0.tgz",
+			"integrity": "sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==",
 			"dev": true,
 			"dependencies": {
-				"@eslint/eslintrc": "^1.2.0",
+				"@eslint/eslintrc": "^1.2.1",
 				"@humanwhocodes/config-array": "^0.9.2",
 				"ajv": "^6.10.0",
 				"chalk": "^4.0.0",
@@ -7587,28 +7578,20 @@
 			"dev": true
 		},
 		"@eslint/eslintrc": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.0.tgz",
-			"integrity": "sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
+			"integrity": "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==",
 			"dev": true,
 			"requires": {
 				"ajv": "^6.12.4",
 				"debug": "^4.3.2",
 				"espree": "^9.3.1",
 				"globals": "^13.9.0",
-				"ignore": "^4.0.6",
+				"ignore": "^5.2.0",
 				"import-fresh": "^3.2.1",
 				"js-yaml": "^4.1.0",
 				"minimatch": "^3.0.4",
 				"strip-json-comments": "^3.1.1"
-			},
-			"dependencies": {
-				"ignore": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-					"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-					"dev": true
-				}
 			}
 		},
 		"@humanwhocodes/config-array": {
@@ -9429,12 +9412,12 @@
 			}
 		},
 		"eslint": {
-			"version": "8.10.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.10.0.tgz",
-			"integrity": "sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==",
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.11.0.tgz",
+			"integrity": "sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==",
 			"dev": true,
 			"requires": {
-				"@eslint/eslintrc": "^1.2.0",
+				"@eslint/eslintrc": "^1.2.1",
 				"@humanwhocodes/config-array": "^0.9.2",
 				"ajv": "^6.10.0",
 				"chalk": "^4.0.0",
diff --git a/package.json b/package.json
index b26e493f8..6edc51668 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
 		"@testing-library/user-event": "^13.5.0",
 		"@typescript-eslint/eslint-plugin": "^5.14.0",
 		"@typescript-eslint/parser": "^5.14.0",
-		"eslint": "^8.10.0",
+		"eslint": "^8.11.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^3.4.1",
 		"jest": "^27.5.1",
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index ed500e5a1..3624250d6 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -94,16 +94,6 @@
 							<span class="text">API Keys</span>
 						</a>
 					</li>
-					<li class="side-nav-item">
-						<a
-							class="side-nav-link"
-							class:is-selected={$page.url.pathname.startsWith(`/console/${project}/domains`)}
-							href={`/console/${project}/domains`}
-						>
-							<span class="icon-info-circled" aria-hidden="true" />
-							<span class="text">Domains</span>
-						</a>
-					</li>
 				</ul>
 			</section>
 		</div>
diff --git a/src/routes/console/[project]/database/collection/[collection]/attributes.svelte b/src/routes/console/[project]/database/collection/[collection]/attributes.svelte
index 53e3a60a0..c625d11ea 100644
--- a/src/routes/console/[project]/database/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/attributes.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Card } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
 	import { Table, TableCell, TableHeader, TableBody, TableRow } from '$lib/elements/table';
 	import Create from './attributes/_create.svelte';
@@ -10,24 +9,22 @@
 
 <h1>Attributes</h1>
 
-<Card>
-	<Table>
-		<TableHeader>
-			<TableCell>Status</TableCell>
-			<TableCell>Key</TableCell>
-			<TableCell>Type</TableCell>
-		</TableHeader>
-		<TableBody>
-			{#each $collection.attributes as attribute}
-				<TableRow>
-					<TableCell>{attribute.status}</TableCell>
-					<TableCell>{attribute.key}</TableCell>
-					<TableCell>{attribute.type}</TableCell>
-				</TableRow>
-			{/each}
-		</TableBody>
-	</Table>
-</Card>
+<Table>
+	<TableHeader>
+		<TableCell>Status</TableCell>
+		<TableCell>Key</TableCell>
+		<TableCell>Type</TableCell>
+	</TableHeader>
+	<TableBody>
+		{#each $collection.attributes as attribute}
+			<TableRow>
+				<TableCell>{attribute.status}</TableCell>
+				<TableCell>{attribute.key}</TableCell>
+				<TableCell>{attribute.type}</TableCell>
+			</TableRow>
+		{/each}
+	</TableBody>
+</Table>
 
 <Button on:click={() => (showCreate = true)}>Create Attribute</Button>
 <Create bind:show={showCreate} />
diff --git a/src/routes/console/[project]/database/collection/[collection]/index.svelte b/src/routes/console/[project]/database/collection/[collection]/index.svelte
index f782893bb..c9e9877dc 100644
--- a/src/routes/console/[project]/database/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/index.svelte
@@ -9,7 +9,7 @@
 		TableCellHead,
 		TableCellLink
 	} from '$lib/elements/table';
-	import { Card, Pagination } from '$lib/components';
+	import { Pagination } from '$lib/components';
 	import { collection } from './store';
 
 	let offset = 0;
@@ -29,32 +29,30 @@
 </script>
 
 <h1>Documents</h1>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				{#each columns as column}
-					<TableCellHead>{column.title}</TableCellHead>
-				{/each}
-			</TableHeader>
-			<TableBody>
-				{#each response.documents as document}
-					<TableRow>
-						{#each columns as column}
-							<TableCellLink
-								href={`/console/${project}/database/collection/${$collection.$id}/document/${document.$id}`}
-								title={column.title}
-							>
-								{document[column.key] ?? 'n/a'}
-							</TableCellLink>
-						{/each}
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			{#each columns as column}
+				<TableCellHead>{column.title}</TableCellHead>
+			{/each}
+		</TableHeader>
+		<TableBody>
+			{#each response.documents as document}
+				<TableRow>
+					{#each columns as column}
+						<TableCellLink
+							href={`/console/${project}/database/collection/${$collection.$id}/document/${document.$id}`}
+							title={column.title}
+						>
+							{document[column.key] ?? 'n/a'}
+						</TableCellLink>
+					{/each}
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
 
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
diff --git a/src/routes/console/[project]/domains/index.svelte b/src/routes/console/[project]/domains/index.svelte
deleted file mode 100644
index f1dc80e78..000000000
--- a/src/routes/console/[project]/domains/index.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import { Back, Card } from '$lib/components';
-	import { Pill } from '$lib/elements';
-	import {
-		Table,
-		TableBody,
-		TableCellHead,
-		TableCellLink,
-		TableCellText,
-		TableHeader
-	} from '$lib/elements/table';
-	import { sdkForConsole } from '$lib/stores/sdk';
-
-	const projectId = $page.params.project;
-	const request = sdkForConsole.projects.listDomains(projectId);
-</script>
-
-<svelte:head>
-	<title>Appwrite - Domains</title>
-</svelte:head>
-<Back href={`/console/${projectId}`}>Home</Back>
-<h1>API Keys</h1>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead width={80} />
-				<TableCellHead>Domain</TableCellHead>
-				<TableCellHead>TLS</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.domains as domain}
-					<TableCellText title="Scopes">
-						<Pill failed={!domain.verification} success={domain.verification}>
-							{domain.verification ? 'Unverified' : 'Verified'}
-						</Pill>
-					</TableCellText>
-					<TableCellLink href={`/console/${projectId}/keys/${domain.$id}`} title="Domain">
-						{domain.domain}
-					</TableCellLink>
-					<TableCellText title="Scopes">
-						{#if domain.certificateId}
-							Verified
-						{:else if domain.verification}
-							In Progress
-						{:else}
-							Pending Verification
-						{/if}
-					</TableCellText>
-				{/each}
-			</TableBody>
-		</Table>
-	{/await}
-</Card>
diff --git a/src/routes/console/[project]/functions/function/[function]/index.svelte b/src/routes/console/[project]/functions/function/[function]/index.svelte
index e52422a80..cf3d696aa 100644
--- a/src/routes/console/[project]/functions/function/[function]/index.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/index.svelte
@@ -34,32 +34,30 @@
 	<InputSearch bind:value={search} />
 </Card>
 
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCell>#</TableCell>
-				<TableCell>Active</TableCell>
-			</TableHeader>
-			<TableBody>
-				{#each response.deployments as deployment}
-					<TableRow>
-						<TableCell>
-							<a href={`/console/${project}/storage/bucket/${functionId}/${deployment.$id}`}>
-								{deployment.$id}
-							</a>
-						</TableCell>
-						<TableCell>{deployment.activate}</TableCell>
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCell>#</TableCell>
+			<TableCell>Active</TableCell>
+		</TableHeader>
+		<TableBody>
+			{#each response.deployments as deployment}
+				<TableRow>
+					<TableCell>
+						<a href={`/console/${project}/storage/bucket/${functionId}/${deployment.$id}`}>
+							{deployment.$id}
+						</a>
+					</TableCell>
+					<TableCell>{deployment.activate}</TableCell>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
 
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
 
 <Button on:click={() => (showCreate = true)}>Upload</Button>
 <Create bind:showCreate />
diff --git a/src/routes/console/[project]/keys/index.svelte b/src/routes/console/[project]/keys/index.svelte
index ef697232e..2a5fb7810 100644
--- a/src/routes/console/[project]/keys/index.svelte
+++ b/src/routes/console/[project]/keys/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Back, Card } from '$lib/components';
+	import { Back } from '$lib/components';
 	import {
 		Table,
 		TableBody,
@@ -20,23 +20,21 @@
 </svelte:head>
 <Back href={`/console/${projectId}`}>Home</Back>
 <h1>API Keys</h1>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead>Name</TableCellHead>
-				<TableCellHead>Scopes</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.keys as key}
-					<TableCellLink href={`/console/${projectId}/keys/${key.$id}`} title="Name"
-						>{key.name}</TableCellLink
-					>
-					<TableCellText title="Scopes">{key.scopes.length}</TableCellText>
-				{/each}
-			</TableBody>
-		</Table>
-	{/await}
-</Card>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead>Name</TableCellHead>
+			<TableCellHead>Scopes</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.keys as key}
+				<TableCellLink href={`/console/${projectId}/keys/${key.$id}`} title="Name">
+					{key.name}
+				</TableCellLink>
+				<TableCellText title="Scopes">{key.scopes.length}</TableCellText>
+			{/each}
+		</TableBody>
+	</Table>
+{/await}
diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/[project]/settings/__layout.svelte
new file mode 100644
index 000000000..e8f49636f
--- /dev/null
+++ b/src/routes/console/[project]/settings/__layout.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { page } from '$app/stores';
+	import { Back } from '$lib/components';
+	import Tabs from './_tabs.svelte';
+
+	const project = $page.params.project;
+</script>
+
+<svelte:head>
+	<title>Appwrite - Settings</title>
+</svelte:head>
+
+<Back href={`/console/${project}`}>Home</Back>
+<h1>Settings</h1>
+<Tabs />
+
+<slot />
diff --git a/src/routes/console/[project]/settings/_createDomain.svelte b/src/routes/console/[project]/settings/_createDomain.svelte
new file mode 100644
index 000000000..c564ab5a8
--- /dev/null
+++ b/src/routes/console/[project]/settings/_createDomain.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Modal } from '$lib/components';
+	import { InputText, Button } from '$lib/elements/forms';
+	import { addNotification } from '$lib/stores/notifications';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { createEventDispatcher } from 'svelte';
+	import { project } from '../store';
+
+	export let show = false;
+
+	let domain: string;
+
+	const dispatch = createEventDispatcher();
+	const create = async () => {
+		try {
+			await sdkForConsole.projects.createDomain($project.$id, domain);
+			domain = null;
+			show = false;
+			dispatch('created');
+		} catch (error) {
+			addNotification({
+				type: 'error',
+				message: error.message
+			});
+		}
+	};
+</script>
+
+<form on:submit|preventDefault={create}>
+	<Modal bind:show>
+		<svelte:fragment slot="header">Add Domain</svelte:fragment>
+		<InputText id="domain" label="Domain" bind:value={domain} required />
+		<svelte:fragment slot="footer">
+			<Button submit>Create</Button>
+			<Button secondary on:click={() => (show = false)}>Cancel</Button>
+		</svelte:fragment>
+	</Modal>
+</form>
diff --git a/src/routes/console/[project]/settings/_tabs.svelte b/src/routes/console/[project]/settings/_tabs.svelte
new file mode 100644
index 000000000..4396fbc31
--- /dev/null
+++ b/src/routes/console/[project]/settings/_tabs.svelte
@@ -0,0 +1,44 @@
+<script>
+	import { page } from '$app/stores';
+
+	$: project = $page.params.project;
+</script>
+
+<ul class="tabs">
+	<li class="tabs-item">
+		<a
+			class="tabs-button is-selected"
+			href={`/console/${project}/settings`}
+			class:is-selected={$page.url.pathname === `/console/${project}/settings/`}
+		>
+			<span class="text">Overview</span>
+		</a>
+	</li>
+	<li class="tabs-item">
+		<a
+			class="tabs-button is-selected"
+			href={`/console/${project}/settings/services`}
+			class:is-selected={$page.url.pathname === `/console/${project}/settings/services/`}
+		>
+			<span class="text">Services</span>
+		</a>
+	</li>
+	<li class="tabs-item">
+		<a
+			class="tabs-button is-selected"
+			href={`/console/${project}/settings/domains`}
+			class:is-selected={$page.url.pathname === `/console/${project}/settings/domains/`}
+		>
+			<span class="text">Custom Domains</span>
+		</a>
+	</li>
+	<li class="tabs-item">
+		<a
+			class="tabs-button is-selected"
+			href={`/console/${project}/settings/members`}
+			class:is-selected={$page.url.pathname === `/console/${project}/settings/members/`}
+		>
+			<span class="text">Members</span>
+		</a>
+	</li>
+</ul>
diff --git a/src/routes/console/[project]/settings/domains.svelte b/src/routes/console/[project]/settings/domains.svelte
new file mode 100644
index 000000000..a7aafd8b3
--- /dev/null
+++ b/src/routes/console/[project]/settings/domains.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Pill } from '$lib/elements';
+	import { Button } from '$lib/elements/forms';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellText,
+		TableHeader,
+		TableRow
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import CreateDomain from './_createDomain.svelte';
+
+	const projectId = $page.params.project;
+	const listDomains = () => sdkForConsole.projects.listDomains(projectId);
+
+	let request = listDomains();
+	let addDomain = false;
+</script>
+
+<h1>Custom Domains</h1>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead width={80} />
+			<TableCellHead>Domain</TableCellHead>
+			<TableCellHead>TLS</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.domains as domain}
+				<TableRow>
+					<TableCellText title="Scopes">
+						<Pill failed={!domain.verification} success={domain.verification}>
+							{domain.verification ? 'Unverified' : 'Verified'}
+						</Pill>
+					</TableCellText>
+					<TableCellText title="Domain">
+						{domain.domain}
+					</TableCellText>
+					<TableCellText title="TLS">
+						{#if domain.certificateId}
+							Verified
+						{:else if domain.verification}
+							In Progress
+						{:else}
+							Pending Verification
+						{/if}
+					</TableCellText>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
+{/await}
+
+<Button on:click={() => (addDomain = true)}>Add Domain</Button>
+<CreateDomain bind:show={addDomain} on:created={() => (request = listDomains())} />
diff --git a/src/routes/console/[project]/settings.svelte b/src/routes/console/[project]/settings/index.svelte
similarity index 86%
rename from src/routes/console/[project]/settings.svelte
rename to src/routes/console/[project]/settings/index.svelte
index ae060388a..8c24d232e 100644
--- a/src/routes/console/[project]/settings.svelte
+++ b/src/routes/console/[project]/settings/index.svelte
@@ -2,7 +2,7 @@
 	import { Button, InputText } from '$lib/elements/forms';
 	import { addNotification } from '$lib/stores/notifications';
 	import { sdkForConsole } from '$lib/stores/sdk';
-	import { project } from './store';
+	import { project } from '../store';
 
 	const update = async () => {
 		try {
@@ -17,8 +17,8 @@
 	};
 </script>
 
+<h1>Overview</h1>
 {#if $project}
-	<h2>Overview</h2>
 	<article>
 		<form on:submit|preventDefault={update}>
 			<InputText id="name" label="Name" bind:value={$project.name} required />
@@ -26,9 +26,3 @@
 		</form>
 	</article>
 {/if}
-
-<style>
-	h2 {
-		margin-bottom: 0;
-	}
-</style>
diff --git a/src/routes/console/[project]/settings/members.svelte b/src/routes/console/[project]/settings/members.svelte
new file mode 100644
index 000000000..4421f3983
--- /dev/null
+++ b/src/routes/console/[project]/settings/members.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellText,
+		TableHeader,
+		TableRow
+	} from '$lib/elements/table';
+
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { project } from '../store';
+
+	$: request = sdkForConsole.teams.getMemberships($project?.teamId ?? undefined);
+</script>
+
+<h1>Members</h1>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	{#if response}
+		<Table>
+			<TableHeader>
+				<TableCellHead>Name</TableCellHead>
+				<TableCellHead>Email</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.memberships as membership}
+					<TableRow>
+						<TableCellText title="Name">
+							{membership.name}
+						</TableCellText>
+						<TableCellText title="Email">
+							{membership.email}
+						</TableCellText>
+					</TableRow>
+				{/each}
+			</TableBody>
+		</Table>
+	{/if}
+{/await}
diff --git a/src/routes/console/[project]/settings/services.svelte b/src/routes/console/[project]/settings/services.svelte
new file mode 100644
index 000000000..ee43942a1
--- /dev/null
+++ b/src/routes/console/[project]/settings/services.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { Card } from '$lib/components';
+</script>
+
+<h1>Services</h1>
+<Card />
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index 17a40c0b2..aa9479f66 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -40,38 +40,36 @@
 	<InputSearch bind:value={search} />
 </Card>
 
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead width={30} />
-				<TableCellHead>Name</TableCellHead>
-				<TableCellHead>Type</TableCellHead>
-				<TableCellHead>Size</TableCellHead>
-				<TableCellHead>Date Created</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.files as file}
-					<TableRow>
-						<TableCellAvatar src={getPreview(file.$id)} alt={file.name} onlyDesktop />
-						<TableCellText title="Name">
-							<span class="link" on:click={() => openFile(file)}>
-								{file.name}
-							</span>
-						</TableCellText>
-						<TableCellText title="Type">{file.mimeType}</TableCellText>
-						<TableCellText title="Size">{file.sizeOriginal}</TableCellText>
-						<TableCellText title="Date Created">{toLocaleDate(file.dateCreated)}</TableCellText>
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead width={30} />
+			<TableCellHead>Name</TableCellHead>
+			<TableCellHead>Type</TableCellHead>
+			<TableCellHead>Size</TableCellHead>
+			<TableCellHead>Date Created</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.files as file}
+				<TableRow>
+					<TableCellAvatar src={getPreview(file.$id)} alt={file.name} onlyDesktop />
+					<TableCellText title="Name">
+						<span class="link" on:click={() => openFile(file)}>
+							{file.name}
+						</span>
+					</TableCellText>
+					<TableCellText title="Type">{file.mimeType}</TableCellText>
+					<TableCellText title="Size">{file.sizeOriginal}</TableCellText>
+					<TableCellText title="Date Created">{toLocaleDate(file.dateCreated)}</TableCellText>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
 
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
 
 <Button on:click={() => (showCreate = true)}>Upload</Button>
 <Create bind:showCreate />
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index e6362bc3b..5d36704b2 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -37,49 +37,47 @@
 <Card>
 	<InputSearch bind:value={search} />
 </Card>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead width={30} />
-				<TableCellHead>Name</TableCellHead>
-				<TableCellHead>E-Mail</TableCellHead>
-				<TableCellHead>Status</TableCellHead>
-				<TableCellHead>Joined</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.users as user}
-					<TableRow>
-						<TableCell width={30} onlyDesktop>
-							<div class="image">
-								<img
-									class="avatar"
-									width="30"
-									height="30"
-									src={getAvatar(user.name)}
-									alt={user.name}
-								/>
-							</div>
-						</TableCell>
-						<TableCellLink href={`/console/${project}/users/user/${user.$id}`} title="Name">
-							{user.name}
-						</TableCellLink>
-						<TableCellText title="E-Mail">{user.email}</TableCellText>
-						<TableCellText title="Status"
-							><Pill success={user.emailVerification}
-								>{user.emailVerification ? 'Verified' : 'Unverified'}</Pill
-							></TableCellText
-						>
-						<TableCellText title="Joined">{toLocaleDate(user.registration)}</TableCellText>
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead width={30} />
+			<TableCellHead>Name</TableCellHead>
+			<TableCellHead>E-Mail</TableCellHead>
+			<TableCellHead>Status</TableCellHead>
+			<TableCellHead>Joined</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.users as user}
+				<TableRow>
+					<TableCell width={30} onlyDesktop>
+						<div class="image">
+							<img
+								class="avatar"
+								width="30"
+								height="30"
+								src={getAvatar(user.name)}
+								alt={user.name}
+							/>
+						</div>
+					</TableCell>
+					<TableCellLink href={`/console/${project}/users/user/${user.$id}`} title="Name">
+						{user.name}
+					</TableCellLink>
+					<TableCellText title="E-Mail">{user.email}</TableCellText>
+					<TableCellText title="Status"
+						><Pill success={user.emailVerification}
+							>{user.emailVerification ? 'Verified' : 'Unverified'}</Pill
+						></TableCellText
+					>
+					<TableCellText title="Joined">{toLocaleDate(user.registration)}</TableCellText>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
 
 <Button on:click={() => (showCreate = true)}>Create User</Button>
 <Create bind:showCreate on:created={userCreated} />
diff --git a/src/routes/console/[project]/users/team/index.svelte b/src/routes/console/[project]/users/team/index.svelte
index fe962a606..867b448e0 100644
--- a/src/routes/console/[project]/users/team/index.svelte
+++ b/src/routes/console/[project]/users/team/index.svelte
@@ -34,32 +34,30 @@
 	<InputSearch bind:value={search} />
 </Card>
 
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead>#</TableCellHead>
-				<TableCellHead>Name</TableCellHead>
-				<TableCellHead>Members</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.teams as team}
-					<TableRow>
-						<TableCellLink title="ID" href={`/console/${project}/users/team/${team.$id}`}>
-							{team.$id}
-						</TableCellLink>
-						<TableCellText title="Name">{team.name}</TableCellText>
-						<TableCellText title="Members">{team.total}</TableCellText>
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead>#</TableCellHead>
+			<TableCellHead>Name</TableCellHead>
+			<TableCellHead>Members</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.teams as team}
+				<TableRow>
+					<TableCellLink title="ID" href={`/console/${project}/users/team/${team.$id}`}>
+						{team.$id}
+					</TableCellLink>
+					<TableCellText title="Name">{team.name}</TableCellText>
+					<TableCellText title="Members">{team.total}</TableCellText>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
 
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
 
 <Button>Create Team</Button>
 <Create bind:showCreate on:created={teamCreated} />
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/users/user/[user]/activity.svelte
index 5fb119436..10c609e8e 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/users/user/[user]/activity.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Card, Pagination } from '$lib/components';
+	import { Pagination } from '$lib/components';
 	import { Table, TableBody, TableHeader, TableRow, TableCell } from '$lib/elements/table';
 	import { sdkForProject } from '$lib/stores/sdk';
 
@@ -11,42 +11,39 @@
 </script>
 
 <h1>Activity</h1>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCell>Date</TableCell>
-				<TableCell>Event</TableCell>
-				<TableCell>Client</TableCell>
-				<TableCell>Location</TableCell>
-				<TableCell>IP</TableCell>
-			</TableHeader>
-			<TableBody>
-				{#each response.logs as log}
-					<TableRow>
-						<TableCell>{log.time}</TableCell>
-						<TableCell>{log.event}</TableCell>
-						<TableCell
-							>{log.clientName} {log.clientVersion} on {log.osName} {log.osVersion}</TableCell
-						>
-						<TableCell>
-							{#if log.countryCode !== '--'}
-								<img
-									src={sdkForProject.avatars.getFlag(log.countryCode, 32, 32).toString()}
-									alt={log.countryName}
-								/>{log.countryName}
-							{:else}
-								Unknown
-							{/if}
-						</TableCell>
-						<TableCell>{log.ip}</TableCell>
-					</TableRow>
-				{/each}
-			</TableBody>
-		</Table>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCell>Date</TableCell>
+			<TableCell>Event</TableCell>
+			<TableCell>Client</TableCell>
+			<TableCell>Location</TableCell>
+			<TableCell>IP</TableCell>
+		</TableHeader>
+		<TableBody>
+			{#each response.logs as log}
+				<TableRow>
+					<TableCell>{log.time}</TableCell>
+					<TableCell>{log.event}</TableCell>
+					<TableCell>{log.clientName} {log.clientVersion} on {log.osName} {log.osVersion}</TableCell
+					>
+					<TableCell>
+						{#if log.countryCode !== '--'}
+							<img
+								src={sdkForProject.avatars.getFlag(log.countryCode, 32, 32).toString()}
+								alt={log.countryName}
+							/>{log.countryName}
+						{:else}
+							Unknown
+						{/if}
+					</TableCell>
+					<TableCell>{log.ip}</TableCell>
+				</TableRow>
+			{/each}
+		</TableBody>
+	</Table>
 
-		<Pagination {limit} bind:offset sum={response.total} />
-	{/await}
-</Card>
+	<Pagination {limit} bind:offset sum={response.total} />
+{/await}
diff --git a/src/routes/console/[project]/webhooks/index.svelte b/src/routes/console/[project]/webhooks/index.svelte
index bfd6faf45..b30f6f6d9 100644
--- a/src/routes/console/[project]/webhooks/index.svelte
+++ b/src/routes/console/[project]/webhooks/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Back, Card } from '$lib/components';
+	import { Back } from '$lib/components';
 	import {
 		Table,
 		TableBody,
@@ -20,25 +20,23 @@
 </svelte:head>
 <Back href={`/console/${projectId}`}>Home</Back>
 <h1>Webhooks</h1>
-<Card>
-	{#await request}
-		<div aria-busy="true" />
-	{:then response}
-		<Table>
-			<TableHeader>
-				<TableCellHead width={80}>Name</TableCellHead>
-				<TableCellHead>URL</TableCellHead>
-				<TableCellHead width={80}>Events</TableCellHead>
-			</TableHeader>
-			<TableBody>
-				{#each response.webhooks as webhook}
-					<TableCellLink href={`/console/${projectId}/webhooks/${webhook.$id}`} title="Name">
-						{webhook.name}
-					</TableCellLink>
-					<TableCellText title="URL">{webhook.url}</TableCellText>
-					<TableCellText title="Scopes">{webhook.events.length}</TableCellText>
-				{/each}
-			</TableBody>
-		</Table>
-	{/await}
-</Card>
+{#await request}
+	<div aria-busy="true" />
+{:then response}
+	<Table>
+		<TableHeader>
+			<TableCellHead width={80}>Name</TableCellHead>
+			<TableCellHead>URL</TableCellHead>
+			<TableCellHead width={80}>Events</TableCellHead>
+		</TableHeader>
+		<TableBody>
+			{#each response.webhooks as webhook}
+				<TableCellLink href={`/console/${projectId}/webhooks/${webhook.$id}`} title="Name">
+					{webhook.name}
+				</TableCellLink>
+				<TableCellText title="URL">{webhook.url}</TableCellText>
+				<TableCellText title="Scopes">{webhook.events.length}</TableCellText>
+			{/each}
+		</TableBody>
+	</Table>
+{/await}