From c2d5188765d09d031a58919fe07c8873e7f29770 Mon Sep 17 00:00:00 2001
From: Alex <$(pass /github/email)>
Date: Wed, 29 Jan 2025 16:02:37 +0100
Subject: [PATCH] styling

---
 frontend/.gitignore                           |    2 +
 frontend/src/lib/components/InputField.svelte |  568 ++++----
 frontend/src/lib/components/Modal.svelte      |  247 ++--
 .../src/lib/components/SmallLoader.svelte     |   32 +-
 .../src/lib/components/UserEditForm.svelte    | 1237 ++++++++---------
 frontend/src/lib/css/styles.min.css           |  727 +++++-----
 .../src/routes/auth/about/[id]/+page.svelte   |  260 ++--
 .../src/routes/auth/admin/users/+page.svelte  |   94 +-
 8 files changed, 1632 insertions(+), 1535 deletions(-)

diff --git a/frontend/.gitignore b/frontend/.gitignore
index a0cd727..3846182 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -35,3 +35,5 @@ Thumbs.db
 !vite.config.js       # Vite configuration
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+!src/**
diff --git a/frontend/src/lib/components/InputField.svelte b/frontend/src/lib/components/InputField.svelte
index a75f7d9..bb619b7 100644
--- a/frontend/src/lib/components/InputField.svelte
+++ b/frontend/src/lib/components/InputField.svelte
@@ -1,304 +1,338 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import { t } from "svelte-i18n";
+	import { createEventDispatcher } from 'svelte';
+	import { t } from 'svelte-i18n';
 
-  /** @type {string} */
-  export let name;
+	/** @type {string} */
+	export let name;
 
-  /** @type {string} */
-  export let type = "text";
+	/** @type {string} */
+	export let type = 'text';
 
-  /** @type {string|Number|null} */
-  export let value;
+	/** @type {string|Number|null} */
+	export let value;
 
-  /** @type {string} */
-  export let placeholder = "";
+	/** @type {string} */
+	export let placeholder = '';
 
-  /** @type {Number} */
-  export let rows = 4;
+	/** @type {Number} */
+	export let rows = 4;
 
-  /** @type {Array<{value: string | number, label: string, color?:string}>} */
-  export let options = [];
+	/** @type {Array<{value: string | number, label: string, color?:string}>} */
+	export let options = [];
 
-  /** @type {Boolean} */
-  export let required = false;
+	/** @type {Boolean} */
+	export let required = false;
 
-  /** @type {string} */
-  export let label = "";
+	/** @type {string} */
+	export let label = '';
 
-  /** @type {string} */
-  export let otherPasswordValue = "";
+	/** @type {string} */
+	export let otherPasswordValue = '';
 
-  /** @type {boolean} */
-  export let toUpperCase = false;
+	/** @type {boolean} */
+	export let toUpperCase = false;
 
-  /** @type {boolean} */
-  export let checked = false;
+	/** @type {boolean} */
+	export let checked = false;
 
-  /** @type {boolean} */
-  export let readonly = false;
+	/** @type {boolean} */
+	export let readonly = false;
 
-  /**
-   * @param {Event} event - The input event
-   */
-  function handleInput(event) {
-    const target = event.target;
+	/**
+	 * @param {Event} event - The input event
+	 */
+	function handleInput(event) {
+		const target = event.target;
 
-    if (target instanceof HTMLInputElement) {
-      let inputValue = target.value;
-      if (toUpperCase) {
-        inputValue = inputValue.toUpperCase();
-        target.value = inputValue; // Update the input field value
-      }
-      value = inputValue;
-    }
-  }
+		if (target instanceof HTMLInputElement) {
+			let inputValue = target.value;
+			if (toUpperCase) {
+				inputValue = inputValue.toUpperCase();
+				target.value = inputValue; // Update the input field value
+			}
+			value = inputValue;
+		}
+	}
 
-  /**
-   * Validates the field
-   * @param {string} name - The name of the field
-   * @param {string|Number|null} value - The value of the field
-   * @param {Boolean} required - The requirements of the field
-   * @returns {string|null} The error message or null if valid
-   */
-  function validateField(name, value, required) {
-    if (
-      value === null ||
-      (typeof value === "string" && !value.trim() && !required)
-    )
-      return null;
-    switch (name) {
-      case "membership_start_date":
-        return typeof value === "string" && value.trim()
-          ? null
-          : $t("validation.date");
-      case "email":
-        return typeof value === "string" && /^\S+@\S+\.\S+$/.test(value)
-          ? null
-          : $t("validation.email");
-      case "password":
-      case "password2":
-        if (typeof value === "string" && value.length < 8) {
-          return $t("validation.password");
-        }
-        if (otherPasswordValue && value !== otherPasswordValue) {
-          return $t("validation.password_match");
-        }
-        return null;
-      case "phone":
-        return typeof value === "string" && /^\+?[0-9\s()-]{7,}$/.test(value)
-          ? null
-          : $t("validation.phone");
-      case "zip_code":
-        return typeof value === "string" && /^\d{5}$/.test(value)
-          ? null
-          : $t("validation.zip_code");
-      case "iban":
-        return typeof value === "string" &&
-          /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
-          ? null
-          : $t("validation.iban");
-      case "bic":
-        return typeof value === "string" &&
-          /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
-          ? null
-          : $t("validation.bic");
-      case "licence_number":
-        return typeof value === "string" && value.length == 11
-          ? null
-          : $t("validation.licence");
+	/**
+	 * Validates the field
+	 * @param {string} name - The name of the field
+	 * @param {string|Number|null} value - The value of the field
+	 * @param {Boolean} required - The requirements of the field
+	 * @returns {string|null} The error message or null if valid
+	 */
+	function validateField(name, value, required) {
+		if (value === null || (typeof value === 'string' && !value.trim() && !required)) return null;
+		switch (name) {
+			case 'membership_start_date':
+				return typeof value === 'string' && value.trim() ? null : $t('validation.date');
+			case 'email':
+				return typeof value === 'string' && /^\S+@\S+\.\S+$/.test(value)
+					? null
+					: $t('validation.email');
+			case 'password':
+			case 'password2':
+				if (typeof value === 'string' && value.length < 8) {
+					return $t('validation.password');
+				}
+				if (otherPasswordValue && value !== otherPasswordValue) {
+					return $t('validation.password_match');
+				}
+				return null;
+			case 'phone':
+				return typeof value === 'string' && /^\+?[0-9\s()-]{7,}$/.test(value)
+					? null
+					: $t('validation.phone');
+			case 'zip_code':
+				return typeof value === 'string' && /^\d{5}$/.test(value)
+					? null
+					: $t('validation.zip_code');
+			case 'iban':
+				return typeof value === 'string' && /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
+					? null
+					: $t('validation.iban');
+			case 'bic':
+				return typeof value === 'string' &&
+					/^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
+					? null
+					: $t('validation.bic');
+			case 'licence_number':
+				return typeof value === 'string' && value.length == 11 ? null : $t('validation.licence');
 
-      default:
-        return typeof value === "string" && !value.trim() && required
-          ? $t("validation.required")
-          : null;
-    }
-  }
+			default:
+				return typeof value === 'string' && !value.trim() && required
+					? $t('validation.required')
+					: null;
+		}
+	}
 
-  $: error = validateField(name, value, required);
-  $: selectedOption = options.find((option) => option.value == value);
-  $: selectedColor = selectedOption ? selectedOption.color : "";
+	$: error = validateField(name, value, required);
+	$: selectedOption = options.find((option) => option.value == value);
+	$: selectedColor = selectedOption ? selectedOption.color : '';
 </script>
 
 <div class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}">
