From 11c55a17ea68fbfca1815c97a61311e5e5f8f6f9 Mon Sep 17 00:00:00 2001
From: Alex <$(pass /github/email)>
Date: Thu, 16 Jan 2025 14:23:54 +0100
Subject: [PATCH] frontend: real world movement

---
 frontend/src/app.d.ts                         |   3 +
 frontend/src/app.html                         |  40 +-
 frontend/src/hooks.server.js                  |   4 +-
 frontend/src/lib/components/Modal.svelte      |   2 +-
 frontend/src/lib/components/Transition.svelte |   2 +-
 .../src/lib/components/UserEditForm.svelte    | 814 +++++++++---------
 frontend/src/lib/css/bootstrap-custom.scss    | 151 ++++
 frontend/src/lib/css/styles.min.css           |  40 +
 frontend/src/lib/locales/de.js                |  30 +-
 frontend/src/routes/+layout.svelte            |   1 +
 .../routes/auth/about/[id]/+page.server.js    |  29 +-
 .../routes/auth/admin/users/+layout.server.js |   8 -
 .../routes/auth/admin/users/+page.server.js   | 203 +++--
 .../src/routes/auth/admin/users/+page.svelte  | 388 +++++++--
 .../routes/auth/admin/users/old+page.svelte   |  94 ++
 .../src/routes/auth/login/+page.server.js     |   8 +-
 frontend/src/routes/auth/login/+page.svelte   |   4 +-
 .../css/{ => bootstrapv5}/bootstrap-grid.css  |   0
 .../{ => bootstrapv5}/bootstrap-grid.css.map  |   0
 .../{ => bootstrapv5}/bootstrap-grid.min.css  |   0
 .../bootstrap-grid.min.css.map                |   0
 .../{ => bootstrapv5}/bootstrap-reboot.css    |   0
 .../bootstrap-reboot.css.map                  |   0
 .../bootstrap-reboot.min.css                  |   0
 .../bootstrap-reboot.min.css.map              |   0
 .../{ => bootstrapv5}/bootstrap-utilities.css |   0
 .../bootstrap-utilities.css.map               |   0
 .../bootstrap-utilities.min.css               |   0
 .../bootstrap-utilities.min.css.map           |   0
 .../css/{ => bootstrapv5}/bootstrap.css       |   0
 .../css/{ => bootstrapv5}/bootstrap.css.map   |   0
 .../css/{ => bootstrapv5}/bootstrap.min.css   |   0
 .../{ => bootstrapv5}/bootstrap.min.css.map   |   0
 .../js/{ => bootstrapv5}/bootstrap.bundle.js  |   0
 .../{ => bootstrapv5}/bootstrap.bundle.js.map |   0
 .../{ => bootstrapv5}/bootstrap.bundle.min.js |   0
 .../bootstrap.bundle.min.js.map               |   0
 .../js/{ => bootstrapv5}/bootstrap.esm.js     |   0
 .../js/{ => bootstrapv5}/bootstrap.esm.js.map |   0
 .../js/{ => bootstrapv5}/bootstrap.esm.min.js |   0
 .../bootstrap.esm.min.js.map                  |   0
 .../static/js/{ => bootstrapv5}/bootstrap.js  |   0
 .../js/{ => bootstrapv5}/bootstrap.js.map     |   0
 .../js/{ => bootstrapv5}/bootstrap.min.js     |   0
 .../js/{ => bootstrapv5}/bootstrap.min.js.map |   0
 frontend/svelte.config.js                     |  19 +-
 46 files changed, 1277 insertions(+), 563 deletions(-)
 create mode 100644 frontend/src/lib/css/bootstrap-custom.scss
 create mode 100644 frontend/src/routes/auth/admin/users/old+page.svelte
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-grid.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-grid.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-grid.min.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-grid.min.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-reboot.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-reboot.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-reboot.min.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-reboot.min.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-utilities.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-utilities.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-utilities.min.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap-utilities.min.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap.css.map (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap.min.css (100%)
 rename frontend/src/static/css/{ => bootstrapv5}/bootstrap.min.css.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.bundle.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.bundle.js.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.bundle.min.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.bundle.min.js.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.esm.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.esm.js.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.esm.min.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.esm.min.js.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.js.map (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.min.js (100%)
 rename frontend/src/static/js/{ => bootstrapv5}/bootstrap.min.js.map (100%)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index e9f17a3..885733e 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -76,6 +76,9 @@ declare global {
       subscriptions: Subscription[];
       licence_categories: LicenceCategory[];
     }
+    interface Types {
+      licenceCategory: LicenceCategory;
+    }
     // interface PageData {}
     // interface Platform {}
   }
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 8705da0..2325e5c 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,18 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Quicksand:wght@400;500;600;700&display=swap"
-			rel="stylesheet"
-		/>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Quicksand:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <!-- <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    /> -->
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/frontend/src/hooks.server.js b/frontend/src/hooks.server.js
index 1bf77d6..a6b0f0a 100644
--- a/frontend/src/hooks.server.js
+++ b/frontend/src/hooks.server.js
@@ -3,8 +3,10 @@ import { refreshCookie, userDatesFromRFC3339 } from "$lib/utils/helpers";
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
+  console.log("Hook started", event.url.pathname);
   if (event.locals.user) {
     // if there is already a user  in session load page as normal
+    console.log("user is logged in");
     return await resolve(event);
   }
 
@@ -52,8 +54,6 @@ export async function handle({ event, resolve }) {
   event.locals.user = data.user;
   event.locals.subscriptions = subscriptionsData.subscriptions;
   event.locals.licence_categories = licence_categoriesData.licence_categories;
-  // console.log("hooks.server: Printing locals:");
-  // console.dir(event.locals);
 
   // load page as normal
   return await resolve(event);
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 3233550..db57222 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -28,7 +28,7 @@
 
 <div class="modal-background">
   <div
-    transition:modal={{ duration: 1000 }}
+    transition:modal|global={{ duration: 1000 }}
     class="modal"
     role="dialog"
     aria-modal="true"
diff --git a/frontend/src/lib/components/Transition.svelte b/frontend/src/lib/components/Transition.svelte
index e7f2d51..526b26a 100644
--- a/frontend/src/lib/components/Transition.svelte
+++ b/frontend/src/lib/components/Transition.svelte
@@ -8,7 +8,7 @@
 </script>
 
 {#key key}
-    <div in:slide={{ duration, delay: duration }} out:slide={{ duration }}>
+    <div in:slide|global={{ duration, delay: duration }} out:slide|global={{ duration }}>
         <slot />
     </div>
 {/key}
diff --git a/frontend/src/lib/components/UserEditForm.svelte b/frontend/src/lib/components/UserEditForm.svelte
index c03ad8c..4dd9455 100644
--- a/frontend/src/lib/components/UserEditForm.svelte
+++ b/frontend/src/lib/components/UserEditForm.svelte
@@ -1,6 +1,7 @@
 <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";
@@ -11,57 +12,85 @@
   /** @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'] | null} */
   export let user;
-  if (user == null) {
-    user = {
-      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'] } */
+  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,
+            };
+    }
   }
 
+  $: isNewUser = user === null;
+  $: isLoading = user === undefined;
+
+  $: {
+    console.log("incomingUser:", user);
+  }
+
+  // Add debug logging for user
+  $: {
+    console.log("processed user:", user);
+  }
   /** @type {App.Locals['licence_categories']} */
   export let licence_categories;
 
@@ -91,6 +120,7 @@
     { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
   ];
 
+  const dispatch = createEventDispatcher();
   const TABS = ["profile", "licence", "membership", "bankaccount"];
   let activeTab = TABS[0];
 
@@ -106,7 +136,7 @@
   }));
   $: selectedSubscriptionModel =
     subscriptions.find(
-      (sub) => sub?.id === user.membership?.subscription_model.id
+      (sub) => sub?.id === localUser.membership?.subscription_model.id
     ) || null;
 
   /**
@@ -142,374 +172,386 @@
   }
 
   /** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
-  const handleUpdate = async ({ form, formData, action, cancel }) => {
+  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>
 
-<form
-  class="content"
-  action="?/updateUser"
-  method="POST"
-  use:enhance={handleUpdate}
->
-  <input name="id" type="number" hidden bind:value={user.id} />
-  <h1 class="step-title" style="text-align: center;">{$t("user.edit")}</h1>
-  {#if form?.success}
-    <h4
-      class="step-subtitle warning"
-      in:receive={{ key: Math.floor(Math.random() * 100) }}
-      out:send={{ 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)}
+{#if isLoading}
+  <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={{ key: error.id }}
-        out:send={{ key: error.id }}
+        in:receive|global={{ key: Math.floor(Math.random() * 100) }}
+        out:send|global={{ key: Math.floor(Math.random() * 100) }}
       >
-        {$t(error.field) + ": " + $t(error.key)}
+        Um einen fehlerhaften upload Ihres Bildes zu vermeiden, clicke bitte auf
+        den "Update" Button unten.
       </h4>
-    {/each}
-  {/if}
+    {/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="profile_picture"
-    bind:value={user.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="status"
-      type="select"
-      label={$t("status")}
-      bind:value={user.status}
-      options={userStatusOptions}
+    <input
+      type="hidden"
+      hidden
+      name="user[profile_picture]"
+      bind:value={localUser.profile_picture}
     />
-    {#if user.role_id === 8}
+
+    <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="role_id"
+        name="user[status]"
         type="select"
-        label={$t("user.role")}
-        bind:value={user.role_id}
-        options={userRoleOptions}
+        label={$t("status")}
+        bind:value={localUser.status}
+        options={userStatusOptions}
       />
-    {/if}
-    <InputField
-      name="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="first_name"
-      label={$t("first_name")}
-      bind:value={user.first_name}
-      placeholder={$t("placeholder.first_name")}
-      required={true}
-    />
-    <InputField
-      name="last_name"
-      label={$t("last_name")}
-      bind:value={user.last_name}
-      placeholder={$t("placeholder.last_name")}
-      required={true}
-    />
-    <InputField
-      name="company"
-      label={$t("company")}
-      bind:value={user.company}
-      placeholder={$t("placeholder.company")}
-    />
-    <InputField
-      name="email"
-      type="email"
-      label={$t("email")}
-      bind:value={user.email}
-      placeholder={$t("placeholder.email")}
-      required={true}
-    />
-    <InputField
-      name="phone"
-      type="tel"
-      label={$t("phone")}
-      bind:value={user.phone}
-      placeholder={$t("placeholder.phone")}
-    />
-    <InputField
-      name="birth_date"
-      type="date"
-      label={$t("birth_date")}
-      bind:value={user.date_of_birth}
-      placeholder={$t("placeholder.birth_date")}
-    />
-    <InputField
-      name="address"
-      label={$t("address")}
-      bind:value={user.address}
-      placeholder={$t("placeholder.address")}
-    />
-    <InputField
-      name="zip_code"
-      label={$t("zip_code")}
-      bind:value={user.zip_code}
-      placeholder={$t("placeholder.zip_code")}
-    />
-    <InputField
-      name="city"
-      label={$t("city")}
-      bind:value={user.city}
-      placeholder={$t("placeholder.city")}
-    />
-    <InputField
-      name="notes"
-      type="textarea"
-      label={$t("notes")}
-      bind:value={user.notes}
-      placeholder={$t("placeholder.notes", {
-        values: { name: user.first_name || "" },
-      })}
-      rows={10}
-    />
-  </div>
-  <div
-    class="tab-content"
-    style="display: {activeTab === 'licence' ? 'block' : 'none'}"
-  >
-    <InputField
-      name="licence_status"
-      type="select"
-      label={$t("status")}
-      bind:value={user.licence.status}
-      options={licenceStatusOptions}
-    />
-    <InputField
-      name="licence_number"
-      type="text"
-      label={$t("licence_number")}
-      bind:value={user.licence.licence_number}
-      placeholder={$t("placeholder.licence_number")}
-      toUpperCase={true}
-    />
-    <InputField
-      name="issued_date"
-      type="date"
-      label={$t("issued_date")}
-      bind:value={user.licence.issued_date}
-      placeholder={$t("placeholder.issued_date")}
-    />
-    <InputField
-      name="expiration_date"
-      type="date"
-      label={$t("expiration_date")}
-      bind:value={user.licence.expiration_date}
-      placeholder={$t("placeholder.expiration_date")}
-    />
-    <InputField
-      name="country"
-      label={$t("country")}
-      bind:value={user.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="licence_categories[]"
-                  value={JSON.stringify(category)}
-                  label={category.category}
-                  checked={user.licence.licence_categories != null &&
-                    user.licence.licence_categories.some(
-                      (cat) => cat.category === category.category
-                    )}
-                />
+      {#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>
-              <span class="checkbox-description">
-                {$t(`licenceCategory.${category.category}`)}
-              </span>
-            </div>
+            {/each}
           {/each}
-        {/each}
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="tab-content"
-    style="display: {activeTab === 'membership' ? 'block' : 'none'}"
-  >
-    <InputField
-      name="membership_status"
-      type="select"
-      label={$t("status")}
-      bind:value={user.membership.status}
-      options={membershipStatusOptions}
-    />
-    <InputField
-      name="subscription_model_name"
-      type="select"
-      label={$t("subscription_model")}
-      bind:value={user.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}
+    <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("included_hours_per_year")}:</strong>
-            {selectedSubscriptionModel?.included_hours_per_year}
+            <strong>{$t("monthly_fee")}:</strong>
+            {selectedSubscriptionModel?.monthly_fee || "-"}
           </p>
-        {/if}
-        {#if selectedSubscriptionModel?.included_hours_per_month}
           <p>
-            <strong>{$t("included_hours_per_month")}:</strong>
-            {selectedSubscriptionModel?.included_hours_per_month}
+            <strong>{$t("hourly_rate")}:</strong>
+            {selectedSubscriptionModel?.hourly_rate || "-"}
           </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}
+          {#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>
-    <InputField
-      name="membership_start_date"
-      type="date"
-      label={$t("start")}
-      bind:value={user.membership.start_date}
-      placeholder={$t("placeholder.start_date")}
-    />
-    <InputField
-      name="membership_end_date"
-      type="date"
-      label={$t("end")}
-      bind:value={user.membership.end_date}
-      placeholder={$t("placeholder.end_date")}
-    />
-    <InputField
-      name="parent_member_id"
-      type="number"
-      label={$t("parent_member_id")}
-      bind:value={user.membership.parent_member_id}
-      placeholder={$t("placeholder.parent_member_id")}
-    />
-  </div>
-  <div
-    class="tab-content"
-    style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}"
-  >
-    <InputField
-      name="account_holder_name"
-      label={$t("bank_account_holder")}
-      bind:value={user.bank_account.account_holder_name}
-      placeholder={$t("placeholder.bank_account_holder")}
-    />
-    <InputField
-      name="bank"
-      label={$t("bank_name")}
-      bind:value={user.bank_account.bank}
-      placeholder={$t("placeholder.bank_name")}
-    />
-    <InputField
-      name="iban"
-      label={$t("iban")}
-      bind:value={user.bank_account.iban}
-      placeholder={$t("placeholder.iban")}
-      toUpperCase={true}
-    />
-    <InputField
-      name="bic"
-      label={$t("bic")}
-      bind:value={user.bank_account.bic}
-      placeholder={$t("placeholder.bic")}
-      toUpperCase={true}
-    />
-    <InputField
-      name="mandate_reference"
-      label={$t("mandate_reference")}
-      bind:value={user.bank_account.mandate_reference}
-      placeholder={$t("placeholder.mandate_reference")}
-    />
-    <InputField
-      name="mandate_date_signed"
-      label={$t("mandate_date_signed")}
-      type="date"
-      bind:value={user.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={close}>
-        {$t("cancel")}</button
-      >
-      <button type="submit" class="button-dark">{$t("confirm")}</button>
-    {/if}
-  </div>
-</form>
+    <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 {
diff --git a/frontend/src/lib/css/bootstrap-custom.scss b/frontend/src/lib/css/bootstrap-custom.scss
new file mode 100644
index 0000000..6c66914
--- /dev/null
+++ b/frontend/src/lib/css/bootstrap-custom.scss
@@ -0,0 +1,151 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+// Core variables
+$theme-colors: (
+  "primary": #d43aff,
+  "secondary": #595b5c,
+  "success": #00b7ef,
+  "warning": rgb(225 29 72),
+  "danger": #eb5424,
+  "light": #9b9b9b,
+  "dark": #2f2f2f,
+);
+
+// Typography
+$font-family-base: "Quicksand", sans-serif;
+$font-family-monospace: "Roboto Mono", monospace;
+$font-size-base: 1rem;
+$line-height-base: 1.8;
+$headings-font-weight: normal;
+$headings-color: #fff;
+
+// Body
+$body-bg: black;
+$body-color: #9b9b9b;
+
+// Links
+$link-color: #00b7ef;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Buttons
+$btn-padding-y: 1.125rem; // 18px
+$btn-padding-x: 1.75rem; // 28px
+$btn-font-weight: 500;
+$btn-letter-spacing: 1px;
+$btn-border-width: 1px;
+$btn-transition: all 0.3s ease-in-out;
+
+// Forms
+$input-bg: #494848;
+$input-color: white;
+$input-border-color: #494848;
+$input-border-radius: 6px;
+$input-padding-y: 0.625rem; // 10px
+$input-padding-x: 0.625rem; // 10px
+$input-font-family: $font-family-monospace;
+$input-font-size: 1rem;
+$input-focus-border-color: lighten($input-border-color, 10%);
+$input-focus-box-shadow: none;
+
+// Cards
+$card-bg: #2f2f2f;
+$card-border-radius: 3px;
+$card-border-width: 0;
+$card-spacer-y: 1.25rem;
+$card-spacer-x: 1.25rem;
+
+// Modals
+$modal-content-bg: #2f2f2f;
+$modal-header-border-color: #595b5c;
+$modal-footer-border-color: #595b5c;
+
+// Navbar
+$navbar-dark-color: #9b9b9b;
+$navbar-dark-hover-color: #fff;
+$navbar-padding-y: 1rem;
+$navbar-nav-link-padding-x: 1rem;
+
+// Utilities
+$border-radius: 3px;
+$border-radius-lg: 6px;
+$box-shadow: none;
+
+// Custom utility classes
+.text-uppercase {
+  letter-spacing: 1px;
+}
+
+// Custom button styles
+.btn {
+  text-transform: uppercase;
+
+  &-dark {
+    @include button-variant(transparent, #595b5c);
+
+    &:hover {
+      border-color: #fff;
+      background-color: transparent;
+    }
+  }
+
+  &-primary {
+    &:hover {
+      background-color: darken(#d43aff, 5%);
+    }
+  }
+}
+
+// Custom input styles
+.form-control {
+  &:focus {
+    background-color: lighten($input-bg, 5%);
+  }
+}
+
+html {
+  padding: 0 30px;
+}
+
+body {
+  max-width: 1200px;
+  margin: 5em auto 0 auto;
+}
+
+h2 {
+  margin: 0 0 45px 0;
+  font-size: 36px;
+}
+
+h3 {
+  margin: 0 0 2rem 0;
+  font-size: 32px;
+}
+
+p {
+  margin: 0 0 45px;
+}
+
+ul {
+  margin: 0 0 32px;
+}
+
+li strong {
+  color: #fff;
+}
+
+pre,
+code {
+  display: inline;
+  font-size: 16px;
+}
+
+// Override Bootstrap's link hover behavior
+a:hover {
+  text-decoration: none;
+  border-bottom-color: #00b7ef;
+}
+// Import Bootstrap after variable overrides
+@import "bootstrap/scss/bootstrap";
diff --git a/frontend/src/lib/css/styles.min.css b/frontend/src/lib/css/styles.min.css
index 5307998..19a02de 100644
--- a/frontend/src/lib/css/styles.min.css
+++ b/frontend/src/lib/css/styles.min.css
@@ -387,6 +387,46 @@ li strong {
     margin-left: 1rem;
   }
 }
+.button-group {
+  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;
+}
+
+.btn.primary {
+  background-color: #4361ee;
+  border-color: #4361ee;
+  color: white;
+}
+
+.btn.primary:hover {
+  background-color: #3651d4;
+  border-color: #3651d4;
+}
+
+.btn.danger {
+  background-color: #dc2626;
+  border-color: #dc2626;
+  color: white;
+}
+
+.btn.danger:hover {
+  background-color: #c51f1f;
+  border-color: #c51f1f;
+}
 .warning {
   margin: 20px 0;
   padding: 1rem;
diff --git a/frontend/src/lib/locales/de.js b/frontend/src/lib/locales/de.js
index 4d782c0..166a8b5 100644
--- a/frontend/src/lib/locales/de.js
+++ b/frontend/src/lib/locales/de.js
@@ -52,12 +52,12 @@ export default {
       no_auth_token: "Nicht authorisiert, fehlender oder ungültiger Auth-Token",
       jwt_parsing_error:
         "Nicht authorisiert, Auth-Token konnte nicht gelesen werden",
-      unauthorized_update: "Sie sind nicht befugt dieses Update durchzuführen",
+      unauthorized: "Sie sind nicht befugt diese Handlung durchzuführen",
       internal_server_error:
-        "Verdammt, fehler auf unserer Seite, probieren Sie es nochmal, danach rufen Sie nach Hilfe",
+        "Verdammt, Fehler auf unserer Seite, probieren Sie es nochmal, danach rufen Sie jemanden vom Verein an.",
     },
     validation: {
-      no_user_id_provided: "Nutzer ID fehlt im Header",
+      invalid_user_id: "Nutzer ID ungültig",
       invalid_subscription_model: "Model nicht gefunden",
       user_not_found: "{field} konnte nicht gefunden werden",
       invalid_user_data: "Nutzerdaten ungültig",
@@ -98,6 +98,7 @@ export default {
     L: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 40km/h",
     T: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 60km/h",
   },
+  users: "Mitglieder",
   user: {
     login: "Nutzer Anmeldung",
     edit: "Nutzer bearbeiten",
@@ -144,7 +145,7 @@ export default {
   last_name: "Nachname",
   name: "Name",
   phone: "Telefonnummer",
-  birth_date: "Geburtstag",
+  date_of_birth: "Geburtstag",
   status: "Status",
   start: "Beginn",
   end: "Ende",
@@ -154,4 +155,25 @@ export default {
   iban: "IBAN",
   bic: "BIC",
   mandate_reference: "SEPA Mandat",
+  subscriptions: "Tarifmodelle",
+  payments: "Zahlungen",
+  add_new: "Neu",
+  included_hours_per_year: "Inkludierte Stunden pro Jahr",
+  included_hours_per_month: "Inkludierte Stunden pro Monat",
+
+  // For payments section
+  payment: {
+    id: "Zahlungs-Nr",
+    amount: "Betrag",
+    date: "Datum",
+    status: "Status",
+  },
+
+  // For subscription statuses
+  subscriptionStatus: {
+    pending: "Ausstehend",
+    completed: "Abgeschlossen",
+    failed: "Fehlgeschlagen",
+    cancelled: "Storniert",
+  },
 };
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index a655cea..d79b4bc 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -8,6 +8,7 @@
   import { onMount } from "svelte";
   import "$lib/utils/i18n.js";
 
+  // import "$lib/css/bootstrap-custom.scss";
   /** @type {import('./$types').PageData} */
   export let data;
 
