From defc4ceb2ef0e3c1f7c8747df5b3e2fff591151d Mon Sep 17 00:00:00 2001
From: Yusuf Sallam <68395788+yusufsallam64@users.noreply.github.com>
Date: Sun, 15 Oct 2023 18:45:14 -0400
Subject: [PATCH] Refactor file tree Known issue with repeating requests

---
 src/config.ts                                 |   2 +-
 src/elements/common/file-uploader.ts          |  49 ++++----
 src/elements/common/namespace-dropdown.ts     |  20 ++--
 src/elements/context-menu/context-menu.ts     |   3 +-
 src/elements/dev/version-publish-summary.ts   |   4 +-
 .../dev/version/version-info-matchmaker.ts    |  47 ++++----
 src/elements/dev/version/version-info.ts      |  14 +--
 .../identity/identity-profile-edit.ts         |   5 +-
 src/elements/identity/identity-tile.ts        |   5 +-
 src/elements/layouts/sidebar-layout.ts        |   4 +-
 src/elements/mod.ts                           |   2 +-
 src/elements/pages/dev-dash.ts                |  35 +++---
 src/elements/pages/dev/game/module.ts         |   5 +
 .../pages/dev/game/pages/game-billing.ts      |   4 +-
 .../pages/dev/game/pages/game-logs.ts         |   4 +-
 .../pages/dev/game/pages/game-overview.ts     |  19 ++--
 .../dev/game/pages/game-version-draft.ts      |  43 +++----
 .../pages/dev/game/pages/game-version.ts      |  18 +--
 src/elements/pages/dev/game/pages/module.ts   |   9 ++
 .../pages/dev/game/settings/game-settings.ts  |  10 +-
 .../pages/dev/game/settings/module.ts         |   4 +
 .../pages/{ => dev/group}/group-banner.ts     |   6 +-
 .../pages/{ => dev/group}/group-invite.scss   |   4 +-
 .../pages/{ => dev/group}/group-invite.ts     |  12 +-
 src/elements/pages/{ => dev/group}/group.scss |   7 +-
 src/elements/pages/{ => dev/group}/group.ts   |  67 +++++------
 src/elements/pages/dev/group/module.ts        |   5 +
 .../group/settings}/group-settings-billing.ts |   4 +-
 .../group/settings}/group-settings-general.ts |  34 +++---
 .../settings}/group-settings-members.scss     |   0
 .../group/settings}/group-settings-members.ts |  22 ++--
 .../group/settings}/group-settings.ts         |  14 +--
 .../pages/dev/group/settings/module.ts        |   4 +
 src/elements/pages/dev/module.ts              |  25 +----
 src/elements/pages/dev/namespace/module.ts    |   4 +
 .../pages/{ => dev/user}/consent.scss         |   2 +-
 src/elements/pages/{ => dev/user}/consent.ts  |   4 +-
 src/elements/pages/dev/user/module.ts         |   2 +
 .../pages/{ => dev/user}/settings.scss        |   4 +-
 src/elements/pages/{ => dev/user}/settings.ts | 105 ++++++------------
 src/elements/pages/module.ts                  |  12 +-
 src/routes.ts                                 |  14 ++-
 src/utils/auth.ts                             |   4 +-
 src/utils/global.ts                           |   5 +-
 44 files changed, 328 insertions(+), 338 deletions(-)
 create mode 100644 src/elements/pages/dev/game/module.ts
 create mode 100644 src/elements/pages/dev/game/pages/module.ts
 create mode 100644 src/elements/pages/dev/game/settings/module.ts
 rename src/elements/pages/{ => dev/group}/group-banner.ts (90%)
 rename src/elements/pages/{ => dev/group}/group-invite.scss (96%)
 rename src/elements/pages/{ => dev/group}/group-invite.ts (92%)
 rename src/elements/pages/{ => dev/group}/group.scss (99%)
 rename src/elements/pages/{ => dev/group}/group.ts (92%)
 create mode 100644 src/elements/pages/dev/group/module.ts
 rename src/elements/pages/{ => dev/group/settings}/group-settings-billing.ts (92%)
 rename src/elements/pages/{ => dev/group/settings}/group-settings-general.ts (92%)
 rename src/elements/pages/{ => dev/group/settings}/group-settings-members.scss (100%)
 rename src/elements/pages/{ => dev/group/settings}/group-settings-members.ts (97%)
 rename src/elements/pages/{ => dev/group/settings}/group-settings.ts (92%)
 create mode 100644 src/elements/pages/dev/group/settings/module.ts
 create mode 100644 src/elements/pages/dev/namespace/module.ts
 rename src/elements/pages/{ => dev/user}/consent.scss (97%)
 rename src/elements/pages/{ => dev/user}/consent.ts (92%)
 create mode 100644 src/elements/pages/dev/user/module.ts
 rename src/elements/pages/{ => dev/user}/settings.scss (98%)
 rename src/elements/pages/{ => dev/user}/settings.ts (74%)

diff --git a/src/config.ts b/src/config.ts
index b8b9f4fc..3b1593bc 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,7 +16,7 @@ const config = {
 	ORIGIN_API: RIVET_ORIGIN_API as string,
 	ASSETS_URL: ENV_ASSETS_URL as string,
 
-	MEDIA_URL: RIVET_ORIGIN_API + "/media",
+	MEDIA_URL: RIVET_ORIGIN_API + '/media',
 
 	API_AUTH_URL: modifyBaseUrl(RIVET_ORIGIN_API, 'auth.', '/v1'),
 	API_PORTAL_URL: modifyBaseUrl(RIVET_ORIGIN_API, 'portal.', '/v1'),
diff --git a/src/elements/common/file-uploader.ts b/src/elements/common/file-uploader.ts
index c07a22c8..d1ca9e2e 100644
--- a/src/elements/common/file-uploader.ts
+++ b/src/elements/common/file-uploader.ts
@@ -325,8 +325,8 @@ export default class FileUploader extends LitElement {
 			? this.uploadState.type == 'uploading'
 				? this.uploadState.progress / this.uploadState.total
 				: this.uploadState.type == 'completing'
-					? 1
-					: 0
+				? 1
+				: 0
 			: 0;
 
 		// Separate file type from current upload
@@ -346,8 +346,8 @@ export default class FileUploader extends LitElement {
 		let accept = this.video
 			? 'video/mp4,video/x-m4v,video/*'
 			: this.image
-				? 'image/*'
-				: this.accept ?? null;
+			? 'image/*'
+			: this.accept ?? null;
 
 		return html`
 			<div id="base" @drop=${this.onChange.bind(this)} @dragover=${(e: Event) => e.preventDefault()}>
@@ -356,53 +356,54 @@ export default class FileUploader extends LitElement {
 						<slot name="icon"></slot>
 						<slot name="content"></slot>
 						${when(
-			this.uploadError,
-			() =>
-				html`<h3 id="error">
+							this.uploadError,
+							() =>
+								html`<h3 id="error">
 									${when(
-					typeof this.uploadError == 'string',
-					() => this.uploadError,
-					() => html`Error while uploading. Please try again.</h3>`
-				)}
+										typeof this.uploadError == 'string',
+										() => this.uploadError,
+										() => html`Error while uploading. Please try again.</h3>`
+									)}
 								</h3>`
-		)}
+						)}
 					</div>
 
 					${uploading
-				? html` <div id="upload">
+						? html` <div id="upload">
 								<div id="upload-background" style=${loadingBarStyles}></div>
 								<div id="upload-content">
 									${this.uploadState.type == 'preparing'
-						? html` <h1>
+										? html` <h1>
 													Preparing ${this.uploadState.count}
 													file${this.uploadState.count == 1 ? '' : 's'}...
 												</h1>
 												<div id="progress-area">
 													<loading-bar .progress=${0}></loading-bar>
 												</div>`
-						: null}
+										: null}
 									${this.uploadState.type == 'uploading'
-						? html`
+										? html`
 											<h1>Uploading...</h1>
-											<h2><span id='upload-name'>${currentUpload[0].repeat(2)}</span id='upload-type'><span>${currentUpload[1]
-							}</span></h2>
+											<h2><span id='upload-name'>${currentUpload[0].repeat(2)}</span id='upload-type'><span>${
+												currentUpload[1]
+											}</span></h2>
 											<div id='progress-area'>
 												<loading-bar .progress=${progress}></loading-bar>
 												<h3>${this.uploadState.progress}/${this.uploadState.total}</h3>
 											</div>`
-						: null}
+										: null}
 									${this.uploadState.type == 'completing'
-						? html` <h1>Completing upload...</h1>
+										? html` <h1>Completing upload...</h1>
 												<div id="progress-area">
 													<loading-bar .progress=${1}></loading-bar>
 												</div>`
-						: null}
+										: null}
 								</div>
 						  </div>`
-				: null}
+						: null}
 					${this.dragActive && !uploading
-				? html` <div id="overlay">Drag and drop files here</div>`
-				: null}
+						? html` <div id="overlay">Drag and drop files here</div>`
+						: null}
 				</label>
 				<input
 					id="file-upload"
