diff --git a/.gitignore b/.gitignore
index b67af474..623ad58e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ vite.config.ts.timestamp-*
 # Other package managers
 package-lock.json
 yarn.lock
+
+.claude
diff --git a/src/lib/components/auth/login-form.svelte b/src/lib/components/auth/login-form.svelte
new file mode 100644
index 00000000..324cdb11
--- /dev/null
+++ b/src/lib/components/auth/login-form.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button/index.js';
+  import * as Card from '$lib/components/ui/card/index.js';
+  import {
+    FieldGroup,
+    Field,
+    FieldDescription,
+    FieldSeparator,
+  } from '$lib/components/ui/field/index.js';
+  import { cn } from '$lib/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import TextInput from '../input/TextInput.svelte';
+  import type { ValidationResult } from '$lib/types/ValidationResult';
+  import PasswordInput from '../input/PasswordInput.svelte';
+  let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+  import Turnstile from '$lib/components/Turnstile.svelte';
+  import { resolve } from '$app/paths';
+  import { accountV2Api } from '$lib/api';
+  import { UserStore } from '$lib/stores/UserStore';
+  import { initializeSignalR } from '$lib/signalr';
+  import { goto } from '$app/navigation';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { isValidationError, mapToValRes } from '$lib/errorhandling/ValidationProblemDetails';
+  import { page } from '$app/state';
+  import OauthButtons from './oauth-buttons.svelte';
+
+  let usernameOrEmail = $state('');
+  let password = $state('');
+  let turnstileResponse = $state<string | null>(null);
+
+  let usernameError = $state<ValidationResult | null>(null);
+  let passwordError = $state<ValidationResult | null>(null);
+
+  async function handleSubmission(e: SubmitEvent) {
+    e.preventDefault();
+
+    if (!usernameOrEmail || !password || !turnstileResponse) {
+      return;
+    }
+
+    try {
+      const account = await accountV2Api.accountLoginV2({
+        usernameOrEmail,
+        password,
+        turnstileResponse,
+      });
+      UserStore.setSelf({
+        id: account.accountId,
+        name: account.accountName,
+        avatar: account.profileImage,
+        email: account.accountEmail,
+        roles: account.accountRoles,
+      });
+      await initializeSignalR();
+      goto(page.url.searchParams.get('redirect') ?? '/home');
+    } catch (error) {
+      await handleApiError(error, (problem) => {
+        if (!isValidationError(problem)) return false;
+        usernameError = mapToValRes(problem, 'UsernameOrEmail');
+        passwordError = mapToValRes(problem, 'Password');
+        return true;
+      });
+    }
+  }
+
+  let canSubmit = $derived(
+    usernameOrEmail.length > 0 && password.length > 0 && turnstileResponse != null
+  );
+</script>
+
+<div class={cn('flex max-w-sm flex-col gap-6', className)} {...restProps}>
+  <Card.Root>
+    <Card.Header class="text-center">
+      <Card.Title class="text-xl">Welcome back</Card.Title>
+      <Card.Description>Login with your Discord or Twitter account</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <FieldGroup>
+        <OauthButtons />
+        <FieldSeparator class="*:data-[slot=field-separator-content]:bg-card">
+          Or continue with
+        </FieldSeparator>
+        <form onsubmit={handleSubmission}>
+          <div>
+            <div class="my-1 flex flex-col gap-1">
+              <TextInput
+                label="Username or Email"
+                autocomplete="username"
+                bind:value={usernameOrEmail}
+                validationResult={usernameError}
+              />
+
+              <PasswordInput
+                label="Password"
+                autocomplete="current-password"
+                bind:value={password}
+                validate={passwordError}
+              />
+
+              <Turnstile action="signin" bind:response={turnstileResponse} />
+            </div>
+            <Field class="mt-5">
+              <Button type="submit" disabled={!canSubmit}>Login</Button>
+              <FieldDescription class="text-center">
+                Don't have an account? <a href={resolve('/signup')}>Sign up</a>
+              </FieldDescription>
+            </Field>
+          </div>
+        </form>
+      </FieldGroup>
+    </Card.Content>
+  </Card.Root>
+  <FieldDescription class="px-6 text-center">
+    By clicking continue, you agree to our <a href="https://openshock.org/tos" target="_blank"
+      >Terms of Service</a
+    >
+    and <a href="https://openshock.org/privacy" target="_blank">Privacy Policy</a>.
+  </FieldDescription>
+</div>
diff --git a/src/lib/components/auth/oauth-buttons.svelte b/src/lib/components/auth/oauth-buttons.svelte
new file mode 100644
index 00000000..09fe23f7
--- /dev/null
+++ b/src/lib/components/auth/oauth-buttons.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { Field } from '$lib/components/ui/field/index.js';
+  import { GetOAuthAuthorizeUrl } from '$lib/api/next/oauth';
+  import XLogo from '../svg/XLogo.svelte';
+  import DiscordLogo from '../svg/DiscordLogo.svelte';
+  import GoogleLogo from '../svg/GoogleLogo.svelte';
+  import { LogIn } from '@lucide/svelte';
+  import { backendMetadata } from '$lib/state/BackendMetadata.svelte';
+
+  const providerDetails: Record<string, { icon: typeof XLogo; label: string }> = {
+    discord: { icon: DiscordLogo, label: 'Discord' },
+    twitter: { icon: XLogo, label: 'X (Twitter)' },
+    google: { icon: GoogleLogo, label: 'Google' },
+  };
+</script>
+
+<Field>
+  {#each backendMetadata.State.oAuthProviders as provider (provider)}
+    {@const detail = providerDetails[provider]}
+    <form action={GetOAuthAuthorizeUrl(provider, 'LoginOrCreate')} method="POST">
+      <Button variant="outline" type="submit" class="w-full">
+        {#if detail}
+          <detail.icon></detail.icon>
+        {:else}
+          <LogIn />
+        {/if}
+        Login with {detail?.label ?? provider}
+      </Button>
+    </form>
+  {/each}
+</Field>
diff --git a/src/lib/components/auth/signup-form.svelte b/src/lib/components/auth/signup-form.svelte
new file mode 100644
index 00000000..7b29b267
--- /dev/null
+++ b/src/lib/components/auth/signup-form.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import * as Card from '$lib/components/ui/card/index.js';
+  import * as Field from '$lib/components/ui/field/index.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import UsernameInput from '../input/UsernameInput.svelte';
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { accountV2Api } from '$lib/api';
+  import Turnstile from '$lib/components/Turnstile.svelte';
+  import EmailInput from '$lib/components/input/EmailInput.svelte';
+  import PasswordInput from '$lib/components/input/PasswordInput.svelte';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { isValidationError, mapToValRes } from '$lib/errorhandling/ValidationProblemDetails';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { validatePasswordMatch } from '$lib/inputvalidation/passwordValidator';
+  import { toast } from 'svelte-sonner';
+  import FieldSeparator from '../ui/field/field-separator.svelte';
+  import OauthButtons from './oauth-buttons.svelte';
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+
+  let username = $state<string>('');
+  let usernameValid = $state<boolean>(false);
+
+  let email = $state('');
+  let emailValid = $state(false);
+
+  let password = $state('');
+  let passwordValid = $state(false);
+
+  let passwordConfirm = $state('');
+
+  let turnstileResponse = $state<string | null>(null);
+
+  let canSubmit = $derived(
+    usernameValid && emailValid && passwordValid && password == passwordConfirm && turnstileResponse
+  );
+
+  let accountCreated = $state(false);
+
+  function onOpenChange(open: boolean) {
+    if (!open) {
+      accountCreated = false;
+      toast.success(
+        'Account created successfully. Please check your email to verify your account.'
+      );
+      goto(resolve('/login'));
+    }
+  }
+
+  async function handleSubmission(e: SubmitEvent) {
+    e.preventDefault();
+
+    if (!username || !email || !password || !passwordConfirm || !turnstileResponse) {
+      return;
+    }
+
+    try {
+      await accountV2Api.accountSignUpV2({
+        username,
+        password,
+        email,
+        turnstileResponse,
+      });
+      accountCreated = true;
+    } catch (error) {
+      await handleApiError(error, (problem) => {
+        if (!isValidationError(problem)) return false;
+
+        console.log(mapToValRes(problem, 'Username'));
+        console.log(mapToValRes(problem, 'Password'));
+        console.log(mapToValRes(problem, 'Email'));
+        console.log(mapToValRes(problem, 'TurnstileResponse'));
+
+        return true;
+      });
+    }
+  }
+</script>
+
+<Dialog.Root bind:open={() => accountCreated, onOpenChange}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Welcome! Thank you for signing up! ❤️</Dialog.Title>
+      <Dialog.Description>
+        <div class="flex flex-col gap-4">
+          <p>Your account has been created. 🎉 Please check your email to verify your account.</p>
+          <p>After verifying your email, you can log in to your account.</p>
+
+          <Button variant="default" size="sm" class="mt-4" onclick={() => goto(resolve('/login'))}
+            >Ok</Button
+          >
+        </div>
+      </Dialog.Description>
+    </Dialog.Header>
+  </Dialog.Content>
+</Dialog.Root>
+
+<div class={cn('flex max-w-sm flex-col gap-6', className)} {...restProps}>
+  <Card.Root>
+    <Card.Header class="text-center">
+      <Card.Title class="text-xl">Create your account</Card.Title>
+      <Card.Description>Enter your email below to create your account</Card.Description>
+    </Card.Header>
+    <Card.Content>
+      <Field.Group>
+        <OauthButtons />
+        <FieldSeparator class="*:data-[slot=field-separator-content]:bg-card">
+          Or continue with
+        </FieldSeparator>
+
+        <form onsubmit={handleSubmission}>
+          <div class="my-1 flex flex-col gap-1">
+            <UsernameInput
+              label="Username"
+              placeholder="John OpenShock"
+              bind:value={username}
+              bind:valid={usernameValid}
+            />
+            <EmailInput
+              label="Email"
+              placeholder="john@example.com"
+              bind:value={email}
+              bind:valid={emailValid}
+            />
+            <PasswordInput
+              label="Password"
+              placeholder="Password"
+              autocomplete="new-password"
+              bind:value={password}
+              bind:valid={passwordValid}
+              validate
+              showStrengthMeter
+              showForget={false}
+            />
+            <PasswordInput
+              label="Confirm Password"
+              placeholder="Confirm Password"
+              autocomplete="new-password"
+              bind:value={passwordConfirm}
+              validate={validatePasswordMatch(passwordConfirm, password)}
+              showForget={false}
+            />
+            <Turnstile action="signup" bind:response={turnstileResponse} />
+          </div>
+          <Field.Field class="mt-5">
+            <Button type="submit" disabled={!canSubmit}>Create Account</Button>
+            <Field.Description class="text-center">
+              Already have an account? <a href={resolve('/login')}>Sign in</a>
+            </Field.Description>
+          </Field.Field>
+        </form>
+      </Field.Group>
+    </Card.Content>
+  </Card.Root>
+  <Field.Description class="px-6 text-center">
+    By clicking continue, you agree to our <a href="https://openshock.org/tos">Terms of Service</a>
+    and <a href="https://openshock.org/privacy">Privacy Policy</a>.
+  </Field.Description>
+</div>
diff --git a/src/lib/components/input/PasswordInput.svelte b/src/lib/components/input/PasswordInput.svelte
index 267ab7dc..fd347659 100644
--- a/src/lib/components/input/PasswordInput.svelte
+++ b/src/lib/components/input/PasswordInput.svelte
@@ -11,6 +11,8 @@
   import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
   import PasswordStrengthMeter from './impl/PasswordStrengthMeter.svelte';
+  import { FieldLabel } from '../ui/field';
+  import { resolve } from '$app/paths';
 
   interface Props {
     label: string;
@@ -22,6 +24,7 @@
     validate?: boolean | 'string' | 'pwned' | ValidationResult | null;
     showStrengthMeter?: boolean;
     Icon?: AnyComponent;
+    showForget?: boolean;
   }
 
   let {
@@ -34,6 +37,7 @@
     validate = false,
     showStrengthMeter = false,
     Icon,
+    showForget = true,
   }: Props = $props();
 
   let validationResult = $state<ValidationResult | null>(null);
@@ -127,7 +131,6 @@
 
 <TextInput
   type={valueShown ? 'text' : 'password'}
-  {label}
   {placeholder}
   {autocomplete}
   bind:value
@@ -136,13 +139,26 @@
   onblur={() => (showPopup = false)}
   popup={showPopup ? (popup as Snippet) : undefined}
 >
+  {#snippet labelSnippet(id: string)}
+    <div class="flex items-center">
+      <FieldLabel for={id}>{label}</FieldLabel>
+      {#if showForget}
+        <a
+          href={resolve('/forgot-password')}
+          class="ms-auto text-sm underline-offset-4 hover:underline"
+        >
+          Forgot your password?
+        </a>
+      {/if}
+    </div>
+  {/snippet}
   {#snippet after()}
     <Button
       type="button"
-      class="cursor-pointer"
+      class="h-7 w-7 cursor-pointer"
       onclick={() => (valueShown = !valueShown)}
       variant="ghost"
-      disabled={value.length == 0}
+      size="icon"
     >
       {#if valueShown}
         <EyeOff />
diff --git a/src/lib/components/input/TextInput.svelte b/src/lib/components/input/TextInput.svelte
index a07ebf0d..73a15ede 100644
--- a/src/lib/components/input/TextInput.svelte
+++ b/src/lib/components/input/TextInput.svelte
@@ -5,10 +5,18 @@
   import { cn } from '$lib/utils/shadcn.js';
   import type { Snippet } from 'svelte';
   import type { ClipboardEventHandler, FocusEventHandler, FullAutoFill } from 'svelte/elements';
+  import {
+    FieldGroup,
+    Field,
+    FieldLabel,
+    FieldDescription,
+    FieldSeparator,
+  } from '$lib/components/ui/field/index.js';
 
   interface Props {
     type?: 'text' | 'email' | 'password' | 'search' | 'url';
     label?: string;
+    labelSnippet?: Snippet<[string]>;
     placeholder?: string;
     autocomplete?: FullAutoFill;
     value: string;
@@ -25,6 +33,7 @@
   let {
     type = 'text',
     label,
+    labelSnippet,
     placeholder,
     autocomplete,
     value = $bindable(),
@@ -37,42 +46,60 @@
   }: Props = $props();
 </script>
 
-<label class="w-full">
+<Field>
+  {#if labelSnippet}
+    {@render labelSnippet(id)}
+  {/if}
+
   {#if label}
-    <span>{label}</span>
+    <FieldLabel for={id}>{label}</FieldLabel>
   {/if}
+
   <div class="relative flex grow flex-row items-center gap-2">
     {#if Icon}
       <Icon />
     {/if}
-    <Input
-      {type}
-      class="grow"
-      title={label}
-      {placeholder}
-      {autocomplete}
-      bind:value
-      {onblur}
-      {onpaste}
-      aria-invalid={validationResult ? !validationResult.valid : undefined}
-      aria-describedby={validationResult?.message ? validationId : undefined}
-    />
+    <div
+      class={cn(
+        'flex w-full items-center',
+        after &&
+          'border-input bg-background dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40 has-[input[aria-invalid=true]]:border-destructive h-9 rounded-md border pr-1 shadow-xs transition-[color,box-shadow] has-[input:focus-visible]:ring-[3px]'
+      )}
+    >
+      <Input
+        {id}
+        {type}
+        class={cn(
+          after
+            ? 'flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent'
+            : 'grow'
+        )}
+        title={label}
+        {placeholder}
+        {autocomplete}
+        bind:value
+        {onblur}
+        {onpaste}
+        aria-invalid={validationResult ? !validationResult.valid : undefined}
+        aria-describedby={validationResult?.message ? validationId : undefined}
+      />
+      {#if after}
+        {@render after()}
+      {/if}
+    </div>
     {#if popup}
       <div
-        class="absolute top-full left-0 z-10 mt-1 w-full rounded-md border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+        class="absolute top-full left-0 z-10 mt-1 w-full rounded-md border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800"
         role="tooltip"
       >
         {@render popup()}
       </div>
     {/if}
-    {#if after}
-      {@render after()}
-    {/if}
   </div>
   {#if validationResult?.message}
     <p
       id={validationId}
-      class={cn('mt-0! h-4 truncate text-xs', `text-${GetValResColor(validationResult)}`)}
+      class={cn('-mt-2! mb-2 h-4 truncate text-xs', `text-${GetValResColor(validationResult)}`)}
       role="status"
       aria-atomic="true"
       aria-live="polite"
@@ -90,6 +117,6 @@
       {/if}
     </p>
   {:else}
-    <div class="h-4" aria-hidden="true"></div>
+    <div class="-mt-2! mb-2 h-4" aria-hidden="true"></div>
   {/if}
-</label>
+</Field>
diff --git a/src/lib/components/svg/DiscordIcon.svelte b/src/lib/components/svg/DiscordIcon.svelte
deleted file mode 100644
index 6421e5eb..00000000
--- a/src/lib/components/svg/DiscordIcon.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-  }
-
-  let props: Props = $props();
-</script>
-
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={props.class}>
-  <title>Discord</title>
-  <path
-    d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
-  />
-</svg>
diff --git a/src/lib/components/svg/DiscordLogo.svelte b/src/lib/components/svg/DiscordLogo.svelte
index 11177887..e98bbaf9 100644
--- a/src/lib/components/svg/DiscordLogo.svelte
+++ b/src/lib/components/svg/DiscordLogo.svelte
@@ -3,7 +3,7 @@
     class?: string;
   }
 
-  let props: Props = $props();
+  let { class: className = 'fill-black dark:fill-white' }: Props = $props();
 </script>
 
 <!--
@@ -16,9 +16,9 @@
   viewBox="0 0 127.14 96.36"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class={className}
 >
   <path
-    class={props.class}
     d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
   />
 </svg>
diff --git a/src/lib/components/svg/GithubIcon.svelte b/src/lib/components/svg/GithubIcon.svelte
index a18a5269..4ee0e2ab 100644
--- a/src/lib/components/svg/GithubIcon.svelte
+++ b/src/lib/components/svg/GithubIcon.svelte
@@ -3,11 +3,16 @@
     class?: string;
   }
 
-  let props: Props = $props();
+  let { class: className = 'fill-black dark:fill-white' }: Props = $props();
 </script>
 
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={props.class}>
-  <title>GitHub</title>
+<svg
+  role="img"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+>
   <path
     d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
   />
diff --git a/src/lib/components/svg/GoogleLogo.svelte b/src/lib/components/svg/GoogleLogo.svelte
new file mode 100644
index 00000000..38304554
--- /dev/null
+++ b/src/lib/components/svg/GoogleLogo.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = 'fill-black dark:fill-white' }: Props = $props();
+</script>
+
+<svg
+  role="img"
+  aria-label="Google"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  ><path
+    d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+  /></svg
+>
diff --git a/src/lib/components/svg/XLogo.svelte b/src/lib/components/svg/XLogo.svelte
new file mode 100644
index 00000000..a774cef8
--- /dev/null
+++ b/src/lib/components/svg/XLogo.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = 'fill-black dark:fill-white' }: Props = $props();
+</script>
+
+<svg
+  role="img"
+  aria-label="X Logo"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  ><path
+    d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"
+  /></svg
+>
diff --git a/src/lib/components/ui/field/field-content.svelte b/src/lib/components/ui/field/field-content.svelte
new file mode 100644
index 00000000..036fbbe2
--- /dev/null
+++ b/src/lib/components/ui/field/field-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-content"
+	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/field/field-description.svelte b/src/lib/components/ui/field/field-description.svelte
new file mode 100644
index 00000000..655f695a
--- /dev/null
+++ b/src/lib/components/ui/field/field-description.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/src/lib/components/ui/field/field-error.svelte b/src/lib/components/ui/field/field-error.svelte
new file mode 100644
index 00000000..bc2913a6
--- /dev/null
+++ b/src/lib/components/ui/field/field-error.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors || errors.length === 0) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn("text-destructive text-sm font-normal", className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ms-4 flex list-disc flex-col gap-1">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/components/ui/field/field-group.svelte b/src/lib/components/ui/field/field-group.svelte
new file mode 100644
index 00000000..a25a55fe
--- /dev/null
+++ b/src/lib/components/ui/field/field-group.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-group"
+	class={cn(
+		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/field/field-label.svelte b/src/lib/components/ui/field/field-label.svelte
new file mode 100644
index 00000000..5257b92b
--- /dev/null
+++ b/src/lib/components/ui/field/field-label.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn } from "$lib/utils/shadcn.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+		"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>
diff --git a/src/lib/components/ui/field/field-legend.svelte b/src/lib/components/ui/field/field-legend.svelte
new file mode 100644
index 00000000..77068e28
--- /dev/null
+++ b/src/lib/components/ui/field/field-legend.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "legend",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		"mb-3 font-medium",
+		"data-[variant=legend]:text-base",
+		"data-[variant=label]:text-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>
diff --git a/src/lib/components/ui/field/field-separator.svelte b/src/lib/components/ui/field/field-separator.svelte
new file mode 100644
index 00000000..498e8c6a
--- /dev/null
+++ b/src/lib/components/ui/field/field-separator.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+	} = $props();
+
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn(
+		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+		className
+	)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>
diff --git a/src/lib/components/ui/field/field-set.svelte b/src/lib/components/ui/field/field-set.svelte
new file mode 100644
index 00000000..03f24699
--- /dev/null
+++ b/src/lib/components/ui/field/field-set.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn(
+		"flex flex-col gap-6",
+		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>
diff --git a/src/lib/components/ui/field/field-title.svelte b/src/lib/components/ui/field/field-title.svelte
new file mode 100644
index 00000000..02415109
--- /dev/null
+++ b/src/lib/components/ui/field/field-title.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-title"
+	class={cn(
+		"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/field/field.svelte b/src/lib/components/ui/field/field.svelte
new file mode 100644
index 00000000..c4a5f1ad
--- /dev/null
+++ b/src/lib/components/ui/field/field.svelte
@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const fieldVariants = tv({
+		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+		variants: {
+			orientation: {
+				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal: [
+					"flex-row items-center",
+					"[&>[data-slot=field-label]]:flex-auto",
+					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+				responsive: [
+					"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/field/index.ts b/src/lib/components/ui/field/index.ts
new file mode 100644
index 00000000..a644a956
--- /dev/null
+++ b/src/lib/components/ui/field/index.ts
@@ -0,0 +1,33 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+
+export {
+	Field,
+	Set,
+	Legend,
+	Group,
+	Content,
+	Label,
+	Title,
+	Description,
+	Separator,
+	Error,
+	//
+	Set as FieldSet,
+	Legend as FieldLegend,
+	Group as FieldGroup,
+	Content as FieldContent,
+	Label as FieldLabel,
+	Title as FieldTitle,
+	Description as FieldDescription,
+	Separator as FieldSeparator,
+	Error as FieldError,
+};
diff --git a/src/routes/(anonymous)/login/+page.svelte b/src/routes/(anonymous)/login/+page.svelte
index 1c7fc727..24be2940 100644
--- a/src/routes/(anonymous)/login/+page.svelte
+++ b/src/routes/(anonymous)/login/+page.svelte
@@ -1,94 +1,17 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
-  import { page } from '$app/state';
-  import { accountV2Api } from '$lib/api';
-  import { GetOAuthAuthorizeUrl } from '$lib/api/next/oauth';
   import Container from '$lib/components/Container.svelte';
-  import Turnstile from '$lib/components/Turnstile.svelte';
-  import PasswordInput from '$lib/components/input/PasswordInput.svelte';
-  import TextInput from '$lib/components/input/TextInput.svelte';
-  import { Button } from '$lib/components/ui/button';
-  import { isValidationError, mapToValRes } from '$lib/errorhandling/ValidationProblemDetails';
-  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
-  import { initializeSignalR } from '$lib/signalr';
-  import { UserStore } from '$lib/stores/UserStore';
-  import type { ValidationResult } from '$lib/types/ValidationResult';
-
-  let usernameOrEmail = $state('');
-  let password = $state('');
-  let turnstileResponse = $state<string | null>(null);
-
-  let usernameError = $state<ValidationResult | null>(null);
-  let passwordError = $state<ValidationResult | null>(null);
-
-  async function handleSubmission(e: SubmitEvent) {
-    e.preventDefault();
-
-    if (!usernameOrEmail || !password || !turnstileResponse) {
-      return;
-    }
-
-    try {
-      const account = await accountV2Api.accountLoginV2({
-        usernameOrEmail,
-        password,
-        turnstileResponse,
-      });
-      UserStore.setSelf({
-        id: account.accountId,
-        name: account.accountName,
-        avatar: account.profileImage,
-        email: account.accountEmail,
-        roles: account.accountRoles,
-      });
-      await initializeSignalR();
-      goto(page.url.searchParams.get('redirect') ?? '/home');
-    } catch (error) {
-      await handleApiError(error, (problem) => {
-        if (!isValidationError(problem)) return false;
-        usernameError = mapToValRes(problem, 'UsernameOrEmail');
-        passwordError = mapToValRes(problem, 'Password');
-        return true;
-      });
-    }
-  }
-
-  let canSubmit = $derived(
-    usernameOrEmail.length > 0 && password.length > 0 && turnstileResponse != null
-  );
+  import LoginForm from '$lib/components/auth/login-form.svelte';
+  import { asset, resolve } from '$app/paths';
 </script>
 
-<Container class="items-center">
-  <form class="flex flex-col gap-2" onsubmit={handleSubmission}>
-    <div class="text-3xl font-semibold">Login</div>
-
-    <TextInput
-      label="Username or Email"
-      placeholder="Username or Email"
-      autocomplete="username"
-      bind:value={usernameOrEmail}
-      validationResult={usernameError}
+<Container class="items-center-safe justify-center-safe p-4">
+  <span class="flex items-center gap-2 self-center font-medium">
+    <img class="ml-[0.667px] h-7.5" src={asset('/IconSpinning.svg')} alt="OpenShock Logo" />
+    <img
+      class="h-7.5 transition-opacity delay-100 duration-200 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:delay-0"
+      src={asset('/LogoTextOnly.svg')}
+      alt="OpenShock Logo"
     />
-
-    <PasswordInput
-      label="Password"
-      placeholder="Password"
-      autocomplete="current-password"
-      bind:value={password}
-      validate={passwordError}
-    />
-
-    <Turnstile action="signin" bind:response={turnstileResponse} />
-
-    <Button type="submit" disabled={!canSubmit}>Log In</Button>
-
-    <a class=" text-sm opacity-75 hover:underline" href={resolve('/forgot-password')}>
-      Forgot your password?
-    </a>
-  </form>
-
-  <form action={GetOAuthAuthorizeUrl('discord', 'LoginOrCreate')} method="POST">
-    <Button type="submit">Log In With Discord</Button>
-  </form>
+  </span>
+  <LoginForm />
 </Container>
diff --git a/src/routes/(anonymous)/oauth/[provider]/create/+page.svelte b/src/routes/(anonymous)/oauth/[provider]/create/+page.svelte
index 1c4e5f8e..38c5e3d6 100644
--- a/src/routes/(anonymous)/oauth/[provider]/create/+page.svelte
+++ b/src/routes/(anonymous)/oauth/[provider]/create/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import { page } from '$app/state';
   import { OAuthSignupFinalize, OAuthSignupGetData } from '$lib/api/next/oauth';
   import Container from '$lib/components/Container.svelte';
@@ -48,7 +49,7 @@
         roles: account.accountRoles,
       });
 
-      goto('/home');
+      goto(resolve('/home'));
     } catch (error) {
       await handleApiError(error, (problem) => {
         if (!isValidationError(problem)) return false;
diff --git a/src/routes/(anonymous)/signup/+page.svelte b/src/routes/(anonymous)/signup/+page.svelte
index 7a24a02c..1a8ec869 100644
--- a/src/routes/(anonymous)/signup/+page.svelte
+++ b/src/routes/(anonymous)/signup/+page.svelte
@@ -1,133 +1,17 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { accountV2Api } from '$lib/api';
+  import { asset } from '$app/paths';
   import Container from '$lib/components/Container.svelte';
-  import Turnstile from '$lib/components/Turnstile.svelte';
-  import EmailInput from '$lib/components/input/EmailInput.svelte';
-  import PasswordInput from '$lib/components/input/PasswordInput.svelte';
-  import UsernameInput from '$lib/components/input/UsernameInput.svelte';
-  import { Button } from '$lib/components/ui/button';
-  import * as Dialog from '$lib/components/ui/dialog';
-  import { isValidationError, mapToValRes } from '$lib/errorhandling/ValidationProblemDetails';
-  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
-  import { validatePasswordMatch } from '$lib/inputvalidation/passwordValidator';
-  import { toast } from 'svelte-sonner';
-
-  let username = $state<string>('');
-  let usernameValid = $state<boolean>(false);
-
-  let email = $state('');
-  let emailValid = $state(false);
-
-  let password = $state('');
-  let passwordValid = $state(false);
-
-  let passwordConfirm = $state('');
-
-  let turnstileResponse = $state<string | null>(null);
-
-  let canSubmit = $derived(
-    usernameValid && emailValid && passwordValid && password == passwordConfirm && turnstileResponse
-  );
-
-  let accountCreated = $state(false);
-
-  function onOpenChange(open: boolean) {
-    if (!open) {
-      accountCreated = false;
-      toast.success(
-        'Account created successfully. Please check your email to verify your account.'
-      );
-      goto('/login');
-    }
-  }
-
-  async function handleSubmission(e: SubmitEvent) {
-    e.preventDefault();
-
-    if (!username || !email || !password || !passwordConfirm || !turnstileResponse) {
-      return;
-    }
-
-    try {
-      await accountV2Api.accountSignUpV2({
-        username,
-        password,
-        email,
-        turnstileResponse,
-      });
-      accountCreated = true;
-    } catch (error) {
-      await handleApiError(error, (problem) => {
-        if (!isValidationError(problem)) return false;
-
-        console.log(mapToValRes(problem, 'Username'));
-        console.log(mapToValRes(problem, 'Password'));
-        console.log(mapToValRes(problem, 'Email'));
-        console.log(mapToValRes(problem, 'TurnstileResponse'));
-
-        return true;
-      });
-    } finally {
-      turnstileResponse = null;
-    }
-  }
-
-  let ack = $state(false);
+  import SignupForm from '$lib/components/auth/signup-form.svelte';
 </script>
 
-<Dialog.Root bind:open={() => accountCreated, onOpenChange}>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>Account created</Dialog.Title>
-      <Dialog.Description>
-        Your account has been created. Please check your email to verify your account.
-
-        <!-- TODO: button to go to login screen -->
-      </Dialog.Description>
-    </Dialog.Header>
-  </Dialog.Content>
-</Dialog.Root>
-
-<Container class="items-center">
-  {#if !ack}
-    <div class="text-5xl font-semibold text-nowrap text-red-500">
-      Do not use this frontend to register a new account, this is a WIP, please go to
-      https://openshock.app
-    </div>
-    <Button variant="destructive" onclick={() => (ack = true)}>
-      I acknowledge that I have read this message and that this frontend is not functional yet.
-    </Button>
-  {:else}
-    <form class="flex flex-col gap-2" onsubmit={handleSubmission}>
-      <div class="text-3xl font-semibold text-nowrap">Sign Up</div>
-      <UsernameInput
-        label="Username"
-        placeholder="Username"
-        bind:value={username}
-        bind:valid={usernameValid}
-      />
-      <EmailInput label="Email" placeholder="Email" bind:value={email} bind:valid={emailValid} />
-      <PasswordInput
-        label="Password"
-        placeholder="Password"
-        autocomplete="new-password"
-        bind:value={password}
-        bind:valid={passwordValid}
-        validate
-        showStrengthMeter
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        autocomplete="new-password"
-        bind:value={passwordConfirm}
-        validate={validatePasswordMatch(passwordConfirm, password)}
-      />
-
-      <Turnstile action="signup" bind:response={turnstileResponse} />
-
-      <Button type="submit" disabled={!canSubmit}>Sign Up</Button>
-    </form>
-  {/if}
+<Container class="items-center-safe justify-center-safe p-4">
+  <span class="flex items-center gap-2 self-center font-medium">
+    <img class="ml-[0.667px] h-7.5" src={asset('/IconSpinning.svg')} alt="OpenShock Logo" />
+    <img
+      class="h-7.5 transition-opacity delay-100 duration-200 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:delay-0"
+      src={asset('/LogoTextOnly.svg')}
+      alt="OpenShock Logo"
+    />
+  </span>
+  <SignupForm />
 </Container>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 2e6e39f9..1bf129d7 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -2,25 +2,59 @@
   import { HubConnectionState } from '@microsoft/signalr';
   import { PUBLIC_GITHUB_PROJECT_URL } from '$env/static/public';
   import { SignalR_State } from '$lib/signalr';
+  import { Wifi, WifiOff } from '@lucide/svelte';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+  import { Button } from '$lib/components/ui/button';
   import { backendMetadata } from '$lib/state/BackendMetadata.svelte';
 </script>
 
-<footer class="bottom-0 flex flex-none items-center justify-between px-2 text-sm">
+<footer
+  class="text-muted-foreground text-sm-foreground bottom-0 flex flex-none items-center justify-between px-2"
+>
   <div>
     Made with
     <span style="color: #e25555;">&#9829;</span>
     by the <a target="_blank" href={PUBLIC_GITHUB_PROJECT_URL}> OpenShock Team</a>
   </div>
-  <div>
-    {#if backendMetadata.State.version}
-      <span title={`Commit ${backendMetadata.State.commit}`} class="text-blue-500">
-        API {backendMetadata.State.version}
-      </span>
-    {/if}
-    <span
-      class={$SignalR_State === HubConnectionState.Connected ? 'text-green-500' : 'text-red-500'}
-    >
-      {$SignalR_State}
-    </span>
+  <div class="flex items-center gap-2">
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="ghost" size="icon" class="h-4 w-4">
+            {#if $SignalR_State === HubConnectionState.Connected}
+              <Wifi class="h-4 w-4 text-green-800" />
+            {:else}
+              <WifiOff class="h-4 w-4 text-red-800" />
+            {/if}
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content class="p-3" align="start">
+        <table class="w-full [&_td]:px-4 [&_td]:last:text-right">
+          <tbody>
+            <tr>
+              <td>SignalR State</td>
+              <td>
+                <p class="flex items-center justify-end gap-2">
+                  {#if $SignalR_State === HubConnectionState.Connected}
+                    <Wifi class="h-4 w-4 text-green-800" />
+                    {$SignalR_State}
+                  {:else}
+                    <WifiOff class="h-4 w-4 text-red-800" />
+                    {$SignalR_State}
+                  {/if}
+                </p></td
+              >
+            </tr>
+            <tr>
+              <td>Backend Version</td>
+              <td title={`Commit ${backendMetadata.State.commit}`}
+                >{backendMetadata.State.version}</td
+              >
+            </tr>
+          </tbody>
+        </table>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   </div>
 </footer>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index b2a75a00..31c91aef 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -4,7 +4,7 @@
   import type { Pathname } from '$app/types';
   import { PUBLIC_DISCORD_INVITE_URL, PUBLIC_GITHUB_PROJECT_URL } from '$env/static/public';
   import LightSwitch from '$lib/components/LightSwitch.svelte';
-  import DiscordIcon from '$lib/components/svg/DiscordIcon.svelte';
+  import DiscordLogo from '$lib/components/svg/DiscordLogo.svelte';
   import GithubIcon from '$lib/components/svg/GithubIcon.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -70,7 +70,7 @@
           <GithubIcon class="size-6 fill-black dark:fill-white" />
         </a>
         <a href={PUBLIC_DISCORD_INVITE_URL} class="p-2" title="Community Discord">
-          <DiscordIcon class="size-6 fill-black dark:fill-white" />
+          <DiscordLogo class="size-6 fill-black dark:fill-white" />
         </a>
       </div>
     {/if}
diff --git a/src/routes/Sidebar.svelte b/src/routes/Sidebar.svelte
index 7d716ad5..b27be378 100644
--- a/src/routes/Sidebar.svelte
+++ b/src/routes/Sidebar.svelte
@@ -301,7 +301,7 @@
         <span class="ml-1.5 grow">
           <img
             class="h-7.5 transition-opacity delay-100 duration-200 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:delay-0"
-            src="/LogoTextOnly.svg"
+            src={asset('/LogoTextOnly.svg')}
             alt="OpenShock Logo"
           />
         </span>