diff --git a/frontend/src/routes/auth/about/[id]/+page.server.js b/frontend/src/routes/auth/about/[id]/+page.server.js
index 3727fe4..f516d0c 100644
--- a/frontend/src/routes/auth/about/[id]/+page.server.js
+++ b/frontend/src/routes/auth/about/[id]/+page.server.js
@@ -1,8 +1,17 @@
 import { BASE_API_URI } from "$lib/utils/constants";
-import { formatError, userDatesFromRFC3339 } from "$lib/utils/helpers";
+import {
+  formatError,
+  userDatesFromRFC3339,
+  userDatesToRFC3339,
+} from "$lib/utils/helpers";
 import { fail, redirect } from "@sveltejs/kit";
 import { toRFC3339 } from "$lib/utils/helpers";
 
+/**
+ * @typedef {Object} UpdateData
+ * @property {Partial<App.Locals['user']>} user
+ */
+
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ locals, params }) {
   // redirect user if not logged in
@@ -24,6 +33,7 @@ export const actions = {
   updateUser: async ({ request, fetch, cookies, locals }) => {
     let formData = await request.formData();
 
+    /** @type {App.Types['licenceCategory'][]} */
     const licenceCategories = formData
       .getAll("licence_categories[]")
       .filter((value) => typeof value === "string")
@@ -34,11 +44,10 @@ export const actions = {
           console.error("Failed to parse licence category:", value);
           return null;
         }
-      })
-      .filter(Boolean);
+      });
 
     /** @type {Partial<App.Locals['user']>} */