diff --git a/src/elements/common/namespace-dropdown.ts b/src/elements/common/namespace-dropdown.ts
index 64038ddc..f4b1e33b 100644
--- a/src/elements/common/namespace-dropdown.ts
+++ b/src/elements/common/namespace-dropdown.ts
@@ -29,17 +29,17 @@ export default class RichEmbed extends LitElement {
 			<a
 				class="pt-3 last:pb-3 transition-all first:border-t-[1px] border-zinc-800 first:aria-expanded:border-zinc-600/80 group text-sm text-gray-200 hover:text-white flex flex-row place-content-around"
 				href=${routes.devNamespace.build({
-			gameId: this.game.gameId,
-			namespaceId: namespace.namespaceId
-		})}
+					gameId: this.game.gameId,
+					namespaceId: namespace.namespaceId
+				})}
 				aria-expanded=${this.expanded}
 			>
 				<div class=${clsx(isCurrent ? 'font-bold text-white' : '', 'mr-auto')}>
 					${namespace.displayName}
 				</div>
 				<!-- ${isCurrent
-				? html` <e-svg src="regular/check" class="mb-[2px] h-full" preserve></e-svg> `
-				: html``} -->
+					? html` <e-svg src="regular/check" class="mb-[2px] h-full" preserve></e-svg> `
+					: html``} -->
 			</a>
 		`;
 	}
@@ -85,11 +85,11 @@ export default class RichEmbed extends LitElement {
 						aria-expanded=${this.expanded}
 					>
 						${this.game.namespaces.map(namespace => {
-			return this.renderNamespaceListEntry(
-				namespace,
-				namespace.namespaceId === this.currentNamespace.namespaceId
-			);
-		})}
+							return this.renderNamespaceListEntry(
+								namespace,
+								namespace.namespaceId === this.currentNamespace.namespaceId
+							);
+						})}
 					</ul>
 				</div>
 			</div>
diff --git a/src/elements/context-menu/context-menu.ts b/src/elements/context-menu/context-menu.ts
index eb85ff94..d417776a 100644
--- a/src/elements/context-menu/context-menu.ts
+++ b/src/elements/context-menu/context-menu.ts
@@ -202,8 +202,7 @@ export default class ContextMenu extends LitElement {
 
 		let showAdminControls = !isSelf && ctx.selfIsOwner;
 
-		return html`
-		${when(
+		return html` ${when(
 			showAdminControls,
 			() =>
 				html`<div class="spacer"></div>
diff --git a/src/elements/dev/version-publish-summary.ts b/src/elements/dev/version-publish-summary.ts
index 86699cdd..d0efb586 100644
--- a/src/elements/dev/version-publish-summary.ts
+++ b/src/elements/dev/version-publish-summary.ts
@@ -100,9 +100,7 @@ export default class VersionPublishSumary extends LitElement {
 
 		return html`<div class="region">
 			<ul>
-				<li>
-					${regionConfig.regionDisplayName} (${formattedTierNameId})
-				</li>
+				<li>${regionConfig.regionDisplayName} (${formattedTierNameId})</li>
 				<li class="expanded-list-item">
 					<p>Lobbies</p>
 				</li>
diff --git a/src/elements/dev/version/version-info-matchmaker.ts b/src/elements/dev/version/version-info-matchmaker.ts
index 1892661e..370f1578 100644
--- a/src/elements/dev/version/version-info-matchmaker.ts
+++ b/src/elements/dev/version/version-info-matchmaker.ts
@@ -11,24 +11,25 @@ import { DropDownSelectEvent, DropDownSelection } from '../drop-down-list';
 import { SelectBuildEvent } from '../builds';
 import * as ext from './ext';
 
-export const HCAPTCHA_DIFFICULTIES: DropDownSelection<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>[] = [
-	{
-		label: 'Easy',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Easy
-	},
-	{
-		label: 'Moderate',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Moderate
-	},
-	{
-		label: 'Difficult',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Difficult
-	},
-	{
-		label: 'Always On',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.AlwaysOn
-	}
-];
+export const HCAPTCHA_DIFFICULTIES: DropDownSelection<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>[] =
+	[
+		{
+			label: 'Easy',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Easy
+		},
+		{
+			label: 'Moderate',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Moderate
+		},
+		{
+			label: 'Difficult',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Difficult
+		},
+		{
+			label: 'Always On',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.AlwaysOn
+		}
+	];
 
 const PORT_PROTOCOLS: DropDownSelection<Rivet.cloud.version.matchmaker.PortProtocol>[] = [
 	{
@@ -200,7 +201,9 @@ export default class VersionInfoMatchmaker extends LitElement {
 		this.updateConfig();
 	}
 
-	changeHcaptchaDifficulty(event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>) {
+	changeHcaptchaDifficulty(
+		event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>
+	) {
 		this.configExt.config.captcha.hcaptcha.level = event.selection.value;
 
 		this.updateConfig();
@@ -358,7 +361,8 @@ export default class VersionInfoMatchmaker extends LitElement {
 	updatePortProtocol(idx: number, event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.PortProtocol>) {
 		// Switch from target port to port range and vice versa
 		if (
-			this.dockerRuntimeExt.ports[idx].port.protocol != Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
+			this.dockerRuntimeExt.ports[idx].port.protocol !=
+				Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
 			event.selection.value == Rivet.cloud.version.matchmaker.PortProtocol.Udp
 		) {
 			this.dockerRuntimeExt.ports[idx].port.port = undefined;
@@ -367,7 +371,8 @@ export default class VersionInfoMatchmaker extends LitElement {
 				max: MAX_HOST_PORT
 			};
 		} else if (
-			this.dockerRuntimeExt.ports[idx].port.protocol == Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
+			this.dockerRuntimeExt.ports[idx].port.protocol ==
+				Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
 			event.selection.value != Rivet.cloud.version.matchmaker.PortProtocol.Udp
 		) {
 			this.dockerRuntimeExt.ports[idx].port.port = 80;
diff --git a/src/elements/dev/version/version-info.ts b/src/elements/dev/version/version-info.ts
index 1a7e225f..1654b531 100644
--- a/src/elements/dev/version/version-info.ts
+++ b/src/elements/dev/version/version-info.ts
@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Rivet } from "@rivet-gg/api-internal";
+import { Rivet } from '@rivet-gg/api-internal';
 import { cssify } from '../../../utils/css';
 import styles from './version-info.scss';
 import { when } from 'lit/directives/when.js';
@@ -129,8 +129,8 @@ export default class DevVersionInfo extends LitElement {
 		return html`
 			<div id="base">
 				${!this.editing && this.noServices()
-				? html`<p class="muted">No services enabled for this version.</p>`
-				: null}
+					? html`<p class="muted">No services enabled for this version.</p>`
+					: null}
 				${when(
 					this.editing || this.config.cdn,
 					() =>
@@ -157,7 +157,7 @@ export default class DevVersionInfo extends LitElement {
 						></version-info-matchmaker>`
 				)}
 				${this.editing || this.config.kv
-				? html`<version-info-kv
+					? html`<version-info-kv
 							.game=${this.game}
 							.config=${this.config}
 							.errors=${this.errors.branch('kv')}
@@ -165,9 +165,9 @@ export default class DevVersionInfo extends LitElement {
 							@toggle=${this.toggleKv.bind(this)}
 							@update=${this.updateConfig.bind(this)}
 					  ></version-info-kv>`
-				: null}
+					: null}
 				${this.editing || this.config.identity
-				? html`<version-info-identity
+					? html`<version-info-identity
 							.game=${this.game}
 							.config=${this.config}
 							.errors=${this.errors.branch('identity')}
@@ -175,7 +175,7 @@ export default class DevVersionInfo extends LitElement {
 							@toggle=${this.toggleIdentity.bind(this)}
 							@update=${this.updateConfig.bind(this)}
 					  ></version-info-identity>`
-				: null}
+					: null}
 			</div>
 		`;
 	}
diff --git a/src/elements/identity/identity-profile-edit.ts b/src/elements/identity/identity-profile-edit.ts
index f1f453ba..fb3b8957 100644
--- a/src/elements/identity/identity-profile-edit.ts
+++ b/src/elements/identity/identity-profile-edit.ts
@@ -250,10 +250,7 @@ export default class IdentityProfileEdit extends LitElement {
 						<div id="banner-bg" style=${bgStyles}></div>
 
 						<div id="avatar-holder">
-							<identity-avatar
-								id="main-avatar"
-								.identity=${fakeIdentity}
-							></identity-avatar>
+							<identity-avatar id="main-avatar" .identity=${fakeIdentity}></identity-avatar>
 
 							<!-- Change profile image button -->
 							<icon-button
diff --git a/src/elements/identity/identity-tile.ts b/src/elements/identity/identity-tile.ts
index 4f84c234..f817ea98 100644
--- a/src/elements/identity/identity-tile.ts
+++ b/src/elements/identity/identity-tile.ts
@@ -57,10 +57,7 @@ export default class IdentityTile extends LitElement {
 				class=${classes}
 				@contextmenu=${this.noContextMenu ? null : showIdentityContextMenu(this.identity)}
 			>
-				<identity-avatar
-					.link=${!this.noLink}
-					.identity=${this.identity}
-				></identity-avatar>
+				<identity-avatar .link=${!this.noLink} .identity=${this.identity}></identity-avatar>
 				<div id="spaced">
 					<div id="content">
 						<identity-name .identity=${this.identity} no-link></identity-name>
diff --git a/src/elements/layouts/sidebar-layout.ts b/src/elements/layouts/sidebar-layout.ts
index 4f9cb472..9a62c0a2 100644
--- a/src/elements/layouts/sidebar-layout.ts
+++ b/src/elements/layouts/sidebar-layout.ts
@@ -13,7 +13,9 @@ export default class Layout extends LitElement {
 		return html`
 			<div>
 				<!-- Sidebar -->
-				<div class="fixed flex w-72 flex-col border-white/10 border-r top-14 max-[850px]:top-0 bottom-0">
+				<div
+					class="fixed flex w-72 flex-col border-white/10 border-r top-14 max-[850px]:top-0 bottom-0"
+				>
 					<div class="min-h-full overflow-y-auto px-6 py-5 w-full h-full">
 						<slot name="sidebar"></slot>
 					</div>
diff --git a/src/elements/mod.ts b/src/elements/mod.ts
index 469f8430..14af7afd 100644
--- a/src/elements/mod.ts
+++ b/src/elements/mod.ts
@@ -62,4 +62,4 @@ import './profile/graph-view';
 import './profile/user-banner';
 import './root/ui-root';
 import './root/ui-router';
-import './tiles/group-handle-tile';
\ No newline at end of file
+import './tiles/group-handle-tile';
diff --git a/src/elements/pages/dev-dash.ts b/src/elements/pages/dev-dash.ts
index 44d45dbe..a14145e6 100644
--- a/src/elements/pages/dev-dash.ts
+++ b/src/elements/pages/dev-dash.ts
@@ -47,7 +47,8 @@ export default class DeveloperDash extends LitElement {
 	render() {
 		return html`
 			${when(
-				(global.currentIdentity.isAdmin) || global.currentIdentity.groups.find(group => group.group.isDeveloper),
+				global.currentIdentity.isAdmin ||
+					global.currentIdentity.groups.find(group => group.group.isDeveloper),
 				() => html`
 					<div class="w-full">
 						<user-banner></user-banner>
@@ -57,10 +58,16 @@ export default class DeveloperDash extends LitElement {
 					</div>
 				`,
 				() => html`
-					<div class=${clsx(
-							global.currentIdentity.isRegistered ? "absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-36" : '',
-							(!global.currentIdentity.isRegistered) ? "absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-20" : ''
-						)}>
+					<div
+						class=${clsx(
+							global.currentIdentity.isRegistered
+								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-36'
+								: '',
+							!global.currentIdentity.isRegistered
+								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-20'
+								: ''
+						)}
+					>
 						<h1 class="text-3xl pb-2">Private Beta</h1>
 						<h2 class="text-lg pb-4">
 							Rivet is still in private beta. Join the waitlist to get early access.
@@ -70,16 +77,18 @@ export default class DeveloperDash extends LitElement {
 								Beta Access Form
 							</stylized-button>
 						</div>
-						${when(!global.currentIdentity.isRegistered, () => html`
+						${when(
+							!global.currentIdentity.isRegistered,
+							() => html`
 								<div class="w-3/4 border-b-white/10 border-b-[1px] h-px mx-auto"></div>
-									<h2 class="text-md pt-5 pb-3">Have access and just got logged out?</h2>
-										<div class="w-full flex flex-row place-content-center m-auto pb-5">
-										<stylized-button .trigger=${() => UIRoot.shared.openRegisterPanel()}>
-											Login
-										</stylized-button>
+								<h2 class="text-md pt-5 pb-3">Have access and just got logged out?</h2>
+								<div class="w-full flex flex-row place-content-center m-auto pb-5">
+									<stylized-button .trigger=${() => UIRoot.shared.openRegisterPanel()}>
+										Login
+									</stylized-button>
 								</div>
-							`)
-						}
+							`
+						)}
 					</div>
 				`
 			)}
diff --git a/src/elements/pages/dev/game/module.ts b/src/elements/pages/dev/game/module.ts
new file mode 100644
index 00000000..c9ad2e02
--- /dev/null
+++ b/src/elements/pages/dev/game/module.ts
@@ -0,0 +1,5 @@
+import './game-banner';
+import './games';
+
+import './settings/module';
+import './pages/module';
diff --git a/src/elements/pages/dev/game/pages/game-billing.ts b/src/elements/pages/dev/game/pages/game-billing.ts
index d15ea7f1..b25c2a38 100644
--- a/src/elements/pages/dev/game/pages/game-billing.ts
+++ b/src/elements/pages/dev/game/pages/game-billing.ts
@@ -510,9 +510,7 @@ export default class DevGameBilling extends LitElement {
 				${when(
 					!this.isExporting,
 					() =>
-						html`<stylized-button
-							id="export"
-							.trigger=${this.exportLobbyHistory.bind(this)}
+						html`<stylized-button id="export" .trigger=${this.exportLobbyHistory.bind(this)}
 							>Export Data</stylized-button
 						>`
 				)}
diff --git a/src/elements/pages/dev/game/pages/game-logs.ts b/src/elements/pages/dev/game/pages/game-logs.ts
index c8fdc590..5b0bf31d 100644
--- a/src/elements/pages/dev/game/pages/game-logs.ts
+++ b/src/elements/pages/dev/game/pages/game-logs.ts
@@ -433,9 +433,7 @@ export default class DevGameLogs extends LitElement {
 					<div class="content-header">
 						<div class="content-header-left">
 							<h2 class="content-header-title">${lobby.lobbyGroupNameId}</h2>
-							<h3 id="log-region">
-								${regionData.regionDisplayName}
-							</h3>
+							<h3 id="log-region">${regionData.regionDisplayName}</h3>
 							${when(
 								lobby.status.stopped !== undefined,
 								() => html`
diff --git a/src/elements/pages/dev/game/pages/game-overview.ts b/src/elements/pages/dev/game/pages/game-overview.ts
index 6901d536..65794b5f 100644
--- a/src/elements/pages/dev/game/pages/game-overview.ts
+++ b/src/elements/pages/dev/game/pages/game-overview.ts
@@ -95,7 +95,7 @@ export default class DevGameOverview extends LitElement {
 
 		if (changedProperties.has('game')) {
 			this.fetchData();
-			this.requestUpdate();
+			// this.requestUpdate();
 		}
 	}
 
@@ -127,14 +127,17 @@ export default class DevGameOverview extends LitElement {
 	openNamespaceModal() {
 		if (this.game.versions.length == 0) {
 			showAlert(
-				'Cannot create namespace',
-				html`You cannot create a namespace before creating a version first.`,
+				'Cannot Create Namespace',
+				html`
+					<p class="text-lg pt-2 font-semibold text-red-500">You cannot create a namespace before creating a version first.</p>
+					<p class="text-lg pt-2">Use the Rivet CLI to create a version for this game.</p>
+				`,
 				[
-					{
-						label: 'Create A Version',
-						cb: () =>
-							UIRouter.shared.navigate(routes.devVersionDraft.build({ gameId: this.gameId }))
-					},
+					// {
+					// 	label: 'Create A Version',
+					// 	cb: () =>
+					// 		UIRouter.shared.navigate(routes.devVersionDraft.build({ gameId: this.gameId }))
+					// },
 					{
 						label: 'Dismiss'
 					}
diff --git a/src/elements/pages/dev/game/pages/game-version-draft.ts b/src/elements/pages/dev/game/pages/game-version-draft.ts
index fc40a91b..519cb8b6 100644
--- a/src/elements/pages/dev/game/pages/game-version-draft.ts
+++ b/src/elements/pages/dev/game/pages/game-version-draft.ts
@@ -371,16 +371,17 @@ export default class DevGameNamespace extends LitElement {
 					>
 				</div>
 				${this.publishError || this.validateError
-				? html`<error-list
+					? html`<error-list
 							.errors=${[
-						`${this.publishError ? 'Error publishing' : 'Validation error'}: ${(this.publishError || this.validateError).message
-						}`
-					]}
+								`${this.publishError ? 'Error publishing' : 'Validation error'}: ${
+									(this.publishError || this.validateError).message
+								}`
+							]}
 					  ></error-list>`
-				: null}
+					: null}
 				${displayNameErrors.length
-				? html`<error-list .errors=${displayNameErrors}></error-list>`
-				: null}
+					? html`<error-list .errors=${displayNameErrors}></error-list>`
+					: null}
 				<h1>Version properties</h1>
 				<div id="input-area">
 					<h3>Version Name</h3>
@@ -393,30 +394,30 @@ export default class DevGameNamespace extends LitElement {
 				</div>
 
 				${this.game.namespaces.length
-				? html` <h1 id="namespace-title">Initiate namespaces</h1>
+					? html` <h1 id="namespace-title">Initiate namespaces</h1>
 							<i id="namespace-subtitle">You can change this later</i>
 							<div id="namespaces">
 								${repeat(
-					this.game.namespaces,
-					n => n.namespaceId,
-					n => {
-						let selected = this.publishNamespaces.has(n.namespaceId);
-						let classes = classMap({
-							namespace: true,
-							selected: selected
-						});
-
-						return html`<div
+									this.game.namespaces,
+									n => n.namespaceId,
+									n => {
+										let selected = this.publishNamespaces.has(n.namespaceId);
+										let classes = classMap({
+											namespace: true,
+											selected: selected
+										});
+
+										return html`<div
 											class=${classes}
 											@click=${this.toggleNamespace.bind(this, n.namespaceId)}
 										>
 											<h3>${n.displayName}</h3>
 											<check-box ?checked=${selected}></check-box>
 										</div>`;
-					}
-				)}
+									}
+								)}
 							</div>`
-				: null}
+					: null}
 
 				<h1>Services</h1>
 				<dev-version-info
diff --git a/src/elements/pages/dev/game/pages/game-version.ts b/src/elements/pages/dev/game/pages/game-version.ts
index 38f45ec5..75332ac3 100644
--- a/src/elements/pages/dev/game/pages/game-version.ts
+++ b/src/elements/pages/dev/game/pages/game-version.ts
@@ -5,7 +5,7 @@ import { cssify } from '../../../../../utils/css';
 import styles from './game-version.scss';
 import routes, { responses } from '../../../../../routes';
 import global from '../../../../../utils/global';
-import { Rivet } from "@rivet-gg/api-internal";
+import { Rivet } from '@rivet-gg/api-internal';
 import { showAlert } from '../../../../../ui/helpers';
 import settings from '../../../../../utils/settings';
 import UIRouter from '../../../../root/ui-router';
@@ -200,20 +200,20 @@ export default class DevGameNamespace extends LitElement {
 				<h2>Active namespaces</h2>
 				<div id="namespaces">
 					${repeat(
-			this.game.namespaces.filter(n => n.versionId == this.version.versionId),
-			n => n.namespaceId,
-			n =>
-				html` <a
+						this.game.namespaces.filter(n => n.versionId == this.version.versionId),
+						n => n.namespaceId,
+						n =>
+							html` <a
 								class="namespace"
 								href=${routes.devNamespace.build({
-					gameId: this.game.gameId,
-					namespaceId: n.namespaceId
-				})}
+									gameId: this.game.gameId,
+									namespaceId: n.namespaceId
+								})}
 							>
 								<div class="font-semibold">${n.displayName}</div>
 								<e-svg src="solid/arrow-right"></e-svg>
 							</a>`
-		)}
+					)}
 					<div id="deploy-namespace">
 						<div class="font-semibold">Deploy to namespace:</div>
 						<drop-down-list
diff --git a/src/elements/pages/dev/game/pages/module.ts b/src/elements/pages/dev/game/pages/module.ts
new file mode 100644
index 00000000..26799557
--- /dev/null
+++ b/src/elements/pages/dev/game/pages/module.ts
@@ -0,0 +1,9 @@
+import './game-billing';
+import './game-kv';
+import './game-lobbies';
+import './game-logs';
+import './game-overview';
+import './game-tokens';
+import './game-version-draft';
+
+import './game';
diff --git a/src/elements/pages/dev/game/settings/game-settings.ts b/src/elements/pages/dev/game/settings/game-settings.ts
index 248ac359..eaa66e37 100644
--- a/src/elements/pages/dev/game/settings/game-settings.ts
+++ b/src/elements/pages/dev/game/settings/game-settings.ts
@@ -172,11 +172,11 @@ export default class DevGameSettings extends LitElement {
 			<rvt-sidebar-layout>
 				<rvt-sidebar slot="sidebar">
 					${map(
-			this.tabs,
-			group => html`
+						this.tabs,
+						group => html`
 							<rvt-sidebar-group .title=${group.title}>
 								${map(group.items, p => {
-				return html`<rvt-sidebar-button
+									return html`<rvt-sidebar-button
 										?current=${p.id == this.tabId}
 										.href=${p.url}
 										.target=${p.notHub ? '_blank' : null}
@@ -184,10 +184,10 @@ export default class DevGameSettings extends LitElement {
 										.icon=${p.icon}
 										>${p.title}</rvt-sidebar-button
 									>`;
-			})}
+								})}
 							</rvt-sidebar-group>
 						`
-		)}
+					)}
 				</rvt-sidebar>
 				<rvt-sidebar-body id="body" slot="body">${body}</rvt-sidebar-body>
 			</rvt-sidebar-layout>
diff --git a/src/elements/pages/dev/game/settings/module.ts b/src/elements/pages/dev/game/settings/module.ts
new file mode 100644
index 00000000..396ef3e7
--- /dev/null
+++ b/src/elements/pages/dev/game/settings/module.ts
@@ -0,0 +1,4 @@
+import './game-settings-billing';
+import './game-settings-general';
+import './game-settings-tokens';
+import './game-settings';
diff --git a/src/elements/pages/group-banner.ts b/src/elements/pages/dev/group/group-banner.ts
similarity index 90%
rename from src/elements/pages/group-banner.ts
rename to src/elements/pages/dev/group/group-banner.ts
index 4629791b..d57d83a6 100644
--- a/src/elements/pages/group-banner.ts
+++ b/src/elements/pages/dev/group/group-banner.ts
@@ -1,9 +1,9 @@
 import { LitElement, PropertyValues, TemplateResult, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import * as group from '@rivet-gg/group';
-import { cssify } from '../../utils/css';
-import assets from '../../data/assets';
-import routes from '../../routes';
+import { cssify } from '../../../../utils/css';
+import assets from '../../../../data/assets';
+import routes from '../../../../routes';
 
 @customElement('group-banner')
 export default class DevGroupBanner extends LitElement {
diff --git a/src/elements/pages/group-invite.scss b/src/elements/pages/dev/group/group-invite.scss
similarity index 96%
rename from src/elements/pages/group-invite.scss
rename to src/elements/pages/dev/group/group-invite.scss
index 25a7fdf5..4909ad80 100644
--- a/src/elements/pages/group-invite.scss
+++ b/src/elements/pages/dev/group/group-invite.scss
@@ -1,5 +1,5 @@
-@use '../shared/common';
-@use '../shared/consts';
+@use '../../../shared/common';
+@use '../../../shared/consts';
 
 #base {
 	position: relative;
diff --git a/src/elements/pages/group-invite.ts b/src/elements/pages/dev/group/group-invite.ts
similarity index 92%
rename from src/elements/pages/group-invite.ts
rename to src/elements/pages/dev/group/group-invite.ts
index f0982a02..b9d456e7 100644
--- a/src/elements/pages/group-invite.ts
+++ b/src/elements/pages/dev/group/group-invite.ts
@@ -1,15 +1,15 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import routes, { responses } from '../../routes';
-import { cssify } from '../../utils/css';
+import routes, { responses } from '../../../../routes';
+import { cssify } from '../../../../utils/css';
 import styles from './group-invite.scss';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
-import * as api from '../../utils/api';
+import * as api from '../../../../utils/api';
 
-import global from '../../utils/global';
-import UIRouter from '../root/ui-router';
-import timing, { Debounce } from '../../utils/timing';
+import global from '../../../../utils/global';
+import UIRouter from '../../../root/ui-router';
+import timing, { Debounce } from '../../../../utils/timing';
 
 @customElement('page-group-invite')
 export default class GroupInvitePage extends LitElement {
diff --git a/src/elements/pages/group.scss b/src/elements/pages/dev/group/group.scss
similarity index 99%
rename from src/elements/pages/group.scss
rename to src/elements/pages/dev/group/group.scss
index 5b7e79f9..b831b15f 100644
--- a/src/elements/pages/group.scss
+++ b/src/elements/pages/dev/group/group.scss
@@ -1,6 +1,6 @@
-@use '../shared/common';
-@use '../shared/utils';
-@use '../shared/consts';
+@use '../../../shared/common';
+@use '../../../shared/utils';
+@use '../../../shared/consts';
 
 // TODO: Simplify the unnecessary styles in this file
 
@@ -376,7 +376,6 @@
 	}
 }
 
-
 #banner-bg {
 	& > lazy-img {
 		width: 100%;
diff --git a/src/elements/pages/group.ts b/src/elements/pages/dev/group/group.ts
similarity index 92%
rename from src/elements/pages/group.ts
rename to src/elements/pages/dev/group/group.ts
index ef62188a..75d7747a 100644
--- a/src/elements/pages/group.ts
+++ b/src/elements/pages/dev/group/group.ts
@@ -2,27 +2,27 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { html, LitElement, PropertyValues } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { cssify } from '../../utils/css';
+import { cssify } from '../../../../utils/css';
 import styles from './group.scss';
-import routes, { responses } from '../../routes';
-import global from '../../utils/global';
+import routes, { responses } from '../../../../routes';
+import global from '../../../../utils/global';
 import cloud from '@rivet-gg/cloud';
-import { globalEventGroups } from '../../utils/global-events';
-import { showAlert } from '../../ui/helpers';
-import UIRouter from '../root/ui-router';
-
-import assets from '../../data/assets';
-import * as api from '../../utils/api';
-
-import { CloudDashboardCache, GroupProfileCache } from '../../data/cache';
-import logging from '../../utils/logging';
-import { DropDownSelectEvent, DropDownSelection } from '../dev/drop-down-list';
-import timing, { Debounce } from '../../utils/timing';
-import utils from '../../utils/utils';
-import { InputUpdateEvent } from '../dev/text-input';
-import { ColorExtractor } from '../../utils/colors';
+import { globalEventGroups } from '../../../../utils/global-events';
+import { showAlert } from '../../../../ui/helpers';
+import UIRouter from '../../../root/ui-router';
+
+import assets from '../../../../data/assets';
+import * as api from '../../../../utils/api';
+
+import { CloudDashboardCache, GroupProfileCache } from '../../../../data/cache';
+import logging from '../../../../utils/logging';
+import { DropDownSelectEvent, DropDownSelection } from '../../../dev/drop-down-list';
+import timing, { Debounce } from '../../../../utils/timing';
+import utils from '../../../../utils/utils';
+import { InputUpdateEvent } from '../../../dev/text-input';
+import { ColorExtractor } from '../../../../utils/colors';
 import { repeat } from 'lit/directives/repeat.js';
-import { TraversableErrors, VALIDATION_ERRORS } from '../../utils/traversable-errors';
+import { TraversableErrors, VALIDATION_ERRORS } from '../../../../utils/traversable-errors';
 
 enum CreateInviteState {
 	Create,
@@ -46,7 +46,6 @@ export class GroupActionEvent extends Event {
 	}
 }
 
-
 const INVITE_TTL_SELECTION: DropDownSelection<number>[] = [
 	{
 		label: '1 Hour',
@@ -570,8 +569,10 @@ export default class GroupPage extends LitElement {
 									@click=${this.openGameModal.bind(this, this.profile.groupId)}
 								>
 									<div id="create-game-content">
-										<lazy-img src=${assets.asset('/games/blank/logo.png')}></lazy-img>
-										Create a new game
+										<div>
+											<lazy-img src=${assets.asset('/games/blank/logo.png')}></lazy-img>
+											Create a new game
+										</div>
 									</div>
 								</div>
 								${repeat(
@@ -606,11 +607,11 @@ export default class GroupPage extends LitElement {
 			@close=${this.gameModalClose.bind(this)}
 		>
 			<modal-body slot="body">
-				<h1>Create your new game</h1>
-				<div class="input-group">
-					<h2>Owner Developer Group</h2>
-					<h4>${this.profile.displayName}</h4>
-					<h2>Game Display Name</h2>
+				<h1 class="text-2xl font-bold pb-4">Create your new game</h1>
+				<div class="input-group px-8">
+					<h2 class="text-lg font-semibold">Owner Developer Group</h2>
+					<h4 class="text-md pb-2 text-center">${this.profile.displayName}</h4>
+					<h2 class="font-semibold py-2">Game Display Name</h2>
 					<text-input
 						light
 						placeholder="Enter a game name..."
@@ -619,11 +620,11 @@ export default class GroupPage extends LitElement {
 					${when(
 						displayNameErrors.length > 0,
 						() => html`
-							<span id="create-game-error">
-								<e-svg src="regular/circle-exclamation"></e-svg> ${displayNameErrors[0]}</li>
+							<span id="create-game-error" class="font-semibold text-center pt-4 text-red-500">
+								${displayNameErrors[0]}</li>
 							</span>`
 					)}
-					<h2>Game Name ID</h2>
+					<h2 class="font-semibold py-2">Game Name ID</h2>
 					<text-input
 						light
 						.filter=${(v: string) => v.replace(/[\s\-]+/g, '-').toLowerCase()}
@@ -635,12 +636,14 @@ export default class GroupPage extends LitElement {
 					${when(
 						nameIdErrors.length > 0,
 						() => html`
-							<span id="create-game-error">
-								<e-svg src="regular/circle-exclamation"></e-svg> ${nameIdErrors[0]}</li>
+							<span id="create-game-error" class="font-semibold text-center pt-4 text-red-500">
+								${nameIdErrors[0]}</li>
 							</span>`
 					)}
 				</div>
-				<p class="content">We’ll walk you though the details of editing your game later.</p>
+				<p class="content text-center py-5 font-semibold">
+					We’ll walk you though the details of editing your game later.
+				</p>
 				<stylized-button
 					.trigger=${this.createGame.bind(this)}
 					?disabled=${!this.gameIsValid}
diff --git a/src/elements/pages/dev/group/module.ts b/src/elements/pages/dev/group/module.ts
new file mode 100644
index 00000000..20371aaf
--- /dev/null
+++ b/src/elements/pages/dev/group/module.ts
@@ -0,0 +1,5 @@
+import './group-banner';
+import './group-invite';
+import './group';
+
+import './settings/module';
diff --git a/src/elements/pages/group-settings-billing.ts b/src/elements/pages/dev/group/settings/group-settings-billing.ts
similarity index 92%
rename from src/elements/pages/group-settings-billing.ts
rename to src/elements/pages/dev/group/settings/group-settings-billing.ts
index 279cbfe1..4faa3a44 100644
--- a/src/elements/pages/group-settings-billing.ts
+++ b/src/elements/pages/dev/group/settings/group-settings-billing.ts
@@ -1,8 +1,8 @@
 import { LitElement, html, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import group from '@rivet-gg/group';
-import { responses } from '../../routes';
-import { cssify } from '../../utils/css';
+import { responses } from '../../../../../routes';
+import { cssify } from '../../../../../utils/css';
 
 @customElement('page-group-settings-billing')
 export default class GroupSettingsBilling extends LitElement {
diff --git a/src/elements/pages/group-settings-general.ts b/src/elements/pages/dev/group/settings/group-settings-general.ts
similarity index 92%
rename from src/elements/pages/group-settings-general.ts
rename to src/elements/pages/dev/group/settings/group-settings-general.ts
index dadf2bea..cd29c7c1 100644
--- a/src/elements/pages/group-settings-general.ts
+++ b/src/elements/pages/dev/group/settings/group-settings-general.ts
@@ -1,24 +1,28 @@
 import { LitElement, html, PropertyValues } from 'lit';
 import { customElement, property, query, queryAll } from 'lit/decorators.js';
-import { cssify } from '../../utils/css';
+import { cssify } from '../../../../../utils/css';
 import group from '@rivet-gg/group';
-import global from '../../utils/global';
-import { responses } from '../../routes';
-import * as api from '../../utils/api';
-import fileSize from '../../utils/files';
-import FileUploader, { FileInput, FileUploaderPausedEvent, PrepareResponse } from '../common/file-uploader';
-import logging from '../../utils/logging';
-import { DropDownSelectEvent, DropDownSelection } from '../dev/drop-down-list';
-import { TraversableErrors, VALIDATION_ERRORS } from '../../utils/traversable-errors';
-import TextInput, { InputUpdateEvent } from '../dev/text-input';
-import { ColorExtractor } from '../../utils/colors';
-import timing, { Debounce } from '../../utils/timing';
-import assets from '../../data/assets';
+import global from '../../../../../utils/global';
+import { responses } from '../../../../../routes';
+import * as api from '../../../../../utils/api';
+import fileSize from '../../../../../utils/files';
+import FileUploader, {
+	FileInput,
+	FileUploaderPausedEvent,
+	PrepareResponse
+} from '../../../../common/file-uploader';
+import logging from '../../../../../utils/logging';
+import { DropDownSelectEvent, DropDownSelection } from '../../../../dev/drop-down-list';
+import { TraversableErrors, VALIDATION_ERRORS } from '../../../../../utils/traversable-errors';
+import TextInput, { InputUpdateEvent } from '../../../../dev/text-input';
+import { ColorExtractor } from '../../../../../utils/colors';
+import timing, { Debounce } from '../../../../../utils/timing';
+import assets from '../../../../../data/assets';
 import { when } from 'lit/directives/when.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { tooltip } from '../../ui/helpers';
-import utils from '../../utils/utils';
+import { tooltip } from '../../../../../ui/helpers';
+import utils from '../../../../../utils/utils';
 
 const MAX_GROUPNAME_LENGTH = 24;
 const MAX_BIO_LENGTH = 200;
diff --git a/src/elements/pages/group-settings-members.scss b/src/elements/pages/dev/group/settings/group-settings-members.scss
similarity index 100%
rename from src/elements/pages/group-settings-members.scss
rename to src/elements/pages/dev/group/settings/group-settings-members.scss
diff --git a/src/elements/pages/group-settings-members.ts b/src/elements/pages/dev/group/settings/group-settings-members.ts
similarity index 97%
rename from src/elements/pages/group-settings-members.ts
rename to src/elements/pages/dev/group/settings/group-settings-members.ts
index d4eb18e3..6d4535fa 100644
--- a/src/elements/pages/group-settings-members.ts
+++ b/src/elements/pages/dev/group/settings/group-settings-members.ts
@@ -1,25 +1,25 @@
 import { LitElement, html, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import group from '@rivet-gg/group';
-import global from '../../utils/global';
-import * as api from '../../utils/api';
+import global from '../../../../../utils/global';
+import * as api from '../../../../../utils/api';
 import styles from './group-settings-members.scss';
-import routes, { responses } from '../../routes';
-import { cssify } from '../../utils/css';
+import routes, { responses } from '../../../../../routes';
+import { cssify } from '../../../../../utils/css';
 import { map } from 'lit/directives/map.js';
-import logging from '../../utils/logging';
-import { globalEventGroups } from '../../utils/global-events';
-import timing from '../../utils/timing';
+import logging from '../../../../../utils/logging';
+import { globalEventGroups } from '../../../../../utils/global-events';
+import timing from '../../../../../utils/timing';
 import { repeat } from 'lit/directives/repeat.js';
 import {
 	showAlert,
 	showBannedIdentityContextMenu,
 	showJoinRequestContextMenu,
 	tooltip
-} from '../../ui/helpers';
-import { DropDownSelectEvent, DropDownSelection } from '../dev/drop-down-list';
-import utils from '../../utils/utils';
-import { InputUpdateEvent } from '../dev/text-input';
+} from '../../../../../ui/helpers';
+import { DropDownSelectEvent, DropDownSelection } from '../../../../dev/drop-down-list';
+import utils from '../../../../../utils/utils';
+import { InputUpdateEvent } from '../../../../dev/text-input';
 import clsx from 'clsx';
 import { IdentityHandle } from '@rivet-gg/identity';
 
diff --git a/src/elements/pages/group-settings.ts b/src/elements/pages/dev/group/settings/group-settings.ts
similarity index 92%
rename from src/elements/pages/group-settings.ts
rename to src/elements/pages/dev/group/settings/group-settings.ts
index 77e51107..61d945b1 100644
--- a/src/elements/pages/group-settings.ts
+++ b/src/elements/pages/dev/group/settings/group-settings.ts
@@ -1,13 +1,13 @@
 import { customElement, property } from 'lit/decorators.js';
 import { LitElement, html, PropertyValues, TemplateResult } from 'lit';
-import { cssify } from '../../utils/css';
-import routes, { responses } from '../../routes';
+import { cssify } from '../../../../../utils/css';
+import routes, { responses } from '../../../../../routes';
 import group from '@rivet-gg/group';
-import * as api from '../../utils/api';
-import UIRouter from '../root/ui-router';
-import { GroupProfileCache } from '../../data/cache';
-import logging from '../../utils/logging';
-import { globalEventGroups } from '../../utils/global-events';
+import * as api from '../../../../../utils/api';
+import UIRouter from '../../../../root/ui-router';
+import { GroupProfileCache } from '../../../../../data/cache';
+import logging from '../../../../../utils/logging';
+import { globalEventGroups } from '../../../../../utils/global-events';
 import { map } from 'lit/directives/map.js';
 
 interface TabGroup {
diff --git a/src/elements/pages/dev/group/settings/module.ts b/src/elements/pages/dev/group/settings/module.ts
new file mode 100644
index 00000000..edc328ef
--- /dev/null
+++ b/src/elements/pages/dev/group/settings/module.ts
@@ -0,0 +1,4 @@
+import './group-settings-billing';
+import './group-settings-general';
+import './group-settings-members';
+import './group-settings';
diff --git a/src/elements/pages/dev/module.ts b/src/elements/pages/dev/module.ts
index e91b7cc0..919f4b4b 100644
--- a/src/elements/pages/dev/module.ts
+++ b/src/elements/pages/dev/module.ts
@@ -1,24 +1,5 @@
 import './device-link';
 
-import './game/pages/game-billing';
-import './game/pages/game-kv';
-import './game/pages/game-lobbies';
-import './game/pages/game-logs';
-import './game/pages/game-overview';
-import './game/pages/game-tokens';
-import './game/pages/game-version-draft';
-import './game/pages/game-version';
-import './game/pages/game';
-
-import './game/settings/game-settings';
-import './game/settings/game-settings-general';
-import './game/settings/game-settings-tokens';
-import './game/settings/game-settings-billing';
-
-import './game/game-banner';
-import './game/games';
-
-import './namespace/game-namespace';
-import './namespace/game-namespace-tile';
-import './namespace/namespace-summary';
-import './namespace/namespace-version';
+import './game/module';
+import './group/module';
+import './user/module';
diff --git a/src/elements/pages/dev/namespace/module.ts b/src/elements/pages/dev/namespace/module.ts
new file mode 100644
index 00000000..5b34bced
--- /dev/null
+++ b/src/elements/pages/dev/namespace/module.ts
@@ -0,0 +1,4 @@
+import './game-namespace-tile';
+import './game-namespace';
+import './namespace-summary';
+import './namespace-version';
diff --git a/src/elements/pages/consent.scss b/src/elements/pages/dev/user/consent.scss
similarity index 97%
rename from src/elements/pages/consent.scss
rename to src/elements/pages/dev/user/consent.scss
index a7964bf5..7073bd82 100644
--- a/src/elements/pages/consent.scss
+++ b/src/elements/pages/dev/user/consent.scss
@@ -1,4 +1,4 @@
-@use '../shared/common';
+@use '../../../shared/common';
 
 #preload {
 	position: absolute;
diff --git a/src/elements/pages/consent.ts b/src/elements/pages/dev/user/consent.ts
similarity index 92%
rename from src/elements/pages/consent.ts
rename to src/elements/pages/dev/user/consent.ts
index 65d2ec4f..cf7f066b 100644
--- a/src/elements/pages/consent.ts
+++ b/src/elements/pages/dev/user/consent.ts
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { cssify } from '../../utils/css';
+import { cssify } from '../../../../utils/css';
 import styles from './consent.scss';
-import global from '../../utils/global';
+import global from '../../../../utils/global';
 
 @customElement('page-consent')
 export default class ConsentPage extends LitElement {
diff --git a/src/elements/pages/dev/user/module.ts b/src/elements/pages/dev/user/module.ts
new file mode 100644
index 00000000..cbed6bb1
--- /dev/null
+++ b/src/elements/pages/dev/user/module.ts
@@ -0,0 +1,2 @@
+import './consent';
+import './settings';
diff --git a/src/elements/pages/settings.scss b/src/elements/pages/dev/user/settings.scss
similarity index 98%
rename from src/elements/pages/settings.scss
rename to src/elements/pages/dev/user/settings.scss
index 4ad09c2e..2a745834 100644
--- a/src/elements/pages/settings.scss
+++ b/src/elements/pages/dev/user/settings.scss
@@ -1,5 +1,5 @@
-@use '../shared/common';
-@use '../shared/consts';
+@use '../../../shared/common';
+@use '../../../shared/consts';
 
 #base {
 	display: flex;
diff --git a/src/elements/pages/settings.ts b/src/elements/pages/dev/user/settings.ts
similarity index 74%
rename from src/elements/pages/settings.ts
rename to src/elements/pages/dev/user/settings.ts
index 8c2a2503..8443acfc 100644
--- a/src/elements/pages/settings.ts
+++ b/src/elements/pages/dev/user/settings.ts
@@ -3,18 +3,18 @@ import { LitElement, html, TemplateResult, PropertyValues } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
 import styles from './settings.scss';
-import { cssify } from '../../utils/css';
-import { tooltip, showAlert } from '../../ui/helpers';
-import { globalEventGroups, SettingChangeEvent } from '../../utils/global-events';
-import UIRouter from '../root/ui-router';
-import global from '../../utils/global';
-import routes, { responses } from '../../routes';
-
-import { OAUTH_PROVIDERS } from '../../utils/utils';
-import logging from '../../utils/logging';
-import { ToggleSwitchEvent } from '../common/toggle-switch';
-import UIRoot from '../root/ui-root';
-import { ls } from '../../utils/cache';
+import { cssify } from '../../../../utils/css';
+import { tooltip, showAlert } from '../../../../ui/helpers';
+import { globalEventGroups, SettingChangeEvent } from '../../../../utils/global-events';
+import UIRouter from '../../../root/ui-router';
+import global from '../../../../utils/global';
+import routes, { responses } from '../../../../routes';
+
+import { OAUTH_PROVIDERS } from '../../../../utils/utils';
+import logging from '../../../../utils/logging';
+import { ToggleSwitchEvent } from '../../../common/toggle-switch';
+import UIRoot from '../../../root/ui-root';
+import { ls } from '../../../../utils/cache';
 import { map } from 'lit/directives/map.js';
 
 interface TabGroup {
@@ -272,9 +272,10 @@ export default class SettingsPage extends LitElement {
 		let isRegistered = global.currentIdentity.isRegistered && !!identity;
 
 		return html`
-			<div class="flex flex-col space-y-8">
-				<div class="padded-cell flex flex-col space-y-1">
-					<h1 class="item-header text-lg">Profile appearance</h1>
+			<div class="flex flex-col space-y-2">
+				<h1 class="text-2xl pb-2">Profile Settings</h1>
+				<div>
+					<h2 class="text-lg pb-2">Profile appearance</h2>
 					<stylized-button
 						icon="solid/user-pen"
 						color="#404040"
@@ -283,61 +284,28 @@ export default class SettingsPage extends LitElement {
 						>Edit profile</stylized-button
 					>
 				</div>
-				<div class="padded-cell flex flex-col space-y-1">
-					<div class="item-header-holder">
-						<h1 class="item-header text-lg py-1">Link Email</h1>
-						${isRegistered
-							? html`<span class="badge bg-green-700 rounded-lg px-3 py-0.5"
-									><e-svg src="solid/check"></e-svg> Registered</span
-							  >`
-							: html`
-									<p class="py-1">Link your email to Rivet for full account access.</p>
-									<stylized-button
-										icon="solid/envelope"
-										color="#404040"
-										text="#eeeeee"
-										.trigger=${() => UIRoot.shared.openRegisterPanel()}
-										>${isRegistered ? 'View registration' : 'Link email'}</stylized-button
-									>
-							  `}
-					</div>
+				<div class="item-header-holder">
+					<h2 class="text-lg py-2">Link Email</h2>
+					${isRegistered
+						? html`<span class="badge bg-green-700 rounded-lg px-3 py-0.5"
+								><e-svg src="solid/check"></e-svg> Registered</span
+						  >`
+						: html`
+								<p class="py-1">Link your email to Rivet for full account access.</p>
+								<stylized-button
+									icon="solid/envelope"
+									color="#404040"
+									text="#eeeeee"
+									.trigger=${() => UIRoot.shared.openRegisterPanel()}
+									>${isRegistered ? 'View registration' : 'Link email'}</stylized-button
+								>
+						  `}
 				</div>
-				<!-- <div class="padded-cell flex flex-col space-y-1">
-					<h1 class="item-header text-lg">Push notifications</h1>
-					<p class="pb-1">
-						Allow Rivet to send your device push notifications for messages while you are away.
-					</p>
-					<toggle-switch
-						?value=${this.settings.pushNotifications}
-						@toggle=${(e: ToggleSwitchEvent) => this.settingChanged('push-notifications', e.value)}
-					></toggle-switch>
-				</div> -->
-				<!-- <div class='spacer'></div>
-				<div class='padded-cell'>
-					<h1 class='item-header'>Email <span class='muted'>******email@gmail.com</span></h1>
-					<stylized-button icon='regular/envelope' color='#404040' text='#eeeeee' .trigger=${unimp}>Change email</stylized-button>
-				</div>
-				<div class='spacer'></div>
-				<div class='padded-cell'>
-					<h1 class='item-header'>Password</h1>
-					<stylized-button icon='regular/key' color='#404040' text='#eeeeee' .trigger=${unimp}>Change password</stylized-button>
-				</div>
-				<div class='spacer'></div>
-				<div class='padded-cell'>
-					<h1 class='item-header'>Two Factor Authentication <span class='twofa-badge'><e-svg src='regular/lock'></e-svg>Enabled</span></h1>
-					<p>Two factor authentication provides an extra layer of security to your Rivet account.</p>
-					<stylized-button icon='regular/lock' color='#404040' text='#eeeeee' .trigger=${unimp}>Remove two factor authentication</stylized-button>
-				</div>
-				<div class='spacer'></div>
-				<div class='padded-cell'>
-					<h1 class='item-header'>Delete account</h1>
-					<stylized-button icon= of'regular/identity-slash' color='#db3939' .trigger=${unimp}>Delete account</stylized-button>
-				</div> -->
 				${when(
 					global.currentIdentity.isRegistered,
-					() =>
-						html` <div class="padded-cell flex flex-col space-y-1">
-							<h1 class="item-header text-lg">Toggle deletion</h1>
+					() => html`
+						<div>
+							<h2 class="text-lg py-2">Toggle deletion</h2>
 							<p class="pb-1">
 								Marks your account for deletion. After 30 days of this switch being on, your
 								Rivet account and all associated game accounts will be
@@ -348,7 +316,8 @@ export default class SettingsPage extends LitElement {
 								@toggle=${(e: ToggleSwitchEvent) =>
 									this.settingChanged('toggle-deletion', e.value)}
 							></toggle-switch>
-						</div>`
+						</div>
+					`
 				)}
 			</div>
 
diff --git a/src/elements/pages/module.ts b/src/elements/pages/module.ts
index 3a507487..af330973 100644
--- a/src/elements/pages/module.ts
+++ b/src/elements/pages/module.ts
@@ -1,17 +1,9 @@
 import './analytics/module';
 import './billing/module';
-import './consent';
-import './dev-only';
 import './dev/module';
+
+import './dev-only';
 import './error';
-import './group';
-import './group-banner';
-import './group-invite';
-import './group-settings';
-import './group-settings-billing';
-import './group-settings-general';
-import './group-settings-members';
 import './invalid-page-state';
 import './link-game';
-import './settings';
 import './dev-dash';
diff --git a/src/routes.ts b/src/routes.ts
index 1340de7a..b2bb4394 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -8,7 +8,7 @@ import { RivetError } from '@rivet-gg/api-internal';
 import { isDeveloper } from './utils/identity';
 import { Breadcrumb } from './elements/common/navbar';
 import { GameSettingsRootConfig } from './elements/pages/dev/game/settings/game-settings';
-import { GroupSettingsRootConfig } from './elements/pages/group-settings';
+import { GroupSettingsRootConfig } from './elements/pages/dev/group/settings/group-settings';
 
 export type RenderResult = RenderResultTemplate | RenderResultRedirect;
 
@@ -54,15 +54,16 @@ class Route<P extends RouteParameters, S extends SearchParameters = {}> {
 		let path = this.pathFunction(params);
 
 		// Build URL
-		return `${window.location.origin}${path}${search ? `?${new URLSearchParams(search).toString()}` : ''
-			}`;
+		return `${window.location.origin}${path}${
+			search ? `?${new URLSearchParams(search).toString()}` : ''
+		}`;
 	}
 }
 
 namespace routes {
 	export let home = new Route<{}>({
 		path: '/',
-		render({ }) {
+		render({}) {
 			return {
 				title: 'Home',
 				breadcrumb: { type: 'Home' },
@@ -86,8 +87,9 @@ namespace routes {
 		path: '/developer/:path*',
 		render({ path }, search) {
 			return {
-				redirect: `${window.location.origin}/${path}${search ? `?${new URLSearchParams(search).toString()}` : ''
-					}`
+				redirect: `${window.location.origin}/${path}${
+					search ? `?${new URLSearchParams(search).toString()}` : ''
+				}`
 			};
 		}
 	});
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index da15a080..8e2df98b 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -137,8 +137,8 @@ export class AuthManager {
 					attempts <= 2
 						? timing.seconds(1)
 						: attempts <= 5
-							? timing.seconds(2.5)
-							: timing.seconds(10)
+						? timing.seconds(2.5)
+						: timing.seconds(10)
 				);
 			}
 		}
diff --git a/src/utils/global.ts b/src/utils/global.ts
index b137fbec..ad64c8fa 100644
--- a/src/utils/global.ts
+++ b/src/utils/global.ts
@@ -203,14 +203,14 @@ export class GlobalState {
 			});
 
 		this.auth = new api.auth.AuthService({
-			endpoint: config.ORIGIN_API + "/auth",
+			endpoint: config.ORIGIN_API + '/auth',
 			// Force the credentials to be included, since we need to be able to modify cookies here
 			requestHandler: refreshMiddleware({ credentials: 'include' })
 		});
 
 		// Build cloud instance
 		this.cloud = new cloud.CloudService({
-			endpoint: config.ORIGIN_API + "/cloud",
+			endpoint: config.ORIGIN_API + '/cloud',
 			tls: true,
 			maxAttempts: 0,
 			requestHandler: refreshMiddleware()
@@ -340,7 +340,6 @@ export class GlobalState {
 					this.setupLiveAttempts <= 3 ? timing.seconds(1) : timing.seconds(5)
 				);
 			});
-
 		});
 	}