diff --git a/applications/uk.tcsw.console/web/lib/trpc.ts b/applications/uk.tcsw.console/web/lib/trpc.ts
index 6ea667f..3f7dad9 100644
--- a/applications/uk.tcsw.console/web/lib/trpc.ts
+++ b/applications/uk.tcsw.console/web/lib/trpc.ts
@@ -2,23 +2,23 @@ import { createTRPCClient, httpBatchLink, httpSubscriptionLink, splitLink } from
 import type { TRPCRouter } from "../../backend/index";
 
 const trpc = createTRPCClient<TRPCRouter>({
-    links: [
-        splitLink({
-            condition: (op: { type: string }) => op.type === "subscription",
-            true: httpSubscriptionLink({
-                url: "https://localhost/api/app/uk.tcsw.console",
-                eventSourceOptions: {
-                    withCredentials: true,
-                },
-            }),
-            false: httpBatchLink({
-                url: "https://localhost/api/app/uk.tcsw.console",
-                fetch(input, init) {
-                    return fetch(input, { credentials: "include", ...init });
-                },
-            }),
-        }),
-    ],
+  links: [
+    splitLink({
+      condition: (op: { type: string }) => op.type === "subscription",
+      true: httpSubscriptionLink({
+        url: `${window.location.origin}/api/app/uk.tcsw.console`,
+        eventSourceOptions: {
+          withCredentials: true,
+        },
+      }),
+      false: httpBatchLink({
+        url: `${window.location.origin}/api/app/uk.tcsw.console`,
+        fetch(input, init) {
+          return fetch(input, { credentials: "include", ...init });
+        },
+      }),
+    }),
+  ],
 });
 
 export default trpc;