-    const updateData = {
+    const userData = {
       id: Number(formData.get("id")),
       first_name: String(formData.get("first_name")),
       last_name: String(formData.get("last_name")),
@@ -48,7 +57,7 @@ export const actions = {
       address: String(formData.get("address")),
       zip_code: String(formData.get("zip_code")),
       city: String(formData.get("city")),
-      date_of_birth: toRFC3339(formData.get("birth_date")),
+      date_of_birth: toRFC3339(formData.get("date_of_birth")),
       company: String(formData.get("company")),
       profile_picture: String(formData.get("profile_picture")),
       membership: {
@@ -64,9 +73,7 @@ export const actions = {
       },
       bank_account: {
         id: Number(formData.get("bank_account_id")),
-        mandate_date_signed: toRFC3339(
-          String(formData.get("mandate_date_signed"))
-        ),
+        mandate_date_signed: toRFC3339(formData.get("mandate_date_signed")),
         bank: String(formData.get("bank")),
         account_holder_name: String(formData.get("account_holder_name")),
         iban: String(formData.get("iban")),
@@ -83,11 +90,17 @@ export const actions = {
         licence_categories: licenceCategories,
       },
     };
+
+    // userDatesToRFC3339(userData);
+
+    /** @type {UpdateData} */
+    const updateData = { user: userData };
     // Remove undefined or null properties
     const cleanUpdateData = JSON.parse(
       JSON.stringify(updateData),
       (key, value) => (value !== null && value !== "" ? value : undefined)
     );
+
     console.dir(formData);
     console.dir(cleanUpdateData);
     const apiURL = `${BASE_API_URI}/backend/users/update/`;
diff --git a/frontend/src/routes/auth/admin/users/+layout.server.js b/frontend/src/routes/auth/admin/users/+layout.server.js
index 348269b..d84b472 100644
--- a/frontend/src/routes/auth/admin/users/+layout.server.js
+++ b/frontend/src/routes/auth/admin/users/+layout.server.js
@@ -4,13 +4,6 @@ import { userDatesFromRFC3339, refreshCookie } from "$lib/utils/helpers";
 
 /** @type {import('./$types').LayoutServerLoad} */
 export async function load({ cookies, fetch, locals }) {
-  // if (locals.users) {
-  //   return {
-  //     users: locals.users,
-  //     user: locals.user,
-  //   };
-  // }
-
   const jwt = cookies.get("jwt");
   try {
     // Fetch user data, subscriptions, and licence categories in parallel
@@ -27,7 +20,6 @@ export async function load({ cookies, fetch, locals }) {
     }
 
     const data = await response.json();
-
     // Check if the server sent a new token
     const newToken = response.headers.get("Set-Cookie");
     refreshCookie(newToken, null);
diff --git a/frontend/src/routes/auth/admin/users/+page.server.js b/frontend/src/routes/auth/admin/users/+page.server.js
index 92a20e7..ba68f25 100644
--- a/frontend/src/routes/auth/admin/users/+page.server.js
+++ b/frontend/src/routes/auth/admin/users/+page.server.js
@@ -7,6 +7,130 @@ import { formatError, userDatesFromRFC3339 } from "$lib/utils/helpers";
 import { fail, redirect } from "@sveltejs/kit";
 import { toRFC3339 } from "$lib/utils/helpers";
 
+/**
+ * Converts FormData to a nested object structure
+ * @param {FormData} formData - The FormData object to convert
+ * @returns {{ user: Partial<App.Locals['user']> }} Nested object representation of the form data
+ */
+function formDataToObject(formData) {
+  /** @type { Partial<App.Locals['user']> } */
+  const object = {};
+
+  console.log("Form data entries:");
+  for (const [key, value] of formData.entries()) {
+    console.log("Key:", key, "Value:", value);
+  }
+  for (const [key, value] of formData.entries()) {
+    /** @type {string[]} */
+    const keys = key.match(/\[([^\]]+)\]/g)?.map((k) => k.slice(1, -1)) || [
+      key,
+    ];
+    console.log("Processed keys:", keys);
+    /** @type {Record<string, any>} */
+    let current = object;
+
+    console.log("Current object state:", JSON.stringify(current));
+    for (let i = 0; i < keys.length - 1; i++) {
+      /**
+       * Create nested object if it doesn't exist
+       * @type {Record<string, any>}
+       * @description Ensures proper nesting structure for user data fields
+       * @example
+       * // For input name="user[membership][status]"
+       * // Creates: { user: { membership: { status: value } } }
+       */
+      current[keys[i]] = current[keys[i]] || {};
+      /**
+       * Move to the next level of the object
+       * @type {Record<string, any>}
+       */
+      current = current[keys[i]];
+    }
+
+    const lastKey = keys[keys.length - 1];
+    if (lastKey.endsWith("[]")) {
+      /**
+       * Handle array fields (licence categories)
+       */
+      const arrayKey = lastKey.slice(0, -2);
+      current[arrayKey] = current[arrayKey] || [];
+      current[arrayKey].push(value);
+    } else {
+      current[lastKey] = value;
+    }
+  }
+
+  return { user: object };
+}
+
+/**
+ * Processes the raw form data into the expected user data structure
+ * @param {{  user: Partial<App.Locals['user']> } } rawData - The raw form data object
+ * @returns {{ user: Partial<App.Locals['user']> }} Processed user data
+ */
+function processFormData(rawData) {
+  /** @type {{ user: Partial<App.Locals['user']> }} */
+  const processedData = {
+    user: {
+      id: Number(rawData.user.id) || 0,
+      status: Number(rawData.user.status),
+      role_id: Number(rawData.user.role_id),
+      first_name: String(rawData.user.first_name),
+      last_name: String(rawData.user.last_name),
+      email: String(rawData.user.email),
+      phone: String(rawData.user.phone || ""),
+      company: String(rawData.user.company || ""),
+      date_of_birth: toRFC3339(rawData.user.date_of_birth),
+      address: String(rawData.user.address || ""),
+      zip_code: String(rawData.user.zip_code || ""),
+      city: String(rawData.user.city || ""),
+      notes: String(rawData.user.notes || ""),
+      profile_picture: String(rawData.user.profile_picture || ""),
+
+      membership: {
+        id: Number(rawData.user.membership?.id) || 0,
+        status: Number(rawData.user.membership?.status),
+        start_date: toRFC3339(rawData.user.membership?.start_date),
+        end_date: toRFC3339(rawData.user.membership?.end_date),
+        parent_member_id:
+          Number(rawData.user.membership?.parent_member_id) || 0,
+        subscription_model: {
+          id: Number(rawData.user.membership?.subscription_model?.id) || 0,
+          name: String(rawData.user.membership?.subscription_model?.name) || "",
+        },
+      },
+
+      licence: {
+        id: Number(rawData.user.licence?.id) || 0,
+        status: Number(rawData.user.licence?.status),
+        licence_number: String(rawData.user.licence?.licence_number || ""),
+        issued_date: toRFC3339(rawData.user.licence?.issued_date),
+        expiration_date: toRFC3339(rawData.user.licence?.expiration_date),
+        country: String(rawData.user.licence?.country || ""),
+        licence_categories: rawData.user.licence?.licence_categories || [],
+      },
+
+      bank_account: {
+        id: Number(rawData.user.bank_account?.id) || 0,
+        account_holder_name: String(
+          rawData.user.bank_account?.account_holder_name || ""
+        ),
+        bank: String(rawData.user.bank_account?.bank || ""),
+        iban: String(rawData.user.bank_account?.iban || ""),
+        bic: String(rawData.user.bank_account?.bic || ""),
+        mandate_reference: String(
+          rawData.user.bank_account?.mandate_reference || ""
+        ),
+        mandate_date_signed: toRFC3339(
+          rawData.user.bank_account?.mandate_date_signed
+        ),
+      },
+    },
+  };
+
+  return processedData;
+}
+
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ locals, params }) {
   // redirect user if not logged in
@@ -28,77 +152,24 @@ export const actions = {
   updateUser: async ({ request, fetch, cookies, locals }) => {
     let formData = await request.formData();
 
-    const licenceCategories = formData
-      .getAll("licence_categories[]")
-      .filter((value) => typeof value === "string")
-      .map((value) => {
-        try {
-          return JSON.parse(value);
-        } catch (e) {
-          console.error("Failed to parse licence category:", value);
-          return null;
-        }
-      })
-      .filter(Boolean);
+    // Convert form data to nested object
+    const rawData = formDataToObject(formData);
+
+    const processedData = processFormData(rawData);
 
-    /** @type {Partial<App.Locals['user']>} */
-    const updateData = {
-      id: Number(formData.get("id")),
-      first_name: String(formData.get("first_name")),
-      last_name: String(formData.get("last_name")),
-      email: String(formData.get("email")),
-      phone: String(formData.get("phone")),
-      notes: String(formData.get("notes")),
-      address: String(formData.get("address")),
-      zip_code: String(formData.get("zip_code")),
-      city: String(formData.get("city")),
-      date_of_birth: toRFC3339(formData.get("birth_date")),
-      company: String(formData.get("company")),
-      profile_picture: String(formData.get("profile_picture")),
-      membership: {
-        id: Number(formData.get("membership_id")),
-        start_date: toRFC3339(formData.get("membership_start_date")),
-        end_date: toRFC3339(formData.get("membership_end_date")),
-        status: Number(formData.get("membership_status")),
-        parent_member_id: Number(formData.get("parent_member_id")),
-        subscription_model: {
-          id: Number(formData.get("subscription_model_id")),
-          name: String(formData.get("subscription_model_name")),
-        },
-      },
-      bank_account: {
-        id: Number(formData.get("bank_account_id")),
-        mandate_date_signed: toRFC3339(
-          String(formData.get("mandate_date_signed"))
-        ),
-        bank: String(formData.get("bank")),
-        account_holder_name: String(formData.get("account_holder_name")),
-        iban: String(formData.get("iban")),
-        bic: String(formData.get("bic")),
-        mandate_reference: String(formData.get("mandate_reference")),
-      },
-      licence: {
-        id: Number(formData.get("drivers_licence_id")),
-        status: Number(formData.get("licence_status")),
-        licence_number: String(formData.get("licence_number")),
-        issued_date: toRFC3339(formData.get("issued_date")),
-        expiration_date: toRFC3339(formData.get("expiration_date")),
-        country: String(formData.get("country")),
-        licence_categories: licenceCategories,
-      },
-    };
     // Remove undefined or null properties
     const cleanUpdateData = JSON.parse(
-      JSON.stringify(updateData),
+      JSON.stringify(processedData),
       (key, value) => (value !== null && value !== "" ? value : undefined)
     );
-    console.dir(formData);
-    console.dir(cleanUpdateData);
-    const apiURL = `${BASE_API_URI}/backend/users/update/`;
+    console.dir(processedData.user.membership);
+    const isCreating = !processedData.user.id || processedData.user.id === 0;
+    console.log("Is creating: ", isCreating);
+    const apiURL = `${BASE_API_URI}/backend/users/update`;
 
     /** @type {RequestInit} */
-    const requestUpdateOptions = {
-      method: "PATCH",
+    const requestOptions = {
+      method: isCreating ? "POST" : "PATCH",
       credentials: "include",
       headers: {
         "Content-Type": "application/json",
@@ -106,7 +177,8 @@ export const actions = {
       },
       body: JSON.stringify(cleanUpdateData),
     };
-    const res = await fetch(apiURL, requestUpdateOptions);
+
+    const res = await fetch(apiURL, requestOptions);
 
     if (!res.ok) {
       const response = await res.json();
@@ -115,6 +187,7 @@ export const actions = {
     }
 
     const response = await res.json();
+    console.log("Server success response:", response);
     locals.user = response;
     userDatesFromRFC3339(locals.user);
     throw redirect(303, `/auth/about/${response.id}`);
diff --git a/frontend/src/routes/auth/admin/users/+page.svelte b/frontend/src/routes/auth/admin/users/+page.svelte
index 48bea04..8722d6a 100644
--- a/frontend/src/routes/auth/admin/users/+page.svelte
+++ b/frontend/src/routes/auth/admin/users/+page.svelte
@@ -1,39 +1,36 @@
-<!-- - Create a table or list view of all users.
-- Implement a search or filter functionality.
-- Add a modal component for editing user details (reuse the modal from about/[id]). -->
-
 <script>
-  import { onMount } from "svelte";
   import Modal from "$lib/components/Modal.svelte";
   import UserEditForm from "$lib/components/UserEditForm.svelte";
+  import { Styles } from "@sveltestrap/sveltestrap";
   import { t } from "svelte-i18n";
-
   import { page } from "$app/stores";
 
   /** @type {import('./$types').ActionData} */
   export let form;
 
-  $: ({ user, users, licence_categories, subscriptions } = $page.data);
+  $: ({
+    user,
+    users = [],
+    licence_categories = [],
+    subscriptions = [],
+    payments = [],
+  } = $page.data);
 
-  /** @type(App.Locals['user'] | null) */
+  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']} user The user to edit.
+   * @param {App.Locals['user'] | null} user The user to edit.
    */
   const openEditModal = (user) => {
     selectedUser = user;
+    console.dir(selectedUser);
     showModal = true;
   };
 
-  /**
-   * Opens the delete modal for the selected user.
-   * @param {App.Locals['user']} user The user to edit.
-   */
-  const openDelete = (user) => {};
-
   const close = () => {
     showModal = false;
     selectedUser = null;
@@ -41,52 +38,329 @@
       form.errors = undefined;
     }
   };
+
+  /**
+   * sets the active admin section for display
+   * @param {string} section The new active section.
+   */
+  const setActiveSection = (section) => {
+    activeSection = section;
+  };
 </script>
 
-<div class="admin-users-page">
-  <h1>{$t("user.management")}</h1>
+<div class="container">
+  <div class="layout">
+    <!-- Sidebar -->
+    <nav class="sidebar">
+      <ul class="nav-list">
+        <li>
+          <button
+            class="nav-link {activeSection === 'users' ? 'active' : ''}"
+            on:click={() => setActiveSection("users")}
+          >
+            <i class="fas fa-users" />
+            <span class="nav-badge">{users.length}</span>
+            {$t("users")}
+          </button>
+        </li>
+        <li>
+          <button
+            class="nav-link {activeSection === 'subscriptions' ? 'active' : ''}"
+            on:click={() => setActiveSection("subscriptions")}
+          >
+            <i class="fas fa-clipboard-list" />
+            <span class="nav-badge">{subscriptions.length}</span>
+            {$t("subscriptions")}
+          </button>
+        </li>
+        <li>
+          <button
+            class="nav-link {activeSection === 'payments' ? 'active' : ''}"
+            on:click={() => setActiveSection("payments")}
+          >
+            <i class="fas fa-credit-card" />
+            {$t("payments")}
+          </button>
+        </li>
+      </ul>
+    </nav>
 
-  <div class="search-filter" />
-
-  <table class="user-table">
-    <thead>
-      <tr>
-        <th>{$t("user.id")}</th>
-        <th>{$t("name")}</th>
-        <th>{$t("email")}</th>
-        <th>{$t("status")}</th>
-        <th>{$t("actions")}</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each users as user}
-        <tr>
-          <td>{user.id}</td>
-          <td>{user.first_name} {user.last_name}</td>
-          <td>{user.email}</td>
-          <td>{$t("userStatus." + user.status)}</td>
-          <td>
-            <button on:click={() => openEditModal(user)}>{$t("edit")}</button>
-            <button on:click={() => openDelete(user)}>{$t("delete")}</button>
-          </td>
-        </tr>{/each}
-    </tbody>
-  </table>
-
-  <div class="pagination" />
-
-  {#if showModal}
-    <Modal on:close={close}>
-      <UserEditForm
-        {form}
-        user={selectedUser}
-        {subscriptions}
-        {licence_categories}
-        on:cancel={close}
-      />
-    </Modal>
-  {/if}
+    <!-- Main Content -->
+    <main class="main-content">
+      {#if activeSection === "users"}
+        <div class="section-header">
+          <h2>{$t("users")}</h2>
+          <button class="btn primary" on:click={() => openEditModal(null)}>
+            <i class="fas fa-plus" />
+            {$t("add_new")}
+          </button>
+        </div>
+        <div class="accordion">
+          {#each users as user}
+            <details class="accordion-item">
+              <summary class="accordion-header">
+                {user.first_name}
+                {user.last_name} - {user.email}
+              </summary>
+              <div class="accordion-content">
+                <table class="table">
+                  <tbody>
+                    <tr>
+                      <th>{$t("user.id")}</th>
+                      <td>{user.id}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("name")}</th>
+                      <td>{user.first_name} {user.last_name}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("email")}</th>
+                      <td>{user.email}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("status")}</th>
+                      <td>{$t("userStatus." + user.status)}</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="button-group">
+                  <button
+                    class="btn primary"
+                    on:click={() => openEditModal(user)}
+                  >
+                    <i class="fas fa-edit" />
+                    {$t("edit")}
+                  </button>
+                  <button class="btn danger">
+                    <i class="fas fa-trash" />
+                    {$t("delete")}
+                  </button>
+                </div>
+              </div>
+            </details>
+          {/each}
+        </div>
+      {:else if activeSection === "subscriptions"}
+        <div class="section-header">
+          <h2>{$t("subscriptions")}</h2>
+          <button class="btn primary" on:click={() => openEditModal(null)}>
+            <i class="fas fa-plus" />
+            {$t("add_new")}
+          </button>
+        </div>
+        <div class="accordion">
+          {#each subscriptions as subscription}
+            <details class="accordion-item">
+              <summary class="accordion-header">
+                {subscription.name}
+              </summary>
+              <div class="accordion-content">
+                <table class="table">
+                  <tbody>
+                    <tr>
+                      <th>{$t("monthly_fee")}</th>
+                      <td
+                        >{subscription.monthly_fee !== -1
+                          ? subscription.monthly_fee + "€"
+                          : "-"}</td
+                      >
+                    </tr>
+                    <tr>
+                      <th>{$t("hourly_rate")}</th>
+                      <td
+                        >{subscription.hourly_rate !== -1
+                          ? subscription.hourly_rate + "€"
+                          : "-"}</td
+                      >
+                    </tr>
+                    <tr>
+                      <th>{$t("included_hours_per_year")}</th>
+                      <td>{subscription.included_hours_per_year || 0}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("included_hours_per_month")}</th>
+                      <td>{subscription.included_hours_per_month || 0}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("details")}</th>
+                      <td>{subscription.details || "-"}</td>
+                    </tr>
+                    <tr>
+                      <th>{$t("conditions")}</th>
+                      <td>{subscription.conditions || "-"}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </details>
+          {/each}
+        </div>
+      {:else if activeSection === "payments"}
+        <h2>{$t("payments")}</h2>
+        <div class="accordion">
+          {#each payments as payment}
+            <details class="accordion-item">
+              <summary class="accordion-header">
+                Payment #{payment.id} - {payment.amount}€
+              </summary>
+              <div class="accordion-content">
+                <table class="table">
+                  <tbody>
+                    <tr>
+                      <th>Date</th>
+                      <td>{new Date(payment.date).toLocaleDateString()}</td>
+                    </tr>
+                    <tr>
+                      <th>Status</th>
+                      <td>{payment.status}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </details>
+          {/each}
+        </div>
+      {/if}
+    </main>
+  </div>
 </div>
 
+{#if showModal}
+  <Modal on:close={close}>
+    <UserEditForm
+      {form}
+      user={selectedUser}
+      {subscriptions}
+      {licence_categories}
+      on:cancel={close}
+    />
+  </Modal>
+{/if}
+
 <style>
+  .container {
+    width: 100%;
+    height: 100%;
+    padding: 0 1rem;
+    color: white;
+  }
+
+  .layout {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 2rem;
+    height: 100%;
+    width: inherit;
+  }
+
+  .sidebar {
+    width: 250px;
+    min-height: 600px;
+    background: #2f2f2f;
+    border-right: 1px solid #494848;
+  }
+
+  .nav-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    color: #9b9b9b;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 1px;
+    transition: color 0.3s ease-in-out;
+  }
+
+  .nav-link:hover {
+    background: #fdfff5;
+  }
+
+  .nav-link.active {
+    background: #494848;
+    color: white;
+  }
+
+  .main-content {
+    padding: 2rem;
+    min-width: 75%;
+  }
+
+  .accordion-item {
+    border: none;
+    background: #2f2f2f;
+    margin-bottom: 0.5rem;
+  }
+
+  .accordion-header {
+    padding: 1rem;
+    cursor: pointer;
+    font-family: "Roboto Mono", monospace;
+    color: white;
+  }
+
+  .accordion-content {
+    padding: 1rem;
+    background: #494848;
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: "Roboto Mono", monospace;
+  }
+
+  .table th,
+  .table td {
+    padding: 0.75rem;
+    border-bottom: 1px solid #2f2f2f;
+    text-align: left;
+  }
+
+  .table th {
+    color: #9b9b9b;
+  }
+
+  .table td {
+    color: white;
+  }
+
+  @media (max-width: 680px) {
+    .layout {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+      position: static;
+      width: 100%;
+      padding: 1rem 0;
+    }
+
+    .main-content {
+      margin-left: 0;
+      margin-top: 120px;
+    }
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+  }
+
+  .section-header h2 {
+    margin: 0;
+  }
 </style>
diff --git a/frontend/src/routes/auth/admin/users/old+page.svelte b/frontend/src/routes/auth/admin/users/old+page.svelte
new file mode 100644
index 0000000..684c110
--- /dev/null
+++ b/frontend/src/routes/auth/admin/users/old+page.svelte
@@ -0,0 +1,94 @@
+<!-- - Create a table or list view of all users.
+- Implement a search or filter functionality.
+- Add a modal component for editing user details (reuse the modal from about/[id]). -->
+
+<script>
+  import { onMount } from "svelte";
+  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 "static/css/bootstrap.min.css";
+  import "static/js/bootstrapv5/bootstrap.bundle.min.js";
+  /** @type {import('./$types').ActionData} */
+  export let form;
+
+  $: ({ user, users, licence_categories, subscriptions } = $page.data);
+
+  /** @type(App.Locals['user'] | null) */
+  let selectedUser = null;
+  let showModal = false;
+
+  /**
+   * Opens the edit modal for the selected user.
+   * @param {App.Locals['user']} user The user to edit.
+   */
+  const openEditModal = (user) => {
+    selectedUser = user;
+    showModal = true;
+  };
+
+  /**
+   * Opens the delete modal for the selected user.
+   * @param {App.Locals['user']} user The user to edit.
+   */
+  const openDelete = (user) => {};
+
+  const close = () => {
+    showModal = false;
+    selectedUser = null;
+    if (form) {
+      form.errors = undefined;
+    }
+  };
+</script>
+
+<div class="admin-users-page">
+  <h1>{$t("user.management")}</h1>
+
+  <div class="search-filter" />
+
+  <table class="user-table">
+    <thead>
+      <tr>
+        <th>{$t("user.id")}</th>
+        <th>{$t("name")}</th>
+        <th>{$t("email")}</th>
+        <th>{$t("status")}</th>
+        <th>{$t("actions")}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each users as user}
+        <tr>
+          <td>{user.id}</td>
+          <td>{user.first_name} {user.last_name}</td>
+          <td>{user.email}</td>
+          <td>{$t("userStatus." + user.status)}</td>
+          <td>
+            <button on:click={() => openEditModal(user)}>{$t("edit")}</button>
+            <button on:click={() => openDelete(user)}>{$t("delete")}</button>
+          </td>
+        </tr>{/each}
+    </tbody>
+  </table>
+
+  <div class="pagination" />
+
+  {#if showModal}
+    <Modal on:close={close}>
+      <UserEditForm
+        {form}
+        user={selectedUser}
+        {subscriptions}
+        {licence_categories}
+        on:cancel={close}
+      />
+    </Modal>
+  {/if}
+</div>
+
+<style>
+</style>
diff --git a/frontend/src/routes/auth/login/+page.server.js b/frontend/src/routes/auth/login/+page.server.js
index d33d1ef..dedda1d 100644
--- a/frontend/src/routes/auth/login/+page.server.js
+++ b/frontend/src/routes/auth/login/+page.server.js
@@ -5,7 +5,9 @@ import { fail, redirect } from "@sveltejs/kit";
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ locals }) {
   // redirect user if logged in
+  console.log("loading login page");
   if (locals.user) {
+    console.log("user is logged in");
     throw redirect(302, "/");
   }
 }
@@ -20,11 +22,11 @@ export const actions = {
    * @returns Error data or redirects user to the home page or the previous page
    */
   login: async ({ request, fetch, cookies }) => {
+    console.log("login action called");
     const data = await request.formData();
     const email = String(data.get("email"));
     const password = String(data.get("password"));
     const next = String(data.get("next"));
-
     /** @type {RequestInit} */
     const requestInitOptions = {
       method: "POST",
@@ -37,9 +39,7 @@ export const actions = {
         password: password,
       }),
     };
-
-    const res = await fetch(`${BASE_API_URI}/users/login/`, requestInitOptions);
-
+    const res = await fetch(`${BASE_API_URI}/users/login`, requestInitOptions);
     console.log("Login response status:", res.status);
     console.log("Login response headers:", Object.fromEntries(res.headers));
 
diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
index 2507679..211bdcb 100644
--- a/frontend/src/routes/auth/login/+page.svelte
+++ b/frontend/src/routes/auth/login/+page.svelte
@@ -32,8 +32,8 @@
       {#each form?.errors as error (error.id)}
         <h4
           class="step-subtitle warning"
-          in:receive={{ key: error.id }}
-          out:send={{ key: error.id }}
+          in:receive|global={{ key: error.id }}
+          out:send|global={{ key: error.id }}
         >
           {$t(error.key)}
         </h4>
diff --git a/frontend/src/static/css/bootstrap-grid.css b/frontend/src/static/css/bootstrapv5/bootstrap-grid.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-grid.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-grid.css
diff --git a/frontend/src/static/css/bootstrap-grid.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-grid.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-grid.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-grid.css.map
diff --git a/frontend/src/static/css/bootstrap-grid.min.css b/frontend/src/static/css/bootstrapv5/bootstrap-grid.min.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-grid.min.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-grid.min.css
diff --git a/frontend/src/static/css/bootstrap-grid.min.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-grid.min.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-grid.min.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-grid.min.css.map
diff --git a/frontend/src/static/css/bootstrap-reboot.css b/frontend/src/static/css/bootstrapv5/bootstrap-reboot.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-reboot.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-reboot.css
diff --git a/frontend/src/static/css/bootstrap-reboot.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-reboot.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-reboot.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-reboot.css.map
diff --git a/frontend/src/static/css/bootstrap-reboot.min.css b/frontend/src/static/css/bootstrapv5/bootstrap-reboot.min.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-reboot.min.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-reboot.min.css
diff --git a/frontend/src/static/css/bootstrap-reboot.min.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-reboot.min.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-reboot.min.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-reboot.min.css.map
diff --git a/frontend/src/static/css/bootstrap-utilities.css b/frontend/src/static/css/bootstrapv5/bootstrap-utilities.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-utilities.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-utilities.css
diff --git a/frontend/src/static/css/bootstrap-utilities.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-utilities.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-utilities.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-utilities.css.map
diff --git a/frontend/src/static/css/bootstrap-utilities.min.css b/frontend/src/static/css/bootstrapv5/bootstrap-utilities.min.css
similarity index 100%
rename from frontend/src/static/css/bootstrap-utilities.min.css
rename to frontend/src/static/css/bootstrapv5/bootstrap-utilities.min.css
diff --git a/frontend/src/static/css/bootstrap-utilities.min.css.map b/frontend/src/static/css/bootstrapv5/bootstrap-utilities.min.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap-utilities.min.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap-utilities.min.css.map
diff --git a/frontend/src/static/css/bootstrap.css b/frontend/src/static/css/bootstrapv5/bootstrap.css
similarity index 100%
rename from frontend/src/static/css/bootstrap.css
rename to frontend/src/static/css/bootstrapv5/bootstrap.css
diff --git a/frontend/src/static/css/bootstrap.css.map b/frontend/src/static/css/bootstrapv5/bootstrap.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap.css.map
diff --git a/frontend/src/static/css/bootstrap.min.css b/frontend/src/static/css/bootstrapv5/bootstrap.min.css
similarity index 100%
rename from frontend/src/static/css/bootstrap.min.css
rename to frontend/src/static/css/bootstrapv5/bootstrap.min.css
diff --git a/frontend/src/static/css/bootstrap.min.css.map b/frontend/src/static/css/bootstrapv5/bootstrap.min.css.map
similarity index 100%
rename from frontend/src/static/css/bootstrap.min.css.map
rename to frontend/src/static/css/bootstrapv5/bootstrap.min.css.map
diff --git a/frontend/src/static/js/bootstrap.bundle.js b/frontend/src/static/js/bootstrapv5/bootstrap.bundle.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.bundle.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.bundle.js
diff --git a/frontend/src/static/js/bootstrap.bundle.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.bundle.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.bundle.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.bundle.js.map
diff --git a/frontend/src/static/js/bootstrap.bundle.min.js b/frontend/src/static/js/bootstrapv5/bootstrap.bundle.min.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.bundle.min.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.bundle.min.js
diff --git a/frontend/src/static/js/bootstrap.bundle.min.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.bundle.min.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.bundle.min.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.bundle.min.js.map
diff --git a/frontend/src/static/js/bootstrap.esm.js b/frontend/src/static/js/bootstrapv5/bootstrap.esm.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.esm.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.esm.js
diff --git a/frontend/src/static/js/bootstrap.esm.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.esm.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.esm.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.esm.js.map
diff --git a/frontend/src/static/js/bootstrap.esm.min.js b/frontend/src/static/js/bootstrapv5/bootstrap.esm.min.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.esm.min.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.esm.min.js
diff --git a/frontend/src/static/js/bootstrap.esm.min.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.esm.min.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.esm.min.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.esm.min.js.map
diff --git a/frontend/src/static/js/bootstrap.js b/frontend/src/static/js/bootstrapv5/bootstrap.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.js
diff --git a/frontend/src/static/js/bootstrap.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.js.map
diff --git a/frontend/src/static/js/bootstrap.min.js b/frontend/src/static/js/bootstrapv5/bootstrap.min.js
similarity index 100%
rename from frontend/src/static/js/bootstrap.min.js
rename to frontend/src/static/js/bootstrapv5/bootstrap.min.js
diff --git a/frontend/src/static/js/bootstrap.min.js.map b/frontend/src/static/js/bootstrapv5/bootstrap.min.js.map
similarity index 100%
rename from frontend/src/static/js/bootstrap.min.js.map
rename to frontend/src/static/js/bootstrapv5/bootstrap.min.js.map
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 54af965..bb648c9 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,16 +1,17 @@
+import { sveltePreprocess } from "svelte-preprocess";
 // import adapter from '@sveltejs/adapter-auto';
-import adapter from '@sveltejs/adapter-vercel';
+import adapter from "@sveltejs/adapter-vercel";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter({
-			runtime: 'edge'
-		})
-	}
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter({
+      runtime: "edge",
+    }),
+  },
 };
 
 export default config;