-  {#if type === "checkbox"}
-    <label class="form-control {readonly ? 'form-control--disabled' : ''}">
-      <input
-        type="checkbox"
-        {name}
-        {value}
-        {checked}
-        {readonly}
-        on:change={() => (checked = !checked)}
-      />
-      <span class="checkbox-text"> {label} </span>
-    </label>
-  {:else}
-    <span class="label">{label}</span>
-  {/if}
-  <div class="input-error-container">
-    {#if error}
-      <span class="error-message">{error}</span>
-    {/if}
-    {#if type === "select"}
-      <select
-        {name}
-        bind:value
-        {required}
-        class="input select"
-        style={selectedColor ? `color: ${selectedColor};` : ""}
-      >
-        {#each options as option}
-          <option value={option.value}>{option.label}</option>
-        {/each}
-      </select>
-    {:else if type === "textarea"}
-      <textarea
-        {name}
-        {placeholder}
-        {required}
-        {value}
-        {readonly}
-        {rows}
-        class="input textarea {readonly ? 'readonly' : ''}"
-        style="height:{rows * 1.5}em;"
-      />
-    {:else if type != "checkbox"}
-      <input
-        {name}
-        {type}
-        {placeholder}
-        {readonly}
-        {value}
-        {required}
-        on:input={handleInput}
-        on:blur={handleInput}
-        class="input {readonly ? 'readonly' : ''}"
-      />
-    {/if}
-  </div>
+	{#if type === 'checkbox'}
+		<label class="form-control {readonly ? 'form-control--disabled' : ''}">
+			<input
+				type="checkbox"
+				{name}
+				{value}
+				{checked}
+				{readonly}
+				on:change={() => (checked = !checked)}
+			/>
+			<span class="checkbox-text"> {label} </span>
+		</label>
+	{:else}
+		<span class="label">{label}</span>
+	{/if}
+	<div class="input-error-container">
+		{#if error}
+			<span class="error-message">{error}</span>
+		{/if}
+		{#if type === 'select'}
+			<select
+				{name}
+				bind:value
+				{required}
+				class="input select"
+				style={selectedColor ? `color: ${selectedColor};` : ''}
+			>
+				{#each options as option}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		{:else if type === 'textarea'}
+			<textarea
+				{name}
+				{placeholder}
+				{required}
+				{value}
+				{readonly}
+				{rows}
+				class="input textarea {readonly ? 'readonly' : ''}"
+				style="height:{rows * 1.5}em;"
+			></textarea>
+		{:else if type != 'checkbox'}
+			<input
+				{name}
+				{type}
+				{placeholder}
+				{readonly}
+				{value}
+				{required}
+				on:input={handleInput}
+				on:blur={handleInput}
+				class="input {readonly ? 'readonly' : ''}"
+			/>
+		{/if}
+	</div>
 </div>
 
 <style>
-  :root {
-    --form-control-color: #6bff55;
-    --form-control-disabled: #959495;
-  }
+	:root {
+		--form-control-color: var(--green); /* Changed from #6bff55 */
+		--form-control-disabled: var(--overlay0); /* Changed from #959495 */
+	}
 
-  .form-control {
-    font-size: 1rem;
-    font-weight: bold;
-    line-height: 1.1;
-    display: grid;
-    grid-template-columns: 1.5em auto;
-    gap: 0.75em;
-    align-items: center;
-    opacity: 0.8;
-  }
+	.form-control {
+		font-size: 1rem;
+		font-weight: bold;
+		line-height: 1.1;
+		display: grid;
+		grid-template-columns: 1.5em auto;
+		gap: 0.75em;
+		align-items: center;
+		opacity: 0.8;
+		color: var(--text);
+	}
 
-  .form-control--disabled {
-    color: var(--form-control-disabled);
-    cursor: not-allowed;
-  }
+	.form-control--disabled {
+		color: var(--form-control-disabled);
+		cursor: not-allowed;
+	}
 
-  input[type="checkbox"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: var(--form-background);
-    margin: 0;
-    font: inherit;
-    color: currentColor;
-    width: 1.75em;
-    height: 1.75em;
-    border: 0.15em solid currentColor;
-    border-radius: 0.5em;
-    transform: translateY(-0.075em);
-    display: grid;
-    place-content: center;
-    transition: transform 0.2s ease-in-out;
-  }
+	input[type='checkbox'] {
+		-webkit-appearance: none;
+		appearance: none;
+		background-color: var(--surface0);
+		margin: 0;
+		font: inherit;
+		color: var(--text);
+		width: 1.75em;
+		height: 1.75em;
+		border: 0.15em solid var(--overlay0);
+		border-radius: 0.5em;
+		transform: translateY(-0.075em);
+		display: grid;
+		place-content: center;
+		transition: transform 0.2s ease-in-out;
+	}
 
-  input[type="checkbox"]::before {
-    content: "";
-    width: 1em;
-    height: 1em;
-    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    transform: scale(0);
-    transform-origin: bottom left;
-    transition: 120ms transform ease-in-out;
-    box-shadow: inset 1em 1em var(--form-control-color);
-    background-color: CanvasText;
-  }
+	input[type='checkbox']::before {
+		content: '';
+		width: 1em;
+		height: 1em;
+		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+		transform: scale(0);
+		transform-origin: bottom left;
+		transition: 120ms transform ease-in-out;
+		box-shadow: inset 1em 1em var(--form-control-color);
+		background-color: var(--crust);
+	}
 
-  input[type="checkbox"]:checked::before {
-    transform: scale(1);
-  }
+	input[type='checkbox']:checked::before {
+		transform: scale(1);
+	}
 
-  input[type="checkbox"]:hover {
-    outline: max(2px, 0.15em) solid currentColor;
-    outline-offset: max(2px, 0.15em);
-    transform: scale(1.3);
-  }
+	input[type='checkbox']:hover {
+		outline: max(2px, 0.15em) solid var(--lavender);
+		outline-offset: max(2px, 0.15em);
+		transform: scale(1.3);
+	}
 
-  input[type="checkbox"]:disabled {
-    --form-control-color: var(--form-control-disabled);
-    color: var(--form-control-disabled);
-    cursor: not-allowed;
-  }
-  .readonly {
-    background-color: #ececec;
-    cursor: not-allowed;
-    opacity: 0.7;
-    color: #4f4f4f;
-  }
+	input[type='checkbox']:disabled {
+		--form-control-color: var(--form-control-disabled);
+		color: var(--form-control-disabled);
+		cursor: not-allowed;
+	}
+	.readonly {
+		background-color: var(--surface0);
+		cursor: not-allowed;
+		opacity: 0.7;
+		color: var(--overlay1);
+	}
 
-  .checkbox-container {
-    display: inline-flex;
-    align-items: center;
-    background-color: transparent;
-  }
+	.checkbox-container {
+		display: inline-flex;
+		align-items: center;
+		background-color: transparent;
+		margin: 0.5rem 0;
+	}
 
-  .checkbox-text {
-    font-size: 16px;
-  }
+	.checkbox-text {
+		font-size: 16px;
+		color: var(--text);
+	}
 
-  @media (min-width: 768px) {
-    .checkbox-text {
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-  .select {
-    padding-right: 1.5em;
-  }
-  .input-error-container {
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    max-width: 444px;
-  }
+	@media (min-width: 768px) {
+		.checkbox-text {
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+	.select {
+		padding-right: 1.5em;
+		background-color: var(--surface0);
+	}
+	.input-error-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 444px;
+	}
 
-  .error-message {
-    color: #eb5424;
-    font-size: 12px;
-    margin-bottom: 5px;
-    align-self: flex-start;
-  }
+	.error-message {
+		color: var(--red); /* Changed from #eb5424 */
+		font-size: 12px;
+		margin-bottom: 5px;
+		align-self: flex-start;
+	}
 
-  .input {
-    width: 100%;
-  }
-  input,
-  textarea,
-  select {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    color: white;
-  }
-  textarea {
-    resize: vertical;
-    min-height: 100px;
-  }
+	.input {
+		width: 100%;
+		margin: 0.5rem 0;
+	}
+	input,
+	textarea,
+	select {
+		width: 100%;
+		padding: 0.75rem 0;
+		background-color: var(--surface0);
+		border: 1px solid var(--overlay0);
+		border-radius: 6px;
+		color: var(--text);
+		transition: border-color 0.2s ease-in-out;
+	}
+
+	input:focus,
+	textarea:focus,
+	select:focus {
+		outline: none;
+		border-color: var(--lavender);
+	}
+
+	input:hover:not(:disabled),
+	textarea:hover:not(:disabled),
+	select:hover:not(:disabled) {
+		border-color: var(--overlay2);
+	}
+
+	textarea {
+		resize: vertical;
+		min-height: 100px;
+	}
+	/* Add consistent spacing between input boxes */
+	.input-box {
+		margin: 1rem 0;
+		padding: 0.5rem;
+		background-color: var(--surface0);
+		border-radius: 6px;
+	}
+
+	.input-box .label {
+		display: block;
+		margin-bottom: 0.5rem;
+		color: var(--lavender);
+		font-weight: 500;
+	}
+
+	/* Style select dropdown */
+	select option {
+		background-color: var(--base);
+		color: var(--text);
+		padding: 0.5rem;
+	}
 </style>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index db57222..a0deaf2 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,128 +1,155 @@
 <script>
-  import { quintOut } from "svelte/easing";
+	import { quintOut } from 'svelte/easing';
 
-  import { t } from "svelte-i18n";
-  import { createEventDispatcher } from "svelte";
+	import { t } from 'svelte-i18n';
+	import { createEventDispatcher } from 'svelte';
 
-  const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
-    const transform = getComputedStyle(node).transform;
+	const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
+		const transform = getComputedStyle(node).transform;
 
-    return {
-      duration,
-      easing: quintOut,
-      css: (/** @type {any} */ t, /** @type {number} */ u) => {
-        return `transform:
+		return {
+			duration,
+			easing: quintOut,
+			css: (/** @type {any} */ t, /** @type {number} */ u) => {
+				return `transform:
             ${transform}
             scale(${t})
             translateY(${u * -100}%)
           `;
-      },
-    };
-  };
+			}
+		};
+	};
 
-  const dispatch = createEventDispatcher();
-  function closeModal() {
-    dispatch("close", {});
-  }
+	const dispatch = createEventDispatcher();
+	function closeModal() {
+		dispatch('close', {});
+	}
 </script>
 
 <div class="modal-background">
-  <div
-    transition:modal|global={{ duration: 1000 }}
-    class="modal"
-    role="dialog"
-    aria-modal="true"
-  >
-    <!-- svelte-ignore a11y-missing-attribute -->
-    <a
-      title={$t("cancel")}
-      class="modal-close"
-      on:click={closeModal}
-      role="button"
-      tabindex="0"
-      on:keydown={(e) => e.key == "Enter" && closeModal()}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 384 512"
-        aria-hidden="true"
-      >
-        <path
-          d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-        />
-      </svg>
-      <span class="sr-only">{$t("cancel")}</span>
-    </a>
-    <div class="container">
-      <slot />
-    </div>
-  </div>
+	<div transition:modal|global={{ duration: 1000 }} class="modal" role="dialog" aria-modal="true">
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<a
+			title={$t('cancel')}
+			class="modal-close"
+			on:click={closeModal}
+			role="button"
+			tabindex="0"
+			on:keydown={(e) => e.key == 'Enter' && closeModal()}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 384 512"
+				aria-hidden="true"
+			>
+				<path
+					d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+				/>
+			</svg>
+			<span class="sr-only">{$t('cancel')}</span>
+		</a>
+		<div class="container">
+			<slot />
+		</div>
+	</div>
 </div>
 
 <style>
-  .modal-background {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.9);
-    z-index: 9999;
-    display: flex;
-  }
+	.modal-background {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(30, 30, 46, 0.65); /* var(--base) with 0.75 opacity */
+		backdrop-filter: blur(4px); /* Optional: adds a slight blur effect */
+		z-index: 9999;
+		display: flex;
+	}
 
-  .modal {
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 70%;
-    box-shadow: 0 0 10px hsl(0 0% 0% / 10%);
-    transform: translate(-50%, -50%);
-  }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  @media (max-width: 990px) {
-    .modal {
-      width: 90%;
-    }
-  }
-  .modal-close {
-    border: none;
-  }
+	.modal {
+		position: relative;
+		left: 50%;
+		top: 50%;
+		width: 70%;
+		background-color: var(--base);
+		border: 1px solid var(--surface0);
+		border-radius: 8px;
+		box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5); /* var(--crust) with opacity */
+		transform: translate(-50%, -50%);
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+	@media (max-width: 990px) {
+		.modal {
+			width: 90%;
+		}
+	}
+	.modal-close {
+		border: none;
+		padding: 1rem;
+		cursor: pointer;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
 
-  .modal-close svg {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    fill: rgb(14 165 233 /1);
-    transition: all 0.5s;
-  }
-  .modal-close:hover svg {
-    fill: rgb(225 29 72);
-    transform: scale(1.5);
-  }
-  .modal .container {
-    max-height: 90vh;
-    overflow-y: auto;
-    align-items: center;
-  }
-  @media (min-width: 680px) {
-    .modal .container {
-      flex-direction: column;
-      left: 0;
-      width: 100%;
-    }
-  }
+	.modal-close svg {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		transition: all 0.3s ease-in-out;
+		fill: var(--blue); /* Using Catppuccin blue */
+	}
+	.modal-close:hover svg {
+		fill: var(--red); /* Using Catppuccin red */
+		transform: scale(1.2);
+	}
+	.modal .container {
+		max-height: 90vh;
+		overflow-y: auto;
+		align-items: center;
+		padding: 2rem;
+		background-color: var(--base);
+		border-radius: 8px;
+	}
+
+	/* Scrollbar styling */
+	.modal .container::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.modal .container::-webkit-scrollbar-track {
+		background: var(--surface0);
+		border-radius: 4px;
+	}
+
+	.modal .container::-webkit-scrollbar-thumb {
+		background: var(--surface2);
+		border-radius: 4px;
+	}
+
+	.modal .container::-webkit-scrollbar-thumb:hover {
+		background: var(--surface1);
+	}
+
+	@media (min-width: 680px) {
+		.modal .container {
+			flex-direction: column;
+			left: 0;
+			width: 100%;
+		}
+	}
 </style>
diff --git a/frontend/src/lib/components/SmallLoader.svelte b/frontend/src/lib/components/SmallLoader.svelte
index e8324aa..c4d118f 100644
--- a/frontend/src/lib/components/SmallLoader.svelte
+++ b/frontend/src/lib/components/SmallLoader.svelte
@@ -1,24 +1,24 @@
 <script>
-  /** @type {number | null} */
-  export let width;
-  /** @type {string | null} */
-  export let message;
+	/** @type {number | null} */
+	export let width;
+	/** @type {string | null} */
+	export let message;
 </script>
 
 <div class="loading">
-  <p class="simple-loader" style={width ? `width: ${width}px` : ""} />
-  {#if message}
-    <p>{message}</p>
-  {/if}
+	<p class="simple-loader" style={width ? `width: ${width}px` : ''}></p>
+	{#if message}
+		<p>{message}</p>
+	{/if}
 </div>
 
 <style>
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .loading p {
-    margin-left: 0.5rem;
-  }
+	.loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.loading p {
+		margin-left: 0.5rem;
+	}
 </style>
diff --git a/frontend/src/lib/components/UserEditForm.svelte b/frontend/src/lib/components/UserEditForm.svelte
index 4dd9455..22fabd2 100644
--- a/frontend/src/lib/components/UserEditForm.svelte
+++ b/frontend/src/lib/components/UserEditForm.svelte
@@ -1,660 +1,657 @@
 <script>
-  import InputField from "$lib/components/InputField.svelte";
-  import SmallLoader from "$lib/components/SmallLoader.svelte";
-  import { createEventDispatcher } from "svelte";
-  import { applyAction, enhance } from "$app/forms";
-  import { receive, send } from "$lib/utils/helpers";
-  import { t } from "svelte-i18n";
+	import InputField from '$lib/components/InputField.svelte';
+	import SmallLoader from '$lib/components/SmallLoader.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import { applyAction, enhance } from '$app/forms';
+	import { receive, send } from '$lib/utils/helpers';
+	import { t } from 'svelte-i18n';
 
-  /** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
-  export let form;
+	/** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
+	export let form;
 
-  /** @type {App.Locals['subscriptions']}*/
-  export let subscriptions;
+	/** @type {App.Locals['subscriptions']}*/
+	export let subscriptions;
 
-  /** @type {App.Locals['user']} */
-  const blankUser = {
-    id: 0,
-    email: "",
-    first_name: "",
-    last_name: "",
-    phone: "",
-    address: "",
-    zip_code: "",
-    city: "",
-    company: "",
-    date_of_birth: "",
-    notes: "",
-    profile_picture: "",
-    payment_status: 0,
-    status: 1,
-    role_id: 0,
-    membership: {
-      id: 0,
-      start_date: "",
-      end_date: "",
-      status: 3,
-      parent_member_id: 0,
-      subscription_model: {
-        id: 0,
-        name: "",
-      },
-    },
-    licence: {
-      id: 0,
-      status: 1,
-      licence_number: "",
-      issued_date: "",
-      expiration_date: "",
-      country: "",
-      licence_categories: [],
-    },
-    bank_account: {
-      id: 0,
-      mandate_date_signed: "",
-      bank: "",
-      account_holder_name: "",
-      iban: "",
-      bic: "",
-      mandate_reference: "",
-    },
-  };
+	/** @type {App.Locals['user']} */
+	const blankUser = {
+		id: 0,
+		email: '',
+		first_name: '',
+		last_name: '',
+		phone: '',
+		address: '',
+		zip_code: '',
+		city: '',
+		company: '',
+		date_of_birth: '',
+		notes: '',
+		profile_picture: '',
+		payment_status: 0,
+		status: 1,
+		role_id: 0,
+		membership: {
+			id: 0,
+			start_date: '',
+			end_date: '',
+			status: 3,
+			parent_member_id: 0,
+			subscription_model: {
+				id: 0,
+				name: ''
+			}
+		},
+		licence: {
+			id: 0,
+			status: 1,
+			licence_number: '',
+			issued_date: '',
+			expiration_date: '',
+			country: '',
+			licence_categories: []
+		},
+		bank_account: {
+			id: 0,
+			mandate_date_signed: '',
+			bank: '',
+			account_holder_name: '',
+			iban: '',
+			bic: '',
+			mandate_reference: ''
+		}
+	};
 
-  /** @type {App.Locals['user'] | null} */
-  export let user;
+	/** @type {App.Locals['user'] | null} */
+	export let user;
 
-  /** @type {App.Locals['user'] } */
-  let localUser;
+	/** @type {App.Locals['user'] } */
+	let localUser;
 
-  $: {
-    if (user !== undefined && !localUser) {
-      localUser =
-        user === null
-          ? { ...blankUser }
-          : {
-              ...user,
-              licence: user.licence || blankUser.licence,
-              membership: user.membership || blankUser.membership,
-              bank_account: user.bank_account || blankUser.bank_account,
-            };
-    }
-  }
+	$: {
+		if (user !== undefined && !localUser) {
+			localUser =
+				user === null
+					? { ...blankUser }
+					: {
+							...user,
+							licence: user.licence || blankUser.licence,
+							membership: user.membership || blankUser.membership,
+							bank_account: user.bank_account || blankUser.bank_account
+						};
+		}
+	}
 
-  $: isNewUser = user === null;
-  $: isLoading = user === undefined;
+	$: isNewUser = user === null;
+	$: isLoading = user === undefined;
 
-  $: {
-    console.log("incomingUser:", user);
-  }
+	$: {
+		console.log('incomingUser:', user);
+	}
 
-  // Add debug logging for user
-  $: {
-    console.log("processed user:", user);
-  }
-  /** @type {App.Locals['licence_categories']} */
-  export let licence_categories;
+	// Add debug logging for user
+	$: {
+		console.log('processed user:', user);
+	}
+	/** @type {App.Locals['licence_categories']} */
+	export let licence_categories;
 
-  const userStatusOptions = [
-    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
-    { value: 2, label: $t("userStatus.2"), color: "#90EE90" }, // Light green for "Verifiziert"
-    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
-    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
-    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
-  ];
+	const userStatusOptions = [
+		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
+		{ value: 2, label: $t('userStatus.2'), color: '#90EE90' }, // Light green for "Verifiziert"
+		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+	];
 
-  const userRoleOptions = [
-    { value: 0, label: $t("userRole.0"), color: "#b1b1b1" }, // Grey for "Mitglied"
-    { value: 1, label: $t("userRole.1"), color: "#00bc00" }, // Green for "Betrachter"
-    { value: 4, label: $t("userRole.4"), color: "#FFC0CB" }, // Pink for "Bearbeiter"
-    { value: 8, label: $t("userRole.8"), color: "#FF4646" }, // Red for "Admin"
-  ];
-  const membershipStatusOptions = [
-    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
-    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
-    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
-  ];
-  const licenceStatusOptions = [
-    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
-    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
-    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
-    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
-  ];
+	const userRoleOptions = [
+		{ value: 0, label: $t('userRole.0'), color: '#b1b1b1' }, // Grey for "Mitglied"
+		{ value: 1, label: $t('userRole.1'), color: '#00bc00' }, // Green for "Betrachter"
+		{ value: 4, label: $t('userRole.4'), color: '#FFC0CB' }, // Pink for "Bearbeiter"
+		{ value: 8, label: $t('userRole.8'), color: '#FF4646' } // Red for "Admin"
+	];
+	const membershipStatusOptions = [
+		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+	];
+	const licenceStatusOptions = [
+		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
+		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
+		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
+		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
+	];
 
-  const dispatch = createEventDispatcher();
-  const TABS = ["profile", "licence", "membership", "bankaccount"];
-  let activeTab = TABS[0];
+	const dispatch = createEventDispatcher();
+	const TABS = ['profile', 'licence', 'membership', 'bankaccount'];
+	let activeTab = TABS[0];
 
-  let isUpdating = false,
-    password = "",
-    password2 = "";
+	let isUpdating = false,
+		password = '',
+		password2 = '';
 
-  /** @type {Object.<string, App.Locals['licence_categories']>} */
-  $: groupedCategories = groupCategories(licence_categories);
-  $: subscriptionModelOptions = subscriptions.map((sub) => ({
-    value: sub?.name ?? "",
-    label: sub?.name ?? "",
-  }));
-  $: selectedSubscriptionModel =
-    subscriptions.find(
-      (sub) => sub?.id === localUser.membership?.subscription_model.id
-    ) || null;
+	/** @type {Object.<string, App.Locals['licence_categories']>} */
+	$: groupedCategories = groupCategories(licence_categories);
+	$: subscriptionModelOptions = subscriptions.map((sub) => ({
+		value: sub?.name ?? '',
+		label: sub?.name ?? ''
+	}));
+	$: selectedSubscriptionModel =
+		subscriptions.find((sub) => sub?.id === localUser.membership?.subscription_model.id) || null;
 
-  /**
-   * creates groups of categories depending on the first letter
-   * @param {App.Locals['licence_categories']} categories - the categories to sort and group
-   * @returns {Object.<string, App.Locals['licence_categories']>} Grouped categories
-   */
-  function groupCategories(categories) {
-    return Object.entries(categories)
-      .sort((a, b) => a[1].category.localeCompare(b[1].category))
-      .reduce(
-        (
-          /** @type {Object.<string, App.Locals['licence_categories']>} */ acc,
-          [_, category]
-        ) => {
-          const firstLetter = category.category[0];
-          if (!acc[firstLetter]) {
-            acc[firstLetter] = [];
-          }
-          acc[firstLetter].push(category);
-          return acc;
-        },
-        {}
-      );
-  }
+	/**
+	 * creates groups of categories depending on the first letter
+	 * @param {App.Locals['licence_categories']} categories - the categories to sort and group
+	 * @returns {Object.<string, App.Locals['licence_categories']>} Grouped categories
+	 */
+	function groupCategories(categories) {
+		return Object.entries(categories)
+			.sort((a, b) => a[1].category.localeCompare(b[1].category))
+			.reduce(
+				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [_, category]) => {
+					const firstLetter = category.category[0];
+					if (!acc[firstLetter]) {
+						acc[firstLetter] = [];
+					}
+					acc[firstLetter].push(category);
+					return acc;
+				},
+				{}
+			);
+	}
 
-  /**
-   * Sets the active tab
-   * @param {string} tab - The tab to set as active
-   */
-  function setActiveTab(tab) {
-    activeTab = tab;
-  }
+	/**
+	 * Sets the active tab
+	 * @param {string} tab - The tab to set as active
+	 */
+	function setActiveTab(tab) {
+		activeTab = tab;
+	}
 
-  /** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
-  const handleUpdate = async ({ formData, action, cancel }) => {
-    isUpdating = true;
-    return async ({ result }) => {
-      isUpdating = false;
-      if (result.type === "success" || result.type === "redirect") {
-        close();
-      } else {
-        document
-          .querySelector(".modal .container")
-          ?.scrollTo({ top: 0, behavior: "smooth" });
-      }
-      await applyAction(result);
-    };
-  };
+	/** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
+	const handleUpdate = async ({ formData, action, cancel }) => {
+		isUpdating = true;
+		return async ({ result }) => {
+			isUpdating = false;
+			if (result.type === 'success' || result.type === 'redirect') {
+				close();
+			} else {
+				document.querySelector('.modal .container')?.scrollTo({ top: 0, behavior: 'smooth' });
+			}
+			await applyAction(result);
+		};
+	};
 </script>
 
 {#if isLoading}
-  <SmallLoader width={30} message={$t("loading.user_data")} />
+	<SmallLoader width={30} message={$t('loading.user_data')} />
 {:else if localUser}
-  <form
-    class="content"
-    action="?/updateUser"
-    method="POST"
-    use:enhance={handleUpdate}
-  >
-    <input name="user[id]" type="hidden" bind:value={localUser.id} />
-    <h1 class="step-title" style="text-align: center;">{$t("user.edit")}</h1>
-    {#if form?.success}
-      <h4
-        class="step-subtitle warning"
-        in:receive|global={{ key: Math.floor(Math.random() * 100) }}
-        out:send|global={{ key: Math.floor(Math.random() * 100) }}
-      >
-        Um einen fehlerhaften upload Ihres Bildes zu vermeiden, clicke bitte auf
-        den "Update" Button unten.
-      </h4>
-    {/if}
-    {#if form?.errors}
-      {#each form?.errors as error (error.id)}
-        <h4
-          class="step-subtitle warning"
-          in:receive|global={{ key: error.id }}
-          out:send|global={{ key: error.id }}
-        >
-          {$t(error.field) + ": " + $t(error.key)}
-        </h4>
-      {/each}
-    {/if}
+	<form class="content" action="?/updateUser" method="POST" use:enhance={handleUpdate}>
+		<input name="user[id]" type="hidden" bind:value={localUser.id} />
+		<h1 class="step-title" style="text-align: center;">{$t('user.edit')}</h1>
+		{#if form?.success}
+			<h4
+				class="step-subtitle warning"
+				in:receive|global={{ key: Math.floor(Math.random() * 100) }}
+				out:send|global={{ key: Math.floor(Math.random() * 100) }}
+			>
+				Um einen fehlerhaften upload Ihres Bildes zu vermeiden, clicke bitte auf den "Update" Button
+				unten.
+			</h4>
+		{/if}
+		{#if form?.errors}
+			{#each form?.errors as error (error.id)}
+				<h4
+					class="step-subtitle warning"
+					in:receive|global={{ key: error.id }}
+					out:send|global={{ key: error.id }}
+				>
+					{$t(error.field) + ': ' + $t(error.key)}
+				</h4>
+			{/each}
+		{/if}
 
-    <input
-      type="hidden"
-      hidden
-      name="user[profile_picture]"
-      bind:value={localUser.profile_picture}
-    />
+		<input
+			type="hidden"
+			hidden
+			name="user[profile_picture]"
+			bind:value={localUser.profile_picture}
+		/>
 
-    <div class="button-container">
-      {#each TABS as tab}
-        <button
-          type="button"
-          class="button-dark"
-          class:active={activeTab === tab}
-          on:click={() => setActiveTab(tab)}
-        >
-          {$t(tab)}
-        </button>
-      {/each}
-    </div>
-    <div
-      class="tab-content"
-      style="display: {activeTab === 'profile' ? 'block' : 'none'}"
-    >
-      <InputField
-        name="user[status]"
-        type="select"
-        label={$t("status")}
-        bind:value={localUser.status}
-        options={userStatusOptions}
-      />
-      {#if localUser.role_id === 8}
-        <InputField
-          name="user[role_id]"
-          type="select"
-          label={$t("user.role")}
-          bind:value={localUser.role_id}
-          options={userRoleOptions}
-        />
-      {/if}
-      <InputField
-        name="user[password]"
-        type="password"
-        label={$t("password")}
-        placeholder={$t("placeholder.password")}
-        bind:value={password}
-        otherPasswordValue={password2}
-      />
-      <InputField
-        name="password2"
-        type="password"
-        label={$t("password_repeat")}
-        placeholder={$t("placeholder.password")}
-        bind:value={password2}
-        otherPasswordValue={password}
-      />
-      <InputField
-        name="user[first_name]"
-        label={$t("first_name")}
-        bind:value={localUser.first_name}
-        placeholder={$t("placeholder.first_name")}
-        required={true}
-      />
-      <InputField
-        name="user[last_name]"
-        label={$t("last_name")}
-        bind:value={localUser.last_name}
-        placeholder={$t("placeholder.last_name")}
-        required={true}
-      />
-      <InputField
-        name="user[company]"
-        label={$t("company")}
-        bind:value={localUser.company}
-        placeholder={$t("placeholder.company")}
-      />
-      <InputField
-        name="user[email]"
-        type="email"
-        label={$t("email")}
-        bind:value={localUser.email}
-        placeholder={$t("placeholder.email")}
-        required={true}
-      />
-      <InputField
-        name="user[phone]"
-        type="tel"
-        label={$t("phone")}
-        bind:value={localUser.phone}
-        placeholder={$t("placeholder.phone")}
-      />
-      <InputField
-        name="user[date_of_birth]"
-        type="date"
-        label={$t("date_of_birth")}
-        bind:value={localUser.date_of_birth}
-        placeholder={$t("placeholder.date_of_birth")}
-      />
-      <InputField
-        name="user[address]"
-        label={$t("address")}
-        bind:value={localUser.address}
-        placeholder={$t("placeholder.address")}
-      />
-      <InputField
-        name="user[zip_code]"
-        label={$t("zip_code")}
-        bind:value={localUser.zip_code}
-        placeholder={$t("placeholder.zip_code")}
-      />
-      <InputField
-        name="user[city]"
-        label={$t("city")}
-        bind:value={localUser.city}
-        placeholder={$t("placeholder.city")}
-      />
-      <InputField
-        name="user[notes]"
-        type="textarea"
-        label={$t("notes")}
-        bind:value={localUser.notes}
-        placeholder={$t("placeholder.notes", {
-          values: { name: localUser.first_name || "" },
-        })}
-        rows={10}
-      />
-    </div>
-    <div
-      class="tab-content"
-      style="display: {activeTab === 'licence' ? 'block' : 'none'}"
-    >
-      <InputField
-        name="user[licence][status]"
-        type="select"
-        label={$t("status")}
-        bind:value={localUser.licence.status}
-        options={licenceStatusOptions}
-      />
-      <InputField
-        name="user[licence][number]"
-        type="text"
-        label={$t("licence_number")}
-        bind:value={localUser.licence.licence_number}
-        placeholder={$t("placeholder.licence_number")}
-        toUpperCase={true}
-      />
-      <InputField
-        name="user[licence][issued_date]"
-        type="date"
-        label={$t("issued_date")}
-        bind:value={localUser.licence.issued_date}
-        placeholder={$t("placeholder.issued_date")}
-      />
-      <InputField
-        name="user[licence][expiration_date]"
-        type="date"
-        label={$t("expiration_date")}
-        bind:value={localUser.licence.expiration_date}
-        placeholder={$t("placeholder.expiration_date")}
-      />
-      <InputField
-        name="user[licence][country]"
-        label={$t("country")}
-        bind:value={localUser.licence.country}
-        placeholder={$t("placeholder.issuing_country")}
-      />
-      <div class="licence-categories">
-        <h3>{$t("licence_categories")}</h3>
-        <div class="checkbox-grid">
-          {#each Object.entries(groupedCategories) as [group, categories], groupIndex}
-            {#if groupIndex > 0}
-              <div class="category-break" />
-            {/if}
-            {#each categories as category}
-              <div class="checkbox-item">
-                <div class="checkbox-label-container">
-                  <InputField
-                    type="checkbox"
-                    name="user[licence][categories[]]"
-                    value={JSON.stringify(category)}
-                    label={category.category}
-                    checked={localUser.licence.licence_categories != null &&
-                      localUser.licence.licence_categories.some(
-                        (cat) => cat.category === category.category
-                      )}
-                  />
-                </div>
-                <span class="checkbox-description">
-                  {$t(`licenceCategory.${category.category}`)}
-                </span>
-              </div>
-            {/each}
-          {/each}
-        </div>
-      </div>
-    </div>
-    <div
-      class="tab-content"
-      style="display: {activeTab === 'membership' ? 'block' : 'none'}"
-    >
-      <InputField
-        name="user[membership][status]"
-        type="select"
-        label={$t("status")}
-        bind:value={localUser.membership.status}
-        options={membershipStatusOptions}
-      />
-      <InputField
-        name="user[membership][subscription_model][name]"
-        type="select"
-        label={$t("subscription_model")}
-        bind:value={localUser.membership.subscription_model.name}
-        options={subscriptionModelOptions}
-      />
-      <div class="subscription-info">
-        <div class="subscription-column">
-          <p>
-            <strong>{$t("monthly_fee")}:</strong>
-            {selectedSubscriptionModel?.monthly_fee || "-"}
-          </p>
-          <p>
-            <strong>{$t("hourly_rate")}:</strong>
-            {selectedSubscriptionModel?.hourly_rate || "-"}
-          </p>
-          {#if selectedSubscriptionModel?.included_hours_per_year}
-            <p>
-              <strong>{$t("included_hours_per_year")}:</strong>
-              {selectedSubscriptionModel?.included_hours_per_year}
-            </p>
-          {/if}
-          {#if selectedSubscriptionModel?.included_hours_per_month}
-            <p>
-              <strong>{$t("included_hours_per_month")}:</strong>
-              {selectedSubscriptionModel?.included_hours_per_month}
-            </p>
-          {/if}
-        </div>
-        <div class="subscription-column">
-          <p>
-            <strong>{$t("details")}:</strong>
-            {selectedSubscriptionModel?.details || "-"}
-          </p>
-          {#if selectedSubscriptionModel?.conditions}
-            <p>
-              <strong>{$t("conditions")}:</strong>
-              {selectedSubscriptionModel?.conditions}
-            </p>
-          {/if}
-        </div>
-      </div>
-      <InputField
-        name="user[membership][start_date]"
-        type="date"
-        label={$t("start")}
-        bind:value={localUser.membership.start_date}
-        placeholder={$t("placeholder.start_date")}
-      />
-      <InputField
-        name="user[membership][end_date]"
-        type="date"
-        label={$t("end")}
-        bind:value={localUser.membership.end_date}
-        placeholder={$t("placeholder.end_date")}
-      />
-      <InputField
-        name="user[membership][parent_member_id]"
-        type="number"
-        label={$t("parent_member_id")}
-        bind:value={localUser.membership.parent_member_id}
-        placeholder={$t("placeholder.parent_member_id")}
-      />
-    </div>
-    <div
-      class="tab-content"
-      style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}"
-    >
-      <InputField
-        name="user[bank_account][account_holder_name]"
-        label={$t("bank_account_holder")}
-        bind:value={localUser.bank_account.account_holder_name}
-        placeholder={$t("placeholder.bank_account_holder")}
-      />
-      <InputField
-        name="user[bank_account][bank_name]"
-        label={$t("bank_name")}
-        bind:value={localUser.bank_account.bank}
-        placeholder={$t("placeholder.bank_name")}
-      />
-      <InputField
-        name="user[bank_account][iban]"
-        label={$t("iban")}
-        bind:value={localUser.bank_account.iban}
-        placeholder={$t("placeholder.iban")}
-        toUpperCase={true}
-      />
-      <InputField
-        name="user[bank_account][bic]"
-        label={$t("bic")}
-        bind:value={localUser.bank_account.bic}
-        placeholder={$t("placeholder.bic")}
-        toUpperCase={true}
-      />
-      <InputField
-        name="user[bank_account][mandate_reference]"
-        label={$t("mandate_reference")}
-        bind:value={localUser.bank_account.mandate_reference}
-        placeholder={$t("placeholder.mandate_reference")}
-      />
-      <InputField
-        name="user[bank_account][mandate_date_signed]"
-        label={$t("mandate_date_signed")}
-        type="date"
-        bind:value={localUser.bank_account.mandate_date_signed}
-        readonly={true}
-      />
-    </div>
-    <div class="button-container">
-      {#if isUpdating}
-        <SmallLoader width={30} message={"Aktualisiere..."} />
-      {:else}
-        <button
-          type="button"
-          class="button-dark"
-          on:click={() => dispatch("cancel")}
-        >
-          {$t("cancel")}</button
-        >
-        <button type="submit" class="button-dark">{$t("confirm")}</button>
-      {/if}
-    </div>
-  </form>
+		<div class="button-container">
+			{#each TABS as tab}
+				<button
+					type="button"
+					class="button-dark"
+					class:active={activeTab === tab}
+					on:click={() => setActiveTab(tab)}
+				>
+					{$t(tab)}
+				</button>
+			{/each}
+		</div>
+		<div class="tab-content" style="display: {activeTab === 'profile' ? 'block' : 'none'}">
+			<InputField
+				name="user[status]"
+				type="select"
+				label={$t('status')}
+				bind:value={localUser.status}
+				options={userStatusOptions}
+			/>
+			{#if localUser.role_id === 8}
+				<InputField
+					name="user[role_id]"
+					type="select"
+					label={$t('user.role')}
+					bind:value={localUser.role_id}
+					options={userRoleOptions}
+				/>
+			{/if}
+			<InputField
+				name="user[password]"
+				type="password"
+				label={$t('password')}
+				placeholder={$t('placeholder.password')}
+				bind:value={password}
+				otherPasswordValue={password2}
+			/>
+			<InputField
+				name="password2"
+				type="password"
+				label={$t('password_repeat')}
+				placeholder={$t('placeholder.password')}
+				bind:value={password2}
+				otherPasswordValue={password}
+			/>
+			<InputField
+				name="user[first_name]"
+				label={$t('first_name')}
+				bind:value={localUser.first_name}
+				placeholder={$t('placeholder.first_name')}
+				required={true}
+			/>
+			<InputField
+				name="user[last_name]"
+				label={$t('last_name')}
+				bind:value={localUser.last_name}
+				placeholder={$t('placeholder.last_name')}
+				required={true}
+			/>
+			<InputField
+				name="user[company]"
+				label={$t('company')}
+				bind:value={localUser.company}
+				placeholder={$t('placeholder.company')}
+			/>
+			<InputField
+				name="user[email]"
+				type="email"
+				label={$t('email')}
+				bind:value={localUser.email}
+				placeholder={$t('placeholder.email')}
+				required={true}
+			/>
+			<InputField
+				name="user[phone]"
+				type="tel"
+				label={$t('phone')}
+				bind:value={localUser.phone}
+				placeholder={$t('placeholder.phone')}
+			/>
+			<InputField
+				name="user[date_of_birth]"
+				type="date"
+				label={$t('date_of_birth')}
+				bind:value={localUser.date_of_birth}
+				placeholder={$t('placeholder.date_of_birth')}
+			/>
+			<InputField
+				name="user[address]"
+				label={$t('address')}
+				bind:value={localUser.address}
+				placeholder={$t('placeholder.address')}
+			/>
+			<InputField
+				name="user[zip_code]"
+				label={$t('zip_code')}
+				bind:value={localUser.zip_code}
+				placeholder={$t('placeholder.zip_code')}
+			/>
+			<InputField
+				name="user[city]"
+				label={$t('city')}
+				bind:value={localUser.city}
+				placeholder={$t('placeholder.city')}
+			/>
+			<InputField
+				name="user[notes]"
+				type="textarea"
+				label={$t('notes')}
+				bind:value={localUser.notes}
+				placeholder={$t('placeholder.notes', {
+					values: { name: localUser.first_name || '' }
+				})}
+				rows={10}
+			/>
+		</div>
+		<div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}">
+			<InputField
+				name="user[licence][status]"
+				type="select"
+				label={$t('status')}
+				bind:value={localUser.licence.status}
+				options={licenceStatusOptions}
+			/>
+			<InputField
+				name="user[licence][number]"
+				type="text"
+				label={$t('licence_number')}
+				bind:value={localUser.licence.licence_number}
+				placeholder={$t('placeholder.licence_number')}
+				toUpperCase={true}
+			/>
+			<InputField
+				name="user[licence][issued_date]"
+				type="date"
+				label={$t('issued_date')}
+				bind:value={localUser.licence.issued_date}
+				placeholder={$t('placeholder.issued_date')}
+			/>
+			<InputField
+				name="user[licence][expiration_date]"
+				type="date"
+				label={$t('expiration_date')}
+				bind:value={localUser.licence.expiration_date}
+				placeholder={$t('placeholder.expiration_date')}
+			/>
+			<InputField
+				name="user[licence][country]"
+				label={$t('country')}
+				bind:value={localUser.licence.country}
+				placeholder={$t('placeholder.issuing_country')}
+			/>
+			<div class="licence-categories">
+				<h3>{$t('licence_categories')}</h3>
+				<div class="checkbox-grid">
+					{#each Object.entries(groupedCategories) as [group, categories], groupIndex}
+						{#if groupIndex > 0}
+							<div class="category-break"></div>
+						{/if}
+						{#each categories as category}
+							<div class="checkbox-item">
+								<div class="checkbox-label-container">
+									<InputField
+										type="checkbox"
+										name="user[licence][categories[]]"
+										value={JSON.stringify(category)}
+										label={category.category}
+										checked={localUser.licence.licence_categories != null &&
+											localUser.licence.licence_categories.some(
+												(cat) => cat.category === category.category
+											)}
+									/>
+								</div>
+								<span class="checkbox-description">
+									{$t(`licenceCategory.${category.category}`)}
+								</span>
+							</div>
+						{/each}
+					{/each}
+				</div>
+			</div>
+		</div>
+		<div class="tab-content" style="display: {activeTab === 'membership' ? 'block' : 'none'}">
+			<InputField
+				name="user[membership][status]"
+				type="select"
+				label={$t('status')}
+				bind:value={localUser.membership.status}
+				options={membershipStatusOptions}
+			/>
+			<InputField
+				name="user[membership][subscription_model][name]"
+				type="select"
+				label={$t('subscription_model')}
+				bind:value={localUser.membership.subscription_model.name}
+				options={subscriptionModelOptions}
+			/>
+			<div class="subscription-info">
+				<div class="subscription-column">
+					<p>
+						<strong>{$t('monthly_fee')}:</strong>
+						{selectedSubscriptionModel?.monthly_fee || '-'}
+					</p>
+					<p>
+						<strong>{$t('hourly_rate')}:</strong>
+						{selectedSubscriptionModel?.hourly_rate || '-'}
+					</p>
+					{#if selectedSubscriptionModel?.included_hours_per_year}
+						<p>
+							<strong>{$t('included_hours_per_year')}:</strong>
+							{selectedSubscriptionModel?.included_hours_per_year}
+						</p>
+					{/if}
+					{#if selectedSubscriptionModel?.included_hours_per_month}
+						<p>
+							<strong>{$t('included_hours_per_month')}:</strong>
+							{selectedSubscriptionModel?.included_hours_per_month}
+						</p>
+					{/if}
+				</div>
+				<div class="subscription-column">
+					<p>
+						<strong>{$t('details')}:</strong>
+						{selectedSubscriptionModel?.details || '-'}
+					</p>
+					{#if selectedSubscriptionModel?.conditions}
+						<p>
+							<strong>{$t('conditions')}:</strong>
+							{selectedSubscriptionModel?.conditions}
+						</p>
+					{/if}
+				</div>
+			</div>
+			<InputField
+				name="user[membership][start_date]"
+				type="date"
+				label={$t('start')}
+				bind:value={localUser.membership.start_date}
+				placeholder={$t('placeholder.start_date')}
+			/>
+			<InputField
+				name="user[membership][end_date]"
+				type="date"
+				label={$t('end')}
+				bind:value={localUser.membership.end_date}
+				placeholder={$t('placeholder.end_date')}
+			/>
+			<InputField
+				name="user[membership][parent_member_id]"
+				type="number"
+				label={$t('parent_member_id')}
+				bind:value={localUser.membership.parent_member_id}
+				placeholder={$t('placeholder.parent_member_id')}
+			/>
+		</div>
+		<div class="tab-content" style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}">
+			<InputField
+				name="user[bank_account][account_holder_name]"
+				label={$t('bank_account_holder')}
+				bind:value={localUser.bank_account.account_holder_name}
+				placeholder={$t('placeholder.bank_account_holder')}
+			/>
+			<InputField
+				name="user[bank_account][bank_name]"
+				label={$t('bank_name')}
+				bind:value={localUser.bank_account.bank}
+				placeholder={$t('placeholder.bank_name')}
+			/>
+			<InputField
+				name="user[bank_account][iban]"
+				label={$t('iban')}
+				bind:value={localUser.bank_account.iban}
+				placeholder={$t('placeholder.iban')}
+				toUpperCase={true}
+			/>
+			<InputField
+				name="user[bank_account][bic]"
+				label={$t('bic')}
+				bind:value={localUser.bank_account.bic}
+				placeholder={$t('placeholder.bic')}
+				toUpperCase={true}
+			/>
+			<InputField
+				name="user[bank_account][mandate_reference]"
+				label={$t('mandate_reference')}
+				bind:value={localUser.bank_account.mandate_reference}
+				placeholder={$t('placeholder.mandate_reference')}
+			/>
+			<InputField
+				name="user[bank_account][mandate_date_signed]"
+				label={$t('mandate_date_signed')}
+				type="date"
+				bind:value={localUser.bank_account.mandate_date_signed}
+				readonly={true}
+			/>
+		</div>
+		<div class="button-container">
+			{#if isUpdating}
+				<SmallLoader width={30} message={'Aktualisiere...'} />
+			{:else}
+				<button type="button" class="button-dark" on:click={() => dispatch('cancel')}>
+					{$t('cancel')}</button
+				>
+				<button type="submit" class="button-dark">{$t('confirm')}</button>
+			{/if}
+		</div>
+	</form>
 {/if}
 
 <style>
-  .category-break {
-    grid-column: 1 / -1;
-    height: 1px;
-    background-color: #ccc;
-    margin-top: 10px;
-    margin-left: 20%;
-    width: 60%;
-    opacity: 0.4;
-  }
+	.category-break {
+		grid-column: 1 / -1;
+		height: 1px;
+		background-color: var(--surface0);
+		margin-top: 10px;
+		margin-left: 20%;
+		width: 60%;
+		opacity: 0.4;
+	}
 
-  .licence-categories {
-    margin-bottom: 20px;
-  }
+	.licence-categories {
+		margin-bottom: 20px;
+	}
 
-  .checkbox-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 0px;
-  }
+	.checkbox-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 0px;
+	}
 
-  .checkbox-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+	.checkbox-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 
-  .checkbox-label-container {
-    flex: 0 0 auto;
-    width: 4em;
-    margin-right: 5px;
-  }
+	.checkbox-label-container {
+		flex: 0 0 auto;
+		width: 4em;
+		margin-right: 5px;
+	}
 
-  .checkbox-description {
-    flex: 1;
-    font-size: 15px;
-    color: #9b9b9b;
-    margin-left: 10px;
-  }
+	.checkbox-description {
+		flex: 1;
+		font-size: 15px;
+		color: var(--subtext0);
+		margin-left: 10px;
+	}
 
-  @media (min-width: 768px) {
-    .checkbox-grid {
-      grid-template-columns: 1fr 1fr;
-      gap: 0px;
-    }
-  }
+	@media (min-width: 768px) {
+		.checkbox-grid {
+			grid-template-columns: 1fr 1fr;
+			gap: 0px;
+		}
+	}
 
-  @media (max-width: 480px) {
-    .checkbox-item {
-      flex-direction: column;
-      align-items: flex-start;
-    }
+	@media (max-width: 480px) {
+		.checkbox-item {
+			flex-direction: column;
+			align-items: flex-start;
+		}
 
-    .checkbox-description {
-      margin-left: 24px;
-      margin-top: 5px;
-      text-align: left;
-    }
-  }
-  .subscription-info {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-top: 1rem;
-    font-size: 0.9rem;
-  }
+		.checkbox-description {
+			margin-left: 24px;
+			margin-top: 5px;
+			text-align: left;
+		}
+	}
+	.subscription-info {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		margin-top: 1rem;
+		font-size: 0.9rem;
+		background-color: var(--surface0);
+		padding: 1rem;
+		border-radius: 8px;
+		border: 1px solid var(--surface1);
+	}
 
-  .subscription-column {
-    flex: 1;
-    min-width: 200px;
-  }
+	.subscription-column {
+		flex: 1;
+		min-width: 200px;
+		color: var(--text);
+	}
 
-  .subscription-column p {
-    margin: 0.5rem 0;
-  }
+	.subscription-column p {
+		margin: 0.5rem 0;
+	}
 
-  .subscription-column strong {
-    display: inline-block;
-    min-width: 100px;
-  }
-  .tab-content {
-    padding: 1rem;
-    border-radius: 0 0 3px 3px;
-  }
-  .button-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 1rem;
-    width: 100%;
-  }
+	.subscription-column strong {
+		display: inline-block;
+		min-width: 100px;
+		color: var(--lavender);
+	}
+	.tab-content {
+		padding: 1rem;
+		border-radius: 0 0 3px 3px;
+		background-color: var(--surface0);
+		border: 1px solid var(--surface1);
+		margin-top: 1rem;
+	}
+	.button-container {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 10px;
+		margin-top: 1rem;
+		width: 100%;
+	}
 
-  .button-container button {
-    flex: 1 1 0;
-    min-width: 120px;
-    max-width: calc(50%-5px);
-  }
-  @media (max-width: 480px) {
-    .button-container button {
-      flex-basis: 100%;
-      max-width: none;
-    }
-  }
+	.button-container button {
+		flex: 1 1 0;
+		min-width: 120px;
+		max-width: calc(50% - 5px);
+		background-color: var(--surface1);
+		color: var(--text);
+		border: 1px solid var(--overlay0);
+		transition: all 0.2s ease-in-out;
+	}
+
+	.button-container button:hover {
+		background-color: var(--surface2);
+		border-color: var(--lavender);
+	}
+
+	.button-container button.active {
+		background-color: var(--mauve);
+		border-color: var(--mauve);
+		color: var(--base);
+	}
+
+	@media (max-width: 480px) {
+		.button-container button {
+			flex-basis: 100%;
+			max-width: none;
+		}
+	}
 </style>
diff --git a/frontend/src/lib/css/styles.min.css b/frontend/src/lib/css/styles.min.css
index 19a02de..6a67add 100644
--- a/frontend/src/lib/css/styles.min.css
+++ b/frontend/src/lib/css/styles.min.css
@@ -1,46 +1,75 @@
+:root {
+	--rosewater: #f5e0dc;
+	--flamingo: #f2cdcd;
+	--pink: #f5c2e7;
+	--mauve: #cba6f7;
+	--red: #f38ba8;
+	--maroon: #eba0ac;
+	--peach: #fab387;
+	--yellow: #f9e2af;
+	--green: #a6e3a1;
+	--teal: #94e2d5;
+	--sky: #89dceb;
+	--sapphire: #74c7ec;
+	--blue: #89b4fa;
+	--lavender: #b4befe;
+	--text: #cdd6f4;
+	--subtext1: #bac2de;
+	--subtext0: #a6adc8;
+	--overlay2: #9399b2;
+	--overlay1: #7f849c;
+	--overlay0: #6c7086;
+	--surface2: #585b70;
+	--surface1: #45475a;
+	--surface0: #313244;
+	--base: #1e1e2e;
+	--mantle: #181825;
+	--crust: #11111b;
+}
+
 @font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW9.ttf)
-    format("truetype");
+	font-family: 'Roboto Mono';
+	font-style: normal;
+	font-weight: 300;
+	src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW9.ttf)
+		format('truetype');
 }
 @font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW9.ttf)
-    format("truetype");
+	font-family: 'Roboto Mono';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW9.ttf)
+		format('truetype');
 }
 
 html {
-  padding: 0 30px;
-  background-color: black;
-  color: #9b9b9b;
-  font-family: "Quicksand", sans-serif;
-  font-size: 16px;
-  font-weight: normal;
+	padding: 0 30px;
+	background-color: var(--base);
+	color: var(--text);
+	font-family: 'Quicksand', sans-serif;
+	font-size: 16px;
+	font-weight: normal;
 }
 body {
-  max-width: 1200px;
-  margin: 5em auto 0 auto;
+	max-width: 1200px;
+	margin: 5em auto 0 auto;
 }
 pre,
 code {
-  display: inline;
-  font-family: "Roboto Mono", monospace;
-  font-size: 16px;
+	display: inline;
+	font-family: 'Roboto Mono', monospace;
+	font-size: 16px;
 }
 
 input {
-  font-family: "Roboto Mono", monospace;
-  color: white;
-  border-style: none;
-  height: 21px;
-  font-size: 16px;
+	font-family: 'Roboto Mono', monospace;
+	color: var(--text);
+	border-style: none;
+	height: 21px;
+	font-size: 16px;
 }
 button {
-  font-size: 16px;
+	font-size: 16px;
 }
 h1,
 h2,
@@ -48,506 +77,514 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
-  font-weight: normal;
+	margin: 0;
+	font-weight: normal;
 }
 h2 {
-  margin: 0 0 45px 0;
-  color: #fff;
-  font-size: 36px;
+	margin: 0 0 45px 0;
+	color: var(--lavender);
+	font-size: 36px;
 }
 h3 {
-  margin: 0 0 2rem 0;
-  color: #fff;
-  font-size: 32px;
+	margin: 0 0 2rem 0;
+	color: var(--lavender);
+	font-size: 32px;
 }
 p {
-  margin: 0 0 45px;
-  line-height: 1.8;
+	margin: 0 0 45px;
+	line-height: 1.8;
 }
 ul {
-  margin: 0 0 32px;
+	margin: 0 0 32px;
 }
 a {
-  transition: border 0.2s ease-in-out;
-  border-bottom: 1px solid transparent;
-  text-decoration: none;
-  color: #00b7ef;
+	transition: border 0.2s ease-in-out;
+	border-bottom: 1px solid transparent;
+	text-decoration: none;
+	color: var(--blue);
 }
 a:hover {
-  border-bottom-color: #00b7ef;
+	border-bottom-color: var(--blue);
 }
 li {
-  line-height: 1.8;
+	line-height: 1.8;
 }
 li strong {
-  color: #fff;
+	color: var(--text);
 }
 .image {
-  width: 100%;
-  margin: 0 0 32px;
-  padding: 0;
+	width: 100%;
+	margin: 0 0 32px;
+	padding: 0;
 }
 .image img {
-  width: 100%;
+	width: 100%;
 }
 .optanon-alert-box-wrapper {
-  left: 0;
+	left: 0;
 }
 .hidden {
-  display: none !important;
+	display: none !important;
 }
 .hide-mobile {
-  display: none;
+	display: none;
 }
 @media (min-width: 680px) {
-  body {
-    margin: 8em auto 0 auto;
-  }
-  .hide-mobile {
-    display: initial;
-  }
+	body {
+		margin: 8em auto 0 auto;
+	}
+	.hide-mobile {
+		display: initial;
+	}
 }
 
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 3em 0 0;
-  background: black;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 3em 0 0;
+	background: var(--base);
 }
 .header.top-banner-open {
-  margin-top: 5px;
-  transition: all 0.2s linear;
+	margin-top: 5px;
+	transition: all 0.2s linear;
 }
 .header .header-container {
-  width: 100%;
-  max-width: calc(1200px + 10em);
-  height: 5em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
+	width: 100%;
+	max-width: calc(1200px + 10em);
+	height: 5em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0 auto;
+	background-color: var(--base);
 }
 .header .header-container .header-left {
-  display: flex;
-  flex-grow: 1;
+	display: flex;
+	flex-grow: 1;
 }
 .header .header-container .header-left .header-crafted-by-container {
-  font-size: 18px;
-  font-weight: 300;
+	font-size: 18px;
+	font-weight: 300;
 }
 .header .header-container .header-left .header-crafted-by-container a {
-  display: flex;
-  color: #9b9b9b;
-  border: none;
+	display: flex;
+	color: var(--subtext0);
+	border: none;
 }
 .header .header-container .header-left .header-crafted-by-container a img {
-  height: 28px;
+	height: 28px;
 }
 .header .header-container .header-left .header-crafted-by-container a span {
-  display: inline-block;
-  margin: 2px 1ch 0 0;
+	display: inline-block;
+	margin: 2px 1ch 0 0;
 }
 .header .header-container .header-left .header-crafted-by-container .auth0 {
-  margin-left: 1ch;
-  color: #fff;
-  font-weight: bold;
+	margin-left: 1ch;
+	color: var(--text);
+	font-weight: bold;
 }
 .header .header-container .header-right {
-  display: flex;
-  flex-grow: 1;
-  justify-content: space-between;
-  letter-spacing: 1px;
-  font-weight: 500;
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-between;
+	letter-spacing: 1px;
+	font-weight: 500;
 }
 .header .header-container .header-right .header-nav-item {
-  text-transform: uppercase;
-  margin-left: 10px;
+	text-transform: uppercase;
+	margin-left: 10px;
 }
 .header .header-container .header-right .header-nav-item button {
-  all: unset;
-  cursor: pointer;
+	all: unset;
+	cursor: pointer;
 }
 .header .header-container .header-right .header-nav-item.active a,
 .header .header-container .header-right .header-nav-item.active button {
-  color: #fff;
+	color: var(--text);
 }
 
 .header .header-container .header-right a img {
-  margin-top: -0.4rem;
-  height: 28px;
+	margin-top: -0.4rem;
+	height: 28px;
 }
 
 .header .header-container .header-right .header-nav-item a,
 .header .header-container .header-right .header-nav-item button {
-  transition: color 0.3s ease-in-out;
-  display: block;
-  padding: 20px 0;
-  border: none;
-  color: #9b9b9b;
+	transition: color 0.3s ease-in-out;
+	display: block;
+	padding: 20px 0;
+	border: none;
+	color: var(--subtext0);
 }
+
 .header .header-container .header-right .header-nav-item:hover a,
 .header .header-container .header-right .header-nav-item:hover button {
-  color: #fdfff5;
+	color: var(--lavender);
 }
 @media (min-width: 680px) {
-  .header {
-    padding: 3em 5rem 0;
-  }
-  .header.top-banner-open {
-    margin-top: 48px;
-  }
-  .header .header-container {
-    flex-direction: row;
-  }
-  .header .header-container .header-right {
-    justify-content: flex-end;
-  }
-  .header .header-container .header-right .header-nav-item {
-    margin-left: 26px;
-  }
+	.header {
+		padding: 3em 5rem 0;
+	}
+	.header.top-banner-open {
+		margin-top: 48px;
+	}
+	.header .header-container {
+		flex-direction: row;
+	}
+	.header .header-container .header-right {
+		justify-content: flex-end;
+	}
+	.header .header-container .header-right .header-nav-item {
+		margin-left: 26px;
+	}
 }
 .button-dark {
-  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  color: white;
-  text-transform: uppercase;
-  font-weight: 500;
-  padding: 18px 28px;
-  letter-spacing: 1px;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid #595b5c;
-  margin: 2px;
+	transition:
+		border-color 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	color: white;
+	text-transform: uppercase;
+	font-weight: 500;
+	padding: 18px 28px;
+	letter-spacing: 1px;
+	cursor: pointer;
+	background-color: transparent;
+	border: 1px solid var(--surface1);
+	margin: 2px;
 }
 .button-dark:hover {
-  border-color: #fff;
+	border-color: var(--text);
 }
 .button-colorful {
-  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  color: white;
-  text-transform: uppercase;
-  font-weight: 500;
-  padding: 18px 28px;
-  letter-spacing: 1px;
-  cursor: pointer;
-  background-color: #d43aff;
-  border: 1px solid #d43aff;
+	transition:
+		border-color 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	color: white;
+	text-transform: uppercase;
+	font-weight: 500;
+	padding: 18px 28px;
+	letter-spacing: 1px;
+	cursor: pointer;
+	background-color: var(--mauve);
+	border: 1px solid var(--mauve);
 }
 .button-colorful:hover {
-  background-color: #c907ff;
-  border-color: #c907ff;
+	background-color: #c907ff;
+	border-color: #c907ff;
 }
 .button-orange {
-  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  color: white;
-  text-transform: uppercase;
-  font-weight: 500;
-  padding: 18px 28px;
-  letter-spacing: 1px;
-  cursor: pointer;
-  background-color: #eb5424;
-  border: 1px solid #eb5424;
+	transition:
+		border-color 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	color: white;
+	text-transform: uppercase;
+	font-weight: 500;
+	padding: 18px 28px;
+	letter-spacing: 1px;
+	cursor: pointer;
+	background-color: var(--peach);
+	border: 1px solid var(--peach);
 }
 .button-orange:hover {
-  background-color: #ca3f12;
-  border-color: #ca3f12;
+	background-color: #ca3f12;
+	border-color: #ca3f12;
 }
 .button-colorful:disabled {
-  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  color: white;
-  text-transform: uppercase;
-  font-weight: 500;
-  padding: 18px 28px;
-  letter-spacing: 1px;
-  cursor: pointer;
-  background-color: #9a9a9a;
-  border: 1px solid #9a9a9a;
+	transition:
+		border-color 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	color: white;
+	text-transform: uppercase;
+	font-weight: 500;
+	padding: 18px 28px;
+	letter-spacing: 1px;
+	cursor: pointer;
+	background-color: var(--overlay0);
+	border: 1px solid var(--overlay0);
 }
 .hero-container {
-  max-width: 795px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto 70px auto;
+	max-width: 795px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0 auto 70px auto;
 }
 .hero-container .hero-logo {
-  margin-top: 88px;
-  margin-bottom: 32px;
+	margin-top: 88px;
+	margin-bottom: 32px;
 }
 .hero-container .hero-subtitle {
-  font-size: 20px;
-  text-align: center;
-  line-height: 32px;
-  margin: 0 0 45px 0;
+	font-size: 20px;
+	text-align: center;
+	line-height: 32px;
+	margin: 0 0 45px 0;
 }
 .hero-container .hero-buttons-container {
-  display: flex;
+	display: flex;
 }
 .hero-container .hero-buttons-container button {
-  margin: 0 8px;
+	margin: 0 8px;
 }
 @media (min-width: 680px) {
-  .hero-container {
-    margin: 0 auto 140px auto;
-  }
+	.hero-container {
+		margin: 0 auto 140px auto;
+	}
 }
 
 .container {
-  transition: opacity 0.2s ease-in-out;
-  color: white;
-  letter-spacing: 0;
-  opacity: 1;
+	transition: opacity 0.2s ease-in-out;
+	color: white;
+	letter-spacing: 0;
+	opacity: 1;
 }
 
 .container .content {
-  width: 100%;
-  flex-grow: 1;
+	width: 100%;
+	flex-grow: 1;
 }
 .container .content .step-title {
-  color: #fff;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 86px;
-  opacity: 1;
+	color: #fff;
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 86px;
+	opacity: 1;
 }
 .container .content .step-subtitle {
-  position: relative;
-  top: -5px;
-  font-size: 16px;
-  font-weight: 300;
+	position: relative;
+	top: -5px;
+	font-size: 16px;
+	font-weight: 300;
 }
 
 @media (max-width: 680px) {
-  .container .content {
-    margin-top: 120px;
-  }
+	.container .content {
+		margin-top: 120px;
+	}
 }
 
 @media (min-width: 680px) {
-  .container {
-    position: relative;
-    left: 100px;
-    display: flex;
-    width: calc(100% - 100px);
-    padding: 0;
-  }
-  .container .content {
-    max-width: 795px;
-  }
-  .container .content .step-title {
-    font-size: 36px;
-  }
+	.container {
+		position: relative;
+		left: 100px;
+		display: flex;
+		width: calc(100% - 100px);
+		padding: 0;
+	}
+	.container .content {
+		max-width: 795px;
+	}
+	.container .content .step-title {
+		font-size: 36px;
+	}
 }
 .input-box {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 10px 0;
-  padding: 10px;
-  width: 100%;
-  height: auto;
-  box-sizing: border-box;
-  background-color: #2f2f2f;
-  border-radius: 3px;
-  font-family: "Roboto Mono", monospace;
-  font-size: 13px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 10px 0;
+	padding: 10px;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	background-color: var(--surface0);
+	border-radius: 3px;
+	font-family: 'Roboto Mono', monospace;
+	font-size: 13px;
 }
 .input-box .label {
-  margin: 0 1ch 0 0;
-  font-size: 16px;
+	margin: 0 1ch 0 0;
+	font-size: 16px;
 }
 .input-box .input {
-  background-color: #494848;
-  border-radius: 6px;
-  outline: none;
-  border: 3px solid #494848;
-  width: 100%;
-  max-width: 444px;
-  font-size: 13px;
+	background-color: var(--surface1);
+	border: 3px solid var(--surface1);
+	border-radius: 6px;
+	outline: none;
+	width: 100%;
+	max-width: 444px;
+	font-size: 13px;
 }
 @media (min-width: 680px) {
-  .input-box {
-    padding: 10px;
-  }
+	.input-box {
+		padding: 10px;
+	}
 }
 .btn-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: first baseline;
+	display: flex;
+	justify-content: space-between;
+	align-items: first baseline;
 }
 @media (max-width: 680px) {
-  .btn-container {
-    align-items: flex-start;
-  }
-  .btn-container p {
-    margin-left: 1rem;
-  }
+	.btn-container {
+		align-items: flex-start;
+	}
+	.btn-container p {
+		margin-left: 1rem;
+	}
 }
 .button-group {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1rem;
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 1rem;
 }
 
 .btn {
-  font-family: "Roboto Mono", monospace;
-  letter-spacing: 1px;
-  padding: 18px 28px;
-  border: 1px solid;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  border-radius: 5px;
+	font-family: 'Roboto Mono', monospace;
+	letter-spacing: 1px;
+	padding: 18px 28px;
+	border: 1px solid;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	transition:
+		border-color 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	border-radius: 5px;
 }
 
 .btn.primary {
-  background-color: #4361ee;
-  border-color: #4361ee;
-  color: white;
+	background-color: var(--blue);
+	border-color: var(--blue);
+	color: white;
 }
 
 .btn.primary:hover {
-  background-color: #3651d4;
-  border-color: #3651d4;
+	background-color: var(--sapphire);
+	border-color: var(--sapphire);
 }
 
 .btn.danger {
-  background-color: #dc2626;
-  border-color: #dc2626;
-  color: white;
+	background-color: var(--red);
+	border-color: var(--red);
+	color: white;
 }
 
 .btn.danger:hover {
-  background-color: #c51f1f;
-  border-color: #c51f1f;
+	background-color: var(--maroon);
+	border-color: var(--maroon);
 }
 .warning {
-  margin: 20px 0;
-  padding: 1rem;
-  width: 100%;
-  box-sizing: border-box;
-  background-color: rgb(255 228 230);
-  border: 1px solid rgb(225 29 72);
-  border-radius: 6px;
-  color: rgb(225 29 72);
-  font-size: 16px;
+	margin: 20px 0;
+	padding: 1rem;
+	width: 100%;
+	box-sizing: border-box;
+	background-color: var(--surface0);
+	border: 1px solid var(--red);
+	color: var(--red);
+	border-radius: 6px;
+	font-size: 16px;
 }
 .warning a {
-  color: rgb(225 29 72);
-  text-decoration: underline;
+	color: var(--red);
+	text-decoration: underline;
 }
 .warning.hidden {
-  display: none;
+	display: none;
 }
 
 .error {
-  margin-top: 10rem;
-  padding: 30px 40px;
-  background: #2f3132;
-  color: #fff;
+	margin-top: 10rem;
+	padding: 30px 40px;
+	background: var(--surface0);
+	color: var(--text);
 }
 .error p {
-  margin: 0 0 1rem;
+	margin: 0 0 1rem;
 }
 .error p.intro {
-  font-size: 1.3rem;
+	font-size: 1.3rem;
 }
 .error .button-colorful {
-  display: inline-block;
+	display: inline-block;
 }
 @media (min-width: 680px) {
-  .error {
-    padding: 65px 80px;
-  }
+	.error {
+		padding: 65px 80px;
+	}
 }
 
 .footer-branding-container {
-  color: white;
-  font-weight: 300;
-  margin-bottom: 73px;
+	color: white;
+	font-weight: 300;
+	margin-bottom: 73px;
 }
 
 .footer-branding-container .footer-branding {
-  display: flex;
-  width: 400px;
+	display: flex;
+	width: 400px;
 }
 .footer-branding-container .footer-branding {
-  flex-direction: column;
-  text-align: center;
-  margin: 30px 0 0;
+	flex-direction: column;
+	text-align: center;
+	margin: 30px 0 0;
 }
 .footer-branding-container .footer-branding .footer-crafted-by-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16px;
-  color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 16px;
+	color: white;
 }
 .footer-branding-container .footer-branding .footer-crafted-by-container span {
-  display: inline-block;
-  margin: 3px 1ch 0 0;
+	display: inline-block;
+	margin: 3px 1ch 0 0;
 }
 .footer-branding-container
-  .footer-branding
-  .footer-crafted-by-container
-  .footer-branded-crafted-img {
-  height: 28px;
+	.footer-branding
+	.footer-crafted-by-container
+	.footer-branded-crafted-img {
+	height: 28px;
 }
 
 .footer-branding-container .footer-branding .footer-copyright {
-  color: #696969;
-  letter-spacing: 0.5px;
+	color: #696969;
+	letter-spacing: 0.5px;
 }
 .footer-container {
-  width: 100%;
-  color: white;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	width: 100%;
+	color: white;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 @media (min-width: 680px) {
-  .footer-container {
-    padding: 0;
-  }
+	.footer-container {
+		padding: 0;
+	}
 }
 
 .simple-loader {
-  --b: 20px; /* border thickness */
-  --n: 15; /* number of dashes*/
-  --g: 7deg; /* gap  between dashes*/
-  --c: #d43aff; /* the color */
+	--b: 20px; /* border thickness */
+	--n: 15; /* number of dashes*/
+	--g: 7deg; /* gap  between dashes*/
+	--c: var(--mauve); /* Changed loader color to match theme */
 
-  width: 40px; /* size */
-  aspect-ratio: 1;
-  border-radius: 50%;
-  padding: 1px; /* get rid of bad outlines */
-  background: conic-gradient(#0000, var(--c)) content-box;
-  --_m: /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
-      #0000 0deg,
-      #000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
-      #0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
-    ),
-    radial-gradient(
-      farthest-side,
-      #0000 calc(98% - var(--b)),
-      #000 calc(100% - var(--b))
-    );
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
-  -webkit-mask-composite: destination-in;
-  mask-composite: intersect;
-  animation: load 1s infinite steps(var(--n));
+	width: 40px; /* size */
+	aspect-ratio: 1;
+	border-radius: 50%;
+	padding: 1px; /* get rid of bad outlines */
+	background: conic-gradient(#0000, var(--c)) content-box;
+	--_m: /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
+			#0000 0deg,
+			#000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
+			#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
+		),
+		radial-gradient(farthest-side, #0000 calc(98% - var(--b)), #000 calc(100% - var(--b)));
+	-webkit-mask: var(--_m);
+	mask: var(--_m);
+	-webkit-mask-composite: destination-in;
+	mask-composite: intersect;
+	animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {
-  to {
-    transform: rotate(1turn);
-  }
+	to {
+		transform: rotate(1turn);
+	}
 }
diff --git a/frontend/src/routes/auth/about/[id]/+page.svelte b/frontend/src/routes/auth/about/[id]/+page.svelte
index d383b1c..6fb9630 100644
--- a/frontend/src/routes/auth/about/[id]/+page.svelte
+++ b/frontend/src/routes/auth/about/[id]/+page.svelte
@@ -1,156 +1,156 @@
 <script>
-  import Modal from "$lib/components/Modal.svelte";
-  import UserEditForm from "$lib/components/UserEditForm.svelte";
-  import { onMount } from "svelte";
-  import { page } from "$app/stores";
-  import { t } from "svelte-i18n";
+	import Modal from '$lib/components/Modal.svelte';
+	import UserEditForm from '$lib/components/UserEditForm.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { t } from 'svelte-i18n';
 
-  /** @type {import('./$types').ActionData} */
-  export let form;
+	/** @type {import('./$types').ActionData} */
+	export let form;
 
-  $: ({ user, licence_categories, subscriptions } = $page.data);
+	$: ({ user, licence_categories, subscriptions } = $page.data);
 
-  let showModal = false;
+	let showModal = false;
 
-  const open = () => (showModal = true);
-  const close = () => {
-    showModal = false;
-    if (form) {
-      form.errors = undefined;
-    }
-  };
+	const open = () => (showModal = true);
+	const close = () => {
+		showModal = false;
+		if (form) {
+			form.errors = undefined;
+		}
+	};
 
-  onMount(() => {
-    console.dir(user);
-  });
+	onMount(() => {
+		console.dir(user);
+	});
 </script>
 
 <div class="hero-container">
-  <div class="user-info">
-    {#if user.status}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">Status:</span>
-        <span class="value block-value">
-          <span
-            >{$t(`userStatus.${user.status}`, {
-              default: "unknown status",
-            })}</span
-          >
-          <span
-            >{$t(`userRole.${user.role_id}`, { default: "unknown role" })}</span
-          >
-        </span>
-      </h3>
-    {/if}
-    <h3 class="hero-subtitle subtitle info-row">
-      <span class="label">Name:</span>
-      <span class="value">{`${user.first_name} ${user.last_name}`}</span>
-    </h3>
-    {#if user.email}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">Email:</span>
-        <span class="value">{user.email}</span>
-      </h3>
-    {/if}
-    {#if user.address}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">Adresse:</span>
-        <span class="value block-value">
-          <span>{user.address}</span>
-          <span>{`${user.zip_code} ${user.city}`}</span>
-        </span>
-      </h3>
-    {/if}
-    {#if user.phone}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">Telefon:</span>
-        <span class="value">{user.phone}</span>
-      </h3>
-    {/if}
-    {#if user.date_of_birth}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">Geburtstag:</span>
-        <span class="value">{user.date_of_birth}</span>
-      </h3>
-    {/if}
-    {#if user.notes}
-      <h3 class="hero-subtitle subtitle info-row">
-        <span class="label">{$t("notes")}:</span>
-        <span class="value">{user.notes}</span>
-      </h3>
-    {/if}
-  </div>
+	<div class="user-info">
+		{#if user.status}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">Status:</span>
+				<span class="value block-value">
+					<span
+						>{$t(`userStatus.${user.status}`, {
+							default: 'unknown status'
+						})}</span
+					>
+					<span>{$t(`userRole.${user.role_id}`, { default: 'unknown role' })}</span>
+				</span>
+			</h3>
+		{/if}
+		<h3 class="hero-subtitle subtitle info-row">
+			<span class="label">Name:</span>
+			<span class="value">{`${user.first_name} ${user.last_name}`}</span>
+		</h3>
+		{#if user.email}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">Email:</span>
+				<span class="value">{user.email}</span>
+			</h3>
+		{/if}
+		{#if user.address}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">Adresse:</span>
+				<span class="value block-value">
+					<span>{user.address}</span>
+					<span>{`${user.zip_code} ${user.city}`}</span>
+				</span>
+			</h3>
+		{/if}
+		{#if user.phone}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">Telefon:</span>
+				<span class="value">{user.phone}</span>
+			</h3>
+		{/if}
+		{#if user.date_of_birth}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">Geburtstag:</span>
+				<span class="value">{user.date_of_birth}</span>
+			</h3>
+		{/if}
+		{#if user.notes}
+			<h3 class="hero-subtitle subtitle info-row">
+				<span class="label">{$t('notes')}:</span>
+				<span class="value">{user.notes}</span>
+			</h3>
+		{/if}
+	</div>
 
-  <div class="hero-buttons-container">
-    <button class="button-dark" on:click={open}>Ändern</button>
-  </div>
+	<div class="hero-buttons-container">
+		<button class="button-dark" on:click={open}>Ändern</button>
+	</div>
 </div>
 
 {#if showModal}
-  <Modal on:close={close}>
-    <UserEditForm
-      {form}
-      {user}
-      {subscriptions}
-      {licence_categories}
-      on:cancel={close}
-    />
-  </Modal>
+	<Modal on:close={close}>
+		<UserEditForm {form} {user} {subscriptions} {licence_categories} on:cancel={close} />
+	</Modal>
 {/if}
 
 <style>
-  .hero-container .hero-subtitle:not(:last-of-type) {
-    margin: 0 0 0 0;
-  }
+	.hero-container .hero-subtitle:not(:last-of-type) {
+		margin: 0 0 0 0;
+	}
 
-  .hero-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+	.hero-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
 
-  .user-info {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem 1rem;
-    align-items: start;
-    text-align: left;
-    margin-top: 1rem;
-  }
+	.user-info {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.5rem 1rem;
+		align-items: start;
+		text-align: left;
+		margin-top: 1rem;
+		color: var(--text);
+		background-color: var(--surface0);
+		padding: 1.5rem;
+		border-radius: 8px;
+		border: 1px solid var(--surface1);
+	}
 
-  .info-row {
-    display: contents;
-  }
+	.info-row {
+		display: contents;
+	}
 
-  .label {
-    font-size: 1.3rem;
-    font-weight: bold;
-    text-align: left;
-    padding-right: 1rem;
-  }
+	.label {
+		font-size: 1.3rem;
+		font-weight: bold;
+		text-align: left;
+		padding-right: 1rem;
+		color: var(--lavender);
+	}
 
-  .value {
-    margin: 0;
-    font-size: 1.2rem;
-    text-align: left;
-  }
+	.value {
+		margin: 0;
+		font-size: 1.2rem;
+		text-align: left;
+		color: var(--text);
+	}
 
-  .block-value {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-  }
+	.block-value {
+		display: flex;
+		align-items: flex-start;
+		flex-direction: column;
+		color: var(--subtext0);
+	}
 
-  .hero-buttons-container {
-    margin-top: 1rem;
-  }
+	.hero-buttons-container {
+		margin-top: 1rem;
+	}
 
-  .user-info {
-    font-size: 1rem;
-  }
+	.user-info {
+		font-size: 1rem;
+	}
 
-  .label,
-  .value {
-    font-size: 1.1rem;
-  }
+	.label,
+	.value {
+		font-size: 1.1rem;
+	}
 </style>
diff --git a/frontend/src/routes/auth/admin/users/+page.svelte b/frontend/src/routes/auth/admin/users/+page.svelte
index 4c412fb..4d96ff6 100644
--- a/frontend/src/routes/auth/admin/users/+page.svelte
+++ b/frontend/src/routes/auth/admin/users/+page.svelte
@@ -1,50 +1,50 @@
 <script>
-  import Modal from "$lib/components/Modal.svelte";
-  import UserEditForm from "$lib/components/UserEditForm.svelte";
-  import { t } from "svelte-i18n";
-  import { page } from "$app/stores";
+	import Modal from '$lib/components/Modal.svelte';
+	import UserEditForm from '$lib/components/UserEditForm.svelte';
+	import { t } from 'svelte-i18n';
+	import { page } from '$app/stores';
 
-  /** @type {import('./$types').ActionData} */
-  export let form;
+	/** @type {import('./$types').ActionData} */
+	export let form;
 
-  $: ({
-    user,
-    users = [],
-    licence_categories = [],
-    subscriptions = [],
-    payments = [],
-  } = $page.data);
+	$: ({
+		user,
+		users = [],
+		licence_categories = [],
+		subscriptions = [],
+		payments = []
+	} = $page.data);
 
-  let activeSection = "users";
-  /** @type{App.Locals['user'] | null} */
-  let selectedUser = null;
-  let showModal = false;
+	let activeSection = 'users';
+	/** @type{App.Locals['user'] | null} */
+	let selectedUser = null;
+	let showModal = false;
 
-  /**
-   * Opens the edit modal for the selected user.
-   * @param {App.Locals['user'] | null} user The user to edit.
-   */
-  const openEditModal = (user) => {
-    selectedUser = user;
-    console.dir(selectedUser);
-    showModal = true;
-  };
+	/**
+	 * Opens the edit modal for the selected user.
+	 * @param {App.Locals['user'] | null} user The user to edit.
+	 */
+	const openEditModal = (user) => {
+		selectedUser = user;
+		console.dir(selectedUser);
+		showModal = true;
+	};
 
-  const close = () => {
-    showModal = false;
-    selectedUser = null;
-    if (form) {
-      form.errors = undefined;
-    }
-  };
+	const close = () => {
+		showModal = false;
+		selectedUser = null;
+		if (form) {
+			form.errors = undefined;
+		}
+	};
 
-  /**
-   * sets the active admin section for display
-   * @param {string} section The new active section.
-   */
-  const setActiveSection = (section) => {
-    activeSection = section;
-  };
+	/**
+	 * sets the active admin section for display
+	 * @param {string} section The new active section.
+	 */
+	const setActiveSection = (section) => {
+		activeSection = section;
+	};
 </script>
 
 <div class="container">
@@ -57,7 +57,7 @@
 						class="nav-link {activeSection === 'users' ? 'active' : ''}"
 						on:click={() => setActiveSection('users')}
 					>
-						<i class="fas fa-users" />
+						<i class="fas fa-users"></i>
 						<span class="nav-badge">{users.length}</span>
 						{$t('users')}
 					</button>
@@ -67,7 +67,7 @@
 						class="nav-link {activeSection === 'subscriptions' ? 'active' : ''}"
 						on:click={() => setActiveSection('subscriptions')}
 					>
-						<i class="fas fa-clipboard-list" />
+						<i class="fas fa-clipboard-list"></i>
 						<span class="nav-badge">{subscriptions.length}</span>
 						{$t('subscriptions')}
 					</button>
@@ -77,7 +77,7 @@
 						class="nav-link {activeSection === 'payments' ? 'active' : ''}"
 						on:click={() => setActiveSection('payments')}
 					>
-						<i class="fas fa-credit-card" />
+						<i class="fas fa-credit-card"></i>
 						{$t('payments')}
 					</button>
 				</li>
@@ -90,7 +90,7 @@
 				<div class="section-header">
 					<h2>{$t('users')}</h2>
 					<button class="btn primary" on:click={() => openEditModal(null)}>
-						<i class="fas fa-plus" />
+						<i class="fas fa-plus"></i>
 						{$t('add_new')}
 					</button>
 				</div>
@@ -124,11 +124,11 @@
 								</table>
 								<div class="button-group">
 									<button class="btn primary" on:click={() => openEditModal(user)}>
-										<i class="fas fa-edit" />
+										<i class="fas fa-edit"></i>
 										{$t('edit')}
 									</button>
 									<button class="btn danger">
-										<i class="fas fa-trash" />
+										<i class="fas fa-trash"></i>
 										{$t('delete')}
 									</button>
 								</div>
@@ -140,7 +140,7 @@
 				<div class="section-header">
 					<h2>{$t('subscriptions')}</h2>
 					<button class="btn primary" on:click={() => openEditModal(null)}>
-						<i class="fas fa-plus" />
+						<i class="fas fa-plus"></i>
 						{$t('add_new')}
 					</button>
 				</div>