diff --git a/applications/uk.tcsw.dashboard/web/lib/trpc.ts b/applications/uk.tcsw.dashboard/web/lib/trpc.ts
index ebf7111..1a2e6a6 100644
--- a/applications/uk.tcsw.dashboard/web/lib/trpc.ts
+++ b/applications/uk.tcsw.dashboard/web/lib/trpc.ts
@@ -4,7 +4,7 @@ import type { TRPCRouter } from "../../backend/index";
 const trpc = createTRPCClient<TRPCRouter>({
   links: [
     httpBatchLink({
-      url: "https://localhost/api/app/uk.tcsw.dashboard",
+      url: `${window.location.origin}/api/app/uk.tcsw.dashboard`,
       fetch(input, init) {
         return fetch(input, { credentials: "include", ...init });
       },
diff --git a/applications/uk.tcsw.files/web/lib/trpc.ts b/applications/uk.tcsw.files/web/lib/trpc.ts
index 2a2bac7..e1910b5 100644
--- a/applications/uk.tcsw.files/web/lib/trpc.ts
+++ b/applications/uk.tcsw.files/web/lib/trpc.ts
@@ -8,7 +8,7 @@ import {
 } from "@trpc/client";
 import type { TRPCRouter } from "../../backend/index";
 
-const ENDPOINT_URL = "https://localhost/api/app/uk.tcsw.files";
+const ENDPOINT_URL = `${window.location.origin}/api/app/uk.tcsw.files`;
 
 const trpc = createTRPCClient<TRPCRouter>({
   links: [
diff --git a/applications/uk.tcsw.ghostty/web/lib/trpc.ts b/applications/uk.tcsw.ghostty/web/lib/trpc.ts
index afa6f53..76b8bcb 100644
--- a/applications/uk.tcsw.ghostty/web/lib/trpc.ts
+++ b/applications/uk.tcsw.ghostty/web/lib/trpc.ts
@@ -2,14 +2,14 @@ import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import type { TRPCRouter } from "../../backend/index";
 
 const trpc = createTRPCClient<TRPCRouter>({
-    links: [
-        httpBatchLink({
-            url: "https://localhost/api/app/uk.tcsw.ghostty",
-            fetch(input, init) {
-                return fetch(input, { credentials: "include", ...init });
-            },
-        }),
-    ],
+  links: [
+    httpBatchLink({
+      url: `${window.location.origin}/api/app/uk.tcsw.ghostty`,
+      fetch(input, init) {
+        return fetch(input, { credentials: "include", ...init });
+      },
+    }),
+  ],
 });
 
 export default trpc;
diff --git a/applications/uk.tcsw.photos/web/lib/trpc.ts b/applications/uk.tcsw.photos/web/lib/trpc.ts
index d244c50..7970115 100644
--- a/applications/uk.tcsw.photos/web/lib/trpc.ts
+++ b/applications/uk.tcsw.photos/web/lib/trpc.ts
@@ -2,14 +2,14 @@ import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import type { TRPCRouter } from "../../backend/index";
 
 const trpc = createTRPCClient<TRPCRouter>({
-    links: [
-        httpBatchLink({
-            url: "https://localhost/api/app/uk.tcsw.photos",
-            fetch(input, init) {
-                return fetch(input, { credentials: "include", ...init });
-            },
-        }),
-    ],
+  links: [
+    httpBatchLink({
+      url: `${window.location.origin}/api/app/uk.tcsw.photos`,
+      fetch(input, init) {
+        return fetch(input, { credentials: "include", ...init });
+      },
+    }),
+  ],
 });
 
 export default trpc;
diff --git a/applications/uk.tcsw.settings/web/lib/trpc.ts b/applications/uk.tcsw.settings/web/lib/trpc.ts
index 6ce3d20..2ecc121 100644
--- a/applications/uk.tcsw.settings/web/lib/trpc.ts
+++ b/applications/uk.tcsw.settings/web/lib/trpc.ts
@@ -8,7 +8,7 @@ import {
 } from "@trpc/client";
 import type { TRPCRouter } from "../../backend";
 
-const ENDPOINT_URL = "https://localhost/api/app/uk.tcsw.settings";
+const ENDPOINT_URL = `${window.location.origin}/api/app/uk.tcsw.settings`;
 
 const trpc = createTRPCClient<TRPCRouter>({
   links: [
diff --git a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx
index bc10b16..18bf41c 100644
--- a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx
+++ b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx
@@ -1,17 +1,15 @@
+import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg";
+import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
+import UKButtonGroup from "@tcsw/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx";
 import { DividerDirection } from "@tcsw/uikit-solid/src/components/divider/lib/direction.js";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
 import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
-import { createSignal, type Component } from "solid-js";
-import styles from "./ResetPasswordDialogue.module.scss";
-import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
+import { type Component, createSignal } from "solid-js";
 import trpc from "../../../../../../lib/trpc";
-import UKButtonGroup from "@tcsw/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx";
-import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg";
+import styles from "./ResetPasswordDialogue.module.scss";
 
-const ResetPasswordDialogue: Component<{ closeDialogue: () => void }> = (
-  props,
-) => {
+const ResetPasswordDialogue: Component<{ closeDialogue: () => void }> = (props) => {
   const [passwordOne, setPasswordOne] = createSignal<string>("");
   const [passwordTwo, setPasswordTwo] = createSignal<string>("");
 
@@ -58,9 +56,7 @@ const ResetPasswordDialogue: Component<{ closeDialogue: () => void }> = (
 
             props.closeDialogue();
           }}
-          disabled={
-            !(passwordOne() === passwordTwo() && passwordOne().length > 3)
-          }
+          disabled={!(passwordOne() === passwordTwo() && passwordOne().length > 3)}
         >
           Confirm
         </UKButton>
diff --git a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/MethodTwoFactor.tsx b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/MethodTwoFactor.tsx
index 02c5a3c..0f42856 100644
--- a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/MethodTwoFactor.tsx
+++ b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/MethodTwoFactor.tsx
@@ -1,57 +1,62 @@
+import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg";
+import SHIELD_LOCK_ICON from "@material-symbols/svg-700/outlined/shield_lock.svg";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
+import UKDialog from "@tcsw/uikit-solid/src/components/dialog/UKDialog.jsx";
+import UKIcon from "@tcsw/uikit-solid/src/components/icon/UKIcon.jsx";
 import UKStackItem from "@tcsw/uikit-solid/src/components/stack/UKStackItem.jsx";
-import { type Component, createResource, Suspense } from "solid-js";
+import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
+import { type Component, createResource, createSignal, Suspense } from "solid-js";
 import trpc from "../../../../lib/trpc";
+import TwoFactorCreateCodeDialog from "./components/TwoFactorCreateCodeDialog/TwoFactorCreateCodeDialog";
 import styles from "./MethodTwoFactor.module.scss";
-import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
-import UKIcon from "@tcsw/uikit-solid/src/components/icon/UKIcon.jsx";
-import SHIELD_LOCK_ICON from "@material-symbols/svg-700/outlined/shield_lock.svg"
-import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg"
 
 const MethodTwoFactor: Component = () => {
   const [hasTwoFactor, { refetch: refetchHasTwoFactor }] = createResource(() =>
     trpc.authentication.hasTwoFactor.query(),
   );
+  const [showDialog, setShowDialog] = createSignal<"createCode" | "confirmCode" | null>(null);
 
   return (
-    <UKStackItem
-      leading={{
-        type: "icon",
-        value: SHIELD_LOCK_ICON,
-        alt: "two factor authentication",
-      }}
-      labelText="Two Factor Authentication"
-      supportingText={
-        hasTwoFactor()
-          ? "You have OTP two-factor authentication enabled"
-          : "Setup OTP two-factor authentication"
-      }
-      inlineComponent={
-        hasTwoFactor() && <UKIcon class={styles.enabledIcon}>{CHECK_ICON}</UKIcon>
-      }
-      expandedComponent={
-        <Suspense>
-          <div class={styles.expanded}>
-            <UKText role="body" size="m">
-              Use an OTP passcode to verify it's really you trying to login.{" "}
-              {!hasTwoFactor()
-                ? "\nOnce enabled, you must provide the otp code generated by a supported authenticator app to login / perform certain actions. \n(If you lose access to the authenticator app, you must contact an administrator to regain access to your account.)"
-                : ""}
-            </UKText>
-            <UKButton
-              disabled={true}
-              class={styles.button}
-              onClick={async () => {
-                refetchHasTwoFactor();
-                return 0;
-              }}
-            >
-              {hasTwoFactor() ? "Reset" : "Setup"} OTP two factor
-            </UKButton>
-          </div>
-        </Suspense>
-      }
-    />
+    <>
+      <UKStackItem
+        leading={{
+          type: "icon",
+          value: SHIELD_LOCK_ICON,
+          alt: "two factor authentication",
+        }}
+        labelText="Two Factor Authentication"
+        supportingText={
+          hasTwoFactor()
+            ? "You have OTP two-factor authentication enabled"
+            : "Setup OTP two-factor authentication"
+        }
+        inlineComponent={hasTwoFactor() && <UKIcon class={styles.enabledIcon}>{CHECK_ICON}</UKIcon>}
+        expandedComponent={
+          <Suspense>
+            <div class={styles.expanded}>
+              <UKText role="body" size="m">
+                Use an OTP passcode to verify it's really you trying to login.{" "}
+                {!hasTwoFactor()
+                  ? "\nOnce enabled, you must provide the otp code generated by a supported authenticator app to login / perform certain actions. \n(If you lose access to the authenticator app, you must contact an administrator to regain access to your account.)"
+                  : ""}
+              </UKText>
+              <UKButton
+                class={styles.button}
+                onClick={async () => {
+                  setShowDialog("createCode");
+                  return 0;
+                }}
+              >
+                {hasTwoFactor() ? "Reset" : "Setup"} OTP two factor
+              </UKButton>
+            </div>
+          </Suspense>
+        }
+      />
+      <UKDialog onClose={() => setShowDialog(null)} show={() => showDialog() === "createCode"}>
+        <TwoFactorCreateCodeDialog />
+      </UKDialog>
+    </>
   );
 };
 
diff --git a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/components/TwoFactorCreateCodeDialog/TwoFactorCreateCodeDialog.tsx b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/components/TwoFactorCreateCodeDialog/TwoFactorCreateCodeDialog.tsx
new file mode 100644
index 0000000..f148fef
--- /dev/null
+++ b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodTwoFactor/components/TwoFactorCreateCodeDialog/TwoFactorCreateCodeDialog.tsx
@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const TwoFactorCreateCodeDialog: Component = () => {
+  return <div>Setup Two-Factor Authentication</div>;
+};
+
+export default TwoFactorCreateCodeDialog;
diff --git a/applications/uk.tcsw.settings/web/pages/customization/wallpaper/Index.tsx b/applications/uk.tcsw.settings/web/pages/customization/wallpaper/Index.tsx
index 141cefd..e774e04 100644
--- a/applications/uk.tcsw.settings/web/pages/customization/wallpaper/Index.tsx
+++ b/applications/uk.tcsw.settings/web/pages/customization/wallpaper/Index.tsx
@@ -1,4 +1,8 @@
+import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg";
 import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg";
+import DELETE_ICON from "@material-symbols/svg-700/outlined/delete.svg";
+import FOLDER_ICON from "@material-symbols/svg-700/outlined/folder.svg";
+import UPLOAD_ICON from "@material-symbols/svg-700/outlined/upload.svg";
 import { createFileUploader } from "@solid-primitives/upload";
 import { useNavigate } from "@solidjs/router";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.tsx";
@@ -120,7 +124,7 @@ const WallpaperPage: Component = () => {
         <div class={styles.configureWallpaper}>
           <UKButtonGroup size={"s"} connected={true}>
             <UKButton
-              leadingIcon={wallpaperFit() === "fill" ? "check" : undefined}
+              leadingIcon={wallpaperFit() === "fill" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperFit("fill");
               }}
@@ -129,7 +133,7 @@ const WallpaperPage: Component = () => {
               Fill
             </UKButton>
             <UKButton
-              leadingIcon={wallpaperFit() === "cover" ? "check" : undefined}
+              leadingIcon={wallpaperFit() === "cover" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperFit("cover");
               }}
@@ -138,7 +142,7 @@ const WallpaperPage: Component = () => {
               Cover
             </UKButton>
             <UKButton
-              leadingIcon={wallpaperFit() === "contain" ? "check" : undefined}
+              leadingIcon={wallpaperFit() === "contain" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperFit("contain");
               }}
@@ -156,7 +160,7 @@ const WallpaperPage: Component = () => {
           <UKButtonGroup size={"s"} connected={true}>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignVertical() === "top" ? "check" : undefined}
+              leadingIcon={wallpaperAlignVertical() === "top" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignVertical("top");
               }}
@@ -166,7 +170,7 @@ const WallpaperPage: Component = () => {
             </UKButton>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignVertical() === "middle" ? "check" : undefined}
+              leadingIcon={wallpaperAlignVertical() === "middle" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignVertical("middle");
               }}
@@ -176,7 +180,7 @@ const WallpaperPage: Component = () => {
             </UKButton>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignVertical() === "bottom" ? "check" : undefined}
+              leadingIcon={wallpaperAlignVertical() === "bottom" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignVertical("bottom");
               }}
@@ -188,7 +192,7 @@ const WallpaperPage: Component = () => {
           <UKButtonGroup size={"s"} connected={true}>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignHorizontal() === "left" ? "check" : undefined}
+              leadingIcon={wallpaperAlignHorizontal() === "left" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignHorizontal("left");
               }}
@@ -198,7 +202,7 @@ const WallpaperPage: Component = () => {
             </UKButton>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignHorizontal() === "center" ? "check" : undefined}
+              leadingIcon={wallpaperAlignHorizontal() === "center" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignHorizontal("center");
               }}
@@ -208,7 +212,7 @@ const WallpaperPage: Component = () => {
             </UKButton>
             <UKButton
               disabled={wallpaperFit() === "fill"}
-              leadingIcon={wallpaperAlignHorizontal() === "right" ? "check" : undefined}
+              leadingIcon={wallpaperAlignHorizontal() === "right" ? CHECK_ICON : undefined}
               onClick={() => {
                 setWallpaperAlignHorizontal("right");
               }}
@@ -225,7 +229,7 @@ const WallpaperPage: Component = () => {
         <div class={styles.selectWallpaper}>
           <UKButton
             color={"filled"}
-            leadingIcon={"upload"}
+            leadingIcon={UPLOAD_ICON}
             onClick={() => {
               selectWallpaperUpload(async (files) => {
                 for (const file of files) {
@@ -247,7 +251,7 @@ const WallpaperPage: Component = () => {
           <UKButton
             disabled={true}
             color={"tonal"}
-            leadingIcon={"folder"}
+            leadingIcon={FOLDER_ICON}
             onClick={() => {
               return 0;
             }}
@@ -286,7 +290,7 @@ const WallpaperPage: Component = () => {
                       <UKIconButton
                         size={"xs"}
                         class={styles.deleteWallpaper}
-                        icon={"delete"}
+                        icon={DELETE_ICON}
                         color={"tonal"}
                         onClick={async () => {
                           await trpc.customization.wallpaper.delete.mutate({
diff --git a/applications/uk.tcsw.store/web/lib/trpc.ts b/applications/uk.tcsw.store/web/lib/trpc.ts
index 80dddf6..4277630 100644
--- a/applications/uk.tcsw.store/web/lib/trpc.ts
+++ b/applications/uk.tcsw.store/web/lib/trpc.ts
@@ -2,14 +2,14 @@ import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import type { TRPCRouter } from "../../backend/index";
 
 const trpc = createTRPCClient<TRPCRouter>({
-    links: [
-        httpBatchLink({
-            url: "https://localhost/api/app/uk.tcsw.store",
-            fetch(input, init) {
-                return fetch(input, { credentials: "include", ...init });
-            },
-        }),
-    ],
+  links: [
+    httpBatchLink({
+      url: `${window.location.origin}/api/app/uk.tcsw.store`,
+      fetch(input, init) {
+        return fetch(input, { credentials: "include", ...init });
+      },
+    }),
+  ],
 });
 
 export default trpc;
diff --git a/instance/src/web/src/lib/backend.ts b/instance/src/web/src/lib/backend.ts
index d292246..1af8ad4 100644
--- a/instance/src/web/src/lib/backend.ts
+++ b/instance/src/web/src/lib/backend.ts
@@ -3,5 +3,5 @@ export default function backend(path: string): string {
     return `https://localhost${path}`;
   }
 
-  return `https://${window.location.hostname}${path}`;
+  return `${window.location.origin}${path}`;
 }
diff --git a/instance/src/web/src/pages/userSelect/signup/Signup.tsx b/instance/src/web/src/pages/userSelect/signup/Signup.tsx
index ae8436b..70a03e6 100644
--- a/instance/src/web/src/pages/userSelect/signup/Signup.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/Signup.tsx
@@ -1,327 +1,299 @@
-import { type Component, createResource, createSignal, Match, Switch } from "solid-js";
-import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.tsx";
+import { useNavigate } from "@solidjs/router";
+import UKAvatar from "@tcsw/uikit-solid/src/components/avatar/UKAvatar.tsx";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.tsx";
-import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.tsx";
+import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.tsx";
 import { DividerDirection } from "@tcsw/uikit-solid/src/components/divider/lib/direction.ts";
+import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.tsx";
+import UKIndeterminateSpinner from "@tcsw/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
+import UKSearchableDropdownMenu from "@tcsw/uikit-solid/src/components/searchableDropdownMenu/UKSearchableDropdownMenu.tsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.tsx";
 import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.tsx";
-import { useNavigate } from "@solidjs/router";
-import styles from "./Signup.module.scss";
 import clsx from "clsx";
-import UKAvatar from "@tcsw/uikit-solid/src/components/avatar/UKAvatar.tsx";
-import UKSearchableDropdownMenu from "@tcsw/uikit-solid/src/components/searchableDropdownMenu/UKSearchableDropdownMenu.tsx";
-import UKIndeterminateSpinner from "@tcsw/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
+import { type Component, createResource, createSignal, Match, Switch } from "solid-js";
 import trpc from "../../../lib/trpc";
-import Username from "./stages/Username/Username";
+import styles from "./Signup.module.scss";
 import Email from "./stages/Email/Email";
-import VerifyEmail from "./stages/VerifyEmail/VerifyEmail";
 import TermsOfUse from "./stages/TermsOfUse/TermsOfUse";
 import TwoFactorAuthentication from "./stages/TwoFactorAuthentication/TwoFactorAuthentication";
+import Username from "./stages/Username/Username";
+import VerifyEmail from "./stages/VerifyEmail/VerifyEmail";
 
 export enum UserSelectStage {
-    Username, // set username
-    Email, // set email
-    VerifyEmail, // verify they own the email
-    Password, // set password
-    Profile, // set profile information
-    TermsOfUse, // accept the terms of use for this instance
-    TwoFactorAuthentication, // attempt to setup 2FA
-    GuidePrompt, // prompt the user for if they want to see the introductory guide
-    Guide, // guide the new user through the basics
+  Username, // set username
+  Email, // set email
+  VerifyEmail, // verify they own the email
+  Password, // set password
+  Profile, // set profile information
+  TermsOfUse, // accept the terms of use for this instance
+  TwoFactorAuthentication, // attempt to setup 2FA
+  GuidePrompt, // prompt the user for if they want to see the introductory guide
+  Guide, // guide the new user through the basics
 }
 
 const UserSelectPage: Component = () => {
-    const navigate = useNavigate();
-    const [stage, setStage] = createSignal<UserSelectStage>(UserSelectStage.Username);
+  const navigate = useNavigate();
+  const [stage, setStage] = createSignal<UserSelectStage>(UserSelectStage.Username);
 
-    const [username, setUsername] = createSignal<string>("");
-    const [password, setPassword] = createSignal<string>("");
-    const [confirmedPassword, setConfirmedPassword] = createSignal<string>("");
-    const [emailAddress, setEmailAddress] = createSignal<`${string}@${string}.${string}` | "">("");
-    const [emailCode, setEmailCode] = createSignal<string>("");
-    const [displayName, setDisplayName] = createSignal<string>("");
-    const [gender, setGender] = createSignal<"female" | "male" | "other">("other");
-    const [bio, setBio] = createSignal<string>("");
+  const [username, setUsername] = createSignal<string>("");
+  const [password, setPassword] = createSignal<string>("");
+  const [confirmedPassword, setConfirmedPassword] = createSignal<string>("");
+  const [emailAddress, setEmailAddress] = createSignal<`${string}@${string}.${string}` | "">("");
+  const [emailCode, setEmailCode] = createSignal<string>("");
+  const [displayName, setDisplayName] = createSignal<string>("");
+  const [gender, setGender] = createSignal<"female" | "male" | "other">("other");
+  const [bio, setBio] = createSignal<string>("");
 
-    const [requirements] = createResource(() => trpc.authorization.signupRequirements.query());
+  const [requirements] = createResource(() => trpc.authorization.signupRequirements.query());
 
-    const [isUsernameValid, setIsUsernameValid] = createSignal<boolean>(false);
-    const [twoFactorTestCode, setTwoFactorTestCode] = createSignal<string>("");
-    const [isEmailCodeValid, setIsEmailCodeValid] = createSignal<boolean>(false);
+  const [isUsernameValid, setIsUsernameValid] = createSignal<boolean>(false);
+  const [twoFactorTestCode, setTwoFactorTestCode] = createSignal<string>("");
+  const [isEmailCodeValid, setIsEmailCodeValid] = createSignal<boolean>(false);
 
-    return (
-      <Switch fallback={<UKIndeterminateSpinner />}>
-        <Match when={stage() === UserSelectStage.Username}>
-          <Username
-            setStage={setStage}
-            setUsername={setUsername}
-            username={username}
-            requirements={requirements}
-            isUsernameValid={isUsernameValid}
-            setIsUsernameValid={setIsUsernameValid}
+  return (
+    <Switch fallback={<UKIndeterminateSpinner />}>
+      <Match when={stage() === UserSelectStage.Username}>
+        <Username
+          setStage={setStage}
+          setUsername={setUsername}
+          username={username}
+          requirements={requirements}
+          isUsernameValid={isUsernameValid}
+          setIsUsernameValid={setIsUsernameValid}
+        />
+      </Match>
+      <Match when={stage() === UserSelectStage.Email}>
+        <Email
+          setStage={setStage}
+          emailAddress={emailAddress}
+          setEmailAddress={setEmailAddress}
+          setEmailCode={setEmailCode}
+        />
+      </Match>
+      <Match when={stage() === UserSelectStage.VerifyEmail}>
+        <VerifyEmail
+          emailAddress={emailAddress}
+          setStage={setStage}
+          emailCode={emailCode}
+          setEmailCode={setEmailCode}
+          isEmailCodeValid={isEmailCodeValid}
+          setIsEmailCodeValid={setIsEmailCodeValid}
+        />
+      </Match>
+      <Match when={stage() === UserSelectStage.Password}>
+        <UKCard color={"filled"} class={styles.modal}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            Set Password
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <UKTextField
+            shouldMask={true}
+            color={"outlined"}
+            label={"Password*"}
+            defaultValue={password()}
+            setValue={password()}
+            getValue={setPassword}
+            supportingText={"*required"}
+            error={password() !== confirmedPassword()}
           />
-        </Match>
-        <Match when={stage() === UserSelectStage.Email}>
-          <Email
-            setStage={setStage}
-            emailAddress={emailAddress}
-            setEmailAddress={setEmailAddress}
-            setEmailCode={setEmailCode}
+          <UKTextField
+            shouldMask={true}
+            color={"outlined"}
+            label={"Confirm Password*"}
+            defaultValue={confirmedPassword()}
+            setValue={confirmedPassword()}
+            getValue={setConfirmedPassword}
+            supportingText={"*required"}
+            error={password() !== confirmedPassword()}
           />
-        </Match>
-        <Match when={stage() === UserSelectStage.VerifyEmail}>
-          <VerifyEmail
-            emailAddress={emailAddress}
-            setStage={setStage}
-            emailCode={emailCode}
-            setEmailCode={setEmailCode}
-            isEmailCodeValid={isEmailCodeValid}
-            setIsEmailCodeValid={setIsEmailCodeValid}
-          />
-        </Match>
-        <Match when={stage() === UserSelectStage.Password}>
-          <UKCard color={"filled"} class={styles.modal}>
-            <UKText role={"title"} size={"l"} emphasized={true}>
-              Set Password
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <UKTextField
-              shouldMask={true}
-              color={"outlined"}
-              label={"Password*"}
-              defaultValue={password()}
-              setValue={password()}
-              getValue={setPassword}
-              supportingText={"*required"}
-              error={password() !== confirmedPassword()}
-            />
-            <UKTextField
-              shouldMask={true}
-              color={"outlined"}
-              label={"Confirm Password*"}
-              defaultValue={confirmedPassword()}
-              setValue={confirmedPassword()}
-              getValue={setConfirmedPassword}
-              supportingText={"*required"}
-              error={password() !== confirmedPassword()}
-            />
-            <div class={styles.stageButtons}>
-              <UKButton
-                onClick={() => {
-                  if (requirements()?.email) {
-                    setStage(UserSelectStage.VerifyEmail);
-                  } else {
-                    setStage(UserSelectStage.Username);
-                  }
-                }}
-                color={"tonal"}
-              >
-                Back
-              </UKButton>
-              <UKButton
-                disabled={
-                  password() !== confirmedPassword() || password() === ""
+          <div class={styles.stageButtons}>
+            <UKButton
+              onClick={() => {
+                if (requirements()?.email) {
+                  setStage(UserSelectStage.VerifyEmail);
+                } else {
+                  setStage(UserSelectStage.Username);
                 }
-                onClick={() => {
-                  setStage(UserSelectStage.Profile);
-                }}
-                color={"filled"}
-              >
-                Continue
-              </UKButton>
-            </div>
-          </UKCard>
-        </Match>
-        <Match when={stage() === UserSelectStage.Profile}>
-          <UKCard
-            color={"filled"}
-            class={clsx(styles.modal, styles.profileStage)}
-          >
-            <UKText role={"title"} size={"l"} emphasized={true}>
-              Setup Profile
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <UKAvatar
-              class={styles.avatar}
-              size={"l"}
-              username={username()}
-              avatar={"/assets/placeholder/avatar.png"}
-            />
-            <UKText
-              class={styles.displayName}
-              role={"headline"}
-              align={"center"}
-              size={"l"}
-              emphasized={true}
+              }}
+              color={"tonal"}
             >
-              {displayName() || username()}
-            </UKText>
-            <UKText
-              class={styles.username}
-              role={"body"}
-              align={"center"}
-              size={"m"}
+              Back
+            </UKButton>
+            <UKButton
+              disabled={password() !== confirmedPassword() || password() === ""}
+              onClick={() => {
+                setStage(UserSelectStage.Profile);
+              }}
+              color={"filled"}
             >
-              {`@${username()}`}
-            </UKText>
-            <UKText
-              class={styles.pronouns}
-              role={"label"}
-              align={"center"}
-              size={"s"}
+              Continue
+            </UKButton>
+          </div>
+        </UKCard>
+      </Match>
+      <Match when={stage() === UserSelectStage.Profile}>
+        <UKCard color={"filled"} class={clsx(styles.modal, styles.profileStage)}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            Setup Profile
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <UKAvatar
+            class={styles.avatar}
+            size={"l"}
+            username={username()}
+            avatar={"/assets/placeholder/avatar.png"}
+          />
+          <UKText
+            class={styles.displayName}
+            role={"headline"}
+            align={"center"}
+            size={"l"}
+            emphasized={true}
+          >
+            {displayName() || username()}
+          </UKText>
+          <UKText class={styles.username} role={"body"} align={"center"} size={"m"}>
+            {`@${username()}`}
+          </UKText>
+          <UKText class={styles.pronouns} role={"label"} align={"center"} size={"s"}>
+            {gender() === "female" ? "she/her" : gender() === "male" ? "he/him" : "they/them"}
+          </UKText>
+          <UKTextField
+            color={"outlined"}
+            label={"Display Name"}
+            defaultValue={displayName()}
+            setValue={displayName()}
+            getValue={setDisplayName}
+          />
+          <UKSearchableDropdownMenu
+            inputColor={"outlined"}
+            label={"Gender"}
+            defaultValue={gender()}
+            // @ts-ignore
+            getValue={(val) => setGender(val.toLowerCase())}
+            items={[
+              {
+                id: "female",
+                type: "button",
+                label: "Female",
+              },
+              {
+                id: "male",
+                type: "button",
+                label: "Male",
+              },
+              {
+                id: "other",
+                type: "button",
+                label: "Other",
+              },
+            ]}
+          />
+          <UKTextField
+            color={"outlined"}
+            label={"Bio"}
+            as={"textarea"}
+            setValue={bio()}
+            defaultValue={bio()}
+            getValue={setBio}
+          />
+          <div class={styles.stageButtons}>
+            <UKButton
+              onClick={() => {
+                setStage(UserSelectStage.TwoFactorAuthentication);
+              }}
+              color={"tonal"}
             >
-              {gender() === "female"
-                ? "she/her"
-                : gender() === "male"
-                  ? "he/him"
-                  : "they/them"}
-            </UKText>
-            <UKTextField
-              color={"outlined"}
-              label={"Display Name"}
-              defaultValue={displayName()}
-              setValue={displayName()}
-              getValue={setDisplayName}
-            />
-            <UKSearchableDropdownMenu
-              inputColor={"outlined"}
-              label={"Gender"}
-              defaultValue={gender()}
-              // @ts-ignore
-              getValue={(val) => setGender(val.toLowerCase())}
-              items={[
-                {
-                  id: "female",
-                  type: "button",
-                  label: "Female",
-                },
-                {
-                  id: "male",
-                  type: "button",
-                  label: "Male",
-                },
-                {
-                  id: "other",
-                  type: "button",
-                  label: "Other",
-                },
-              ]}
-            />
-            <UKTextField
-              color={"outlined"}
-              label={"Bio"}
-              as={"textarea"}
-              setValue={bio()}
-              defaultValue={bio()}
-              getValue={setBio}
-            />
-            <div class={styles.stageButtons}>
-              <UKButton
-                onClick={() => {
-                  setStage(UserSelectStage.TwoFactorAuthentication);
-                }}
-                color={"tonal"}
-              >
-                Back
-              </UKButton>
-              <UKButton
-                onClick={() => {
-                  if (displayName() === "") {
-                    setDisplayName(username());
-                  }
+              Back
+            </UKButton>
+            <UKButton
+              onClick={() => {
+                if (displayName() === "") {
+                  setDisplayName(username());
+                }
 
-                  setStage(UserSelectStage.TermsOfUse);
-                }}
-                color={"filled"}
-              >
-                Continue
-              </UKButton>
-            </div>
-          </UKCard>
-        </Match>
-        <Match when={stage() === UserSelectStage.TermsOfUse}>
-          <TermsOfUse
-            setStage={setStage}
-            signup={async () => {
-              // create the user
-              let resp = await trpc.authorization.signup.mutate({
-                username: username(),
-                bio: bio(),
-                displayName: displayName(),
-                emailAddress: emailAddress(),
-                emailCode: emailCode(),
-                gender: gender(),
-                password: password(),
-              });
+                setStage(UserSelectStage.TermsOfUse);
+              }}
+              color={"filled"}
+            >
+              Continue
+            </UKButton>
+          </div>
+        </UKCard>
+      </Match>
+      <Match when={stage() === UserSelectStage.TermsOfUse}>
+        <TermsOfUse
+          setStage={setStage}
+          signup={async () => {
+            // create the user
+            const resp = await trpc.authorization.signup.mutate({
+              username: username(),
+              bio: bio(),
+              displayName: displayName(),
+              emailAddress: emailAddress(),
+              emailCode: emailCode(),
+              gender: gender(),
+              password: password(),
+            });
 
-              if (resp.type === "success") {
-                return () => {
-                  setStage(UserSelectStage.TwoFactorAuthentication);
-                }
-              } else {
-                // TODO: add an error toast here instead of a console message (When implemented in UIKit of course)
-                console.error(resp);
-                alert("A critical error occurred!");
-              }
-            }}
-          />
-        </Match>
-        <Match when={stage() === UserSelectStage.TwoFactorAuthentication}>
-          <TwoFactorAuthentication
-            setStage={setStage}
-            setTwoFactorTestCode={setTwoFactorTestCode}
-            twoFactorTestCode={twoFactorTestCode}
-            requirements={requirements}
-          />
-        </Match>
-        <Match when={stage() === UserSelectStage.GuidePrompt}>
-          <UKCard
-            color={"filled"}
-            class={clsx(styles.modal, styles.guidePromptStage)}
-          >
-            <UKText role={"title"} size={"l"} emphasized={true}>
-              Guide
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <UKText role={"body"} size={"l"} align={"center"}>
-              {"Would you like to have a guide of Workspaces?"}
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <div class={styles.continueSegment}>
-              <UKButton onClick={() => navigate("/app")} color={"tonal"}>
-                Skip guide
-              </UKButton>
-              <UKButton
-                onClick={() => setStage(UserSelectStage.Guide)}
-                color={"filled"}
-              >
-                Continue
-              </UKButton>
-            </div>
-          </UKCard>
-        </Match>
-        <Match when={stage() === UserSelectStage.Guide}>
-          <UKCard
-            color={"filled"}
-            class={clsx(styles.modal, styles.guideStage)}
-          >
-            <UKText role={"title"} size={"l"} emphasized={true}>
-              {"Unimplemented"}
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <UKText role={"body"} size={"l"} align={"center"} emphasized={true}>
-              {"The guide is not yet implemented"}
-            </UKText>
-            <UKDivider direction={DividerDirection.horizontal} />
-            <div class={styles.continueSegment}>
-              <UKButton onClick={() => navigate("/app")} color={"filled"}>
-                Skip guide and continue
-              </UKButton>
-            </div>
-          </UKCard>
-        </Match>
-      </Switch>
-    );
+            if (resp.type === "success") {
+              return () => {
+                setStage(UserSelectStage.TwoFactorAuthentication);
+              };
+            } else {
+              // TODO: add an error toast here instead of a console message (When implemented in UIKit of course)
+              console.error(resp);
+              alert("A critical error occurred!");
+            }
+          }}
+        />
+      </Match>
+      <Match when={stage() === UserSelectStage.TwoFactorAuthentication}>
+        <TwoFactorAuthentication
+          setStage={setStage}
+          setTwoFactorTestCode={setTwoFactorTestCode}
+          twoFactorTestCode={twoFactorTestCode}
+          requirements={requirements}
+        />
+      </Match>
+      <Match when={stage() === UserSelectStage.GuidePrompt}>
+        <UKCard color={"filled"} class={clsx(styles.modal, styles.guidePromptStage)}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            Guide
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <UKText role={"body"} size={"l"} align={"center"}>
+            {"Would you like to have a guide of Workspaces?"}
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <div class={styles.continueSegment}>
+            <UKButton onClick={() => navigate("/app")} color={"tonal"}>
+              Skip guide
+            </UKButton>
+            <UKButton onClick={() => setStage(UserSelectStage.Guide)} color={"filled"}>
+              Continue
+            </UKButton>
+          </div>
+        </UKCard>
+      </Match>
+      <Match when={stage() === UserSelectStage.Guide}>
+        <UKCard color={"filled"} class={clsx(styles.modal, styles.guideStage)}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            {"Unimplemented"}
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <UKText role={"body"} size={"l"} align={"center"} emphasized={true}>
+            {"The guide is not yet implemented"}
+          </UKText>
+          <UKDivider direction={DividerDirection.horizontal} />
+          <div class={styles.continueSegment}>
+            <UKButton onClick={() => navigate("/app")} color={"filled"}>
+              Skip guide and continue
+            </UKButton>
+          </div>
+        </UKCard>
+      </Match>
+    </Switch>
+  );
 };
 
 export default UserSelectPage;
diff --git a/instance/src/web/src/pages/userSelect/signup/stages/Email/Email.tsx b/instance/src/web/src/pages/userSelect/signup/stages/Email/Email.tsx
index bfe6d02..f0f00ea 100644
--- a/instance/src/web/src/pages/userSelect/signup/stages/Email/Email.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/stages/Email/Email.tsx
@@ -1,61 +1,63 @@
-import type { Accessor, Component } from "solid-js";
-import modalStyles from "../../Signup.module.scss";
-import { UserSelectStage } from "../../Signup";
-import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
+import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
 import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.jsx";
-import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
-import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
-import trpc from "../../../../../lib/trpc";
+import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
+import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
+import type { Accessor, Component } from "solid-js";
 import z from "zod";
+import trpc from "../../../../../lib/trpc";
+import { UserSelectStage } from "../../Signup";
+import modalStyles from "../../Signup.module.scss";
 
 const Email: Component<{
-    setStage(stage: UserSelectStage): void;
-    emailAddress: Accessor<string>;
-    setEmailAddress(emailAddress: string): void;
-    setEmailCode(emailCode: string): void;
+  setStage(stage: UserSelectStage): void;
+  emailAddress: Accessor<string>;
+  setEmailAddress(emailAddress: string): void;
+  setEmailCode(emailCode: string): void;
 }> = (props) => {
-    return (
-        <>
-            <UKCard color={"filled"} class={modalStyles.modal}>
-                <UKText role={"title"} size={"l"} emphasized={true}>
-                    Set Email
-                </UKText>
-                <UKDivider direction={"horizontal"} />
-                <UKTextField
-                    color={"outlined"}
-                    label={"Email Address*"}
-                    defaultValue={props.emailAddress()}
-                    getValue={props.setEmailAddress}
-                    supportingText={"*required"}
-                    error={props.emailAddress() !== "" && !z.safeParse(z.email(), props.emailAddress()).data}
-                />
-                <div class={modalStyles.stageButtons}>
-                    <UKButton
-                        onClick={() => {
-                            props.setStage(UserSelectStage.Username);
-                        }}
-                        color={"tonal"}
-                    >
-                        Back
-                    </UKButton>
-                    <UKButton
-                        disabled={props.emailAddress() === "" || !z.safeParse(z.email(), props.emailAddress()).data}
-                        onClick={async () => {
-                            await trpc.authorization.checkEmailAddressOwnership.mutate({
-                                emailAddress: props.emailAddress(),
-                            });
+  return (
+    <>
+      <UKCard color={"filled"} class={modalStyles.modal}>
+        <UKText role={"title"} size={"l"} emphasized={true}>
+          Set Email
+        </UKText>
+        <UKDivider direction={"horizontal"} />
+        <UKTextField
+          color={"outlined"}
+          label={"Email Address*"}
+          defaultValue={props.emailAddress()}
+          getValue={props.setEmailAddress}
+          supportingText={"*required"}
+          error={props.emailAddress() !== "" && !z.safeParse(z.email(), props.emailAddress()).data}
+        />
+        <div class={modalStyles.stageButtons}>
+          <UKButton
+            onClick={() => {
+              props.setStage(UserSelectStage.Username);
+            }}
+            color={"tonal"}
+          >
+            Back
+          </UKButton>
+          <UKButton
+            disabled={
+              props.emailAddress() === "" || !z.safeParse(z.email(), props.emailAddress()).data
+            }
+            onClick={async () => {
+              await trpc.authorization.checkEmailAddressOwnership.mutate({
+                emailAddress: props.emailAddress(),
+              });
 
-                            props.setStage(UserSelectStage.VerifyEmail);
-                        }}
-                        color={"filled"}
-                    >
-                        Continue
-                    </UKButton>
-                </div>
-            </UKCard>
-        </>
-    );
+              props.setStage(UserSelectStage.VerifyEmail);
+            }}
+            color={"filled"}
+          >
+            Continue
+          </UKButton>
+        </div>
+      </UKCard>
+    </>
+  );
 };
 
 export default Email;
diff --git a/instance/src/web/src/pages/userSelect/signup/stages/TermsOfUse/TermsOfUse.tsx b/instance/src/web/src/pages/userSelect/signup/stages/TermsOfUse/TermsOfUse.tsx
index 612601a..826bb4b 100644
--- a/instance/src/web/src/pages/userSelect/signup/stages/TermsOfUse/TermsOfUse.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/stages/TermsOfUse/TermsOfUse.tsx
@@ -1,48 +1,48 @@
+import { useNavigate } from "@solidjs/router";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
 import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.jsx";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
 import clsx from "clsx";
-import { createResource, type Component } from "solid-js";
+import { type Component, createResource } from "solid-js";
+import trpc from "../../../../../lib/trpc";
+import type { UserSelectStage } from "../../Signup";
 import modalStyles from "../../Signup.module.scss";
 import styles from "./TermsOfUse.module.scss";
-import { useNavigate } from "@solidjs/router";
-import { UserSelectStage } from "../../Signup";
-import trpc from "../../../../../lib/trpc";
 
 const TermsOfUse: Component<{
-    setStage(stage: UserSelectStage): void;
-    signup(): Promise<void | (() => void)>;
+  setStage(stage: UserSelectStage): void;
+  signup(): Promise<void | (() => void)>;
 }> = (props) => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    const [termsOfUse] = createResource(() => trpc.termsOfUse.query());
+  const [termsOfUse] = createResource(() => trpc.termsOfUse.query());
 
-    return (
-        <>
-            <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.modal)}>
-                <UKText role={"title"} size={"l"} emphasized={true}>
-                    Terms Of Use
-                </UKText>
-                <UKDivider direction={"horizontal"} />
-                <UKText retainTextFormatting role={"body"} size={"m"}>
-                    {termsOfUse()}
-                </UKText>
-                <UKDivider direction={"horizontal"} />
-                <UKText role={"title"} size={"m"} align={"center"}>
-                    You must agree to the terms above to continue
-                </UKText>
-                <div class={styles.continueSegment}>
-                    <UKButton onClick={() => navigate("/")} color={"tonal"}>
-                        Deny
-                    </UKButton>
-                    <UKButton affirmative={true} onClick={props.signup} color={"filled"}>
-                        Agree and Continue
-                    </UKButton>
-                </div>
-            </UKCard>
-        </>
-    );
+  return (
+    <>
+      <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.modal)}>
+        <UKText role={"title"} size={"l"} emphasized={true}>
+          Terms Of Use
+        </UKText>
+        <UKDivider direction={"horizontal"} />
+        <UKText retainTextFormatting role={"body"} size={"m"}>
+          {termsOfUse()}
+        </UKText>
+        <UKDivider direction={"horizontal"} />
+        <UKText role={"title"} size={"m"} align={"center"}>
+          You must agree to the terms above to continue
+        </UKText>
+        <div class={styles.continueSegment}>
+          <UKButton onClick={() => navigate("/")} color={"tonal"}>
+            Deny
+          </UKButton>
+          <UKButton affirmative={true} onClick={props.signup} color={"filled"}>
+            Agree and Continue
+          </UKButton>
+        </div>
+      </UKCard>
+    </>
+  );
 };
 
 export default TermsOfUse;
diff --git a/instance/src/web/src/pages/userSelect/signup/stages/TwoFactorAuthentication/TwoFactorAuthentication.tsx b/instance/src/web/src/pages/userSelect/signup/stages/TwoFactorAuthentication/TwoFactorAuthentication.tsx
index ab843de..cfad604 100644
--- a/instance/src/web/src/pages/userSelect/signup/stages/TwoFactorAuthentication/TwoFactorAuthentication.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/stages/TwoFactorAuthentication/TwoFactorAuthentication.tsx
@@ -3,116 +3,116 @@ import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.jsx";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
 import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
+import clsx from "clsx";
+import QRCode from "qrcode";
 import {
-    createEffect,
-    createResource,
-    type Accessor,
-    type Component,
-    createSignal,
-    type Resource,
+  type Accessor,
+  type Component,
+  createEffect,
+  createResource,
+  createSignal,
+  type Resource,
 } from "solid-js";
+import trpc from "../../../../../lib/trpc";
 import { UserSelectStage } from "../../Signup";
-import clsx from "clsx";
 import modalStyles from "../../Signup.module.scss";
 import styles from "./TwoFactorAuthentication.module.scss";
-import QRCode from "qrcode";
-import trpc from "../../../../../lib/trpc";
 
 const TwoFactorAuthentication: Component<{
-    twoFactorTestCode: Accessor<string>;
-    setTwoFactorTestCode(testCode: string): void;
-    setStage(stage: UserSelectStage): void;
-    requirements: Resource<{ twoFactorAuthentication?: boolean }>;
+  twoFactorTestCode: Accessor<string>;
+  setTwoFactorTestCode(testCode: string): void;
+  setStage(stage: UserSelectStage): void;
+  requirements: Resource<{ twoFactorAuthentication?: boolean }>;
 }> = (props) => {
-    const [isTwoFactorCodeValid, setIsTwoFactorCodeValid] = createSignal<boolean>(false);
-    const [twoFactorSecret] = createResource(() => trpc.authorization.enableTwoFactor.mutate());
-    let canvasElement!: HTMLCanvasElement;
+  const [isTwoFactorCodeValid, setIsTwoFactorCodeValid] = createSignal<boolean>(false);
+  const [twoFactorSecret] = createResource(() => trpc.authorization.enableTwoFactor.mutate());
+  let canvasElement!: HTMLCanvasElement;
 
-    createEffect(() => {
-        let twoFactorSecretValue = twoFactorSecret();
+  createEffect(() => {
+    const twoFactorSecretValue = twoFactorSecret();
 
-        if (!twoFactorSecretValue) return;
+    if (!twoFactorSecretValue) return;
 
-        QRCode.toCanvas(
-            canvasElement,
-            twoFactorSecretValue?.twoFactorSecretURI || "https://http.cat/404",
-            function (error) {
-                if (error) console.error(error);
-            },
-        );
-    });
+    QRCode.toCanvas(
+      canvasElement,
+      twoFactorSecretValue?.twoFactorSecretURI || "https://http.cat/404",
+      (error) => {
+        if (error) console.error(error);
+      },
+    );
+  });
 
-    return (
-        <>
-            {isTwoFactorCodeValid() ? (
-                <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.twoFactorStage)}>
-                    <UKText role={"title"} size={"l"} emphasized={true}>
-                        Two Factor Setup Complete!
-                    </UKText>
-                    <UKDivider direction={"horizontal"} />
-                    <UKText role={"body"} size={"m"}>
-                        You have successfully setup two-factor authentication on your account!
-                    </UKText>
-                    <UKDivider direction={"horizontal"} />
-                    <div class={clsx(styles.stageButtons, styles.singleButtonGroup)}>
-                        <UKButton
-                            onClick={() => {
-                                props.setStage(UserSelectStage.GuidePrompt);
-                            }}
-                            color={"filled"}
-                        >
-                            Continue
-                        </UKButton>
-                    </div>
-                </UKCard>
-            ) : (
-                <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.twoFactorStage)}>
-                    <UKText role={"title"} size={"l"} emphasized={true}>
-                        Setup Two Factor Authentication
-                    </UKText>
-                    <UKDivider direction={"horizontal"} />
-                    <div class={styles.qr}>
-                        <canvas ref={canvasElement} />
-                        <UKText role={"body"} size={"m"}>
-                            {`secret: ${twoFactorSecret()?.twoFactorSecret || "..."}`}
-                        </UKText>
-                    </div>
-                    <UKTextField
-                        color={"outlined"}
-                        label={"Two Factor Code*"}
-                        defaultValue={props.twoFactorTestCode()}
-                        getValue={async (value) => {
-                            props.setTwoFactorTestCode(value);
+  return (
+    <>
+      {isTwoFactorCodeValid() ? (
+        <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.twoFactorStage)}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            Two Factor Setup Complete!
+          </UKText>
+          <UKDivider direction={"horizontal"} />
+          <UKText role={"body"} size={"m"}>
+            You have successfully setup two-factor authentication on your account!
+          </UKText>
+          <UKDivider direction={"horizontal"} />
+          <div class={clsx(styles.stageButtons, styles.singleButtonGroup)}>
+            <UKButton
+              onClick={() => {
+                props.setStage(UserSelectStage.GuidePrompt);
+              }}
+              color={"filled"}
+            >
+              Continue
+            </UKButton>
+          </div>
+        </UKCard>
+      ) : (
+        <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.twoFactorStage)}>
+          <UKText role={"title"} size={"l"} emphasized={true}>
+            Setup Two Factor Authentication
+          </UKText>
+          <UKDivider direction={"horizontal"} />
+          <div class={styles.qr}>
+            <canvas ref={canvasElement} />
+            <UKText role={"body"} size={"m"}>
+              {`secret: ${twoFactorSecret()?.twoFactorSecret || "..."}`}
+            </UKText>
+          </div>
+          <UKTextField
+            color={"outlined"}
+            label={"Two Factor Code*"}
+            defaultValue={props.twoFactorTestCode()}
+            getValue={async (value) => {
+              props.setTwoFactorTestCode(value);
 
-                            if (value.length === 6) {
-                                setIsTwoFactorCodeValid(
-                                    await trpc.authorization.confirmTwoFactor.mutate({
-                                        twoFactorCode: value,
-                                    }),
-                                );
-                            }
-                        }}
-                        supportingText={"*required"}
-                        maximumCharacterCount={6}
-                    />
-                    {!props.requirements()?.twoFactorAuthentication && (
-                        <>
-                            <UKDivider direction={"horizontal"} />
-                            <UKButton
-                                class={styles.skipButton}
-                                onClick={() => {
-                                    props.setStage(UserSelectStage.GuidePrompt);
-                                }}
-                                color={"standard"}
-                            >
-                                Skip Two Factor Setup
-                            </UKButton>
-                        </>
-                    )}
-                </UKCard>
-            )}
-        </>
-    );
+              if (value.length === 6) {
+                setIsTwoFactorCodeValid(
+                  await trpc.authorization.confirmTwoFactor.mutate({
+                    twoFactorCode: value,
+                  }),
+                );
+              }
+            }}
+            supportingText={"*required"}
+            maximumCharacterCount={6}
+          />
+          {!props.requirements()?.twoFactorAuthentication && (
+            <>
+              <UKDivider direction={"horizontal"} />
+              <UKButton
+                class={styles.skipButton}
+                onClick={() => {
+                  props.setStage(UserSelectStage.GuidePrompt);
+                }}
+                color={"standard"}
+              >
+                Skip Two Factor Setup
+              </UKButton>
+            </>
+          )}
+        </UKCard>
+      )}
+    </>
+  );
 };
 
 export default TwoFactorAuthentication;
diff --git a/instance/src/web/src/pages/userSelect/signup/stages/Username/Username.tsx b/instance/src/web/src/pages/userSelect/signup/stages/Username/Username.tsx
index fd7fa03..a0b66c3 100644
--- a/instance/src/web/src/pages/userSelect/signup/stages/Username/Username.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/stages/Username/Username.tsx
@@ -1,3 +1,5 @@
+import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg";
+import { useNavigate } from "@solidjs/router";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
 import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.jsx";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
@@ -5,77 +7,76 @@ import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
 import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
 import clsx from "clsx";
 import type { Accessor, Component, Resource } from "solid-js";
-import styles from "./Username.module.scss";
+import trpc from "../../../../../lib/trpc";
 import { UserSelectStage } from "../../Signup";
-import { useNavigate } from "@solidjs/router";
 import modalStyles from "../../Signup.module.scss";
-import trpc from "../../../../../lib/trpc";
+import styles from "./Username.module.scss";
 
 const Username: Component<{
-    setStage(stage: UserSelectStage): void;
-    username: Accessor<string>;
-    setUsername(username: string): void;
-    requirements: Resource<{
-        email: boolean;
-    }>;
-    isUsernameValid: Accessor<boolean>;
-    setIsUsernameValid(isValid: boolean): void;
+  setStage(stage: UserSelectStage): void;
+  username: Accessor<string>;
+  setUsername(username: string): void;
+  requirements: Resource<{
+    email: boolean;
+  }>;
+  isUsernameValid: Accessor<boolean>;
+  setIsUsernameValid(isValid: boolean): void;
 }> = (props) => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    return (
-        <>
-            <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.usernameStage)}>
-                <UKText role={"title"} size={"l"} emphasized={true}>
-                    Signup
-                </UKText>
-                <UKDivider direction={"horizontal"} />
-                <UKTextField
-                    leadingIcon={{ icon: "person" }}
-                    color={"outlined"}
-                    label={"Username*"}
-                    supportingText={"*required"}
-                    defaultValue={props.username()}
-                    getValue={async (val) => {
-                        props.setUsername(val);
+  return (
+    <>
+      <UKCard color={"filled"} class={clsx(modalStyles.modal, styles.usernameStage)}>
+        <UKText role={"title"} size={"l"} emphasized={true}>
+          Signup
+        </UKText>
+        <UKDivider direction={"horizontal"} />
+        <UKTextField
+          leadingIcon={{ icon: PERSON_ICON }}
+          color={"outlined"}
+          label={"Username*"}
+          supportingText={"*required"}
+          defaultValue={props.username()}
+          getValue={async (val) => {
+            props.setUsername(val);
 
-                        if (await trpc.authorization.isUsernameValid.query(val)) {
-                            props.setIsUsernameValid(true);
-                        } else {
-                            props.setIsUsernameValid(false);
-                        }
-                    }}
-                    onSubmit={() => {
-                        if (props.username() !== "") props.setStage(UserSelectStage.Email);
-                    }}
-                />
-                <div class={styles.stageButtons}>
-                    <UKButton
-                        disabled={props.username() === "" || !props.isUsernameValid()}
-                        onClick={() => {
-                            if (props.requirements()?.email) {
-                                props.setStage(UserSelectStage.Email);
-                            } else {
-                                props.setStage(UserSelectStage.Password);
-                            }
-                        }}
-                        color={"filled"}
-                    >
-                        Continue
-                    </UKButton>
-                </div>
-                <UKDivider direction={"horizontal"} />
-                <div class={styles.loginSegment}>
-                    <UKText role={"body"} size={"m"}>
-                        Already have an account?
-                    </UKText>
-                    <UKButton onClick={() => navigate("/")} color={"tonal"}>
-                        Login
-                    </UKButton>
-                </div>
-            </UKCard>
-        </>
-    );
+            if (await trpc.authorization.isUsernameValid.query(val)) {
+              props.setIsUsernameValid(true);
+            } else {
+              props.setIsUsernameValid(false);
+            }
+          }}
+          onSubmit={() => {
+            if (props.username() !== "") props.setStage(UserSelectStage.Email);
+          }}
+        />
+        <div class={styles.stageButtons}>
+          <UKButton
+            disabled={props.username() === "" || !props.isUsernameValid()}
+            onClick={() => {
+              if (props.requirements()?.email) {
+                props.setStage(UserSelectStage.Email);
+              } else {
+                props.setStage(UserSelectStage.Password);
+              }
+            }}
+            color={"filled"}
+          >
+            Continue
+          </UKButton>
+        </div>
+        <UKDivider direction={"horizontal"} />
+        <div class={styles.loginSegment}>
+          <UKText role={"body"} size={"m"}>
+            Already have an account?
+          </UKText>
+          <UKButton onClick={() => navigate("/")} color={"tonal"}>
+            Login
+          </UKButton>
+        </div>
+      </UKCard>
+    </>
+  );
 };
 
 export default Username;
diff --git a/instance/src/web/src/pages/userSelect/signup/stages/VerifyEmail/VerifyEmail.tsx b/instance/src/web/src/pages/userSelect/signup/stages/VerifyEmail/VerifyEmail.tsx
index 219606e..adfb5f3 100644
--- a/instance/src/web/src/pages/userSelect/signup/stages/VerifyEmail/VerifyEmail.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/stages/VerifyEmail/VerifyEmail.tsx
@@ -1,71 +1,71 @@
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
 import UKCard from "@tcsw/uikit-solid/src/components/card/UKCard.jsx";
-import { createSignal, type Accessor, type Component } from "solid-js";
-import { UserSelectStage } from "../../Signup";
-import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
 import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
-import styles from "./VerifyEmail.module.scss";
-import modalStyles from "../../Signup.module.scss";
+import UKTextField from "@tcsw/uikit-solid/src/components/textField/UKTextField.jsx";
+import { type Accessor, type Component, createSignal } from "solid-js";
 import trpc from "../../../../../lib/trpc";
+import { UserSelectStage } from "../../Signup";
+import modalStyles from "../../Signup.module.scss";
+import styles from "./VerifyEmail.module.scss";
 
 const VerifyEmail: Component<{
-    emailAddress: Accessor<string>;
-    emailCode: Accessor<string>;
-    setEmailCode(emailCode: string): void;
-    setStage(stage: UserSelectStage): void;
-    isEmailCodeValid: Accessor<boolean>;
-    setIsEmailCodeValid(isValid: boolean): void;
+  emailAddress: Accessor<string>;
+  emailCode: Accessor<string>;
+  setEmailCode(emailCode: string): void;
+  setStage(stage: UserSelectStage): void;
+  isEmailCodeValid: Accessor<boolean>;
+  setIsEmailCodeValid(isValid: boolean): void;
 }> = (props) => {
-    return (
-        <>
-            <UKCard color={"filled"} class={modalStyles.modal}>
-                <UKText role={"title"} size={"l"} emphasized={true}>
-                    Verify Email
-                </UKText>
-                <UKDivider direction={"horizontal"} />
-                <UKText role={"body"} size={"m"}>
-                    Please enter the code which was sent to the email you provided to continue.
-                </UKText>
-                <UKTextField
-                    color={"outlined"}
-                    label={"Email Verification Code*"}
-                    defaultValue={props.emailCode()}
-                    getValue={async (value) => {
-                        props.setEmailCode(value);
+  return (
+    <>
+      <UKCard color={"filled"} class={modalStyles.modal}>
+        <UKText role={"title"} size={"l"} emphasized={true}>
+          Verify Email
+        </UKText>
+        <UKDivider direction={"horizontal"} />
+        <UKText role={"body"} size={"m"}>
+          Please enter the code which was sent to the email you provided to continue.
+        </UKText>
+        <UKTextField
+          color={"outlined"}
+          label={"Email Verification Code*"}
+          defaultValue={props.emailCode()}
+          getValue={async (value) => {
+            props.setEmailCode(value);
 
-                        props.setIsEmailCodeValid(
-                            await trpc.authorization.validateEmailCode.query({
-                                emailAddress: props.emailAddress(),
-                                emailCode: props.emailCode(),
-                            }),
-                        );
-                    }}
-                    maximumCharacterCount={8}
-                    supportingText={"*required"}
-                />
-                <div class={modalStyles.stageButtons}>
-                    <UKButton
-                        onClick={() => {
-                            props.setStage(UserSelectStage.Email);
-                        }}
-                        color={"tonal"}
-                    >
-                        Back
-                    </UKButton>
-                    <UKButton
-                        disabled={props.emailCode() === "" || !props.isEmailCodeValid()}
-                        onClick={() => {
-                            props.setStage(UserSelectStage.Password);
-                        }}
-                        color={"filled"}
-                    >
-                        Continue
-                    </UKButton>
-                </div>
-            </UKCard>
-        </>
-    );
+            props.setIsEmailCodeValid(
+              await trpc.authorization.validateEmailCode.query({
+                emailAddress: props.emailAddress(),
+                emailCode: props.emailCode(),
+              }),
+            );
+          }}
+          maximumCharacterCount={8}
+          supportingText={"*required"}
+        />
+        <div class={modalStyles.stageButtons}>
+          <UKButton
+            onClick={() => {
+              props.setStage(UserSelectStage.Email);
+            }}
+            color={"tonal"}
+          >
+            Back
+          </UKButton>
+          <UKButton
+            disabled={props.emailCode() === "" || !props.isEmailCodeValid()}
+            onClick={() => {
+              props.setStage(UserSelectStage.Password);
+            }}
+            color={"filled"}
+          >
+            Continue
+          </UKButton>
+        </div>
+      </UKCard>
+    </>
+  );
 };
 
 export default VerifyEmail;
diff --git a/instance/src/web/vite.config.ts b/instance/src/web/vite.config.ts
index bb967c6..67ec3a6 100644
--- a/instance/src/web/vite.config.ts
+++ b/instance/src/web/vite.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
   ],
   server: {
     host: true,
+    allowedHosts: [process.env.ALLOW_HOST || "localhost", "localhost"],
   },
   resolve: {
     alias: {