From 88e6a871f432ba894137b488071bcd27cb7a9e2a Mon Sep 17 00:00:00 2001
From: sebadob <sebastiandobe@mailbox.org>
Date: Wed, 15 Jan 2025 13:03:24 +0100
Subject: [PATCH] Svelte 5 Migration 6: Update the whole i18n setup (#696)

* define i18n interface

* update changelog

* API endpoint GET full i18n with caching and pre-compression

* split i18n into email + ui mods

* change i18n cache etag from app start to build time

* i18n preload, LangSelector -> sv5, i18n override during local dev

* automatically build i18n JSON in `build.rs` for 100% type checking

* migrate LangSelector to svelte 5

* fix i18n during DEV ssr + compile via dynamic imports

* add pre-built I18n JSON from the backend

* fix i18n `preload` in static UI HTML

* migrate `helpers.js` to `helpers.ts`

* migrate account dashboard to `useI18n()``

* migrate device UI to `useI18n()``

* migrate error HTML to `useI18n()``

* migrate providers callback + WebauthnRequest to `useI18n()``

* migrate logout HTML to `useI18n()``

* migrate authorize HTML to `useI18n()``

* migrate user registration HTML to `useI18n()``

* migrate password reset HTML + PasswordPolicy to `useI18n()``

* migrate email changed confirm HTML to `useI18n()`

* delete obsolete WithI18n

* remove old `POST /i18n` endpoint

* move HTML serving endpoints into separate module

* remove all `i18n` pre-rendering entries from static HTML

* drop all old UI i18n parts from the backend

* final i18n cleanup
---
 CHANGELOG.md                                  |   3 +
 Cargo.lock                                    |   1 +
 frontend/src/app.html                         |   4 -
 frontend/src/components/ClientLogo.svelte     |   4 +-
 frontend/src/components/Error.svelte          |  69 +-
 frontend/src/components/HiddenValue.svelte    |   7 +-
 frontend/src/components/ProviderLogo.svelte   |   4 +-
 .../src/components/account/AccDevices.svelte  |   4 +-
 .../src/components/account/AccEdit.svelte     |  67 +-
 .../src/components/account/AccInfo.svelte     |  48 +-
 frontend/src/components/account/AccMFA.svelte |  19 +-
 .../src/components/account/AccMain.svelte     |  70 +-
 .../src/components/account/AccModPwd.svelte   |  35 +-
 frontend/src/components/account/AccNav.svelte |  26 +-
 .../src/components/account/AccPassword.svelte |  38 +-
 .../src/components/account/AccWebId.svelte    |  32 +-
 .../src/components/admin/AdminMain.svelte     |   2 +-
 .../src/components/admin/AdminMainPre.svelte  |   2 +-
 .../admin/api_keys/ApiKeyAddNew.svelte        |  11 +-
 .../admin/api_keys/ApiKeyConfig.svelte        |   2 +-
 .../admin/api_keys/ApiKeyTile.svelte          |   2 +-
 .../admin/blacklist/Blacklist.svelte          |   4 +-
 .../admin/clients/ClientBranding.svelte       |   2 +-
 .../admin/clients/ClientConfig.svelte         |   2 +-
 .../admin/clients/ClientTileAddNew.svelte     |   2 +-
 .../admin/config/argon2/Argon2Utility.svelte  |   4 +-
 .../password_policy/PasswordPolicy.svelte     |   4 +-
 .../src/components/admin/events/Event.svelte  |   2 +-
 .../admin/events/EventsArchive.svelte         |   4 +-
 .../admin/events/EventsLegend.svelte          |   2 +-
 .../admin/groups/GroupConfig.svelte           |   6 +-
 .../admin/groups/GroupTileAddNew.svelte       |  10 +-
 .../admin/providers/ProviderConfig.svelte     |   2 +-
 .../admin/providers/ProviderTileAddNew.svelte |   2 +-
 .../components/admin/roles/RoleConfig.svelte  |   2 +-
 .../admin/roles/RoleTileAddNew.svelte         |  10 +-
 .../admin/scopes/ScopeConfig.svelte           |   2 +-
 .../admin/scopes/ScopeDelete.svelte           |   4 +-
 .../admin/scopes/ScopeTileAddNew.svelte       |  10 +-
 .../admin/sessions/SessionRow.svelte          |   2 +-
 .../components/admin/sessions/Sessions.svelte |   2 +-
 .../admin/userAttr/AttrConfig.svelte          |   2 +-
 .../admin/userAttr/AttrTileAddNew.svelte      |   8 +-
 .../components/admin/users/UserInfo.svelte    |   2 +-
 .../src/components/admin/users/UserMfa.svelte |   2 +-
 .../admin/users/UserPassword.svelte           |   2 +-
 .../admin/users/UserTileAddNew.svelte         |  10 +-
 frontend/src/components/common/Devices.svelte |  38 +-
 .../passwordReset/PasswordPolicy.svelte       |  16 +-
 .../webauthn/WebauthnRequest.svelte           |  26 +-
 frontend/src/global_state/i18n.svelte.ts      |  44 ++
 frontend/src/global_state/is_dev.svelte.ts    |   5 +-
 frontend/src/global_state/language.svelte.ts  |  13 +
 frontend/src/hooks.server.js                  |   7 +-
 frontend/src/i18n/de.ts                       | 198 ++++++
 frontend/src/i18n/en.ts                       | 198 ++++++
 frontend/src/i18n/interface.ts                | 199 ++++++
 frontend/src/i18n/ko.ts                       | 198 ++++++
 frontend/src/i18n/zh.ts                       | 198 ++++++
 frontend/src/lib/WithI18n.svelte              |  54 --
 .../expandableInputs/ExpandableInputs.svelte  |   2 +-
 frontend/src/lib/inputs/Input.svelte          |   2 +-
 frontend/src/lib/inputs/PasswordInput.svelte  |   2 +-
 frontend/src/lib/inputs/Textarea.svelte       |   2 +-
 frontend/src/lib/nav/NavEntryGroup.svelte     |   2 +-
 frontend/src/lib/search/SearchBar.svelte      |   2 +-
 .../{lib => lib_svelte5}/LangSelector.svelte  |  69 +-
 frontend/src/routes/+layout.svelte            |  11 +-
 frontend/src/routes/{index => }/+page.svelte  |  40 +-
 frontend/src/routes/account/+page.svelte      |  27 +-
 frontend/src/routes/device/+page.svelte       | 157 +++--
 frontend/src/routes/fedcm/+page.svelte        |   8 +-
 .../src/routes/oidc/authorize/+page.svelte    | 253 ++++----
 .../src/routes/oidc/callback/+page.svelte     |   2 +-
 frontend/src/routes/oidc/logout/+page.svelte  |  50 +-
 .../routes/providers/callback/+page.svelte    |  50 +-
 .../src/routes/users/register/+page.svelte    | 120 ++--
 .../email_confirm/email_confirm/+page.svelte  |  41 +-
 .../users/{id}/reset/reset/+page.svelte       | 386 ++++++-----
 frontend/src/utils/constants.js               |   2 +-
 frontend/src/utils/dataFetching.js            |   2 +-
 frontend/src/utils/dataFetchingAdmin.js       |   4 +-
 frontend/src/utils/{helpers.js => helpers.ts} |  68 +-
 frontend/src/utils/webauthn.js                |   2 +-
 frontend/vite.config.js                       |   2 +-
 src/api/src/generic.rs                        | 242 +------
 src/api/src/html.rs                           | 192 ++++++
 src/api/src/lib.rs                            |   1 +
 src/bin/Cargo.toml                            |   5 +
 src/bin/build.rs                              |  32 +
 src/bin/src/main.rs                           |  43 +-
 src/models/src/email.rs                       |  23 +-
 src/models/src/entity/theme.rs                |   2 +-
 src/models/src/i18n/account.rs                | 606 ------------------
 src/models/src/i18n/authorize.rs              | 135 ----
 src/models/src/i18n/device.rs                 | 120 ----
 src/models/src/i18n/error.rs                  | 117 ----
 src/models/src/i18n/index.rs                  |  60 --
 src/models/src/i18n/logout.rs                 |  61 --
 src/models/src/i18n/mod.rs                    |  23 -
 src/models/src/i18n/password_policy.rs        |  68 --
 src/models/src/i18n/password_reset.rs         | 179 ------
 src/models/src/i18n/register.rs               | 110 ----
 .../change_info_new.rs}                       |   9 +-
 .../change_info_old.rs}                       |   9 +-
 .../confirm_change.rs}                        |   9 +-
 .../confirm_change_html.rs}                   |   9 +-
 src/models/src/i18n_email/mod.rs              |   7 +
 .../password_new.rs}                          |   9 +-
 .../email_reset.rs => i18n_email/reset.rs}    |   9 +-
 .../reset_info.rs}                            |   9 +-
 src/models/src/language.rs                    |   2 +-
 src/models/src/lib.rs                         |   2 +-
 src/models/src/templates.rs                   |  52 --
 114 files changed, 2330 insertions(+), 2869 deletions(-)
 create mode 100644 frontend/src/global_state/i18n.svelte.ts
 create mode 100644 frontend/src/global_state/language.svelte.ts
 create mode 100644 frontend/src/i18n/de.ts
 create mode 100644 frontend/src/i18n/en.ts
 create mode 100644 frontend/src/i18n/interface.ts
 create mode 100644 frontend/src/i18n/ko.ts
 create mode 100644 frontend/src/i18n/zh.ts
 delete mode 100644 frontend/src/lib/WithI18n.svelte
 rename frontend/src/{lib => lib_svelte5}/LangSelector.svelte (53%)
 rename frontend/src/routes/{index => }/+page.svelte (56%)
 rename frontend/src/utils/{helpers.js => helpers.ts} (79%)
 create mode 100644 src/api/src/html.rs
 create mode 100644 src/bin/build.rs
 delete mode 100644 src/models/src/i18n/account.rs
 delete mode 100644 src/models/src/i18n/authorize.rs
 delete mode 100644 src/models/src/i18n/device.rs
 delete mode 100644 src/models/src/i18n/error.rs
 delete mode 100644 src/models/src/i18n/index.rs
 delete mode 100644 src/models/src/i18n/logout.rs
 delete mode 100644 src/models/src/i18n/mod.rs
 delete mode 100644 src/models/src/i18n/password_policy.rs
 delete mode 100644 src/models/src/i18n/password_reset.rs
 delete mode 100644 src/models/src/i18n/register.rs
 rename src/models/src/{i18n/email_change_info_new.rs => i18n_email/change_info_new.rs} (92%)
 rename src/models/src/{i18n/email_change_info_old.rs => i18n_email/change_info_old.rs} (93%)
 rename src/models/src/{i18n/email_confirm_change.rs => i18n_email/confirm_change.rs} (88%)
 rename src/models/src/{i18n/email_confirm_change_html.rs => i18n_email/confirm_change_html.rs} (89%)
 create mode 100644 src/models/src/i18n_email/mod.rs
 rename src/models/src/{i18n/email_password_new.rs => i18n_email/password_new.rs} (97%)
 rename src/models/src/{i18n/email_reset.rs => i18n_email/reset.rs} (97%)
 rename src/models/src/{i18n/email_reset_info.rs => i18n_email/reset_info.rs} (89%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2dc13514d..8100c024b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ Korean has been added to the translations for all user-facing UI parts.
 - Fixed a regression from v0.27.0 which made it impossible to use `zh-Hans` as a users language. The deserialization
   of the database value would fail when using Hiqlite.
   [#693](https://github.com/sebadob/rauthy/pull/693)
+- Fixed a bug in the UI - Custom User Attributed: When only a single existing attributed has been deleted, the
+  list would not properly update and remove it.
+  [#695](https://github.com/sebadob/rauthy/pull/695)
 
 ## v0.27.3
 
diff --git a/Cargo.lock b/Cargo.lock
index 9e20dcccd..4b41a63ad 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4325,6 +4325,7 @@ dependencies = [
  "serde",
  "serde_json",
  "spow",
+ "strum",
  "tokio",
  "tokio-test",
  "tracing",
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 55b5d9eaf..7e0bd9603 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -6,13 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="icon" href="%sveltekit.assets%/assets/favicon.svg"/>
 
-    <!-- <link rel="preload" href="/auth/v1/theme/rauthy" as="style"/>-->
-    <!-- <link rel="stylesheet" href="/auth/v1/theme/rauthy"/>-->
     <!--
     We can keep the {{client_id}} during local dev -> backend will always return the default.
     In production, the value will be replaced with the proper id to load custom client branding.
     -->
-    <link rel="preload" href="/auth/v1/theme/{{client_id}}" as="style"/>
     <link rel="stylesheet" href="/auth/v1/theme/{{client_id}}"/>
     <style>
         :root {
@@ -51,7 +48,6 @@
     %sveltekit.head%
 </head>
 <body>
-<template id="i18n">{{ i18n|safe }}</template>
 <template id="auth_providers">{{ auth_providers|safe }}</template>
 <input name="rauthy-csrf-token" id="{{ csrf_token }}" type="hidden"/>
 <input name="rauthy-data" id="{{ data }}" type="hidden"/>
diff --git a/frontend/src/components/ClientLogo.svelte b/frontend/src/components/ClientLogo.svelte
index 746b33f37..a29c79c92 100644
--- a/frontend/src/components/ClientLogo.svelte
+++ b/frontend/src/components/ClientLogo.svelte
@@ -1,7 +1,7 @@
 <script>
-    import {getKey} from "$lib/utils/helpers.js";
+    import {getKey} from "$lib/utils/helpers";
 
-    let { clientId } = $props();
+    let {clientId} = $props();
 </script>
 
 <!--
diff --git a/frontend/src/components/Error.svelte b/frontend/src/components/Error.svelte
index f6f06da7e..6354018eb 100644
--- a/frontend/src/components/Error.svelte
+++ b/frontend/src/components/Error.svelte
@@ -1,56 +1,57 @@
 <script>
     import {slide} from 'svelte/transition';
     import IconChevronRight from "$lib/icons/IconChevronRight.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import BrowserCheck from "./BrowserCheck.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let t = $state();
+    let t = useI18n();
     let showDetails = $state(false);
 
+    // TODO:
+    // The `details` and `detailsText` cannot be translated statically.
+    // -> implement a mechanism to fetch them either from the body or query params
+
 </script>
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="error">
-            <div class="flex-col">
-                <h1>{t.error}</h1>
-                <br>
-                <p>{t.errorText}</p>
+        <div class="flex-col">
+            <h1>{t.error.error}</h1>
+            <br>
+            <p>{t.error.errorText}</p>
 
-                {#if t.detailsText}
+            {#if t.error.detailsText}
+                <div
+                        role="button"
+                        tabindex="0"
+                        class="showDetails"
+                        onclick={() => showDetails = !showDetails}
+                        onkeypress={() => showDetails = !showDetails}
+                >
+                    {t.error.details}
                     <div
-                            role="button"
-                            tabindex="0"
-                            class="showDetails"
-                            onclick={() => showDetails = !showDetails}
-                            onkeypress={() => showDetails = !showDetails}
+                            class="chevron"
+                            style:margin-top={showDetails ? '' : '-5px'}
+                            style:transform={showDetails ? 'rotate(90deg)' : 'rotate(180deg)'}
                     >
-                        {t.details}
-                        <div
-                                class="chevron"
-                                style:margin-top={showDetails ? '' : '-5px'}
-                                style:transform={showDetails ? 'rotate(90deg)' : 'rotate(180deg)'}
-                        >
-                            <IconChevronRight
-                                    color="var(--col-act2)"
-                                    width={16}
-                            />
-                        </div>
+                        <IconChevronRight
+                                color="var(--col-act2)"
+                                width={16}
+                        />
                     </div>
+                </div>
 
-                    {#if showDetails}
-                        <div transition:slide class="details">
-                            {t.detailsText}
-                        </div>
-                    {/if}
+                {#if showDetails}
+                    <div transition:slide class="details">
+                        {t.error.detailsText}
+                    </div>
                 {/if}
+            {/if}
 
-                <LangSelector absolute/>
-            </div>
-        </WithI18n>
+            <LangSelector absolute/>
+        </div>
     </ContentCenter>
 </Main>
 
diff --git a/frontend/src/components/HiddenValue.svelte b/frontend/src/components/HiddenValue.svelte
index d6a722d12..a42c0aebf 100644
--- a/frontend/src/components/HiddenValue.svelte
+++ b/frontend/src/components/HiddenValue.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
     import IconEyeSlash from "$lib/icons/IconEyeSlash.svelte";
     import IconEye from "$lib/icons/IconEye.svelte";
-    import {sleepAwait} from "../utils/helpers.js";
+    import {sleepAwait} from "../utils/helpers";
     import IconClipboard from "$lib/icons/IconClipboard.svelte";
 
     /**
@@ -13,7 +13,7 @@
      */
 
     /** @type {Props} */
-    let { value = '' } = $props();
+    let {value = ''} = $props();
 
     let hidden = '';
     let text = $state('');
@@ -51,6 +51,7 @@
     function toggle() {
         showValue = !showValue;
     }
+
     run(() => {
         if (showValue) {
             show();
diff --git a/frontend/src/components/ProviderLogo.svelte b/frontend/src/components/ProviderLogo.svelte
index 603bd310d..0b7e92a67 100644
--- a/frontend/src/components/ProviderLogo.svelte
+++ b/frontend/src/components/ProviderLogo.svelte
@@ -1,7 +1,7 @@
 <script>
-    import {getKey} from "$lib/utils/helpers.js";
+    import {getKey} from "$lib/utils/helpers";
 
-    let { providerId } = $props();
+    let {providerId} = $props();
 </script>
 
 <!--
diff --git a/frontend/src/components/account/AccDevices.svelte b/frontend/src/components/account/AccDevices.svelte
index 8470c8b41..5d038504e 100644
--- a/frontend/src/components/account/AccDevices.svelte
+++ b/frontend/src/components/account/AccDevices.svelte
@@ -1,7 +1,7 @@
 <script>
     import Devices from "../common/Devices.svelte";
 
-    let {t, sessionInfo = $bindable()} = $props();
+    let {sessionInfo = $bindable()} = $props();
 
 </script>
 
@@ -10,7 +10,7 @@
     This is component is only a wrapper because the same Devices
     is reused in the admin ui
     -->
-    <Devices {t} userId={sessionInfo.user_id}/>
+    <Devices userId={sessionInfo.user_id}/>
 </div>
 
 <style>
diff --git a/frontend/src/components/account/AccEdit.svelte b/frontend/src/components/account/AccEdit.svelte
index aa74fb28b..2f0f600d7 100644
--- a/frontend/src/components/account/AccEdit.svelte
+++ b/frontend/src/components/account/AccEdit.svelte
@@ -1,6 +1,6 @@
 <script>
     import * as yup from "yup";
-    import {extractFormErrors} from "../../utils/helpers.js";
+    import {extractFormErrors} from "../../utils/helpers";
     import {
         REGEX_BIRTHDATE,
         REGEX_CITY,
@@ -13,16 +13,19 @@
     import {fade} from 'svelte/transition';
     import {putUserSelf} from "../../utils/dataFetching.js";
     import Input from "$lib/inputs/Input.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [user]
      * @property {boolean} [viewModePhone]
      */
 
     /** @type {Props} */
-    let {t, user = $bindable({}), viewModePhone = false} = $props();
+    let {user = $bindable({}), viewModePhone = false} = $props();
+
+    let t = useI18n();
+
     let inputWidth = $derived(viewModePhone ? 'calc(100vw - 1.5rem)' : '300px');
 
     const btnWidth = "8rem";
@@ -40,20 +43,20 @@
     let formErrors = $state({});
 
     const schema = yup.object().shape({
-        email: yup.string().required(t.validEmail).email(t.validEmail),
-        givenName: yup.string().required(t.validGivenName).matches(REGEX_NAME, t.validGivenName),
-        familyName: yup.string().nullable().matches(REGEX_NAME_NULLABLE, t.validFamilyName),
+        email: yup.string().required(t.account.validEmail).email(t.account.validEmail),
+        givenName: yup.string().required(t.account.validGivenName).matches(REGEX_NAME, t.account.validGivenName),
+        familyName: yup.string().nullable().matches(REGEX_NAME_NULLABLE, t.account.validFamilyName),
     });
 
     let formErrorsValues = $state({});
     const schemaValues = yup.object().shape({
         // TODO translations
-        birthdate: yup.string().nullable().trim().matches(REGEX_BIRTHDATE, t.invalidInput),
+        birthdate: yup.string().nullable().trim().matches(REGEX_BIRTHDATE, t.common.invalidInput),
         phone: yup.string().nullable().trim().matches(REGEX_PHONE, '+...'),
-        street: yup.string().nullable().trim().matches(REGEX_STREET, t.invalidInput),
+        street: yup.string().nullable().trim().matches(REGEX_STREET, t.common.invalidInput),
         zip: yup.number().nullable().min(1000).max(999999),
-        city: yup.string().nullable().trim().matches(REGEX_CITY, t.invalidInput),
-        country: yup.string().nullable().trim().matches(REGEX_CITY, t.invalidInput),
+        city: yup.string().nullable().trim().matches(REGEX_CITY, t.common.invalidInput),
+        country: yup.string().nullable().trim().matches(REGEX_CITY, t.common.invalidInput),
     });
 
     function handleKeyPress(event) {
@@ -65,7 +68,7 @@
     async function onSubmit() {
         const valid = await validateForm();
         if (!valid) {
-            err = t.invalidInput;
+            err = t.common.invalidInput;
             return;
         }
 
@@ -133,35 +136,35 @@
                 bind:value={formValues.email}
                 bind:error={formErrors.email}
                 autocomplete="family-name"
-                placeholder={t.email}
+                placeholder={t.common.email}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.email.toUpperCase()}
+            {t.common.email.toUpperCase()}
         </Input>
         <Input
                 bind:value={formValues.givenName}
                 bind:error={formErrors.givenName}
                 autocomplete="given-name"
-                placeholder={t.givenName}
+                placeholder={t.account.givenName}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.givenName.toUpperCase()}
+            {t.account.givenName.toUpperCase()}
         </Input>
         <Input
                 bind:value={formValues.familyName}
                 bind:error={formErrors.familyName}
                 autocomplete="family-name"
-                placeholder={t.familyName}
+                placeholder={t.account.familyName}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.familyName.toUpperCase()}
+            {t.account.familyName.toUpperCase()}
         </Input>
 
         <div style:margin=".5rem">
-            {t.optionalValues}
+            {t.account.optionalValues}
         </div>
 
         <!-- Street-->
@@ -169,12 +172,12 @@
                 bind:value={user.user_values.street}
                 bind:error={formErrorsValues.street}
                 autocomplete="street-address"
-                placeholder={t.street}
+                placeholder={t.account.street}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.street.toUpperCase()}
+            {t.account.street.toUpperCase()}
         </Input>
 
         <!-- ZIP-->
@@ -183,14 +186,14 @@
                 bind:value={user.user_values.zip}
                 bind:error={formErrorsValues.zip}
                 autocomplete="postal-code"
-                placeholder={t.zip}
+                placeholder={t.account.zip}
                 min={1000}
                 max={999999}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.zip.toUpperCase()}
+            {t.account.zip.toUpperCase()}
         </Input>
 
         <!-- City-->
@@ -198,12 +201,12 @@
                 bind:value={user.user_values.city}
                 bind:error={formErrorsValues.city}
                 autocomplete="adress-level2"
-                placeholder={t.city}
+                placeholder={t.account.city}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.city.toUpperCase()}
+            {t.account.city.toUpperCase()}
         </Input>
 
         <!-- Country-->
@@ -211,12 +214,12 @@
                 bind:value={user.user_values.country}
                 bind:error={formErrorsValues.country}
                 autocomplete="country"
-                placeholder={t.country}
+                placeholder={t.account.country}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.country.toUpperCase()}
+            {t.account.country.toUpperCase()}
         </Input>
 
         <!-- Phone-->
@@ -224,12 +227,12 @@
                 bind:value={user.user_values.phone}
                 bind:error={formErrorsValues.phone}
                 autocomplete="tel"
-                placeholder={t.phone}
+                placeholder={t.account.phone}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.phone.toUpperCase()}
+            {t.account.phone.toUpperCase()}
         </Input>
 
         <!-- Birthdate-->
@@ -238,16 +241,16 @@
                 bind:value={user.user_values.birthdate}
                 bind:error={formErrorsValues.birthdate}
                 autocomplete="bday"
-                placeholder={t.birthdate}
+                placeholder={t.account.birthdate}
                 on:keypress={handleKeyPress}
                 on:input={validateForm}
                 width={inputWidth}
         >
-            {t.birthdate.toUpperCase()}
+            {t.account.birthdate.toUpperCase()}
         </Input>
 
         <Button width={btnWidth} on:click={onSubmit} level={1} bind:isLoading>
-            {t.save.toUpperCase()}
+            {t.common.save}
         </Button>
 
         <div class="bottom">
@@ -255,7 +258,7 @@
                 <div class="success" transition:fade>
                     Update successful
                     {#if successEmailConfirm}
-                        <p>{t.emailUpdateConfirm}</p>
+                        <p>{t.account.emailUpdateConfirm}</p>
                     {/if}
                 </div>
             {:else if err}
diff --git a/frontend/src/components/account/AccInfo.svelte b/frontend/src/components/account/AccInfo.svelte
index 12431e937..5fc26cdfe 100644
--- a/frontend/src/components/account/AccInfo.svelte
+++ b/frontend/src/components/account/AccInfo.svelte
@@ -1,17 +1,16 @@
 <script>
     import CheckIcon from "$lib/CheckIcon.svelte";
-    import {buildWebIdUri, formatDateFromTs, saveProviderToken} from "../../utils/helpers.js";
+    import {buildWebIdUri, formatDateFromTs, saveProviderToken} from "../../utils/helpers";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
     import {deleteUserProviderLink, postUserProviderLink} from "../../utils/dataFetching.js";
     import Modal from "$lib/Modal.svelte";
     import getPkce from "oauth-pkce";
     import {PKCE_VERIFIER_UPSTREAM} from "../../utils/constants.js";
+    import {useI18n} from "$state/i18n.svelte";
 
-    
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [user]
      * @property {any} authProvider - webIdData will stay undefined if it is not enabled in the backend
      * @property {any} webIdData
@@ -20,13 +19,14 @@
 
     /** @type {Props} */
     let {
-        t,
         user = $bindable({}),
         authProvider,
         webIdData,
         viewModePhone = false
     } = $props();
 
+    let t = useI18n();
+
     let unlinkErr = $state(false);
     let showModal = $state(false);
     let providersAvailable = $state([]);
@@ -96,37 +96,37 @@
 
 <div class="container">
     <div class={classRow}>
-        <div class={classLabel}><b>{t.email}:</b></div>
+        <div class={classLabel}><b>{t.common.email}:</b></div>
         <span class="value">{user.email}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.givenName}:</b></div>
+        <div class={classLabel}><b>{t.account.givenName}:</b></div>
         <span class="value">{user.given_name}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.familyName}:</b></div>
+        <div class={classLabel}><b>{t.account.familyName}:</b></div>
         <span class="value">{user.family_name}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.user} ID:</b></div>
+        <div class={classLabel}><b>{t.account.user} ID:</b></div>
         <span class="value">{user.id}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.accType}:</b></div>
+        <div class={classLabel}><b>{t.account.accType}:</b></div>
         <div>
             <div class="value">{accType || ''}</div>
             {#if isFederated}
                 <div class="fed-btn">
                     <Button level={3} on:click={unlinkProvider}>
-                        {t.providerUnlink}
+                        {t.account.providerUnlink}
                     </Button>
                     {#if unlinkErr}
                         <div class="link-err value">
-                            {t.providerUnlinkDesc}
+                            {t.account.providerUnlinkDesc}
                         </div>
                     {/if}
                 </div>
@@ -138,10 +138,10 @@
                         onclick={() => showModal = !showModal}
                         onkeypress={() => showModal = !showModal}
                 >
-                    {t.providerLink}
+                    {t.account.providerLink}
                 </div>
                 <Modal bind:showModal>
-                    <p>{t.providerLinkDesc}</p>
+                    <p>{t.account.providerLinkDesc}</p>
 
                     <div class="providers">
                         {#each providersAvailable as provider (provider.id)}
@@ -166,48 +166,50 @@
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.roles}:</b></div>
+        <div class={classLabel}><b>{t.account.roles}:</b></div>
         <span class="value">{user.roles || 'None'}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.groups}:</b></div>
+        <div class={classLabel}><b>{t.account.groups}:</b></div>
         <span class="value">{user.groups || 'None'}</span>
     </div>
 
     <div class="row">
-        <div class={classLabel}><b>{t.mfaActivated}:</b></div>
+        <div class={classLabel}><b>{t.account.mfaActivated}:</b></div>
         <CheckIcon check={!!user.webauthn_user_id}/>
     </div>
 
     <div class="row">
-        <div class={classLabel}><b>{t.userEnabled}:</b></div>
+        <div class={classLabel}><b>{t.account.userEnabled}:</b></div>
         <CheckIcon check={user.enabled}/>
     </div>
 
     <div class="row">
-        <div class={classLabel}><b>{t.emailVerified}:</b></div>
+        <div class={classLabel}><b>{t.account.emailVerified}:</b></div>
         <CheckIcon check={user.email_verified}/>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.lastLogin}:</b></div>
+        <div class={classLabel}><b>{t.account.lastLogin}:</b></div>
         <span class="value">{formatDateFromTs(user.last_login)}</span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.passwordExpiry}:</b></div>
-        <span class="value">{user.password_expires && formatDateFromTs(user.password_expires) || t.never}</span>
+        <div class={classLabel}><b>{t.account.passwordExpiry}:</b></div>
+        <span class="value">
+            {user.password_expires && formatDateFromTs(user.password_expires) || t.common.never}
+        </span>
     </div>
 
     <div class={classRow}>
-        <div class={classLabel}><b>{t.userCreated}:</b></div>
+        <div class={classLabel}><b>{t.account.userCreated}:</b></div>
         <span class="value">{formatDateFromTs(user.created_at)}</span>
     </div>
 
     {#if user.user_expires}
         <div class={classRow}>
-            <div class={classLabel}><b>{t.userExpiry}:</b></div>
+            <div class={classLabel}><b>{t.account.userExpiry}:</b></div>
             <span class="value">{formatDateFromTs(user.user_expires)}</span>
         </div>
     {/if}
diff --git a/frontend/src/components/account/AccMFA.svelte b/frontend/src/components/account/AccMFA.svelte
index 58d6b2dff..d4f7c7c76 100644
--- a/frontend/src/components/account/AccMFA.svelte
+++ b/frontend/src/components/account/AccMFA.svelte
@@ -6,7 +6,7 @@
         base64UrlSafeToArrBuf,
         extractFormErrors,
         formatDateFromTs
-    } from "../../utils/helpers.js";
+    } from "../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {
         getUserPasskeys,
@@ -22,8 +22,11 @@
     import {REGEX_NAME} from "../../utils/constants.js";
     import IconFingerprint from "$lib/icons/IconFingerprint.svelte";
     import Tooltip from "$lib/Tooltip.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let {t, sessionInfo, user = {}} = $props();
+    let {sessionInfo, user = {}} = $props();
+
+    let t = useI18n();
 
     let isLoading = false;
     let err = $state(false);
@@ -42,7 +45,7 @@
     let formErrors = $state({});
     const schema = yup.object().shape({
         passkeyName: yup.string()
-            .required(t.invalidInput)
+            .required(t.common.invalidInput)
             .matches(REGEX_NAME, t.mfa.passkeyNameErr),
     });
 
@@ -225,12 +228,12 @@
             {t.mfa.passkeyName}
         </Input>
         <div class="regBtns">
-            <Button on:click={handleRegStart} level={1}>{t.mfa.register.toUpperCase()}</Button>
-            <Button on:click={() => showRegInput = false} level={4}>{t.cancel.toUpperCase()}</Button>
+            <Button on:click={handleRegStart} level={1}>{t.mfa.register}</Button>
+            <Button on:click={() => showRegInput = false} level={4}>{t.common.cancel}</Button>
         </div>
     {:else}
         <div class="regNewBtn">
-            <Button on:click={() => showRegInput = true} level={3}>{t.mfa.registerNew.toUpperCase()}</Button>
+            <Button on:click={() => showRegInput = true} level={3}>{t.mfa.registerNew}</Button>
         </div>
     {/if}
 
@@ -247,7 +250,7 @@
                     <div class="nameUv">
                         <b>{passkey.name}</b>
                         {#if passkey.user_verified}
-                            <Tooltip text={t.userVerifiedTooltip}>
+                            <Tooltip text={t.account.userVerifiedTooltip}>
                                 <div style:margin-bottom="-.25rem">
                                     <IconFingerprint width={18} color="var(--col-acnt)"/>
                                 </div>
@@ -283,7 +286,7 @@
 
     {#if passkeys.length > 0}
         <div class="button">
-            <Button on:click={handleTestStart} level={1}>{t.mfa.test.toUpperCase()}</Button>
+            <Button on:click={handleTestStart} level={1}>{t.mfa.test}</Button>
         </div>
     {/if}
 
diff --git a/frontend/src/components/account/AccMain.svelte b/frontend/src/components/account/AccMain.svelte
index 7130bf4f5..0f260a7f6 100644
--- a/frontend/src/components/account/AccMain.svelte
+++ b/frontend/src/components/account/AccMain.svelte
@@ -1,23 +1,20 @@
 <script>
     import { run } from 'svelte/legacy';
-
-    import {getAuthProvidersTemplate, redirectToLogout} from "../../utils/helpers.js";
+    import {getAuthProvidersTemplate, redirectToLogout} from "../../utils/helpers";
     import AccInfo from "./AccInfo.svelte";
     import AccNav from "./AccNav.svelte";
     import AccEdit from "./AccEdit.svelte";
     import {tweened} from "svelte/motion";
     import AccMFA from "./AccMFA.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import AccPassword from "./AccPassword.svelte";
     import AccWebId from "./AccWebId.svelte";
     import {onMount} from "svelte";
     import AccDevices from "./AccDevices.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-
-    
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [sessionInfo]
      * @property {any} [user]
      * @property {any} webIdData - webIdData will stay undefined if it is not enabled in the backend
@@ -25,12 +22,13 @@
 
     /** @type {Props} */
     let {
-        t,
         sessionInfo,
         user = $bindable({}),
         webIdData = $bindable()
     } = $props();
 
+    let t = useI18n();
+
     let innerWidth = $state();
     let providers = $state();
     let authProvider = $state();
@@ -40,8 +38,8 @@
         duration: 100,
     })
 
-    let content = $state(t.navInfo);
-    let selected = $state(t.navInfo);
+    let content = $state(t.account.navInfo);
+    let selected = $state(t.account.navInfo);
 
     onMount(async () => {
         providers = await getAuthProvidersTemplate();
@@ -59,7 +57,7 @@
         }
     });
     run(() => {
-        if (selected === t.navLogout) {
+        if (selected === t.account.navLogout) {
             redirectToLogout();
         }
     });
@@ -79,26 +77,26 @@
         <LangSelector absolute absoluteRight updateBackend/>
 
         <div class="headerPhone">
-            <h3>{t.account}</h3>
+            <h3>{t.account.account}</h3>
         </div>
 
         <div class="container">
-            <AccNav {t} bind:selected />
+            <AccNav bind:selected />
 
             <div class="innerPhone">
                 <div style="opacity: {$op}">
-                    {#if content === t.navInfo}
-                        <AccInfo {t} bind:user {webIdData} viewModePhone {authProvider}/>
-                    {:else if content === t.navEdit}
-                        <AccEdit {t} bind:user viewModePhone/>
-                    {:else if content === t.navPassword}
-                        <AccPassword {t} {user} {authProvider} viewModePhone/>
-                    {:else if content === t.navMfa}
-                        <AccMFA {t} {sessionInfo} {user}/>
+                    {#if content === t.account.navInfo}
+                        <AccInfo bind:user {webIdData} viewModePhone {authProvider}/>
+                    {:else if content === t.account.navEdit}
+                        <AccEdit bind:user viewModePhone/>
+                    {:else if content === t.common.password}
+                        <AccPassword {user} {authProvider} viewModePhone/>
+                    {:else if content === t.account.navMfa}
+                        <AccMFA {sessionInfo} {user}/>
                     {:else if content === 'WebID'}
-                        <AccWebId {t} bind:webIdData />
-                    {:else if content === t.devices}
-                        <AccDevices {t} bind:sessionInfo/>
+                        <AccWebId bind:webIdData />
+                    {:else if content === t.account.devices}
+                        <AccDevices bind:sessionInfo/>
                     {/if}
                 </div>
             </div>
@@ -109,26 +107,26 @@
         <LangSelector absolute updateBackend/>
 
         <div class="header">
-            <h3>{t.account}</h3>
+            <h3>{t.account.account}</h3>
         </div>
 
         <div class="container">
-            <AccNav {t} bind:selected showWebId={!!webIdData} />
+            <AccNav bind:selected showWebId={!!webIdData} />
 
             <div class="inner">
                 <div style="opacity: {$op}">
-                    {#if content === t.navInfo}
-                        <AccInfo {t} bind:user {webIdData} {authProvider}/>
-                    {:else if content === t.navEdit}
-                        <AccEdit {t} bind:user/>
-                    {:else if content === t.navPassword}
-                        <AccPassword {t} {user} {authProvider}/>
-                    {:else if content === t.navMfa}
-                        <AccMFA {t} {sessionInfo} {user}/>
+                    {#if content === t.account.navInfo}
+                        <AccInfo bind:user {webIdData} {authProvider}/>
+                    {:else if content === t.account.navEdit}
+                        <AccEdit bind:user/>
+                    {:else if content === t.common.password}
+                        <AccPassword {user} {authProvider}/>
+                    {:else if content === t.account.navMfa}
+                        <AccMFA {sessionInfo} {user}/>
                     {:else if content === 'WebID'}
-                        <AccWebId {t} bind:webIdData/>
-                    {:else if content === t.devices}
-                        <AccDevices {t} bind:sessionInfo/>
+                        <AccWebId bind:webIdData/>
+                    {:else if content === t.account.devices}
+                        <AccDevices bind:sessionInfo/>
                     {/if}
                 </div>
             </div>
diff --git a/frontend/src/components/account/AccModPwd.svelte b/frontend/src/components/account/AccModPwd.svelte
index 5800001e5..f436213e0 100644
--- a/frontend/src/components/account/AccModPwd.svelte
+++ b/frontend/src/components/account/AccModPwd.svelte
@@ -3,13 +3,13 @@
     import * as yup from "yup";
     import {onMount} from "svelte";
     import {getPasswordPolicy} from "../../utils/dataFetching.js";
-    import {extractFormErrors, generatePassword} from "../../utils/helpers.js";
+    import {extractFormErrors, generatePassword} from "../../utils/helpers";
     import PasswordInput from "$lib/inputs/PasswordInput.svelte";
     import Button from "$lib/Button.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [formValues]
      * @property {string} [btnWidth]
      * @property {boolean} [hideCurrentPassword]
@@ -19,7 +19,6 @@
 
     /** @type {Props} */
     let {
-        t,
         formValues = $bindable({}),
         btnWidth = "4rem",
         hideCurrentPassword = false,
@@ -27,6 +26,8 @@
         isValid = $bindable(),
     } = $props();
 
+    let t = useI18n();
+
     isValid = isPwdValid;
 
     let accepted = $state(false);
@@ -36,17 +37,17 @@
     let showCopy = $derived(formValues.new?.length > 6 && formValues.new === formValues.verify);
 
     const schema = yup.object().shape({
-        current: yup.string().required(t.passwordCurrReq),
+        current: yup.string().required(t.account.passwordCurrReq),
         new: yup.string()
-            .required(t.passwordNewReq),
+            .required(t.account.passwordNewReq),
         verify: yup.string()
-            .required(t.passwordNoMatch),
+            .required(t.account.passwordNoMatch),
     });
     const schemaWithoutCurrent = yup.object().shape({
         new: yup.string()
-            .required(t.passwordNewReq),
+            .required(t.account.passwordNewReq),
         verify: yup.string()
-            .required(t.passwordNoMatch),
+            .required(t.account.passwordNoMatch),
     });
 
 
@@ -82,7 +83,7 @@
         }
 
         if (!accepted) {
-            err = t.passwordPolicyFollow;
+            err = t.account.passwordPolicyFollow;
             return false;
         }
 
@@ -92,7 +93,7 @@
         }
 
         if (formValues.new !== formValues.verify) {
-            err = t.passwordNoMatch;
+            err = t.account.passwordNoMatch;
             return false;
         }
 
@@ -119,38 +120,38 @@
                     bind:value={formValues.current}
                     error={formErrors.current}
                     autocomplete="current-password"
-                    placeholder={t.passwordCurr}
+                    placeholder={t.account.passwordCurr}
                     on:input={isPwdValid}
                     width={inputWidth}
             >
-                {t.passwordCurr.toUpperCase()}
+                {t.account.passwordCurr.toUpperCase()}
             </PasswordInput>
         {/if}
         <PasswordInput
                 bind:value={formValues.new}
                 error={formErrors.new}
                 autocomplete="new-password"
-                placeholder={t.passwordNew}
+                placeholder={t.account.passwordNew}
                 on:input={isPwdValid}
                 {showCopy}
                 width={inputWidth}
         >
-            {t.passwordNew.toUpperCase()}
+            {t.account.passwordNew.toUpperCase()}
         </PasswordInput>
         <PasswordInput
                 bind:value={formValues.verify}
                 error={formErrors.verify}
                 autocomplete="new-password"
-                placeholder={t.passwordConfirm}
+                placeholder={t.account.passwordConfirm}
                 on:input={isPwdValid}
                 {showCopy}
                 width={inputWidth}
         >
-            {t.passwordConfirm.toUpperCase()}
+            {t.account.passwordConfirm.toUpperCase()}
         </PasswordInput>
 
         <Button on:click={generate} level={2} width={btnWidth}>
-            {t.generateRandom.toUpperCase()}
+            {t.account.generateRandom}
         </Button>
 
         <div class="err">
diff --git a/frontend/src/components/account/AccNav.svelte b/frontend/src/components/account/AccNav.svelte
index 974c3c967..c7efd1a9a 100644
--- a/frontend/src/components/account/AccNav.svelte
+++ b/frontend/src/components/account/AccNav.svelte
@@ -2,25 +2,41 @@
     import {onMount} from "svelte";
     import {getQueryParams} from "../../utils/helpers";
     import TabBar from "$lib/TabBar.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [selected]
      * @property {boolean} [showWebId]
      */
 
     /** @type {Props} */
-    let {t, selected = $bindable(), showWebId = false} = $props();
+    let {selected = $bindable(), showWebId = false} = $props();
+
+    let t = useI18n();
 
     let labels = $state(showWebId ?
-        [t.navInfo, t.navEdit, t.navPassword, t.navMfa, 'WebID', t.devices, t.navLogout]
-        : [t.navInfo, t.navEdit, t.navPassword, t.navMfa, t.devices, t.navLogout]);
+        [
+            t.account.navInfo,
+            t.account.navEdit,
+            t.common.password,
+            t.account.navMfa, 'WebID',
+            t.account.devices,
+            t.account.navLogout,
+        ]
+        : [
+            t.account.navInfo,
+            t.account.navEdit,
+            t.common.password,
+            t.account.navMfa,
+            t.account.devices,
+            t.account.navLogout,
+        ]);
 
     onMount(() => {
         let params = getQueryParams();
         if (params.v === 'devices') {
-            selected = t.devices;
+            selected = t.account.devices;
         }
     });
 
diff --git a/frontend/src/components/account/AccPassword.svelte b/frontend/src/components/account/AccPassword.svelte
index 01491cbde..7d8b6a34e 100644
--- a/frontend/src/components/account/AccPassword.svelte
+++ b/frontend/src/components/account/AccPassword.svelte
@@ -3,7 +3,8 @@
     import {blur, fade} from 'svelte/transition';
     import AccModPwd from "./AccModPwd.svelte";
     import {
-        getUserPasskeys, postPasswordResetRequest,
+        getUserPasskeys,
+        postPasswordResetRequest,
         postUserSelfConvertPasskey,
         putUserSelf,
         webauthnAuthStart
@@ -11,10 +12,10 @@
     import WebauthnRequest from "../webauthn/WebauthnRequest.svelte";
     import {onMount} from "svelte";
     import CheckIcon from "$lib/CheckIcon.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {any} [user]
      * @property {any} authProvider
      * @property {boolean} [viewModePhone]
@@ -22,11 +23,13 @@
 
     /** @type {Props} */
     let {
-        t = $bindable(),
         user = {},
         authProvider,
         viewModePhone = false
     } = $props();
+
+    let t = useI18n();
+
     let inputWidth = $derived(viewModePhone ? 'calc(100vw - 1.5rem)' : '300px');
 
     const btnWidth = "13rem";
@@ -84,7 +87,7 @@
     async function onSubmitMfa() {
         const validPwd = await isPwdValid();
         if (!validPwd) {
-            err = t.invalidInput;
+            err = t.common.invalidInput;
             return;
         }
 
@@ -95,7 +98,7 @@
     async function onSubmitFinish(mfaCode) {
         const validPwd = await isPwdValid();
         if (!validPwd) {
-            err = t.invalidInput;
+            err = t.common.invalidInput;
             return;
         }
 
@@ -163,9 +166,9 @@
 
         {#if accType === 'federated'}
             <div class="m-05">
-                <p>{t.federatedConvertPassword1}</p>
+                <p>{t.account.federatedConvertPassword1}</p>
                 <p><b>{authProvider.name || 'UNKNOWN'}</b></p>
-                <p>{t.federatedConvertPassword2}</p>
+                <p>{t.account.federatedConvertPassword2}</p>
                 {#if success}
                     <CheckIcon check/>
                 {:else}
@@ -174,29 +177,28 @@
                             on:click={requestPasswordReset}
                             level={3}
                     >
-                        {t.passwordReset.toUpperCase()}
+                        {t.account.passwordReset}
                     </Button>
                 {/if}
             </div>
         {/if}
 
         {#if (accType === "passkey" || accType === "federated_passkey") && !convertAccount}
-            <p>{t.accTypePasskeyText1}</p>
-            <p>{t.accTypePasskeyText2}</p>
-            <p>{t.accTypePasskeyText3}</p>
+            <p>{t.account.accTypePasskeyText1}</p>
+            <p>{t.account.accTypePasskeyText2}</p>
+            <p>{t.account.accTypePasskeyText3}</p>
             <Button
                     width={btnWidth}
                     on:click={() => convertAccount = true}
                     level={3}
             >
-                {t.convertAccount.toUpperCase()}
+                {t.account.convertAccount}
             </Button>
         {/if}
 
         {#if accType === "password" || accType === "federated_password" || convertAccount}
             <div in:blur={{ duration: 350 }}>
                 <AccModPwd
-                        {t}
                         bind:formValues
                         bind:isValid={isPwdValid}
                         btnWidth={btnWidth}
@@ -206,7 +208,7 @@
 
                 <div>
                     <Button width={btnWidth} on:click={onSubmit} level={1} bind:isLoading>
-                        {t.save.toUpperCase()}
+                        {t.common.save}
                     </Button>
                 </div>
                 {#if convertAccount && !isLoading}
@@ -216,7 +218,7 @@
                                 on:click={() => convertAccount = false}
                                 level={4}
                         >
-                            {t.cancel.toUpperCase()}
+                            {t.common.cancel}
                         </Button>
                     </div>
                 {/if}
@@ -224,14 +226,14 @@
 
             {#if !convertAccount && canConvertToPasskey}
                 <div class="convertPasskey">
-                    <h3>{t.convertAccount}</h3>
-                    <p>{t.convertAccountP1}</p>
+                    <h3>{t.account.convertAccount}</h3>
+                    <p>{t.account.convertAccountP1}</p>
                     <Button
                             width={btnWidth}
                             on:click={convertToPasskeyOnly}
                             level={3}
                     >
-                        {t.convertAccount.toUpperCase()}
+                        {t.account.convertAccount}
                     </Button>
                 </div>
             {/if}
diff --git a/frontend/src/components/account/AccWebId.svelte b/frontend/src/components/account/AccWebId.svelte
index 7e9b71d2a..5a468304a 100644
--- a/frontend/src/components/account/AccWebId.svelte
+++ b/frontend/src/components/account/AccWebId.svelte
@@ -1,13 +1,15 @@
 <script>
-    import { run } from 'svelte/legacy';
-
+    import {run} from 'svelte/legacy';
     import Button from "$lib/Button.svelte";
     import {fade, slide} from 'svelte/transition';
     import {putUserWebIdData} from "../../utils/dataFetching.js";
     import Switch from "$lib/Switch.svelte";
-    import {buildWebIdUri} from "../../utils/helpers.js";
+    import {buildWebIdUri} from "../../utils/helpers";
+    import {useI18n} from "$state/i18n.svelte";
+
+    let {webIdData = $bindable()} = $props();
 
-    let { t, webIdData = $bindable() } = $props();
+    let t = useI18n();
 
     const btnWidth = "12rem";
 
@@ -44,7 +46,7 @@
 
 <div class="wrapper">
     <div class="container">
-        <p>{t.webIdDesc}</p>
+        <p>{t.account.webIdDesc}</p>
 
         <p>
             <a href={webIdLink} target="_blank">
@@ -61,21 +63,21 @@
 
         <div class="row">
             <div class="label">
-                {t.webIdExpertMode}
+                {t.account.webIdExpertMode}
             </div>
             <Switch bind:selected={expertMode}/>
         </div>
 
         {#if expertMode}
             <div transition:slide>
-                <p>{t.webIdDescData}</p>
-<!--                <AccWebIdEntries-->
-<!--                        bind:t-->
-<!--                        bind:webIdData-->
-<!--                        bind:viewModePhone-->
-<!--                        bind:getData-->
-<!--                        bind:validateData-->
-<!--                />-->
+                <p>{t.account.webIdDescData}</p>
+                <!--                <AccWebIdEntries-->
+                <!--                        bind:t-->
+                <!--                        bind:webIdData-->
+                <!--                        bind:viewModePhone-->
+                <!--                        bind:getData-->
+                <!--                        bind:validateData-->
+                <!--                />-->
                 <textarea
                         class="font-mono text"
                         rows={15}
@@ -86,7 +88,7 @@
         {/if}
 
         <Button width={btnWidth} on:click={onSubmit} level={1}>
-            {t.save.toUpperCase()}
+            {t.common.save}
         </Button>
 
         <div class="bottom">
diff --git a/frontend/src/components/admin/AdminMain.svelte b/frontend/src/components/admin/AdminMain.svelte
index ba5e205c8..dc971ddf4 100644
--- a/frontend/src/components/admin/AdminMain.svelte
+++ b/frontend/src/components/admin/AdminMain.svelte
@@ -1,7 +1,7 @@
 <script>
     import {run} from 'svelte/legacy';
 
-    import {redirectToLogout} from "../../utils/helpers.js";
+    import {redirectToLogout} from "../../utils/helpers";
     import Nav from "$lib/nav/Nav.svelte";
     import NavEntry from "$lib/nav/NavEntry.svelte";
     import Users from "./users/Users.svelte";
diff --git a/frontend/src/components/admin/AdminMainPre.svelte b/frontend/src/components/admin/AdminMainPre.svelte
index 265ad92fa..ce4ccdbff 100644
--- a/frontend/src/components/admin/AdminMainPre.svelte
+++ b/frontend/src/components/admin/AdminMainPre.svelte
@@ -1,7 +1,7 @@
 <script>
     import {onMount} from "svelte";
     import {checkAdminAccess, getSessionInfo} from "../../utils/dataFetching.js";
-    import {redirectToLogin} from "../../utils/helpers.js";
+    import {redirectToLogin} from "../../utils/helpers";
     import BrowserCheck from "../BrowserCheck.svelte";
     import Loading from "$lib/Loading.svelte";
     import Button from "$lib/Button.svelte";
diff --git a/frontend/src/components/admin/api_keys/ApiKeyAddNew.svelte b/frontend/src/components/admin/api_keys/ApiKeyAddNew.svelte
index 23c9129d5..c7a19be7d 100644
--- a/frontend/src/components/admin/api_keys/ApiKeyAddNew.svelte
+++ b/frontend/src/components/admin/api_keys/ApiKeyAddNew.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import Button from "$lib/Button.svelte";
     import Input from "$lib/inputs/Input.svelte";
@@ -8,12 +8,15 @@
     import {postApiKey} from "../../../utils/dataFetchingAdmin.js";
     import Switch from "$lib/Switch.svelte";
     import {slide} from "svelte/transition";
-    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
+    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers";
     import ApiKeyAccessMatrix from "./ApiKeyAccessMatrix.svelte";
 
     const minDate = new Date().toISOString().split('.')[0];
 
-    let { apiKeys = [], onSave = () => {} } = $props();
+    let {
+        apiKeys = [], onSave = () => {
+        }
+    } = $props();
 
     let err = $state('');
     let doesExpire = $state(false);
@@ -127,7 +130,7 @@
         </div>
     {/if}
 
-    <ApiKeyAccessMatrix bind:accessMatrix bind:finalize={finalizeMatrix} />
+    <ApiKeyAccessMatrix bind:accessMatrix bind:finalize={finalizeMatrix}/>
 
     <div class="saveBtn">
         <Button on:click={onSubmit} level={1}>SAVE</Button>
diff --git a/frontend/src/components/admin/api_keys/ApiKeyConfig.svelte b/frontend/src/components/admin/api_keys/ApiKeyConfig.svelte
index 572f829ac..e27a89733 100644
--- a/frontend/src/components/admin/api_keys/ApiKeyConfig.svelte
+++ b/frontend/src/components/admin/api_keys/ApiKeyConfig.svelte
@@ -2,7 +2,7 @@
     import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
+    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_API_KEY} from "../../../utils/constants.js";
     import {onMount} from "svelte";
diff --git a/frontend/src/components/admin/api_keys/ApiKeyTile.svelte b/frontend/src/components/admin/api_keys/ApiKeyTile.svelte
index 770cce4c3..d6334f092 100644
--- a/frontend/src/components/admin/api_keys/ApiKeyTile.svelte
+++ b/frontend/src/components/admin/api_keys/ApiKeyTile.svelte
@@ -5,7 +5,7 @@
     import {slide} from 'svelte/transition';
     import ApiKeyConfig from "./ApiKeyConfig.svelte";
     import ApiKeyDelete from "./ApiKeyDelete.svelte";
-    import {formatDateFromTs} from "../../../utils/helpers.js";
+    import {formatDateFromTs} from "../../../utils/helpers";
     import ApiKeySecret from "./ApiKeySecret.svelte";
 
     let {
diff --git a/frontend/src/components/admin/blacklist/Blacklist.svelte b/frontend/src/components/admin/blacklist/Blacklist.svelte
index d66160474..ef5d4c641 100644
--- a/frontend/src/components/admin/blacklist/Blacklist.svelte
+++ b/frontend/src/components/admin/blacklist/Blacklist.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
@@ -10,7 +10,7 @@
     import Input from "$lib/inputs/Input.svelte";
     import {REGEX_IP_V4} from "../../../utils/constants.js";
     import * as yup from "yup";
-    import {extractFormErrors, formatDateFromTs, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
+    import {extractFormErrors, formatDateFromTs, formatUtcTsFromDateInput} from "../../../utils/helpers";
     import IconStop from "$lib/icons/IconStop.svelte";
     import Tooltip from "$lib/Tooltip.svelte";
 
diff --git a/frontend/src/components/admin/clients/ClientBranding.svelte b/frontend/src/components/admin/clients/ClientBranding.svelte
index 9b7b638f4..76bd6a427 100644
--- a/frontend/src/components/admin/clients/ClientBranding.svelte
+++ b/frontend/src/components/admin/clients/ClientBranding.svelte
@@ -12,7 +12,7 @@
     import {onDestroy, onMount, tick} from "svelte";
     import ClientBrandingPreview from "./ClientBrandingPreview.svelte";
     import Input from "$lib/inputs/Input.svelte";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import * as yup from "yup";
     import {REGEX_CSS_COLOR} from "../../../utils/constants.js";
     import ImageUploadRaw from "../../ImageUploadRaw.svelte";
diff --git a/frontend/src/components/admin/clients/ClientConfig.svelte b/frontend/src/components/admin/clients/ClientConfig.svelte
index adf1374da..b631945af 100644
--- a/frontend/src/components/admin/clients/ClientConfig.svelte
+++ b/frontend/src/components/admin/clients/ClientConfig.svelte
@@ -2,7 +2,7 @@
     import { run } from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Switch from "$lib/Switch.svelte";
     import ItemTiles from "$lib/itemTiles/ItemTiles.svelte";
     import Button from "$lib/Button.svelte";
diff --git a/frontend/src/components/admin/clients/ClientTileAddNew.svelte b/frontend/src/components/admin/clients/ClientTileAddNew.svelte
index 8067111f5..471c7493f 100644
--- a/frontend/src/components/admin/clients/ClientTileAddNew.svelte
+++ b/frontend/src/components/admin/clients/ClientTileAddNew.svelte
@@ -4,7 +4,7 @@
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
     import {REGEX_CLIENT_ID, REGEX_CLIENT_NAME, REGEX_URI} from "../../../utils/constants.js";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import ExpandableInput from "$lib/expandableInputs/ExpandableInputs.svelte";
     import Switch from "$lib/Switch.svelte";
     import {onMount} from "svelte";
diff --git a/frontend/src/components/admin/config/argon2/Argon2Utility.svelte b/frontend/src/components/admin/config/argon2/Argon2Utility.svelte
index b8435ecea..f5a5d864c 100644
--- a/frontend/src/components/admin/config/argon2/Argon2Utility.svelte
+++ b/frontend/src/components/admin/config/argon2/Argon2Utility.svelte
@@ -1,9 +1,9 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
     import Button from "$lib/Button.svelte";
-    import {extractFormErrors} from "../../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../../utils/helpers";
     import {postPasswordHashTimes} from "../../../../utils/dataFetchingAdmin.js";
     import Argon2Results from "./Argon2Results.svelte";
     import Input from "$lib/inputs/Input.svelte";
diff --git a/frontend/src/components/admin/config/password_policy/PasswordPolicy.svelte b/frontend/src/components/admin/config/password_policy/PasswordPolicy.svelte
index c5a6fb70b..3b2870c76 100644
--- a/frontend/src/components/admin/config/password_policy/PasswordPolicy.svelte
+++ b/frontend/src/components/admin/config/password_policy/PasswordPolicy.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
     import {getPasswordPolicy} from "../../../../utils/dataFetching.js";
     import Button from "$lib/Button.svelte";
-    import {extractFormErrors} from "../../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../../utils/helpers";
     import * as yup from "yup";
     import {putPasswordPolicy} from "../../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
diff --git a/frontend/src/components/admin/events/Event.svelte b/frontend/src/components/admin/events/Event.svelte
index 7b5c967c0..def2fdaae 100644
--- a/frontend/src/components/admin/events/Event.svelte
+++ b/frontend/src/components/admin/events/Event.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {eventColor, formatDateFromTs} from "../../../utils/helpers.js";
+    import {eventColor, formatDateFromTs} from "../../../utils/helpers";
     import {onMount} from "svelte";
 
     /**
diff --git a/frontend/src/components/admin/events/EventsArchive.svelte b/frontend/src/components/admin/events/EventsArchive.svelte
index 543657d69..a46c71ef3 100644
--- a/frontend/src/components/admin/events/EventsArchive.svelte
+++ b/frontend/src/components/admin/events/EventsArchive.svelte
@@ -3,14 +3,14 @@
 
     import {onMount, untrack} from "svelte";
     import {postEvents} from "../../../utils/dataFetchingAdmin.js";
-    import {formatDateToDateInput, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
+    import {formatDateToDateInput, formatUtcTsFromDateInput} from "../../../utils/helpers";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
     import Input from "$lib/inputs/Input.svelte";
     import {EVENT_LEVELS, EVENT_TYPES} from "../../../utils/constants.js";
     import OptionSelect from "$lib/OptionSelect.svelte";
     import Event from "./Event.svelte";
     import Switch from "$lib/Switch.svelte";
-    import {sleepAwait} from "$lib/utils/helpers.js";
+    import {sleepAwait} from "$lib/utils/helpers";
 
     let err = '';
     let events = $state([]);
diff --git a/frontend/src/components/admin/events/EventsLegend.svelte b/frontend/src/components/admin/events/EventsLegend.svelte
index a38e65055..f35afef22 100644
--- a/frontend/src/components/admin/events/EventsLegend.svelte
+++ b/frontend/src/components/admin/events/EventsLegend.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {eventColor} from "../../../utils/helpers.js";
+    import {eventColor} from "../../../utils/helpers";
 
     let {wide = $bindable()} = $props();
 </script>
diff --git a/frontend/src/components/admin/groups/GroupConfig.svelte b/frontend/src/components/admin/groups/GroupConfig.svelte
index a73f88d3f..60de6e384 100644
--- a/frontend/src/components/admin/groups/GroupConfig.svelte
+++ b/frontend/src/components/admin/groups/GroupConfig.svelte
@@ -1,15 +1,15 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_ROLES} from "../../../utils/constants.js";
     import {onMount} from "svelte";
     import {putGroup} from "../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
 
-    let { group = $bindable({}), onSave } = $props();
+    let {group = $bindable({}), onSave} = $props();
 
     let isLoading = false;
     let err = $state('');
diff --git a/frontend/src/components/admin/groups/GroupTileAddNew.svelte b/frontend/src/components/admin/groups/GroupTileAddNew.svelte
index d1ec4e301..78f67136f 100644
--- a/frontend/src/components/admin/groups/GroupTileAddNew.svelte
+++ b/frontend/src/components/admin/groups/GroupTileAddNew.svelte
@@ -1,16 +1,16 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
     import {REGEX_ROLES} from "../../../utils/constants.js";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
     import {postGroup} from "../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
 
-    let { idx = $bindable(-1), onSave } = $props();
+    let {idx = $bindable(-1), onSave} = $props();
     let expandContainer = $state();
 
     let group = $state({group: ''});
@@ -77,13 +77,13 @@
 
 <ExpandContainer bind:idx bind:show={expandContainer}>
     {#snippet header()}
-        <div class="header font-label" >
+        <div class="header font-label">
             ADD NEW GROUP
         </div>
     {/snippet}
 
     {#snippet body()}
-        <div class="container" >
+        <div class="container">
             <Input
                     bind:value={group.group}
                     bind:error={formErrors.group}
diff --git a/frontend/src/components/admin/providers/ProviderConfig.svelte b/frontend/src/components/admin/providers/ProviderConfig.svelte
index 5fa2d2fdd..0837a01f1 100644
--- a/frontend/src/components/admin/providers/ProviderConfig.svelte
+++ b/frontend/src/components/admin/providers/ProviderConfig.svelte
@@ -2,7 +2,7 @@
     import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {
         REGEX_CLIENT_NAME,
diff --git a/frontend/src/components/admin/providers/ProviderTileAddNew.svelte b/frontend/src/components/admin/providers/ProviderTileAddNew.svelte
index dc7f2bf64..b06b6ecc1 100644
--- a/frontend/src/components/admin/providers/ProviderTileAddNew.svelte
+++ b/frontend/src/components/admin/providers/ProviderTileAddNew.svelte
@@ -3,7 +3,7 @@
 
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
     import {postProviderLookup, postProvider} from "../../../utils/dataFetchingAdmin.js";
diff --git a/frontend/src/components/admin/roles/RoleConfig.svelte b/frontend/src/components/admin/roles/RoleConfig.svelte
index fd485873a..d37fbee9a 100644
--- a/frontend/src/components/admin/roles/RoleConfig.svelte
+++ b/frontend/src/components/admin/roles/RoleConfig.svelte
@@ -2,7 +2,7 @@
     import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_ROLES} from "../../../utils/constants.js";
     import {onMount} from "svelte";
diff --git a/frontend/src/components/admin/roles/RoleTileAddNew.svelte b/frontend/src/components/admin/roles/RoleTileAddNew.svelte
index a72e6f19f..9f49ace0a 100644
--- a/frontend/src/components/admin/roles/RoleTileAddNew.svelte
+++ b/frontend/src/components/admin/roles/RoleTileAddNew.svelte
@@ -1,16 +1,16 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
     import {REGEX_ROLES} from "../../../utils/constants.js";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
     import {postRole} from "../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
 
-    let { idx = $bindable(-1), onSave } = $props();
+    let {idx = $bindable(-1), onSave} = $props();
     let expandContainer = $state();
 
     let role = $state({role: ''});
@@ -77,13 +77,13 @@
 
 <ExpandContainer bind:idx bind:show={expandContainer}>
     {#snippet header()}
-        <div class="header font-label" >
+        <div class="header font-label">
             ADD NEW ROLE
         </div>
     {/snippet}
 
     {#snippet body()}
-        <div class="container" >
+        <div class="container">
             <Input
                     bind:value={role.role}
                     bind:error={formErrors.role}
diff --git a/frontend/src/components/admin/scopes/ScopeConfig.svelte b/frontend/src/components/admin/scopes/ScopeConfig.svelte
index 73a2c1d33..4210ff05f 100644
--- a/frontend/src/components/admin/scopes/ScopeConfig.svelte
+++ b/frontend/src/components/admin/scopes/ScopeConfig.svelte
@@ -2,7 +2,7 @@
     import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors, isDefaultScope} from "../../../utils/helpers.js";
+    import {extractFormErrors, isDefaultScope} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_ROLES} from "../../../utils/constants.js";
     import {onMount} from "svelte";
diff --git a/frontend/src/components/admin/scopes/ScopeDelete.svelte b/frontend/src/components/admin/scopes/ScopeDelete.svelte
index 401216c15..39f6f7ed8 100644
--- a/frontend/src/components/admin/scopes/ScopeDelete.svelte
+++ b/frontend/src/components/admin/scopes/ScopeDelete.svelte
@@ -1,9 +1,9 @@
 <script>
     import Button from "$lib/Button.svelte";
     import {deleteScope} from "../../../utils/dataFetchingAdmin";
-    import {isDefaultScope} from "../../../utils/helpers.js";
+    import {isDefaultScope} from "../../../utils/helpers";
 
-    let { scope = {}, onSave } = $props();
+    let {scope = {}, onSave} = $props();
 
     let isLoading = $state(false);
     let err = $state('');
diff --git a/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte b/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte
index 80bd51b43..758948843 100644
--- a/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte
+++ b/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte
@@ -1,16 +1,16 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
     import {REGEX_ROLES} from "../../../utils/constants.js";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
     import {postScope} from "../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
 
-    let { idx = $bindable(-1), onSave } = $props();
+    let {idx = $bindable(-1), onSave} = $props();
     let expandContainer = $state();
 
     let scope = $state({scope: ''});
@@ -77,13 +77,13 @@
 
 <ExpandContainer bind:idx bind:show={expandContainer}>
     {#snippet header()}
-        <div class="header font-label" >
+        <div class="header font-label">
             ADD NEW SCOPE
         </div>
     {/snippet}
 
     {#snippet body()}
-        <div class="container" >
+        <div class="container">
             <Input
                     bind:value={scope.scope}
                     bind:error={formErrors.scope}
diff --git a/frontend/src/components/admin/sessions/SessionRow.svelte b/frontend/src/components/admin/sessions/SessionRow.svelte
index d03aadb3e..f1b9096db 100644
--- a/frontend/src/components/admin/sessions/SessionRow.svelte
+++ b/frontend/src/components/admin/sessions/SessionRow.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {formatDateFromTs} from "../../../utils/helpers.js";
+    import {formatDateFromTs} from "../../../utils/helpers";
     import CheckIcon from "$lib/CheckIcon.svelte";
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import Tooltip from "$lib/Tooltip.svelte";
diff --git a/frontend/src/components/admin/sessions/Sessions.svelte b/frontend/src/components/admin/sessions/Sessions.svelte
index 7bc78953d..d781e3ba7 100644
--- a/frontend/src/components/admin/sessions/Sessions.svelte
+++ b/frontend/src/components/admin/sessions/Sessions.svelte
@@ -8,7 +8,7 @@
         getUsersSsp
     } from "../../../utils/dataFetchingAdmin.js";
     import CheckIcon from "$lib/CheckIcon.svelte";
-    import {formatDateFromTs, redirectToLogin} from "../../../utils/helpers.js";
+    import {formatDateFromTs, redirectToLogin} from "../../../utils/helpers";
     import Loading from "$lib/Loading.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
     import Button from "$lib/Button.svelte";
diff --git a/frontend/src/components/admin/userAttr/AttrConfig.svelte b/frontend/src/components/admin/userAttr/AttrConfig.svelte
index ac3ab7516..72d7ea299 100644
--- a/frontend/src/components/admin/userAttr/AttrConfig.svelte
+++ b/frontend/src/components/admin/userAttr/AttrConfig.svelte
@@ -2,7 +2,7 @@
     import {run} from 'svelte/legacy';
 
     import * as yup from "yup";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_ATTR_DESC, REGEX_ATTR_KEY} from "../../../utils/constants.js";
     import {onMount} from "svelte";
diff --git a/frontend/src/components/admin/userAttr/AttrTileAddNew.svelte b/frontend/src/components/admin/userAttr/AttrTileAddNew.svelte
index d107b1172..8d589a4c9 100644
--- a/frontend/src/components/admin/userAttr/AttrTileAddNew.svelte
+++ b/frontend/src/components/admin/userAttr/AttrTileAddNew.svelte
@@ -2,12 +2,12 @@
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import * as yup from "yup";
     import {REGEX_ATTR_DESC, REGEX_ATTR_KEY} from "../../../utils/constants.js";
-    import {extractFormErrors} from "../../../utils/helpers.js";
+    import {extractFormErrors} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {postAttr} from "../../../utils/dataFetchingAdmin.js";
     import Input from "$lib/inputs/Input.svelte";
 
-    let { idx = $bindable(-1), onSave } = $props();
+    let {idx = $bindable(-1), onSave} = $props();
 
     let err = $state('');
     let isLoading = false;
@@ -63,13 +63,13 @@
 
 <ExpandContainer bind:idx bind:show={expandContainer}>
     {#snippet header()}
-        <div class="header font-label" >
+        <div class="header font-label">
             ADD NEW USER ATTRIBUTE
         </div>
     {/snippet}
 
     {#snippet body()}
-        <div class="container" >
+        <div class="container">
             <div class="desc">
                 You can add a new custom user attribute.<br>
                 These attributes can be set for every user and mapped to an existing scope.<br>
diff --git a/frontend/src/components/admin/users/UserInfo.svelte b/frontend/src/components/admin/users/UserInfo.svelte
index d674ff61a..ff6cd1bb5 100644
--- a/frontend/src/components/admin/users/UserInfo.svelte
+++ b/frontend/src/components/admin/users/UserInfo.svelte
@@ -7,7 +7,7 @@
         formatDateFromTs,
         formatDateToDateInput,
         formatUtcTsFromDateInput, redirectToLogin
-    } from "../../../utils/helpers.js";
+    } from "../../../utils/helpers";
     import Switch from "$lib/Switch.svelte";
     import {globalGroupsNames, globalRolesNames} from "../../../stores/admin.js";
     import Button from "$lib/Button.svelte";
diff --git a/frontend/src/components/admin/users/UserMfa.svelte b/frontend/src/components/admin/users/UserMfa.svelte
index b387063d1..e0a953e12 100644
--- a/frontend/src/components/admin/users/UserMfa.svelte
+++ b/frontend/src/components/admin/users/UserMfa.svelte
@@ -2,7 +2,7 @@
     import {onMount} from "svelte";
     import {getUserPasskeys, webauthnDelete} from "../../../utils/dataFetching.js";
     import Button from "$lib/Button.svelte";
-    import {formatDateFromTs} from "../../../utils/helpers.js";
+    import {formatDateFromTs} from "../../../utils/helpers";
 
     let {user = $bindable({}), onSave = $bindable()} = $props();
 
diff --git a/frontend/src/components/admin/users/UserPassword.svelte b/frontend/src/components/admin/users/UserPassword.svelte
index 09127108e..ed0b7b3d0 100644
--- a/frontend/src/components/admin/users/UserPassword.svelte
+++ b/frontend/src/components/admin/users/UserPassword.svelte
@@ -7,7 +7,7 @@
     import {getPasswordPolicy} from "../../../utils/dataFetching.js";
     import Button from "$lib/Button.svelte";
     import {postPasswordResetRequest, putUser} from "../../../utils/dataFetchingAdmin.js";
-    import {generatePassword} from "../../../utils/helpers.js";
+    import {generatePassword} from "../../../utils/helpers";
 
     let {user = $bindable({}), onSave = $bindable()} = $props();
 
diff --git a/frontend/src/components/admin/users/UserTileAddNew.svelte b/frontend/src/components/admin/users/UserTileAddNew.svelte
index 37e24be4e..3949aba83 100644
--- a/frontend/src/components/admin/users/UserTileAddNew.svelte
+++ b/frontend/src/components/admin/users/UserTileAddNew.svelte
@@ -3,7 +3,7 @@
     import * as yup from "yup";
     import {LANGUAGES, REGEX_NAME} from "../../../utils/constants.js";
     import {globalGroupsNames, globalRolesNames} from "../../../stores/admin.js";
-    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
+    import {extractFormErrors, formatUtcTsFromDateInput} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {postUser} from "../../../utils/dataFetchingAdmin.js";
     import ItemTiles from "$lib/itemTiles/ItemTiles.svelte";
@@ -11,7 +11,7 @@
     import OptionSelect from "$lib/OptionSelect.svelte";
     import Switch from "$lib/Switch.svelte";
 
-    let { idx = $bindable(-1), onSave } = $props();
+    let {idx = $bindable(-1), onSave} = $props();
 
     let err = $state('');
     let isLoading = false;
@@ -100,13 +100,13 @@
 
 <ExpandContainer bind:idx bind:show={expandContainer}>
     {#snippet header()}
-        <div class="header font-label" >
+        <div class="header font-label">
             ADD NEW USER
         </div>
     {/snippet}
 
     {#snippet body()}
-        <div class="container" >
+        <div class="container">
             <Input
                     type="email"
                     bind:value={formValues.email}
@@ -141,7 +141,7 @@
                     LANGUAGE
                 </div>
                 <div style="margin-top: .4rem">
-                    <OptionSelect bind:value={language} options={LANGUAGES} />
+                    <OptionSelect bind:value={language} options={LANGUAGES}/>
                 </div>
             </div>
 
diff --git a/frontend/src/components/common/Devices.svelte b/frontend/src/components/common/Devices.svelte
index b3484bc0a..6de7d5b23 100644
--- a/frontend/src/components/common/Devices.svelte
+++ b/frontend/src/components/common/Devices.svelte
@@ -4,19 +4,21 @@
     import ExpandContainer from "$lib/ExpandContainer.svelte";
     import Input from "$lib/inputs/Input.svelte";
     import IconCheck from "$lib/icons/IconCheck.svelte";
-    import {formatDateFromTs} from "../../utils/helpers.js";
+    import {formatDateFromTs} from "../../utils/helpers";
     import Tooltip from "$lib/Tooltip.svelte";
     import IconStop from "$lib/icons/IconStop.svelte";
     import {REGEX_CLIENT_NAME} from "../../utils/constants.js";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} t
      * @property {string} [userId]
      */
 
     /** @type {Props} */
-    let { t, userId = '' } = $props();
+    let {userId = ''} = $props();
+
+    let t = useI18n();
 
     let devices = $state([]);
 
@@ -47,7 +49,7 @@
         if (isValid) {
             formErrors[id] = '';
         } else {
-            formErrors[id] = t?.invalidInput || 'Invalid Input';
+            formErrors[id] = t?.common.invalidInput || 'Invalid Input';
             return;
         }
 
@@ -96,25 +98,25 @@
 </script>
 
 <div class="head">
-    {t?.devicesDesc || 'Devices linked to this account'}
+    {t?.account.devicesDesc || 'Devices linked to this account'}
 </div>
 
 <div class="devices">
     {#each devices as device (device.id)}
         <ExpandContainer>
             {#snippet header()}
-                        <div class="device-header" >
+                <div class="device-header">
                     <div class="device-head font-mono">
                         {device.name}
                     </div>
                 </div>
-                    {/snippet}
+            {/snippet}
 
             {#snippet body()}
-                        <div class="device" >
+                <div class="device">
                     <div class="unit">
                         <div class="label font-label">
-                            {t?.deviceId.toUpperCase() || 'ID'}
+                            {t?.account.deviceId.toUpperCase() || 'ID'}
                         </div>
                         <div class="value font-mono">
                             {device.id}
@@ -126,13 +128,13 @@
                                 bind:value={formValues[device.id]}
                                 bind:error={formErrors[device.id]}
                                 autocomplete="off"
-                                placeholder={t?.deviceName.toUpperCase() || 'Name'}
+                                placeholder={t?.account.deviceName.toUpperCase() || 'Name'}
                                 on:enter={() => onSaveName(device.id)}
                         >
-                            {t?.deviceName.toUpperCase() || 'NAME'}
+                            {t?.account.deviceName.toUpperCase() || 'NAME'}
                         </Input>
                         {#if formValues[device.id] != device.name}
-                            <Tooltip text={t?.save || 'Save'}>
+                            <Tooltip text={t?.common.save || 'Save'}>
                                 <div
                                         role="button"
                                         tabindex="0"
@@ -148,7 +150,7 @@
 
                     <div class="unit">
                         <div class="label font-label">
-                            {t?.regDate.toUpperCase() || 'REGISTRATION DATE'}
+                            {t?.account.regDate.toUpperCase() || 'REGISTRATION DATE'}
                         </div>
                         <div class="value">
                             {device.created}
@@ -157,7 +159,7 @@
 
                     <div class="unit">
                         <div class="label font-label">
-                            {t?.accessExp.toUpperCase() || 'ACCESS EXPIRES'}
+                            {t?.account.accessExp.toUpperCase() || 'ACCESS EXPIRES'}
                         </div>
                         <div class="value">
                             {formatDateFromTs(device.access_exp)}
@@ -167,13 +169,13 @@
                     {#if device.refresh_exp}
                         <div class="unit">
                             <div class="label font-label">
-                                {t?.accessRenew.toUpperCase() || 'ACCESS RENEW UNTIL'}
+                                {t?.account.accessRenew.toUpperCase() || 'ACCESS RENEW UNTIL'}
                             </div>
                             <div class="row">
                                 <div class="value">
                                     {formatDateFromTs(device.refresh_exp)}
                                 </div>
-                                <Tooltip text={t?.accessRenewDelete || 'Delete the possibility to renew'}>
+                                <Tooltip text={t?.account.accessRenewDelete || 'Delete the possibility to renew'}>
                                     <div
                                             role="button"
                                             tabindex="0"
@@ -190,14 +192,14 @@
 
                     <div class="unit">
                         <div class="label font-label">
-                            {t?.regIp.toUpperCase() || 'REGISTRATION FROM IP'}
+                            {t?.account.regIp.toUpperCase() || 'REGISTRATION FROM IP'}
                         </div>
                         <div class="value">
                             {device.peer_ip}
                         </div>
                     </div>
                 </div>
-                    {/snippet}
+            {/snippet}
         </ExpandContainer>
     {/each}
 </div>
diff --git a/frontend/src/components/passwordReset/PasswordPolicy.svelte b/frontend/src/components/passwordReset/PasswordPolicy.svelte
index 9fc9dc8c3..0ff0575b1 100644
--- a/frontend/src/components/passwordReset/PasswordPolicy.svelte
+++ b/frontend/src/components/passwordReset/PasswordPolicy.svelte
@@ -1,9 +1,9 @@
 <script>
     import {run} from 'svelte/legacy';
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} [t]
      * @property {any} [policy]
      * @property {string} [password]
      * @property {boolean} [accepted]
@@ -11,23 +11,13 @@
 
     /** @type {Props} */
     let {
-        t = {
-            passwordPolicy: {
-                passwordPolicy: "Password Policy",
-                lengthMin: "Length min",
-                lengthMax: "Length max",
-                lowercaseMin: "Lowercase letters min",
-                uppercaseMin: "Uppercase letters min",
-                digitsMin: "Digits min",
-                specialMin: "Special characters min",
-                notRecent: "Not one of last recent passwords",
-            }
-        },
         policy = {},
         password,
         accepted = $bindable(false)
     } = $props();
 
+    let t = useI18n();
+
     let errPolicy = $state([false, false, false, false, false, false]);
 
     const checkPolicy = (pwd) => {
diff --git a/frontend/src/components/webauthn/WebauthnRequest.svelte b/frontend/src/components/webauthn/WebauthnRequest.svelte
index 075d28843..08b29e2bd 100644
--- a/frontend/src/components/webauthn/WebauthnRequest.svelte
+++ b/frontend/src/components/webauthn/WebauthnRequest.svelte
@@ -3,11 +3,11 @@
     import {tweened} from "svelte/motion";
     import Loading from "$lib/Loading.svelte";
     import {webauthnAuth} from "../../utils/webauthn.js";
-    import {promiseTimeout} from "../../utils/helpers.js";
+    import {promiseTimeout} from "../../utils/helpers";
+    import {useI18n} from "$state/i18n.svelte";
 
     /**
      * @typedef {Object} Props
-     * @property {any} [t]
      * @property {any} data
      * @property {string} [purpose]
      * @property {any} [onError]
@@ -16,27 +16,23 @@
 
     /** @type {Props} */
     let {
-        t = {
-        invalidKeyUsed: 'Invalid Key',
-        mfaAck: 'Acknowledged',
-        provideMfa: 'Please login with your MFA device',
-        requestExpires: 'Request expires',
-    },
         data = $bindable(),
         purpose = 'Login',
         onError = (error) => {
-    },
+        },
         onSuccess = (resBody) => {
-    }
+        }
     } = $props();
     let err = $state(false);
     let msg = $state('');
     let success = $state(false);
 
+    let t = useI18n();
+
     let progress = tweened(data.exp, {
         duration: data.exp * 1000,
     })
-    
+
     // close this component automatically, when the request has expired
     onMount(() => {
         let timer = setTimeout(() => {
@@ -58,7 +54,7 @@
         let res = {};
         try {
             res = await promiseTimeout(
-                webauthnAuth(data.user_id, p, t.invalidKeyUsed),
+                webauthnAuth(data.user_id, p, t?.authorize.invalidKeyUsed || 'Invalid Key'),
                 // we need to cancel 1 sec before the expiry to not get into a browser exception,
                 // because we would not be able to "go back" again
                 data.exp * 1000 - 1000
@@ -92,13 +88,13 @@
 
             <div class="contentRow">
                 <div class="contentHeader">
-                    {t.provideMfa}
+                    {t.authorize.provideMfa || 'Please login with your MFA device'}
                 </div>
             </div>
 
             <div class="contentRow">
                 <div class="contentHeader">
-                    {t.requestExpires}
+                    {t.authorize.requestExpires || 'Request expires'}
                     :
                 </div>
                 <div>
@@ -109,7 +105,7 @@
             <div class="contentRow">
                 {#if success}
                     <div class="good">
-                        {t.mfaAck}
+                        {t.authorize.mfaAck || 'Acknowledged'}
                     </div>
                 {:else if err}
                     <div class="err">
diff --git a/frontend/src/global_state/i18n.svelte.ts b/frontend/src/global_state/i18n.svelte.ts
new file mode 100644
index 000000000..5d26115ce
--- /dev/null
+++ b/frontend/src/global_state/i18n.svelte.ts
@@ -0,0 +1,44 @@
+import {useLang} from "$state/language.svelte.ts";
+import {type I18n} from "../i18n/interface.ts";
+import {I18nEn} from "../i18n/en.ts";
+import {I18nDe} from "../i18n/de.ts";
+import {I18nKo} from "../i18n/ko.ts";
+import {I18nZh} from "../i18n/zh.ts";
+
+// This hack makes typescript happy and is fine as long as
+// we `initI18n()` as the very first thing in +layout
+let _i18n: I18n = undefined as any as I18n;
+
+// IMPORTANT:
+//
+// It is not possible to set a new value to the returned rune without a page reload!
+// Such an API is usually a very bad idea because you can easily mess it up.
+// However, in this case we want it like that on purpose.
+//
+// We only ever set the i18n_email in the initial routing or inside the <LangSelector>.
+// A manual page reload is only necessary in the <LangSelector> though which is a
+// small price when we never need a `get()` in so many other places where we just read
+// the value.
+//
+// For the same reason, we don't even need a rune here.
+export function useI18n(): I18n {
+    return _i18n;
+}
+
+export function initI18n() {
+    let lang = useLang();
+    switch (lang) {
+        case 'de':
+            _i18n = I18nDe;
+            break;
+        case 'ko':
+            _i18n = I18nKo;
+            break;
+        case 'zh':
+            _i18n = I18nZh;
+            break;
+        default:
+            _i18n = I18nEn;
+            break;
+    }
+}
diff --git a/frontend/src/global_state/is_dev.svelte.ts b/frontend/src/global_state/is_dev.svelte.ts
index 78a2c68e5..debb82b80 100644
--- a/frontend/src/global_state/is_dev.svelte.ts
+++ b/frontend/src/global_state/is_dev.svelte.ts
@@ -1,6 +1,6 @@
 let _isDev = $state(typeof (process) !== 'undefined' && process.env.DEV_MODE === 'true');
 
-export function useIsDev() {
+export function initIsDev() {
     if (typeof (process) !== 'undefined') {
         _isDev = process.env.DEV_MODE === 'true';
     } else if (typeof (window) !== 'undefined') {
@@ -9,8 +9,9 @@ export function useIsDev() {
         let elem = window.document.getElementsByName('rauthy-csrf-token')[0];
         _isDev = elem.id === '{{ csrf_token }}';
     }
-    console.log('isDev: ', _isDev);
+}
 
+export function useIsDev() {
     return {
         get(): boolean {
             return _isDev;
diff --git a/frontend/src/global_state/language.svelte.ts b/frontend/src/global_state/language.svelte.ts
new file mode 100644
index 000000000..fdfdc9c9a
--- /dev/null
+++ b/frontend/src/global_state/language.svelte.ts
@@ -0,0 +1,13 @@
+let _lang = $state('');
+
+export function initLang() {
+    if (typeof document !== 'undefined') {
+        _lang = document.documentElement.lang.slice(0, 2).toLowerCase();
+    } else {
+        _lang = 'en';
+    }
+}
+
+export function useLang(): string {
+    return _lang;
+}
diff --git a/frontend/src/hooks.server.js b/frontend/src/hooks.server.js
index 3a88d9bee..e2c3c64a7 100644
--- a/frontend/src/hooks.server.js
+++ b/frontend/src/hooks.server.js
@@ -17,12 +17,17 @@ export async function handle({event, resolve}) {
 
     if (path === '/auth/v1/theme/%7B%7Bclient_id%7D%7D') {
         return new Response(themeDefault);
+    } else if (path === '/auth/v1/i18n_email/%7B%7Blang%7D%7D') {
+        // TODO insert EN template here if the whole setup works
+        // This, for now, only fixes UI compilation.
+        return new Response('{}');
     }
 
     return resolve(event, {
         transformPageChunk: ({html}) => {
             if (isDev) {
-                return html.replace('%lang%', langDefault);
+                let locale = event.cookies.get('locale');
+                return html.replace('%lang%', locale || langDefault);
             } else {
                 return html.replace('%lang%', '{{lang}}');
             }
diff --git a/frontend/src/i18n/de.ts b/frontend/src/i18n/de.ts
new file mode 100644
index 000000000..68ab8271c
--- /dev/null
+++ b/frontend/src/i18n/de.ts
@@ -0,0 +1,198 @@
+import {type I18n} from "./interface.ts";
+
+export const I18nDe: I18n = {
+    common: {
+        cancel: "Abbrechen",
+        email: "E-Mail",
+        errTooShort: "Eingabe zu kurz",
+        errTooLong: "Eingabe zu lang",
+        invalidInput: "Ungültige Eingaben",
+        never: "Niemals",
+        password: "Passwort",
+        required: "Notwendig",
+        save: "Speichern",
+    },
+    account: {
+        account: "Benutzer Account",
+        accType: "Account Typ",
+        accTypePasskeyText1: "Dies ist ein \"Passkey-Only\" Account. Das bedeutet, dass\ndieser Account kein Passwort hat und auch keines benötigt.",
+        accTypePasskeyText2: "Der Account kann in einen Passwort-Account umgewandelt\nwerden. Das würde allerdings bedeuten, dass ein Login auf einem neuen Gerät ohne vorherige, zumindest\neinmalige zusätzliche Verifizierung des Passwortes nicht mehr möglich sein wird.",
+        accTypePasskeyText3: "Soll dieser Account gewandelt und ein Passwort hinzugefügt werden?",
+        accessExp: "Zugang erlischt",
+        accessRenew: "Zugang Erneuerung bis",
+        accessRenewDelete: "Möglichkeit zur Erneuerung löschen",
+        birthdate: "Geburtsdatum",
+        city: "Stadt",
+        changePassword: "Passwort wechseln",
+        convertAccount: "Account Umwandeln",
+        convertAccountP1: "Dieser Account kann in einen Passkey-Only Account umgewandelt\nwerden. Diese Umwandling löscht das Passwort und erlaubt den alleinigen Login mit den registrieren\nPasskeys. Nur Passkeys mit zusätzlicher Benutzerverifizierung werden akzeptiert. Diese sind auf der\n'MFA' Seite durch das zusätzliche Symbol hinter dem Passkey Namen gekennzeichnet.",
+        country: "Land",
+        deviceId: "ID",
+        deviceName: "Name",
+        devices: "Geräte",
+        devicesDesc: "Mit diesem Account verknüpfte Geräte",
+        emailUpdateConfirm: "Die E-Mail Adresse wurde noch nicht aktualisiert. Eine Nachricht\nmit einem Bestätigungslink wurde an die neue Adresse geschickt. Das Update muss über den\nenthaltenen Link bestätigt werden. Nach der Bestätigung wird die neue Adresse gesetzt.",
+        emailVerified: "E-Mail verifiziert",
+        familyName: "Nachname",
+        federatedConvertPassword1: "Dies ist ein verknüpfter Account. Das bedeutet, dass\nder Login via externem Provider zur Authenzifizierung geschieht. Der derzeitige Provider ist:",
+        federatedConvertPassword2: "Es kann ein Passwort Reset via E-Mail angefordert\nwerden. Das würde nach Abschluss diesem Account ein lokales Passwort hinzufügen. Danach wäre der\nLogin entweder per externem Provider oder lokalem Password möglich. Passwort Reset anfordern?",
+        generateRandom: "Zufällig generiert",
+        givenName: "Vorname",
+        groups: "Gruppen",
+        key: "Schlüssel",
+        keyUnique: "Schlüssel muss einzigartig sein",
+        lastLogin: "Letzter Login",
+        mfaActivated: "MFA aktiviert",
+        navInfo: "Info",
+        navEdit: "Editieren",
+        navMfa: "MFA",
+        navLogout: "Logout",
+        optionalValues: "Optionale Angaben",
+        passwordConfirm: "Passwort bestätigen",
+        passwordCurr: "Derzeitiges Passwort",
+        passwordCurrReq: "Derzeitiges Passwort ist notwendig",
+        passwordNew: "Neues Passwort",
+        passwordNewReq: "Neues Passwort ist notwendig",
+        passwordNoMatch: "Passwörter stimmen nicht überein",
+        passwordExpiry: "Passwort Ablauf",
+        passwordPolicyFollow: "Befolgen Sie die Passwort Regeln",
+        passwordReset: "Passwort Reset",
+        phone: "Telefon",
+        providerLink: "Account Verbinden",
+        providerLinkDesc: "Dieser Account kann mit einem der folgenden Login Provider\nverbunden werden. Nach der Aktivierung des Prozesses wird eine Weiterleitung auf die Login Seite\ndes gewählten Providers ausgelöst. Nach erfolgreichem Login und bei Übereinstimmung der E-Mail\nAdressen wird dieser Account verknüpft.",
+        providerUnlink: "Verbindung Trennen",
+        providerUnlinkDesc: "Nur wenn mindestens ein Passwort oder ein Passkey für diesen\nAccount gesetzt ist, kann die Verbindung zum Provider gelöst werden.",
+        regDate: "Datum der Registrierung",
+        regIp: "Registrierung von IP",
+        roles: "Rollen",
+        street: "Straße",
+        user: "Benutzer",
+        userCreated: "Benutzer erstellt",
+        userEnabled: "Benutzer Aktiviert",
+        userExpiry: "Benutzer Ablauf",
+        userVerifiedTooltip: "Abgesichert durch Fingerabdruck oder PIN",
+        validEmail: "Gültige E-Mail Adresse",
+        validGivenName: "Vorname, 1 - 32 Buchstaben, keine Sonderzeichen",
+        validFamilyName: "Nachname, 1 - 32  Buchstaben, keine Sonderzeichen",
+        webIdDesc: "Hier können Sie die Felder festlegen, die über Ihre WebID veröffentlicht\nwerden. Dies ist ein Feature, was von manchen Netzwerken für dezentrale Logins genutzt wird.\nSollten Sie nicht wissen, was die WebID ist, brauchen Sie sie höchstwahrscheinlich nicht.",
+        webIdDescData: "Sie können eigene Daten zu Ihrer WebID in gültigem FOAF Vokabular\nhinzufügen:",
+        webIdExpertMode: "Expertenmodus aktivieren",
+        zip: "PLZ"
+    },
+    authorize: {
+        clientForceMfa: "Dieser Login setzt MFA voraus für eine erhöhte Sicherheit.\nUm Zugang zu bekommen, müssen Sie sie in Ihren Account einloggen und mindestens einen Passkey\nhinzufügen.",
+        email: "E-Mail",
+        emailBadFormat: "Inkorrektes E-Mail Format",
+        emailRequired: "E-Mail ist notwendig",
+        emailSentMsg: "Sollte Ihre Adresse registriert sein, wurde eine Nachricht versandt",
+        http429: "Zu viele ungültige Versuche. Gesperrt bis:",
+        invalidCredentials: "Ungültige Zugangsdaten",
+        invalidKeyUsed: "Ungültiger Sicherheitsschlüssel",
+        login: "Login",
+        mfaAck: "Bestätigt",
+        password: "Password",
+        passwordForgotten: "Password vergessen?",
+        passwordRequest: "Anfordern",
+        passwordRequired: "Password ist notwendig",
+        provideMfa: "Bitte stellen Sie Ihr MFA Gerät zur Verfügung",
+        requestExpires: "Anfrage läuft ab",
+        signUp: "Benutzer Registrierung"
+    },
+    device: {
+        accept: "Akzeptieren",
+        autoRedirectAccount: "Automatische Weiterleitung zum Account folgt",
+        closeWindow: "Dieses Fenster kann nun geschlossen werden.",
+        decline: "Ablehnen",
+        desc: "Bitte den {{count}}-stelligen vom Geräte angezeigten Benutzer Code eingeben.",
+        descScopes: "Das Gerät fragt Zugang an zu:",
+        isAccepted: "Die Anfrage wurde akzeptiert",
+        isDeclined: "Die Anfrage wurde abgewiesen",
+        submit: "Absenden",
+        title: "Gerät Authorisierung",
+        userCode: "Benutzer Code",
+        wrongOrExpired: "Ungültiger oder abgelaufener Code"
+    },
+    emailChange: {
+        title: "E-Mail Wechsel bestätigt",
+        textChanged: "Ihre E-Mail Adresse wurde erfolgreich geändert von",
+        textLogin: "Sie können sich jetzt mit der neuen Adresse einloggen.",
+        to: "zu",
+    },
+    error: {
+        error: "404 Not Found",
+        errorText: "Die angeforderte Seite konnte nicht gefunden werden.",
+        details: "Details Anzeigen",
+        detailsText: undefined,
+    },
+    index: {
+        register: "Registrieren",
+        accountLogin: "Account",
+        adminLogin: "Admin",
+    },
+    logout: {
+        logout: "Logout",
+        confirmMsg: "Sind Sie sicher, dass Sie sich ausloggen und die Session beenden möchten?",
+        cancel: "Abbrechen"
+    },
+    mfa: {
+        p1: "Wenn Sie mehrere Systeme parallel nutzen möchten, wie z.B. Windows und Android, sollten Sie die Registrierung mit Android durchführen.",
+        p2: "Android ist diejenige Plattform, die derzeit die wenigsten Features der passwortlosen Technologie unterstützt. Schlüssel, die dort registriert werden, funktionieren auf anderen Geräten gleichermaßen. Dies gilt jedoch nicht andersherum.",
+        delete: "Löschen",
+        errorReg: "Fehler beim Starten der Registrierung",
+        invalidKeyUsed: "Ungültiger Sicherheitsschlüssel benutzt",
+        lastUsed: "Zuletzt genutzt",
+        noKey: "Es wurde in diesem Speicher noch kein Sicherheitsschlüssel registriert",
+        register: "Registrieren",
+        registerNew: "Neuen Key Registrieren",
+        registerd: "Registriert",
+        registerdKeys: "Registrierte Keys",
+        passkeyName: "Passkey Name",
+        passkeyNameErr: "2 - 32 Buchstaben, keine Sonderzeichen",
+        test: "Test",
+        testError: "Fehler beim Starten des Tests",
+        testSuccess: "Test erfolgreich"
+    },
+    passwordPolicy: {
+        passwordPolicy: "Passwort Regeln",
+        lengthMin: "Länge min",
+        lengthMax: "Länge max",
+        lowercaseMin: "Kleinbuchstaben min",
+        uppercaseMin: "Großbuchstaben min",
+        digitsMin: "Ziffern min",
+        specialMin: "Spezielle Buchstaben min",
+        notRecent: "Keins der letzten Passwörter"
+    },
+    passwordReset: {
+        accountLogin: "Account Login",
+        badFormat: "Ungültiges Format",
+        fidoLink: "https://fidoalliance.org/fido2",
+        generate: "Generieren",
+        newAccDesc1: "Sie haben die Option zwischen zwei Account Typen zu wählen: Passwortlos oder\ntraditionalles Passwort.",
+        newAccDesc2: "Der passwortlose Account Typ ist immer zu bevorzugen. Er bietet einen\nsehr viel höheren Sicherheitsstandard als traditionelle Passwörter und gleichzeitig einen einfacheren\nund schnelleren Login.\nDazu wird mindestens ein Passkey (Yubikey, Apple Touch ID, Windows Hello, ...) benötigt, welcher dem\nFIDO2 Standard gerecht wird. Für weitere Informationen können Sie diesem Link folgen: ",
+        newAccount: "Neuer Account",
+        passwordReset: "Passwort Zurücksetzen",
+        password: "Passwort",
+        passwordless: "FIDO Passkey",
+        passwordConfirm: "Passwort bestätigen",
+        passwordNoMatch: "Passwörter stimmen nicht überein",
+        required: "Notwendig",
+        save: "Speichern",
+        success1: "Das Passwort wurde erfolgreich zurückgesetzt.",
+        success2: "Sie werden in Kürze weitergeleitet.",
+        success3: "Sollte Sie nicht weitergeleitet werden, klicken Sie bitte hier:",
+        successPasskey1: "Der neue Passkey wurde erfolgreich registriert.",
+        successPasskey2: "Bitte loggen Sie sich direkt in Ihren Account ein und registrieren\nSie mindestens einen weiteren Backup Passkey. Ein passwortloser Account kann nicht den Passwort\nReset via E-Mail nutzen für den Fall, dass der derzeitige Passkey abhanden kommt."
+    },
+    register: {
+        domainAllowed: "Erlaubte Domain:",
+        domainErr: "E-Mail Domain ist nicht erlaubt",
+        domainRestricted: "E-Mail Domains sind beschränkt",
+        email: "E-Mail",
+        emailBadFormat: "Ungültiges E-Mail Format",
+        emailCheck: "Bitte prüfen Sie Ihren E-Mail Posteingang",
+        regexName: "Name mit 2 - 32 Buchstaben ohne Sonderzeichen",
+        register: "Registrieren",
+        success: "Registrierung erfolgreich",
+        userReg: "Benutzer Registrierung"
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
new file mode 100644
index 000000000..f137f492d
--- /dev/null
+++ b/frontend/src/i18n/en.ts
@@ -0,0 +1,198 @@
+import {type I18n} from "./interface.ts";
+
+export const I18nEn: I18n = {
+    common: {
+        cancel: "Cancel",
+        email: "E-Mail",
+        errTooShort: "Input too short",
+        errTooLong: "Input too long",
+        invalidInput: "Invalid Input",
+        never: "Never",
+        password: "Password",
+        required: "Required",
+        save: "Save",
+    },
+    account: {
+        account: "User Account",
+        accType: "Account Type",
+        accTypePasskeyText1: "This account is currently a passkey only account.\nThis means, that you do not have any password, because you don't need one.",
+        accTypePasskeyText2: "You can convert your account and add a password. But keep\nin mind, that this implies, that you need to verify each new device with the password additionally.\nYou then cannot just log in on any device, where you have not entered the password beforehand at\nleast once.",
+        accTypePasskeyText3: "Do you want to convert your account and add a password?",
+        accessExp: "Access Expires",
+        accessRenew: "Access Renew Until",
+        accessRenewDelete: "Delete the possibility to renew",
+        birthdate: "Birthdate",
+        city: "City",
+        changePassword: "Change Password",
+        convertAccount: "Convert Account",
+        convertAccountP1: "You can convert your account to a Passkey-Only account.\nThis conversion deletes your password and you can and must only ever login with your registered\npasskeys. Keep in mind, that only passkeys with the additional User Verification will be accepted.\nIf you passkeys support this, you will find a small symbol behind the name of the key on the 'MFA'\npage.",
+        country: "Country",
+        deviceId: "ID",
+        deviceName: "Name",
+        devices: "Devices",
+        devicesDesc: "Devices linked to this account",
+        emailUpdateConfirm: "The E-Mail address has not been updated yet. A message has been\nsent out to your new address. You need to click the confirmation link inside it. Once it has been\nconfirmed, your new address will be updated.",
+        emailVerified: "E-Mail verified",
+        familyName: "Family Name",
+        federatedConvertPassword1: "You have a federated account. This means you log in\nby using an external authentication provider. Your current provider is:",
+        federatedConvertPassword2: "You can request a password reset via email. This will\nadd a local password to your account upon completion. You would then be able to log in via your\nexternal provider or by local password. Do you want to request a reset?",
+        generateRandom: "Generate Randomly",
+        givenName: "Given Name",
+        groups: "Groups",
+        key: "Key",
+        keyUnique: "Key must be unique",
+        lastLogin: "Last Login",
+        mfaActivated: "MFA activated",
+        navInfo: "Info",
+        navEdit: "Edit",
+        navMfa: "MFA",
+        navLogout: "Logout",
+        optionalValues: "Optional Values",
+        passwordConfirm: "Confirm Password",
+        passwordCurr: "Current Password",
+        passwordCurrReq: "Current password is required",
+        passwordNew: "New Password",
+        passwordNewReq: "New password is required",
+        passwordNoMatch: "Password verification is required",
+        passwordExpiry: "Password expiry",
+        passwordPolicyFollow: "You must follow the password policy",
+        passwordReset: "Password Reset",
+        phone: "Phone",
+        providerLink: "Federate Account",
+        providerLinkDesc: "You can link this account to one of the following login providers.\nAfter activating this function, you will be redirected to the login page of the chosen one.\nAfter a successful login and if the email matches, your account will be linked.",
+        providerUnlink: "Unlink Federation",
+        providerUnlinkDesc: "Only if you have set up at least a password or a passkey for this\naccount, you can unlink it from the upstream provider.",
+        regDate: "Registration Date",
+        regIp: "Registration from IP",
+        roles: "Roles",
+        street: "Street",
+        user: "User",
+        userCreated: "User Created",
+        userEnabled: "User Enabled",
+        userExpiry: "User Expires",
+        userVerifiedTooltip: "Secured with fingerprint or PIN",
+        validEmail: "Invalid E-Mail format",
+        validGivenName: "Your given name should have 1 - 32 non-special characters",
+        validFamilyName: "Your family name should have 1 - 32 non-special characters",
+        webIdDesc: "You can configure the fields that should be exposed with your WebID.\nThis is a feature used by some networks for decentralized logins. If you do not know what it is,\nyou most probably do not need it.",
+        webIdDescData: "You can add custom data fields to your WebID in valid FOAF Vocabulary",
+        webIdExpertMode: "Enable Expert Mode",
+        zip: "ZIP"
+    },
+    authorize: {
+        clientForceMfa: "This login forces MFA to achieve higher security.\nTo get access, you need to log in to your account and add at least one additional Passkey",
+        email: "E-Mail",
+        emailBadFormat: "Bad E-Mail format",
+        emailRequired: "E-Mail is required",
+        emailSentMsg: "If your E-Mail exists, a request has been sent",
+        http429: "Too many invalid inputs. Locked until:",
+        invalidCredentials: "Invalid credentials",
+        invalidKeyUsed: "Invalid Key",
+        login: "Login",
+        mfaAck: "Acknowledged",
+        password: "Password",
+        passwordForgotten: "Password forgotten?",
+        passwordRequest: "Request",
+        passwordRequired: "Password is required",
+        provideMfa: "Please login with your MFA device",
+        requestExpires: "Request expires",
+        signUp: "User Registration"
+    },
+    device: {
+        accept: "Accept",
+        autoRedirectAccount: "You will be redirected to your account now",
+        closeWindow: "You can close this window now.",
+        decline: "Decline",
+        desc: "Please enter the {{count}} characters user code from your device.",
+        descScopes: "The device requests access to:",
+        isAccepted: "The request has been accepted.",
+        isDeclined: "The request has been declined.",
+        submit: "Submit",
+        title: "Device Authorization",
+        userCode: "User Code",
+        wrongOrExpired: "Wrong or expired code"
+    },
+    emailChange: {
+        title: "E-Mail Change confirmed",
+        textChanged: "Your E-Mail address has been changed from",
+        textLogin: "You can now log in using your new address.",
+        to: "to",
+    },
+    error: {
+        error: "404 Not Found",
+        errorText: "The requested data could not be found",
+        details: "Show Details",
+        detailsText: undefined,
+    },
+    index: {
+        register: "Register",
+        accountLogin: "Account",
+        adminLogin: "Admin",
+    },
+    logout: {
+        logout: "Logout",
+        confirmMsg: "Do you really want to logout and end your session?",
+        cancel: "Cancel"
+    },
+    mfa: {
+        p1: "If you plan on using your MFA key with multiple systems like Windows and Android, you should do the registration with Android.",
+        p2: "Android is the platform with the least supported features for the passwordless technology. Keys you register with Android work elsewhere too. However, this does not apply the other way around.",
+        delete: "Delete",
+        errorReg: "Error starting the Registration process",
+        invalidKeyUsed: "Invalid Key used",
+        lastUsed: "Last used",
+        noKey: "No Security key registered on this slot",
+        register: "Register",
+        registerNew: "Register New Key",
+        registerd: "Registered",
+        registerdKeys: "Registered Keys",
+        passkeyName: "Passkey Name",
+        passkeyNameErr: "2 - 32 non-special characters",
+        test: "Test",
+        testError: "Error starting the Test",
+        testSuccess: "Test successful"
+    },
+    passwordPolicy: {
+        passwordPolicy: "Password Policy",
+        lengthMin: "Length min",
+        lengthMax: "Length max",
+        lowercaseMin: "Lowercase letters min",
+        uppercaseMin: "Uppercase letters min",
+        digitsMin: "Digits min",
+        specialMin: "Special characters min",
+        notRecent: "Not one of last recent passwords"
+    },
+    passwordReset: {
+        accountLogin: "Account Login",
+        badFormat: "Bad Format",
+        fidoLink: "https://fidoalliance.org/fido2",
+        generate: "Generate",
+        newAccDesc1: "You have the option between two account types: passwordless or traditional password",
+        newAccDesc2: "The passwordless account is always preferred, because it provides\na way with stronger security. You will need at least one passkey (Yubikey, Apple Touch ID, Windows Hello,\n...) to create such an account. Your device must embrace the FIDO2 standard. For more information\nabout this, you may follow this link: ",
+        newAccount: "New Account",
+        passwordReset: "Password Reset",
+        password: "Password",
+        passwordless: "FIDO Passkey",
+        passwordConfirm: "Password Confirm",
+        passwordNoMatch: "Passwords do not match",
+        required: "Required",
+        save: "Save",
+        success1: "The password has been updated successfully.",
+        success2: "You will be redirected shortly.",
+        success3: "If you are not being redirected, please click here:",
+        successPasskey1: "Your new passkey has been registered successfully.",
+        successPasskey2: "Please log into your account and register a second backup key as\nsoon as possible. With a passkey only account, you wil not be able to use a password reset via\nE-Mail in case you lose your current key."
+    },
+    register: {
+        domainAllowed: "Allowed domain:",
+        domainErr: "E-Mail domain not allowed",
+        domainRestricted: "E-Mail domains are restricted",
+        email: "E-Mail",
+        emailBadFormat: "Bad E-Mail format",
+        emailCheck: "Please check your E-Mail inbox",
+        regexName: "Name should have 2 - 32 non-special characters",
+        register: "Register",
+        success: "Registration successful",
+        userReg: "User Registration"
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/i18n/interface.ts b/frontend/src/i18n/interface.ts
new file mode 100644
index 000000000..7ebb3c2e7
--- /dev/null
+++ b/frontend/src/i18n/interface.ts
@@ -0,0 +1,199 @@
+export interface I18n {
+    common: {
+        cancel: string,
+        email: string,
+        errTooShort: string,
+        errTooLong: string,
+        invalidInput: string,
+        never: string,
+        password: string,
+        required: string,
+        save: string,
+    },
+    account: {
+        account: string,
+        accType: string,
+        accTypePasskeyText1: string,
+        accTypePasskeyText2: string,
+        accTypePasskeyText3: string,
+        accessExp: string,
+        accessRenew: string,
+        accessRenewDelete: string,
+        birthdate: string,
+        city: string,
+        changePassword: string,
+        convertAccount: string,
+        convertAccountP1: string,
+        country: string,
+        deviceId: string,
+        deviceName: string,
+        devices: string,
+        devicesDesc: string,
+        emailUpdateConfirm: string,
+        emailVerified: string,
+        familyName: string,
+        federatedConvertPassword1: string,
+        federatedConvertPassword2: string,
+        generateRandom: string,
+        givenName: string,
+        groups: string,
+        key: string,
+        keyUnique: string,
+        lastLogin: string,
+        mfaActivated: string,
+        navInfo: string,
+        navEdit: string,
+        navMfa: string,
+        navLogout: string,
+        optionalValues: string,
+        passwordConfirm: string,
+        passwordCurr: string,
+        passwordCurrReq: string,
+        passwordNew: string,
+        passwordNewReq: string,
+        passwordNoMatch: string,
+        passwordExpiry: string,
+        passwordPolicyFollow: string,
+        passwordReset: string,
+        phone: string,
+        providerLink: string,
+        providerLinkDesc: string,
+        providerUnlink: string,
+        providerUnlinkDesc: string,
+        regDate: string,
+        regIp: string,
+        roles: string,
+        street: string,
+        user: string,
+        userCreated: string,
+        userEnabled: string,
+        userExpiry: string,
+        userVerifiedTooltip: string,
+        validEmail: string,
+        validGivenName: string,
+        validFamilyName: string,
+        webIdDesc: string,
+        webIdDescData: string,
+        webIdExpertMode: string,
+        zip: string,
+    },
+    authorize: {
+        clientForceMfa: string,
+        email: string,
+        emailBadFormat: string,
+        emailRequired: string,
+        emailSentMsg: string,
+        http429: string,
+        invalidCredentials: string,
+        invalidKeyUsed: string,
+        login: string,
+        mfaAck: string,
+        password: string,
+        passwordForgotten: string,
+        passwordRequest: string,
+        passwordRequired: string,
+        provideMfa: string,
+        requestExpires: string,
+        signUp: string,
+    },
+    device: {
+        accept: string,
+        autoRedirectAccount: string,
+        closeWindow: string,
+        decline: string,
+        desc: string,
+        descScopes: string,
+        isAccepted: string,
+        isDeclined: string,
+        submit: string,
+        title: string,
+        userCode: string,
+        wrongOrExpired: string,
+    },
+    emailChange: {
+        title: string,
+        textChanged: string,
+        textLogin: string,
+        to: string,
+    },
+    error: {
+        error: string,
+        details: string,
+        // these 2 will probably need a rework and should be appended dynamically via query params
+        // or inserted into the body directly, as they change with each error
+        errorText: string,
+        detailsText?: string,
+    },
+    index: {
+        register: string,
+        accountLogin: string,
+        adminLogin: string,
+    },
+    logout: {
+        logout: string,
+        confirmMsg: string,
+        cancel: string,
+    },
+    mfa: {
+        p1: string,
+        p2: string,
+
+        delete: string,
+        errorReg: string,
+        invalidKeyUsed: string,
+        lastUsed: string,
+        noKey: string,
+        register: string,
+        registerNew: string,
+        registerd: string,
+        registerdKeys: string,
+        passkeyName: string,
+        passkeyNameErr: string,
+        test: string,
+        testError: string,
+        testSuccess: string,
+    },
+    passwordPolicy: {
+        passwordPolicy: string,
+        lengthMin: string,
+        lengthMax: string,
+        lowercaseMin: string,
+        uppercaseMin: string,
+        digitsMin: string,
+        specialMin: string,
+        notRecent: string,
+    },
+    passwordReset: {
+        accountLogin: string,
+        badFormat: string,
+        fidoLink: string,
+        generate: string,
+        newAccDesc1: string,
+        newAccDesc2: string,
+        newAccount: string,
+        passwordReset: string,
+        password: string,
+        passwordless: string,
+        passwordConfirm: string,
+        passwordNoMatch: string,
+        required: string,
+        save: string,
+        success1: string,
+        success2: string,
+        success3: string,
+        successPasskey1: string,
+        successPasskey2: string,
+    },
+    register: {
+        domainAllowed: string,
+        domainErr: string,
+        domainRestricted: string,
+        email: string,
+        emailBadFormat: string,
+        emailCheck: string,
+        regexName: string,
+        register: string,
+        success: string,
+        userReg: string,
+    },
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/ko.ts b/frontend/src/i18n/ko.ts
new file mode 100644
index 000000000..5705703f2
--- /dev/null
+++ b/frontend/src/i18n/ko.ts
@@ -0,0 +1,198 @@
+import {type I18n} from "./interface.ts";
+
+export const I18nKo: I18n = {
+    common: {
+        cancel: "취소",
+        email: "이메일",
+        errTooShort: "입력이 너무 짧습니다.",
+        errTooLong: "입력이 너무 깁니다.",
+        invalidInput: "유효하지 않은 입력입니다.",
+        never: "무기한",
+        password: "비밀번호",
+        required: "필수 항목입니다.",
+        save: "저장",
+    },
+    account: {
+        account: "사용자 계정",
+        accType: "계정 종류",
+        accTypePasskeyText1: "이 계정은 현재 패스키 전용 계정입니다.\n즉, 비밀번호가 필요하지 않으므로, 비밀번호가 전혀 없다는 뜻입니다.",
+        accTypePasskeyText2: "계정을 전환하고 비밀번호를 추가할 수 있습니다.\n다만, 이렇게 하면 새 기기를 인증할 때마다 추가적으로 비밀번호 인증을 해야 한다는 것을 명심해 주세요.\n한 번도 비밀번호를 입력한 적이 없는 기기에서는 바로 로그인할 수 없습니다.",
+        accTypePasskeyText3: "계정을 전환하고 비밀번호를 추가하겠습니까?",
+        accessExp: "접근 만료",
+        accessRenew: "접근 갱신 기한",
+        accessRenewDelete: "갱신할 가능성을 제거",
+        birthdate: "생년월일",
+        city: "도시",
+        changePassword: "비밀번호 변경",
+        convertAccount: "계정 전환",
+        convertAccountP1: "계정을 패스키 전용 계정으로 전환할 수 있습니다.\n이 전환은 비밀번호를 삭제하며, 등록된 패스키를 사용해서만 로그인할 수 있습니다.\n추가적인 사용자 인증이 가능한 패스키만 허용된다는 점을 명심해 주세요.\n패스키가 지원한다면, 'MFA' 페이지에서 키 이름 뒤에 작은 표시가 있는 것을 찾을 수 있을 겁니다.",
+        country: "국가",
+        deviceId: "아이디",
+        deviceName: "이름",
+        devices: "기기",
+        devicesDesc: "이 계정에 연결된 기기",
+        emailUpdateConfirm: "아직 이메일 주소가 변경되지 않았습니다. 새 주소로 메시지가 전송되었습니다.\n내부에 있는 승인 링크를 클릭해야 합니다. 승인되면 이메일 주소가 새 주소로 변경될 겁니다.",
+        emailVerified: "이메일 인증 여부",
+        familyName: "성",
+        federatedConvertPassword1: "페더레이션 계정을 가지고 있습니다. 즉, 외부 인증 제공자를 사용하여\n로그인한다는 것을 의미합니다. 현재 제공자는 다음과 같습니다:",
+        federatedConvertPassword2: "이메일을 통해 비밀번호 초기화를 요청할 수 있습니다. 완료하면 내부적인\n비밀번호가 계정에 추가될 겁니다. 그러면 외부 제공자 또는 내부적인 비밀번호를 통하여 로그인할 수 있습니다. 초기화를 요청하겠습니까?",
+        generateRandom: "무작위로 생성",
+        givenName: "이름",
+        groups: "그룹",
+        key: "키",
+        keyUnique: "키는 고유해야 합니다.",
+        lastLogin: "마지막 로그인 일",
+        mfaActivated: "MFA 활성화 여부",
+        navInfo: "정보",
+        navEdit: "수정",
+        navMfa: "MFA",
+        navLogout: "로그아웃",
+        optionalValues: "선택 항목",
+        passwordConfirm: "비밀번호 확인",
+        passwordCurr: "현재 비밀번호",
+        passwordCurrReq: "현재 비밀번호가 필요합니다.",
+        passwordNew: "새 비밀번호",
+        passwordNewReq: "새 비밀번호가 필요합니다.",
+        passwordNoMatch: "비밀번호 확인이 필요합니다.",
+        passwordExpiry: "비밀번호 만료일",
+        passwordPolicyFollow: "비밀번호 정책을 준수해야 합니다.",
+        passwordReset: "비밀번호 초기화",
+        phone: "전화번호",
+        providerLink: "페더레이션 계정",
+        providerLinkDesc: "이 계정은 다음 중 하나의 로그인 제공자에 연결할 수 있습니다.\n이 기능을 활성화하면, 선택한 것의 로그인 페이지로 리다이렉트될 겁니다. 성공적으로 로그인하고 이메일이 일치하면, 계정이 연결될 겁니다.",
+        providerUnlink: "페더레이션 해제",
+        providerUnlinkDesc: "이 계정에 최소 하나의 비밀번호 또는 패스키를 설정하면, 상위 제공자로부터 연결을 해제할 수 있습니다.",
+        regDate: "가입일",
+        regIp: "IP에서 가입",
+        roles: "역할",
+        street: "주소",
+        user: "사용자",
+        userCreated: "사용자 생성일",
+        userEnabled: "사용자 활성화 여부",
+        userExpiry: "사용자 만료",
+        userVerifiedTooltip: "지문 또는 PIN을 통해 보호",
+        validEmail: "유효하지 않은 이메일 형식입니다.",
+        validGivenName: "이름은 특수문자를 제외한 1자에서 32자이어야 합니다.",
+        validFamilyName: "성은 특수문자를 제외한 1자에서 32자이어야 합니다.",
+        webIdDesc: "WebID와 함께 노출할 항목을 설정할 수 있습니다.\n이 기능은 몇몇 탈중앙화된 로그인 네트워크에서 사용됩니다. 이것이 무엇인지 모르면, 대체로 필요하지 않을 것입니다.",
+        webIdDescData: "WebID에서 유효한 FOAF 어휘를 사용자 지정 데이터 항목에 추가할 수 있습니다",
+        webIdExpertMode: "전문가 모드 활성화",
+        zip: "우편번호"
+    },
+    authorize: {
+        clientForceMfa: "이 로그인은 더 높은 수준의 보안을 위해서 MFA를 강제합니다.\n접근하려면, 계정에 로그인하고 최소 하나 이상의 패스키를 추가해야 합니다.",
+        email: "이메일",
+        emailBadFormat: "잘못된 이메일 형식입니다.",
+        emailRequired: "이메일이 필요합니다.",
+        emailSentMsg: "이메일이 존재하면, 요청이 전송되었을 것입니다.",
+        http429: "유효하지 않은 입력이 너무 많습니다. 다음 시간 전까지 비활성화합니다:",
+        invalidCredentials: "유효하지 않은 인증 정보입니다.",
+        invalidKeyUsed: "유효하지 않은 키입니다.",
+        login: "로그인",
+        mfaAck: "확인되었습니다.",
+        password: "비밀번호",
+        passwordForgotten: "비밀번호를 잊으셨나요?",
+        passwordRequest: "요청",
+        passwordRequired: "비밀번호는 필요합니다.",
+        provideMfa: "MFA 기기를 통해 로그인해 주세요.",
+        requestExpires: "요청 만료일",
+        signUp: "사용자 가입"
+    },
+    device: {
+        accept: "수락",
+        autoRedirectAccount: "지금 계정으로 리다이렉트될 예정입니다.",
+        closeWindow: "이제 창을 닫아도 됩니다.",
+        decline: "거절",
+        desc: "기기에서 {{count}}자의 사용자 코드를 입력해 주세요.",
+        descScopes: "다음 기기가 접근을 요청합니다:",
+        isAccepted: "요청이 수락되었습니다.",
+        isDeclined: "요청이 거절되었습니다.",
+        submit: "제출",
+        title: "기기 인증",
+        userCode: "사용자 코드",
+        wrongOrExpired: "잘못되거나 만료된 코드입니다."
+    },
+    emailChange: {
+        title: "이메일 변경이 승인되었습니다.",
+        textChanged: "이메일 주소가 다음으로부터 변경되었습니다",
+        textLogin: "이제 새로운 주소로 로그인할 수 있습니다.",
+        to: "에서",
+    },
+    error: {
+        error: "404 Not Found",
+        errorText: "요청 정보를 찾을 수 없습니다.",
+        details: "자세한 정보 표시",
+        detailsText: undefined,
+    },
+    index: {
+        register: "가입",
+        accountLogin: "계정",
+        adminLogin: "관리",
+    },
+    logout: {
+        logout: "로그아웃",
+        confirmMsg: "정말로 로그아웃하고 세션을 종료하겠습니까?",
+        cancel: "취소",
+    },
+    mfa: {
+        p1: "윈도우와 안드로이드와 같은 여러 시스템에서 MFA 키를 사용하려면, 안드로이드에서 등록해야 합니다.",
+        p2: "안드로이드는 비밀번호 없이 인증하는 기술을 가장 적게 지원하는 플랫폼 중 하나입니다. 안드로이드에서 등록한 키는 다른 곳에서도 작동합니다. 그러나, 그 반대로는 적용되지 않습니다.",
+        delete: "삭제",
+        errorReg: "가입 절차 시작 중 오류가 발생했습니다.",
+        invalidKeyUsed: "유효하지 않은 키가 사용되었습니다.",
+        lastUsed: "마지막 사용",
+        noKey: "이 슬롯에 등록된 보안 키가 없습니다.",
+        register: "등록",
+        registerNew: "새 키 등록",
+        registerd: "등록되었습니다.",
+        registerdKeys: "등록된 키",
+        passkeyName: "패스키 이름",
+        passkeyNameErr: "특수문자를 제외한 2자에서 32자이어야 합니다.",
+        test: "테스트",
+        testError: "테스트 시작 중에 오류가 발생했습니다.",
+        testSuccess: "테스트 성공"
+    },
+    passwordPolicy: {
+        passwordPolicy: "비밀번호 정책",
+        lengthMin: "최소 자수",
+        lengthMax: "최대 자수",
+        lowercaseMin: "최소 소문자 자수",
+        uppercaseMin: "최소 대문자 자수",
+        digitsMin: "최소 숫자 자수",
+        specialMin: "최소 특수문자 자수",
+        notRecent: "최근 사용한 비밀번호 중 하나가 아닌 것"
+    },
+    passwordReset: {
+        accountLogin: "계정 로그인",
+        badFormat: "잘못된 형식",
+        fidoLink: "https://fidoalliance.org/fido2/?lang=ko",
+        generate: "생성",
+        newAccDesc1: "계정 종류는 비밀번호가 없는 계정 또는 기존의 비밀번호가 있는 계정 중 하나를 선택할 수 있습니다.",
+        newAccDesc2: "비밀번호가 없는 계정은 더 강력한 보안 방법을 제공하기 때문에 항상 선호됩니다.\n이러한 계정을 생성하려면 최소 하나의 패스키(Yubikey, Apple Touch ID, Windows Hello, ...)가 필요합니다. 기기가 FIDO2 표준을 지원해야 합니다.\n더 자세한 사항은 다음 링크를 참고해 주세요: ",
+        newAccount: "새 계정",
+        passwordReset: "비밀번호 초기화",
+        password: "비밀번호",
+        passwordless: "FIDO 패스키",
+        passwordConfirm: "비밀번호 확인",
+        passwordNoMatch: "비밀번호가 일치하지 않습니다.",
+        required: "필수",
+        save: "저장",
+        success1: "비밀번호가 성공적으로 변경되었습니다.",
+        success2: "곧 리다이렉트됩니다.",
+        success3: "만약 리다이렉트가 되지 않으면, 여기를 클릭해 주세요:",
+        successPasskey1: "새로운 패스키가 성공적으로 등록되었습니다.",
+        successPasskey2: "계정에 로그인하여 가능한 한 빨리 두 번째 백업 키를 등록해 주세요.\n패스키 전용 계정은 현재 패스키를 잃어버리면, 이메일을 통하여 비밀번호 초기화할 수 없습니다."
+    },
+    register: {
+        domainAllowed: "허용된 도메인:",
+        domainErr: "허용되지 않은 이메일의 도메인입니다.",
+        domainRestricted: "이메일의 도메인이 제한되어 있습니다.",
+        email: "이메일",
+        emailBadFormat: "잘못된 이메일 형식입니다.",
+        emailCheck: "이메일 보관함을 확인해 주세요.",
+        regexName: "이름은 특수문자를 제외한 2자에서 32자이어야 합니다.",
+        register: "가입",
+        success: "성공적으로 가입되었습니다.",
+        userReg: "사용자 가입"
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/i18n/zh.ts b/frontend/src/i18n/zh.ts
new file mode 100644
index 000000000..e68b355c7
--- /dev/null
+++ b/frontend/src/i18n/zh.ts
@@ -0,0 +1,198 @@
+import {type I18n} from "./interface.ts";
+
+export const I18nZh: I18n = {
+    common: {
+        cancel: "取消",
+        email: "电子邮箱",
+        errTooShort: "输入过短",
+        errTooLong: "输入过长",
+        invalidInput: "无效输入",
+        never: "从不",
+        password: "密码",
+        required: "必填",
+        save: "保存",
+    },
+    account: {
+        account: "用户账户",
+        accType: "账户类型",
+        accTypePasskeyText1: "此账户目前为仅密钥登录账户。\n因此，此账户没有密码，也无需设置密码。",
+        accTypePasskeyText2: "您可以转换此账户并添加密码。\n但请注意，调整后在新设备上登录时需额外进行密码验证。\n如果您没有事先输入过至少一次密码，您将无法在任何设备上登录。",
+        accTypePasskeyText3: "您想要转换您的账户并添加一个密码吗？",
+        accessExp: "过期",
+        accessRenew: "续期至",
+        accessRenewDelete: "禁止续期",
+        birthdate: "生日",
+        city: "城市",
+        changePassword: "更改密码",
+        convertAccount: "转换账户",
+        convertAccountP1: "您可以将您的账户转换为仅密钥登陆账户。\n此转换将删除您的密码，您将仅能够通过注册的密钥进行登陆。\n请注意，只有支持额外用户验证的密钥可被用于登陆。\n如果您的密钥支持用户验证，您可以在“MFA”页面中，密钥名称的后面看到一个符号。",
+        country: "国家",
+        deviceId: "ID",
+        deviceName: "名称",
+        devices: "设备",
+        devicesDesc: "链接到此账户的设备",
+        emailUpdateConfirm: "电子邮件地址未被更新。我们已向您的新邮箱发送了一封消息。\n您需要点击其中的确认链接，电子邮件地址将在被确认后更新。",
+        emailVerified: "已验证电子邮箱",
+        familyName: "姓",
+        federatedConvertPassword1: "您有一个联合账户。\n这意味着您是通过外部鉴权提供者登陆的。您当前的提供者是：",
+        federatedConvertPassword2: "您可以通过电子邮件请求密码重置。这将向您的本地账户添加密码，\n之后您可以通过本地密码或您的外部提供者进行登陆。您想要请求密码重置吗？",
+        generateRandom: "随机生成",
+        givenName: "名",
+        groups: "组",
+        key: "密钥",
+        keyUnique: "密钥必须是唯一的",
+        lastLogin: "最后登录",
+        mfaActivated: "多因子认证",
+        navInfo: "信息",
+        navEdit: "编辑",
+        navMfa: "多因子认证",
+        navLogout: "退出登录",
+        optionalValues: "可选项",
+        passwordConfirm: "确认密码",
+        passwordCurr: "当前密码",
+        passwordCurrReq: "当前密码必填。",
+        passwordNew: "新密码",
+        passwordNewReq: "新密码必填",
+        passwordNoMatch: "密码验证必填。",
+        passwordExpiry: "密码过期",
+        passwordPolicyFollow: "密码不符合要求。",
+        passwordReset: "重置密码",
+        phone: "手机",
+        providerLink: "联合账户",
+        providerLinkDesc: "您可以将此账户连接到下列登陆提供者之一。\n激活此功能后，您将被重定向至所选提供者的登陆页面。在成功登陆后，如果电子邮件匹配，您的账户将被连接。",
+        providerUnlink: "取消联合",
+        providerUnlinkDesc: "仅当您已设置至少一个密码或登陆密钥后，您才能和登陆提供者取消连接。",
+        regDate: "注册日期",
+        regIp: "注册IP地址",
+        roles: "角色",
+        street: "街道",
+        user: "用户",
+        userCreated: "创建于",
+        userEnabled: "启用",
+        userExpiry: "过期",
+        userVerifiedTooltip: "指纹或PIN保护",
+        validEmail: "无效电子邮箱格式",
+        validGivenName: "您的名字需要有2-32个非特殊字符",
+        validFamilyName: "您的姓氏需要有2-32个非特殊字符",
+        webIdDesc: "您可以选择哪些字段能够通过WebID发布。\nWebID被一些网络用于去中心化登陆。如果您不知道这是什么，您通常不需要选择。",
+        webIdDescData: "您可以以FOAF词汇格式向您的 WebID 添加自定义数据字段",
+        webIdExpertMode: "启用专家模式",
+        zip: "邮政编码"
+    },
+    authorize: {
+        clientForceMfa: "本次登陆强制使用多因子认证以增强安全性。\n要完成登陆，请登入您的账户并添加一个登陆密钥。",
+        email: "电子邮件地址",
+        emailBadFormat: "错误的电子邮件地址格式",
+        emailRequired: "电子邮件地址必填。",
+        emailSentMsg: "如果您的电子邮件存在，我们已发送请求邮件。",
+        http429: "过多无效输入，已锁定至：",
+        invalidCredentials: "无效证明",
+        invalidKeyUsed: "无效密钥",
+        login: "登陆",
+        mfaAck: "已确认",
+        password: "密码",
+        passwordForgotten: "忘记密码",
+        passwordRequest: "请求",
+        passwordRequired: "密码必填。",
+        provideMfa: "请使用MFA设备登陆",
+        requestExpires: "请求过期",
+        signUp: "用户注册"
+    },
+    device: {
+        accept: "接受",
+        autoRedirectAccount: "您将被自动重定向至您的账户。",
+        closeWindow: "您现在可以关闭此窗口了。",
+        decline: "拒绝",
+        desc: "请输入来自您的设备的{{count}}位用户代码。",
+        descScopes: "此设备请求访问：",
+        isAccepted: "请求已被接受。",
+        isDeclined: "请求已被拒绝。",
+        submit: "提交",
+        title: "设备授权",
+        userCode: "用户代码",
+        wrongOrExpired: "代码错误或已过期"
+    },
+    emailChange: {
+        title: "电子邮件地址已更新",
+        textChanged: "您的电子邮件地址已从",
+        textLogin: "您现在可以使用您的新地址进行登陆。",
+        to: "更新为",
+    },
+    error: {
+        error: "404 Not Found",
+        errorText: "找不到请求的资源",
+        details: "显示详情",
+        detailsText: undefined,
+    },
+    index: {
+        register: "注册",
+        accountLogin: "登陆",
+        adminLogin: "管理",
+    },
+    logout: {
+        logout: "退出登录",
+        confirmMsg: "您确定要退出登录并结束会话吗？",
+        cancel: "取消",
+    },
+    mfa: {
+        p1: "如果您计划在多个系统上使用您的MFA密钥，例如Windows和Android，您应该在Android上进行注册。",
+        p2: "Android是支持无密码登陆特性最少的平台。能够在Android上进行注册的密钥也应能在其他平台上使用。",
+        delete: "删除",
+        errorReg: "开始注册过程时出现错误。",
+        invalidKeyUsed: "使用的密钥无效",
+        lastUsed: "最后使用",
+        noKey: "此槽位没有已注册的安全密钥",
+        register: "注册",
+        registerNew: "注册新的密钥",
+        registerd: "注册时间",
+        registerdKeys: "已注册的密钥",
+        passkeyName: "密钥名称",
+        passkeyNameErr: "需要名称需要有2-32个非特殊字符",
+        test: "测试",
+        testError: "开始测试时出现错误",
+        testSuccess: "测试成功！"
+    },
+    passwordPolicy: {
+        passwordPolicy: "密码要求",
+        lengthMin: "最小长度",
+        lengthMax: "最长长度",
+        lowercaseMin: "最少小写字母",
+        uppercaseMin: "最少大写字母",
+        digitsMin: "最少数字",
+        specialMin: "最少特殊字符",
+        notRecent: "不是最近使用过的密码之一"
+    },
+    passwordReset: {
+        accountLogin: "账户登录",
+        badFormat: "格式错误",
+        fidoLink: "https://fidoalliance.org/fido2/?lang=zh-hans",
+        generate: "生成",
+        newAccDesc1: "您可以在无密码账户和传统的密码账户之中选择其一。",
+        newAccDesc2: "无密码账户应被优先考虑，因为其提供更强的安全性。\n您需要至少一个支持FIDO2标准的通行密钥（Yubikey、Apple Touch ID或Windows Hello等）以完成账户创建。\n获取更多信息：",
+        newAccount: "新账户",
+        passwordReset: "密码重置",
+        password: "密码",
+        passwordless: "FIDO通行密钥",
+        passwordConfirm: "密码确认",
+        passwordNoMatch: "密码不匹配",
+        required: "必填",
+        save: "保存",
+        success1: "密码已成功更新。",
+        success2: "您将被重定向。",
+        success3: "如果您未被重定向，请点击此链接：",
+        successPasskey1: "您的通行密钥已成功注册。",
+        successPasskey2: "请登入您的账户并尽快注册一个备份密钥。\n对于仅密钥登陆的账户，在丢失您当前的密钥时，您无法通过电子邮件进行密码重置。"
+    },
+    register: {
+        domainAllowed: "允许的域名：",
+        domainErr: "此电子邮件域名不被允许",
+        domainRestricted: "电子邮件域名被限制",
+        email: "电子邮件",
+        emailBadFormat: "错误的电子邮件地址格式",
+        emailCheck: "请检查您的电子邮件收件箱",
+        regexName: "名字应有2-32个非特殊字符。",
+        register: "注册",
+        success: "注册成功",
+        userReg: "用户注册"
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/lib/WithI18n.svelte b/frontend/src/lib/WithI18n.svelte
deleted file mode 100644
index ac2760bd9..000000000
--- a/frontend/src/lib/WithI18n.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-    import {onMount} from "svelte";
-    import {base} from "$app/paths";
-
-
-    /**
-     * @typedef {Object} Props
-     * @property {any} content
-     * @property {any} t
-     * @property {boolean} [isReady]
-     * @property {import('svelte').Snippet} [loading]
-     * @property {import('svelte').Snippet} [children]
-     */
-
-    /** @type {Props} */
-    let {
-        content,
-        t = $bindable(),
-        isReady = $bindable(false),
-        loading,
-        children
-    } = $props();
-
-    // static translation
-    onMount(async () => {
-        if ('production' === import.meta.env.MODE) {
-            t = JSON.parse(document.getElementsByTagName('template').namedItem('i18n').innerHTML);
-            // t = JSON.parse(document.querySelector("#i18n").innerHTML);
-        } else {
-            const res = await fetchI18nStatic(content);
-            t = await res.json();
-        }
-        isReady = true;
-    });
-
-    async function fetchI18nStatic(content) {
-        let data = {content};
-        return await fetch(`${base}/i18n`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json',
-            },
-            body: JSON.stringify(data),
-        });
-    }
-
-</script>
-
-{#if !isReady}
-    {@render loading?.()}
-{:else}
-    {@render children?.()}
-{/if}
diff --git a/frontend/src/lib/expandableInputs/ExpandableInputs.svelte b/frontend/src/lib/expandableInputs/ExpandableInputs.svelte
index 410e35301..f8c8ebd38 100644
--- a/frontend/src/lib/expandableInputs/ExpandableInputs.svelte
+++ b/frontend/src/lib/expandableInputs/ExpandableInputs.svelte
@@ -1,7 +1,7 @@
 <script>
     import DynamicInputRow from "./DynamicInput.svelte";
     import {createEventDispatcher, onMount, tick} from "svelte";
-    import {getKey} from "../utils/helpers.js";
+    import {getKey} from "../utils/helpers";
 
     /**
      * @typedef {Object} Props
diff --git a/frontend/src/lib/inputs/Input.svelte b/frontend/src/lib/inputs/Input.svelte
index 31d8aab16..fe1036de9 100644
--- a/frontend/src/lib/inputs/Input.svelte
+++ b/frontend/src/lib/inputs/Input.svelte
@@ -1,6 +1,6 @@
 <script>
     import {createEventDispatcher, tick} from "svelte";
-    import {getKey} from "../utils/helpers.js";
+    import {getKey} from "../utils/helpers";
     import {slide} from "svelte/transition";
 
 
diff --git a/frontend/src/lib/inputs/PasswordInput.svelte b/frontend/src/lib/inputs/PasswordInput.svelte
index 21464bce9..224465ddc 100644
--- a/frontend/src/lib/inputs/PasswordInput.svelte
+++ b/frontend/src/lib/inputs/PasswordInput.svelte
@@ -3,7 +3,7 @@
     import IconClipboard from "$lib/icons/IconClipboard.svelte";
     import IconEyeSlash from "$lib/icons/IconEyeSlash.svelte";
     import IconEye from "$lib/icons/IconEye.svelte";
-    import {getKey} from "../utils/helpers.js";
+    import {getKey} from "../utils/helpers";
     import {slide} from "svelte/transition";
 
 
diff --git a/frontend/src/lib/inputs/Textarea.svelte b/frontend/src/lib/inputs/Textarea.svelte
index 2e25b9917..96996e0d0 100644
--- a/frontend/src/lib/inputs/Textarea.svelte
+++ b/frontend/src/lib/inputs/Textarea.svelte
@@ -1,6 +1,6 @@
 <script>
     import {createEventDispatcher, tick} from "svelte";
-    import {getKey} from "../utils/helpers.js";
+    import {getKey} from "../utils/helpers";
     import {slide} from "svelte/transition";
 
     /**
diff --git a/frontend/src/lib/nav/NavEntryGroup.svelte b/frontend/src/lib/nav/NavEntryGroup.svelte
index 84a7ca983..895cfa9b4 100644
--- a/frontend/src/lib/nav/NavEntryGroup.svelte
+++ b/frontend/src/lib/nav/NavEntryGroup.svelte
@@ -5,7 +5,7 @@
     import {navContainerExpanded, navIsExpanded, navWidthCollapsed} from "./navStore.js";
     import IconChevronRight from "$lib/icons/IconChevronRight.svelte";
     import {spring} from "svelte/motion";
-    import {sleepAwait} from "../utils/helpers.js";
+    import {sleepAwait} from "../utils/helpers";
 
     /**
      * @typedef {Object} Props
diff --git a/frontend/src/lib/search/SearchBar.svelte b/frontend/src/lib/search/SearchBar.svelte
index bd82428fe..d0dca1d80 100644
--- a/frontend/src/lib/search/SearchBar.svelte
+++ b/frontend/src/lib/search/SearchBar.svelte
@@ -4,7 +4,7 @@
     import IconMagnify from "$lib/icons/IconMagnify.svelte";
     import {onMount} from "svelte";
     import Tooltip from "../Tooltip.svelte";
-    import {getKey} from "../utils/helpers.js";
+    import {getKey} from "../utils/helpers";
     import IconBackspace from "$lib/icons/IconBackspace.svelte";
     import {getSearch} from "../../utils/dataFetchingAdmin.js";
     import {SERVER_SIDE_SEARCH_THRES} from "../../utils/constants.js";
diff --git a/frontend/src/lib/LangSelector.svelte b/frontend/src/lib_svelte5/LangSelector.svelte
similarity index 53%
rename from frontend/src/lib/LangSelector.svelte
rename to frontend/src/lib_svelte5/LangSelector.svelte
index e8b498b31..177bdb621 100644
--- a/frontend/src/lib/LangSelector.svelte
+++ b/frontend/src/lib_svelte5/LangSelector.svelte
@@ -1,37 +1,43 @@
-<script>
-    import {run} from 'svelte/legacy';
-
-    import {onMount} from "svelte";
+<script lang="ts">
+    import {untrack} from "svelte";
     import OptionSelect from "$lib/OptionSelect.svelte";
     import {LANGUAGES} from "../utils/constants.js";
     import {postUpdateUserLanguage} from "../utils/dataFetching.js";
-
-
-    /**
-     * @typedef {Object} Props
-     * @property {boolean} [absolute]
-     * @property {boolean} [absoluteRight]
-     * @property {boolean} [updateBackend] - if set to true, a request to the backend will be done for the currently logged in user
-     */
-
-    /** @type {Props} */
-    let {absolute = false, absoluteRight = false, updateBackend = false} = $props();
-
-    const attrs = ';Path=/;SameSite=Lax;Max-Age=157680000';
-    let lang = $state();
-    let langSelected = $state();
-
-    onMount(async () => {
-        readLang();
+    import {useLang} from "$state/language.svelte.js";
+    import {getCookie} from "$lib/utils/helpers";
+
+    let {
+        absolute = false,
+        absoluteRight = false,
+        updateBackend = false,
+    }: {
+        absolute: string,
+        absoluteRight: string,
+        updateBackend: string,
+    } = $props();
+
+    const attrs = ';Path=/;SameSite=Lax;Max-Age=315360000';
+    let lang = useLang();
+    let langSelected = $state(untrack(() => lang));
+
+    // Makes lang overrides work during local dev
+    // Will do nothing in prod because of proper SSR.
+    $effect(() => {
+        let cookie = getCookie('locale');
+        let l = untrack(() => lang);
+        if (cookie !== l && LANGUAGES.includes(cookie)) {
+            lang = cookie;
+            langSelected = cookie;
+        }
     });
 
-    function readLang() {
-        let l = document.documentElement.lang.toUpperCase().slice(0, 2);
-        lang = l;
-        langSelected = l;
-    }
+    $effect(() => {
+        if (langSelected && langSelected !== lang) {
+            switchLang(langSelected);
+        }
+    });
 
-    async function switchLang(l) {
+    async function switchLang(l: string) {
         document.cookie = 'locale=' + l.toLowerCase() + attrs;
 
         if (updateBackend) {
@@ -41,17 +47,10 @@
                 console.error(body);
                 return;
             }
-
         }
 
         window.location.reload();
     }
-
-    run(() => {
-        if (langSelected && langSelected !== lang) {
-            switchLang(langSelected);
-        }
-    });
 </script>
 
 <div class:absolute class:absoluteLeft={!absoluteRight} class:absoluteRight>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index bf50c6b7c..f0b69cda2 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
     import {onMount, type Snippet} from 'svelte'
+    import {initIsDev} from "$state/is_dev.svelte.ts";
+    import {initLang} from "$state/language.svelte.ts";
+    import {initI18n} from "$state/i18n.svelte.ts";
 
     import "../css/global.css";
-    import {useIsDev} from "../global_state/is_dev.svelte.ts";
+
+    initIsDev();
+    initLang();
+    initI18n();
 
     let {
         children,
@@ -10,7 +16,8 @@
         children: Snippet,
     } = $props();
 
-    let isDev = useIsDev();
+    // We expect true to not break SSR.
+    // If cookies should be disabled, the warning will show up fast enough.
     let cookiesEnabled = $state(true);
 
     onMount(() => {
diff --git a/frontend/src/routes/index/+page.svelte b/frontend/src/routes/+page.svelte
similarity index 56%
rename from frontend/src/routes/index/+page.svelte
rename to frontend/src/routes/+page.svelte
index 5a8036d54..620d4c507 100644
--- a/frontend/src/routes/index/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,16 +1,16 @@
 <script>
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
-    import AppVersion from "../../components/AppVersion.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
+    import AppVersion from "../components/AppVersion.svelte";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
     import {useIsDev} from "$state/is_dev.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     const btnWidth = "9rem";
 
-    let t = $state();
+    let t = useI18n();
     let renderReg = $state(false);
 
     onMount(() => {
@@ -38,24 +38,22 @@
     <title>Rauthy</title>
 </svelte:head>
 
-<WithI18n bind:t content="index">
-    <Main>
-        <ContentCenter>
-            <div class="btn">
-                {#if renderReg}
-                    <Button on:click={redirectToReg} width={btnWidth}>{t.register.toUpperCase()}</Button>
-                {/if}
-                <Button on:click={redirectToAccount} width={btnWidth}>{t.accountLogin.toUpperCase()}</Button>
-                <Button on:click={redirectToAdmin} width={btnWidth}>{t.adminLogin.toUpperCase()}</Button>
-            </div>
-        </ContentCenter>
-
-        <LangSelector absolute/>
-        <div class="version">
-            <AppVersion/>
+<Main>
+    <ContentCenter>
+        <div class="btn">
+            {#if renderReg}
+                <Button on:click={redirectToReg} width={btnWidth}>{t.index.register}</Button>
+            {/if}
+            <Button on:click={redirectToAccount} width={btnWidth}>{t.index.accountLogin}</Button>
+            <Button on:click={redirectToAdmin} width={btnWidth}>{t.index.adminLogin}</Button>
         </div>
-    </Main>
-</WithI18n>
+    </ContentCenter>
+
+    <LangSelector absolute/>
+    <div class="version">
+        <AppVersion/>
+    </div>
+</Main>
 
 <style>
     .btn {
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 339d78078..0c87c1039 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -3,13 +3,13 @@
     import {getSessionInfo, getUser, getUserWebIdData} from "../../utils/dataFetching.js";
     import Loading from "../../components/Loading.svelte";
     import AccMain from "../../components/account/AccMain.svelte";
-    import {redirectToLogin} from "../../utils/helpers.js";
-    import BrowserCheck from "../../components/BrowserCheck.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
+    import {redirectToLogin} from "../../utils/helpers";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
+
+    let t = useI18n();
 
-    let t = $state();
     let sessionInfo = $state();
     let user = $state();
     let webIdData = $state();
@@ -47,17 +47,20 @@
 </script>
 
 <svelte:head>
-    <title>{t?.account || 'Account'} {user?.email}</title>
+    <!--
+    for some reason, t can be undefined in the svelte:head section even though it never is
+    inside the component, even during init and before the very first render
+    -->
+    <title>{t?.account.account || 'Account'} {user?.email}</title>
+    <!--    <title>{t.account.account} {user.account.email}</title>-->
 </svelte:head>
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="account">
-            {#if !isReady}
-                <Loading/>
-            {:else}
-                <AccMain {t} {sessionInfo} bind:user bind:webIdData/>
-            {/if}
-        </WithI18n>
+        {#if !isReady}
+            <Loading/>
+        {:else}
+            <AccMain {sessionInfo} bind:user bind:webIdData/>
+        {/if}
     </ContentCenter>
 </Main>
diff --git a/frontend/src/routes/device/+page.svelte b/frontend/src/routes/device/+page.svelte
index ae900c5ae..a8124fa72 100644
--- a/frontend/src/routes/device/+page.svelte
+++ b/frontend/src/routes/device/+page.svelte
@@ -3,9 +3,8 @@
     import {onMount} from "svelte";
     import {postDeviceVerify, getSessionInfo} from "../../utils/dataFetching.js";
     import Loading from "../../components/Loading.svelte";
-    import {extractFormErrors, getQueryParams, redirectToLogin} from "../../utils/helpers.js";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import {extractFormErrors, getQueryParams, redirectToLogin} from "../../utils/helpers";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import Input from "$lib/inputs/Input.svelte";
     import Button from "$lib/Button.svelte";
     import * as yup from "yup";
@@ -13,11 +12,11 @@
     import {fetchSolvePow} from "../../utils/pow.ts";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     const btnWidthInline = '8rem';
 
-    /** @type {any} */
-    let t = $state();
+    let t = useI18n();
     /** @type {any} */
     let sessionInfo = $state();
 
@@ -40,9 +39,9 @@
                 // REGEX_URI is not really correct, but it's not too important either.
                 // The backend will validate immediately by cache key, which can be any String.
                 userCode: yup.string().trim()
-                    .min(userCodeLength, t.errTooShort)
-                    .max(userCodeLength, t.errTooLong)
-                    .matches(REGEX_URI, t.invalidInput)
+                    .min(userCodeLength, t.common.errTooShort)
+                    .max(userCodeLength, t.common.errTooLong)
+                    .matches(REGEX_URI, t.common.invalidInput)
             });
         }
     });
@@ -102,7 +101,7 @@
         } else if (res.status === 204) {
             isDeclined = true;
         } else if (res.status === 404) {
-            err = t.wrongOrExpired;
+            err = t.device.wrongOrExpired;
         } else {
             const body = await res.json();
             err = body.message;
@@ -124,86 +123,84 @@
 </script>
 
 <svelte:head>
-    <title>{t?.title || 'Device Authorization'}</title>
+    <title>{t?.device.title || 'Device Authorization'}</title>
 </svelte:head>
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="device">
-            {#if !sessionInfo}
-                <Loading/>
-            {:else}
-                <div class="container">
-                    <div class="name">
-                        <h2>{t.title}</h2>
+        {#if !sessionInfo}
+            <Loading/>
+        {:else}
+            <div class="container">
+                <div class="name">
+                    <h2>{t.device.title}</h2>
+                </div>
+
+                {#if scopes === undefined}
+                    <div class="desc">
+                        {t.device.desc.replaceAll('{{count}}', userCodeLength)}
                     </div>
 
-                    {#if scopes === undefined}
-                        <div class="desc">
-                            {t.desc.replaceAll('{{count}}', userCodeLength)}
-                        </div>
-
-                        <Input
-                                name="userCode"
-                                bind:value={formValues.userCode}
-                                bind:error={formErrors.userCode}
-                                autocomplete="off"
-                                placeholder={t.userCode}
-                                on:enter={onSubmit}
-                                on:input={onInput}
-                        >
-                            {t.userCode.toUpperCase()}
-                        </Input>
+                    <Input
+                            name="userCode"
+                            bind:value={formValues.userCode}
+                            bind:error={formErrors.userCode}
+                            autocomplete="off"
+                            placeholder={t.device.userCode}
+                            on:enter={onSubmit}
+                            on:input={onInput}
+                    >
+                        {t.device.userCode.toUpperCase()}
+                    </Input>
+
+                    <Button on:click={() => onSubmit('pending')} bind:isLoading>
+                        {t.device.submit}
+                    </Button>
+                {:else if isAccepted}
+                    <div class="desc">
+                        <p>{t.device.isAccepted}</p>
+                        <p>{t.device.autoRedirectAccount}</p>
+                    </div>
+                {:else if isDeclined}
+                    <div class="desc">
+                        <p class="declined">{t.device.isDeclined}</p>
+                        <p>{t.device.closeWindow}</p>
+                    </div>
+                {:else}
+                    <div class="desc">
+                        {t.device.descScopes}
+                        <ul>
+                            {#each scopes as scope}
+                                <li>{scope}</li>
+                            {/each}
+                        </ul>
+                    </div>
 
-                        <Button on:click={() => onSubmit('pending')} bind:isLoading>
-                            {t.submit.toUpperCase()}
+                    <div class="inline">
+                        <Button
+                                on:click={() => onSubmit('accept')}
+                                bind:isLoading
+                                level={1}
+                                width={btnWidthInline}
+                        >
+                            {t.device.accept}
                         </Button>
-                    {:else if isAccepted}
-                        <div class="desc">
-                            <p>{t.isAccepted}</p>
-                            <p>{t.autoRedirectAccount}</p>
-                        </div>
-                    {:else if isDeclined}
-                        <div class="desc">
-                            <p class="declined">{t.isDeclined}</p>
-                            <p>{t.closeWindow}</p>
-                        </div>
-                    {:else}
-                        <div class="desc">
-                            {t.descScopes}
-                            <ul>
-                                {#each scopes as scope}
-                                    <li>{scope}</li>
-                                {/each}
-                            </ul>
-                        </div>
-
-                        <div class="inline">
-                            <Button
-                                    on:click={() => onSubmit('accept')}
-                                    bind:isLoading
-                                    level={1}
-                                    width={btnWidthInline}
-                            >
-                                {t.accept}
-                            </Button>
-                            <Button
-                                    on:click={() => onSubmit('decline')}
-                                    bind:isLoading
-                                    level={3}
-                                    width={btnWidthInline}
-                            >
-                                {t.decline}
-                            </Button>
-                        </div>
-                    {/if}
-
-                    <div class="err">{err}</div>
-                </div>
-            {/if}
+                        <Button
+                                on:click={() => onSubmit('decline')}
+                                bind:isLoading
+                                level={3}
+                                width={btnWidthInline}
+                        >
+                            {t.device.decline}
+                        </Button>
+                    </div>
+                {/if}
+
+                <div class="err">{err}</div>
+            </div>
+        {/if}
 
-            <LangSelector absolute/>
-        </WithI18n>
+        <LangSelector absolute/>
     </ContentCenter>
 </Main>
 
diff --git a/frontend/src/routes/fedcm/+page.svelte b/frontend/src/routes/fedcm/+page.svelte
index 3dfa19594..8d55c6c7b 100644
--- a/frontend/src/routes/fedcm/+page.svelte
+++ b/frontend/src/routes/fedcm/+page.svelte
@@ -2,12 +2,12 @@
     import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
-    import {getKey} from "$lib/utils/helpers.js";
+    import {getKey} from "$lib/utils/helpers";
     import Button from "$lib/Button.svelte";
     import Input from "$lib/inputs/Input.svelte";
     import * as yup from "yup";
     import {REGEX_URI} from "../../utils/constants.js";
-    import {extractFormErrors} from "../../utils/helpers.js";
+    import {extractFormErrors} from "../../utils/helpers";
     import CheckIcon from "$lib/CheckIcon.svelte";
     import {getFedCMStatus} from "../../utils/dataFetching.js";
     import Main from "$lib5/Main.svelte";
@@ -19,10 +19,6 @@
     let credentials = $state('');
     let credentialType = $state('');
 
-    run(() => {
-        console.log('built config url: ' + configUrl);
-    });
-
     let formValues = $state({
         clientId: 'fedcm',
         configUrl: 'any',
diff --git a/frontend/src/routes/oidc/authorize/+page.svelte b/frontend/src/routes/oidc/authorize/+page.svelte
index 6a25df292..4389f496b 100644
--- a/frontend/src/routes/oidc/authorize/+page.svelte
+++ b/frontend/src/routes/oidc/authorize/+page.svelte
@@ -1,5 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: can't migrate `let t = {};` to `$state` because there's a variable named state.
-     Rename the variable and try again or migrate by hand. -->
 <script>
     import {onMount, tick} from "svelte";
     import {
@@ -15,22 +13,21 @@
         getQueryParams,
         saveCsrfToken,
         saveProviderToken,
-    } from "../../../utils/helpers.js";
+    } from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import WebauthnRequest from "../../../components/webauthn/WebauthnRequest.svelte";
     import {scale} from 'svelte/transition';
     import Input from "$lib/inputs/Input.svelte";
     import PasswordInput from "$lib/inputs/PasswordInput.svelte";
-    import BrowserCheck from "../../../components/BrowserCheck.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import getPkce from "oauth-pkce";
     import {PKCE_VERIFIER_UPSTREAM} from "../../../utils/constants.js";
     import IconHome from "$lib/icons/IconHome.svelte";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let t = {};
+    let t = useI18n();
 
     let clientId;
     let clientName = '';
@@ -74,7 +71,7 @@
     let schema = {};
     $: if (t) {
         schema = yup.object().shape({
-            email: yup.string().required(t.emailRequired).email(t.emailBadFormat),
+            email: yup.string().required(t.authorize.emailRequired).email(t.authorize.emailBadFormat),
         });
     }
 
@@ -202,7 +199,7 @@
             webauthnData = await res.json();
         } else if (res.status === 406) {
             // 406 -> client forces MFA while the user has none
-            err = t.clientForceMfa;
+            err = t.authorize.clientForceMfa;
             clientMfaForce = true;
         } else if (res.status === 429) {
             // 429 -> too many failed logins
@@ -211,7 +208,7 @@
             let diff = notBefore * 1000 - new Date().getTime();
 
             tooManyRequests = true;
-            err = `${t.http429} ${nbfDate}`;
+            err = `${t.authorize.http429} ${nbfDate}`;
 
             formValues.email = '';
             formValues.password = '';
@@ -227,7 +224,7 @@
             needsPassword = true;
             emailAfterSubmit = formValues.email;
         } else {
-            err = t.invalidCredentials;
+            err = t.authorize.invalidCredentials;
             showResetRequest = true;
         }
         isLoading = false;
@@ -325,142 +322,140 @@
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="authorize">
-            <div class="container">
-                <div class="head">
-                    <div class="logo">
-                        {#if clientId}
-                            <img src="{`/auth/v1/clients/${clientId}/logo`}" alt="No Logo Available"/>
-                        {/if}
-                    </div>
-                    {#if clientUri}
-                        <a class="home" href={clientUri}>
-                            <IconHome opacity={0.5}/>
-                        </a>
+        <div class="container">
+            <div class="head">
+                <div class="logo">
+                    {#if clientId}
+                        <img src="{`/auth/v1/clients/${clientId}/logo`}" alt="No Logo Available"/>
                     {/if}
                 </div>
-
-                <div class="name">
-                    <h2>{clientName || clientId}</h2>
-                </div>
-
-                {#if webauthnData}
-                    <WebauthnRequest
-                            {t}
-                            bind:data={webauthnData}
-                            onSuccess={onWebauthnSuccess}
-                            onError={onWebauthnError}
-                    />
+                {#if clientUri}
+                    <a class="home" href={clientUri}>
+                        <IconHome opacity={0.5}/>
+                    </a>
                 {/if}
+            </div>
 
-                {#if !clientMfaForce}
-                    <Input
-                            type="email"
-                            name="rauthyEmail"
-                            bind:value={formValues.email}
-                            bind:error={formErrors.email}
-                            autocomplete="email"
-                            placeholder={t.email}
+            <div class="name">
+                <h2>{clientName || clientId}</h2>
+            </div>
+
+            {#if webauthnData}
+                <WebauthnRequest
+                        {t}
+                        bind:data={webauthnData}
+                        onSuccess={onWebauthnSuccess}
+                        onError={onWebauthnError}
+                />
+            {/if}
+
+            {#if !clientMfaForce}
+                <Input
+                        type="email"
+                        name="rauthyEmail"
+                        bind:value={formValues.email}
+                        bind:error={formErrors.email}
+                        autocomplete="email"
+                        placeholder={t.common.email}
+                        disabled={tooManyRequests || clientMfaForce}
+                        on:enter={onSubmit}
+                        on:input={onEmailInput}
+                >
+                    {t.common.email.toUpperCase()}
+                </Input>
+
+                {#if needsPassword && existingMfaUser !== formValues.email && !showReset}
+                    <PasswordInput
+                            bind:bindThis={passwordInput}
+                            name="rauthyPassword"
+                            bind:value={formValues.password}
+                            error={formErrors.password}
+                            autocomplete="current-password"
+                            placeholder={t.common.password}
                             disabled={tooManyRequests || clientMfaForce}
                             on:enter={onSubmit}
-                            on:input={onEmailInput}
                     >
-                        {t.email?.toUpperCase()}
-                    </Input>
-
-                    {#if needsPassword && existingMfaUser !== formValues.email && !showReset}
-                        <PasswordInput
-                                bind:bindThis={passwordInput}
-                                name="rauthyPassword"
-                                bind:value={formValues.password}
-                                error={formErrors.password}
-                                autocomplete="current-password"
-                                placeholder={t.password}
-                                disabled={tooManyRequests || clientMfaForce}
-                                on:enter={onSubmit}
+                        {t.common.password.toUpperCase()}
+                    </PasswordInput>
+
+                    {#if showResetRequest && !tooManyRequests}
+                        <div
+                                role="button"
+                                tabindex="0"
+                                class="forgotten"
+                                transition:scale|global
+                                on:click={handleShowReset}
+                                on:keypress={handleShowReset}
                         >
-                            {t.password?.toUpperCase()}
-                        </PasswordInput>
-
-                        {#if showResetRequest && !tooManyRequests}
-                            <div
-                                    role="button"
-                                    tabindex="0"
-                                    class="forgotten"
-                                    transition:scale|global
-                                    on:click={handleShowReset}
-                                    on:keypress={handleShowReset}
-                            >
-                                {t.passwordForgotten}
-                            </div>
-                        {/if}
-                    {/if}
-
-                    {#if !tooManyRequests && !clientMfaForce}
-                        {#if showReset}
-                            <div class="btn flex-col">
-                                <Button on:click={requestReset}>
-                                    {t.passwordRequest?.toUpperCase()}
-                                </Button>
-                            </div>
-                        {:else}
-                            <div class="btn flex-col">
-                                <Button on:click={onSubmit} bind:isLoading>
-                                    {t.login?.toUpperCase()}
-                                </Button>
-                            </div>
-                        {/if}
+                            {t.authorize.passwordForgotten}
+                        </div>
                     {/if}
                 {/if}
 
-                {#if providers}
-                    <div class="providers flex-col">
-                        {#each providers as provider (provider.id)}
-                            <Button on:click={() => providerLogin(provider.id)} level={3}>
-                                <div class="flex-inline">
-                                    <img src="{`/auth/v1/providers/${provider.id}/img`}" alt="" width="20" height="20"/>
-                                    <span class="providerName">{provider.name}</span>
-                                </div>
+                {#if !tooManyRequests && !clientMfaForce}
+                    {#if showReset}
+                        <div class="btn flex-col">
+                            <Button on:click={requestReset}>
+                                {t.authorize.passwordRequest}
                             </Button>
-                        {/each}
-                    </div>
-                {/if}
-
-                {#if err}
-                    <div class="errMsg errMsgApi">
-                        {err}
-                    </div>
-                {/if}
-
-                {#if emailSuccess}
-                    <div class="success">
-                        {t.emailSentMsg}
-                    </div>
-                {/if}
-
-                {#if isRegOpen && !clientMfaForce && !showResetRequest && !tooManyRequests}
-                    {#if clientUri}
-                        <a class="reg" href="/auth/v1/users/register?redirect_uri={clientUri}" target="_blank">
-                            {t.signUp}
-                        </a>
+                        </div>
                     {:else}
-                        <a class="reg" href="/auth/v1/users/register" target="_blank">
-                            {t.signUp}
-                        </a>
+                        <div class="btn flex-col">
+                            <Button on:click={onSubmit} bind:isLoading>
+                                {t.authorize.login}
+                            </Button>
+                        </div>
                     {/if}
                 {/if}
-
-                {#if clientMfaForce}
-                    <div class="btn flex-col">
-                        <Button on:click={() => window.location.href = '/auth/v1/account'}>
-                            ACCOUNT
+            {/if}
+
+            {#if providers}
+                <div class="providers flex-col">
+                    {#each providers as provider (provider.id)}
+                        <Button on:click={() => providerLogin(provider.id)} level={3}>
+                            <div class="flex-inline">
+                                <img src="{`/auth/v1/providers/${provider.id}/img`}" alt="" width="20" height="20"/>
+                                <span class="providerName">{provider.name}</span>
+                            </div>
                         </Button>
-                    </div>
+                    {/each}
+                </div>
+            {/if}
+
+            {#if err}
+                <div class="errMsg errMsgApi">
+                    {err}
+                </div>
+            {/if}
+
+            {#if emailSuccess}
+                <div class="success">
+                    {t.authorize.emailSentMsg}
+                </div>
+            {/if}
+
+            {#if isRegOpen && !clientMfaForce && !showResetRequest && !tooManyRequests}
+                {#if clientUri}
+                    <a class="reg" href="/auth/v1/users/register?redirect_uri={clientUri}" target="_blank">
+                        {t.authorize.signUp}
+                    </a>
+                {:else}
+                    <a class="reg" href="/auth/v1/users/register" target="_blank">
+                        {t.authorize.signUp}
+                    </a>
                 {/if}
-            </div>
+            {/if}
+
+            {#if clientMfaForce}
+                <div class="btn flex-col">
+                    <Button on:click={() => window.location.href = '/auth/v1/account'}>
+                        ACCOUNT
+                    </Button>
+                </div>
+            {/if}
+        </div>
 
-            <LangSelector absolute/>
-        </WithI18n>
+        <LangSelector absolute/>
     </ContentCenter>
 </Main>
 
diff --git a/frontend/src/routes/oidc/callback/+page.svelte b/frontend/src/routes/oidc/callback/+page.svelte
index c188d53a7..cbec692e3 100644
--- a/frontend/src/routes/oidc/callback/+page.svelte
+++ b/frontend/src/routes/oidc/callback/+page.svelte
@@ -7,7 +7,7 @@
         saveAccessToken,
         saveCsrfToken,
         saveIdToken
-    } from "../../../utils/helpers.js";
+    } from "../../../utils/helpers";
     import {onMount} from "svelte";
     import {
         CLIENT_ID,
diff --git a/frontend/src/routes/oidc/logout/+page.svelte b/frontend/src/routes/oidc/logout/+page.svelte
index ddc8b0858..75ef09d7c 100644
--- a/frontend/src/routes/oidc/logout/+page.svelte
+++ b/frontend/src/routes/oidc/logout/+page.svelte
@@ -1,11 +1,14 @@
 <script>
     import {onMount} from "svelte";
-    import {getQueryParams, purgeStorage, saveCsrfToken} from "../../../utils/helpers.js";
+    import {getQueryParams, purgeStorage, saveCsrfToken} from "../../../utils/helpers";
     import {logout} from "../../../utils/dataFetching.js";
     import Button from "$lib/Button.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
+    import {useI18n} from "$state/i18n.svelte";
+    import Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
 
-    let t = $state();
+    let t = useI18n();
     let err = '';
     let postLogoutUri = '';
     let isLoading = $state(false);
@@ -48,7 +51,7 @@
         purgeStorage();
         if (res.ok && res.headers.get('location')) {
             window.location.replace(res.headers.get('location'));
-        }else {
+        } else {
             await handleCancel();
         }
     }
@@ -56,29 +59,32 @@
 </script>
 
 <svelte:head>
-    <title>{t?.logout || 'Logout'}</title>
+    <title>{t?.logout.logout || 'Logout'}</title>
 </svelte:head>
 
-<WithI18n bind:t content="logout">
-    <div class="container">
-        <h1>{t.logout}</h1>
-
-        <p>
-            {t.confirmMsg}
-        </p>
+<Main>
+    <ContentCenter>
+        <div class="container">
+            <h1>{t.logout.logout}</h1>
+            <p>
+                {t.logout.confirmMsg}
+            </p>
+
+            <div class="btn">
+                <Button on:click={handleLogout} level={2} bind:isLoading>{t.logout.logout}</Button>
+                <Button on:click={handleCancel} level={4}>{t.common.cancel}</Button>
+            </div>
 
-        <div class="btn">
-            <Button on:click={handleLogout} level={2} bind:isLoading>{t.logout.toUpperCase()}</Button>
-            <Button on:click={handleCancel} level={4}>{t.cancel.toUpperCase()}</Button>
+            {#if err}
+                <div class:err>
+                    {err}
+                </div>
+            {/if}
         </div>
 
-        {#if err}
-            <div class:err>
-                {err}
-            </div>
-        {/if}
-    </div>
-</WithI18n>
+        <LangSelector absolute/>
+    </ContentCenter>
+</Main>
 
 <style>
     .btn {
diff --git a/frontend/src/routes/providers/callback/+page.svelte b/frontend/src/routes/providers/callback/+page.svelte
index 2dce9dba7..dddae7aed 100644
--- a/frontend/src/routes/providers/callback/+page.svelte
+++ b/frontend/src/routes/providers/callback/+page.svelte
@@ -3,18 +3,17 @@
         getQueryParams,
         getProviderToken,
         getVerifierUpstreamFromStorage,
-    } from "../../../utils/helpers.js";
+    } from "../../../utils/helpers";
     import {postProviderCallback} from "../../../utils/dataFetching.js";
     import {onMount} from "svelte";
     import WebauthnRequest from "../../../components/webauthn/WebauthnRequest.svelte";
     import BrowserCheck from "../../../components/BrowserCheck.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import Button from "$lib/Button.svelte";
-    import {sleepAwait} from "$lib/utils/helpers.js";
+    import {useI18n} from "$state/i18n.svelte";
 
     // will contain the same translations as /oidc/authorize
-    let t = $state({});
+    let t = useI18n();
     let clientMfaForce = $state(false);
     let error = $state('');
     let webauthnData = $state();
@@ -53,7 +52,7 @@
             error = body.message;
         } else if (res.status === 406) {
             // 406 -> client forces MFA while the user has none
-            error = t.clientForceMfa;
+            error = t.authorize.clientForceMfa;
             clientMfaForce = true;
         } else {
             let body = await res.text();
@@ -79,28 +78,25 @@
 </svelte:head>
 
 <BrowserCheck>
-    <WithI18n bind:t content="authorize">
-        {#if webauthnData}
-            <WebauthnRequest
-                    {t}
-                    bind:data={webauthnData}
-                    onSuccess={onWebauthnSuccess}
-                    onError={onWebauthnError}
-            />
-        {:else if clientMfaForce}
-            <div class="btn flex-col">
-                <Button on:click={() => window.location.href = '/auth/v1/account'}>
-                    ACCOUNT LOGIN
-                </Button>
-            </div>
-        {:else if error}
-            <div class="error">
-                {error}
-            </div>
-        {/if}
+    {#if webauthnData}
+        <WebauthnRequest
+                bind:data={webauthnData}
+                onSuccess={onWebauthnSuccess}
+                onError={onWebauthnError}
+        />
+    {:else if clientMfaForce}
+        <div class="btn flex-col">
+            <Button on:click={() => window.location.href = '/auth/v1/account'}>
+                ACCOUNT LOGIN
+            </Button>
+        </div>
+    {:else if error}
+        <div class="error">
+            {error}
+        </div>
+    {/if}
 
-        <LangSelector absolute/>
-    </WithI18n>
+    <LangSelector absolute/>
 </BrowserCheck>
 
 <style>
diff --git a/frontend/src/routes/users/register/+page.svelte b/frontend/src/routes/users/register/+page.svelte
index 73c23de1c..b4271ee72 100644
--- a/frontend/src/routes/users/register/+page.svelte
+++ b/frontend/src/routes/users/register/+page.svelte
@@ -1,20 +1,20 @@
 <script>
     import {run} from 'svelte/legacy';
     import * as yup from "yup";
-    import {extractFormErrors, getQueryParams} from "../../../utils/helpers.js";
+    import {extractFormErrors, getQueryParams} from "../../../utils/helpers";
     import Button from "$lib/Button.svelte";
     import {REGEX_NAME, REGEX_NAME_NULLABLE} from "../../../utils/constants.js";
     import {registerUser} from "../../../utils/dataFetching.js";
     import {onMount, tick} from "svelte";
     import Input from "$lib/inputs/Input.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import {fetchSolvePow} from "../../../utils/pow.ts";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
     import {useIsDev} from "$state/is_dev.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let t = $state();
+    let t = useI18n();
     let restrictedDomain = $state();
     let redirectUri;
     let isLoading = $state(false);
@@ -28,12 +28,12 @@
     run(() => {
         if (t) {
             schema = yup.object().shape({
-                email: yup.string().required(t.required).email(t.emailBadFormat),
+                email: yup.string().required(t.common.required).email(t.register.emailBadFormat),
                 givenName: yup.string()
-                    .required(t.required)
-                    .matches(REGEX_NAME, t.regexName),
+                    .required(t.common.required)
+                    .matches(REGEX_NAME, t.register.regexName),
                 familyName: yup.string()
-                    .matches(REGEX_NAME_NULLABLE, t.regexName),
+                    .matches(REGEX_NAME_NULLABLE, t.register.regexName),
             });
         }
     });
@@ -68,7 +68,7 @@
         }
 
         if (restrictedDomain && !formValues.email.endsWith(restrictedDomain)) {
-            err = t.domainErr;
+            err = t.register.domainErr;
             return;
         }
 
@@ -116,62 +116,60 @@
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="register">
-            <div class="container">
-
-                <div class="domainTxt">
-                    <h1>{t.userReg}</h1>
-                    {#if restrictedDomain}
-                        {t.domainRestricted}<br>
-                        {t.domainAllowed} <code>@{restrictedDomain}</code>
-                    {/if}
-                </div>
+        <div class="container">
 
-                <Input
-                        type="email"
-                        bind:value={formValues.email}
-                        bind:error={formErrors.email}
-                        autocomplete="email"
-                        placeholder={t.email}
-                        on:keypress={handleKeyPress}
-                >
-                    {t.email.toUpperCase()}
-                </Input>
-                <Input
-                        bind:value={formValues.givenName}
-                        bind:error={formErrors.givenName}
-                        autocomplete="given-name"
-                        placeholder={t.givenName}
-                        on:keypress={handleKeyPress}
-                >
-                    {t.givenName.toUpperCase()}
-                </Input>
-                <Input
-                        bind:value={formValues.familyName}
-                        bind:error={formErrors.familyName}
-                        autocomplete="family-name"
-                        placeholder={t.familyName}
-                        on:keypress={handleKeyPress}
-                >
-                    {t.familyName.toUpperCase()}
-                </Input>
-
-                <Button on:click={onSubmit} bind:isLoading>{t.register.toUpperCase()}</Button>
-
-                {#if success}
-                    <div class="success">
-                        {t.success}<br/>
-                        {t.emailCheck}
-                    </div>
-                {:else if err}
-                    <div class="err">
-                        {err}
-                    </div>
+            <div class="domainTxt">
+                <h1>{t.register.userReg}</h1>
+                {#if restrictedDomain}
+                    {t.register.domainRestricted}<br>
+                    {t.register.domainAllowed} <code>@{restrictedDomain}</code>
                 {/if}
             </div>
 
-            <LangSelector absolute/>
-        </WithI18n>
+            <Input
+                    type="email"
+                    bind:value={formValues.email}
+                    bind:error={formErrors.email}
+                    autocomplete="email"
+                    placeholder={t.common.email}
+                    on:keypress={handleKeyPress}
+            >
+                {t.common.email.toUpperCase()}
+            </Input>
+            <Input
+                    bind:value={formValues.givenName}
+                    bind:error={formErrors.givenName}
+                    autocomplete="given-name"
+                    placeholder={t.account.givenName}
+                    on:keypress={handleKeyPress}
+            >
+                {t.account.givenName.toUpperCase()}
+            </Input>
+            <Input
+                    bind:value={formValues.familyName}
+                    bind:error={formErrors.familyName}
+                    autocomplete="family-name"
+                    placeholder={t.account.familyName}
+                    on:keypress={handleKeyPress}
+            >
+                {t.account.familyName.toUpperCase()}
+            </Input>
+
+            <Button on:click={onSubmit} bind:isLoading>{t.register.register}</Button>
+
+            {#if success}
+                <div class="success">
+                    {t.register.success}<br/>
+                    {t.register.emailCheck}
+                </div>
+            {:else if err}
+                <div class="err">
+                    {err}
+                </div>
+            {/if}
+        </div>
+
+        <LangSelector absolute/>
     </ContentCenter>
 </Main>
 
diff --git a/frontend/src/routes/users/{id}/email_confirm/email_confirm/+page.svelte b/frontend/src/routes/users/{id}/email_confirm/email_confirm/+page.svelte
index 044fcce1a..4453eb1ed 100644
--- a/frontend/src/routes/users/{id}/email_confirm/email_confirm/+page.svelte
+++ b/frontend/src/routes/users/{id}/email_confirm/email_confirm/+page.svelte
@@ -1,13 +1,12 @@
 <script>
     import {onMount} from "svelte";
-    import BrowserCheck from "../../../../../components/BrowserCheck.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import Button from "$lib/Button.svelte";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let t = $state();
+    let t = useI18n();
     let emailOld = $state('old@mail.org');
     let emailNew = $state('new@mail.org');
 
@@ -22,29 +21,27 @@
 </script>
 
 <svelte:head>
-    <title>{t?.title || 'E-Mail Change Confirm'}</title>
+    <title>{t.emailChange.title || 'E-Mail Change Confirm'}</title>
 </svelte:head>
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="emailChangeConfirm">
-            <div class="container">
-                <h1>{t.title}</h1>
-                <p>
-                    {t.text_changed}:<br/>
-                    <b>{emailOld}</b>
-                    {t.to}
-                    <b>{emailNew}</b>
-                </p>
-                <p>{t.text_login}</p>
-                <div class="btn">
-                    <Button on:click={() => window.location.replace('/auth/v1/account')}>
-                        Account Login
-                    </Button>
-                </div>
+        <div class="container">
+            <h1>{t.emailChange.title}</h1>
+            <p>
+                {t.emailChange.textChanged}:<br/>
+                <b>{emailOld}</b>
+                {t.emailChange.to}
+                <b>{emailNew}</b>
+            </p>
+            <p>{t.emailChange.textLogin}</p>
+            <div class="btn">
+                <Button on:click={() => window.location.replace('/auth/v1/account')}>
+                    {t.authorize.login}
+                </Button>
             </div>
-            <LangSelector absolute/>
-        </WithI18n>
+        </div>
+        <LangSelector absolute/>
     </ContentCenter>
 </Main>
 
diff --git a/frontend/src/routes/users/{id}/reset/reset/+page.svelte b/frontend/src/routes/users/{id}/reset/reset/+page.svelte
index dc8cf2863..dedaaff6f 100644
--- a/frontend/src/routes/users/{id}/reset/reset/+page.svelte
+++ b/frontend/src/routes/users/{id}/reset/reset/+page.svelte
@@ -8,7 +8,7 @@
         extractFormErrors,
         generatePassword,
         getQueryParams
-    } from "../../../../../utils/helpers.js";
+    } from "../../../../../utils/helpers";
     import {
         resetPassword,
         webauthnAuthStart,
@@ -21,17 +21,16 @@
     import Input from "$lib/inputs/Input.svelte";
     import PasswordInput from "$lib/inputs/PasswordInput.svelte";
     import WebauthnRequest from "../../../../../components/webauthn/WebauthnRequest.svelte";
-    import BrowserCheck from "../../../../../components/BrowserCheck.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
     import {slide} from "svelte/transition";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import {REGEX_NAME} from "../../../../../utils/constants.js";
     import {useIsDev} from "$state/is_dev.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
     const btnWidth = '150px';
     const inputWidth = '320px';
 
-    let t = $state();
+    let t = useI18n();
     let csrf = '';
     let policy = $state();
     let isReady = $state(true);
@@ -214,7 +213,7 @@
 
         // do passwords match?
         if (formValues.password !== formValues.passwordConfirm) {
-            err = t.passwordNoMatch;
+            err = t.passwordReset.passwordNoMatch;
             return;
         } else {
             err = '';
@@ -286,12 +285,12 @@
         if (t) {
             schemaPasskey = yup.object().shape({
                 passkeyName: yup.string()
-                    .required(t.required)
+                    .required(t.common.required)
                     .matches(REGEX_NAME, t.mfa.passkeyNameErr),
             });
             schemaPassword = yup.object().shape({
-                password: yup.string().required(t.required),
-                passwordConfirm: yup.string().required(t.required)
+                password: yup.string().required(t.common.required),
+                passwordConfirm: yup.string().required(t.common.required)
             });
         }
     });
@@ -324,12 +323,11 @@
 </script>
 
 <svelte:head>
-    <!-- the :head component cannot be wrapped inside the <WithI18n> unfortunately -->
     {#if t}
         {#if requestType.startsWith('new_user')}
-            <title>{t.newAccount}</title>
+            <title>{t.passwordReset.newAccount}</title>
         {:else if requestType === "password_reset"}
-            <title>{t.passwordReset}</title>
+            <title>{t.passwordReset.passwordReset}</title>
         {/if}
     {:else}
         <title>Password</title>
@@ -341,189 +339,187 @@
     <Loading/>
 {/if}
 
-<WithI18n bind:t content="passwordReset">
-    <!--    <div class="container">-->
-    <!--        {#if requestType.startsWith('new_user')}-->
-    <!--            {#if webauthnData}-->
-    <!--                <WebauthnRequest-->
-    <!--                        bind:data={webauthnData}-->
-    <!--                        onSuccess={onWebauthnSuccess}-->
-    <!--                        onError={onWebauthnError}-->
-    <!--                />-->
-    <!--            {/if}-->
-
-    <!--            <h1>{t.newAccount}</h1>-->
-    <!--            <p>{t.newAccDesc1}</p>-->
-    <!--            <p>{t.newAccDesc2}<a href={t.fidoLink} target="_blank">FIDO Alliance</a></p>-->
-
-    <!--            <div style:margin-bottom="1rem">-->
-    <!--                <Button-->
-    <!--                        on:click={() => accountTypeNew = "passkey"}-->
-    <!--                        width={btnWidth}-->
-    <!--                        bind:isLoading-->
-    <!--                        level={2}-->
-    <!--                        isDisabled={success}-->
-    <!--                >-->
-    <!--                    {t.passwordless.toUpperCase()}-->
-    <!--                </Button>-->
-    <!--                <Button-->
-    <!--                        on:click={() => accountTypeNew = "password"}-->
-    <!--                        width={btnWidth}-->
-    <!--                        bind:isLoading-->
-    <!--                        level={3}-->
-    <!--                        isDisabled={success}-->
-    <!--                >-->
-    <!--                    {t.password.toUpperCase()}-->
-    <!--                </Button>-->
-    <!--            </div>-->
-
-    <!--            {#if accountTypeNew === "password"}-->
-    <!--                <div transition:slide>-->
-    <!--                    <PasswordPolicy {t} bind:accepted {policy} password={formValues.password}/>-->
-
-    <!--                    <PasswordInput-->
-    <!--                            bind:value={formValues.password}-->
-    <!--                            error={formErrors.password}-->
-    <!--                            autocomplete="new-password"-->
-    <!--                            placeholder={t.password}-->
-    <!--                            width={inputWidth}-->
-    <!--                            {showCopy}-->
-    <!--                            disabled={success}-->
-    <!--                    >-->
-    <!--                        {t.password.toUpperCase()}-->
-    <!--                    </PasswordInput>-->
-    <!--                    <PasswordInput-->
-    <!--                            bind:value={formValues.passwordConfirm}-->
-    <!--                            error={formErrors.passwordConfirm}-->
-    <!--                            autocomplete="new-password"-->
-    <!--                            placeholder={t.passwordConfirm}-->
-    <!--                            width={inputWidth}-->
-    <!--                            {showCopy}-->
-    <!--                            disabled={success}-->
-    <!--                    >-->
-    <!--                        {t.passwordConfirm.toUpperCase()}-->
-    <!--                    </PasswordInput>-->
-
-    <!--                    <Button-->
-    <!--                            on:click={generate}-->
-    <!--                            width={btnWidth}-->
-    <!--                            level={3}-->
-    <!--                            isDisabled={success}-->
-    <!--                    >-->
-    <!--                        {t.generate.toUpperCase()}-->
-    <!--                    </Button>-->
-    <!--                    <Button-->
-    <!--                            on:click={passwordReset}-->
-    <!--                            width={btnWidth}-->
-    <!--                            bind:isLoading level={2}-->
-    <!--                            isDisabled={success}-->
-    <!--                    >-->
-    <!--                        {t.save.toUpperCase()}-->
-    <!--                    </Button>-->
-
-    <!--                    {#if success}-->
-    <!--                        <div class="success">-->
-    <!--                            {t.success1}-->
-    <!--                            <br>-->
-    <!--                            {t.success2}-->
-    <!--                        </div>-->
-    <!--                    {/if}-->
-    <!--                </div>-->
-    <!--            {:else if accountTypeNew === "passkey"}-->
-    <!--                <div transition:slide>-->
-    <!--                    <Input-->
-    <!--                            bind:value={formValues.passkeyName}-->
-    <!--                            bind:error={formErrors.passkeyName}-->
-    <!--                            autocomplete="off"-->
-    <!--                            placeholder={t.mfa.passkeyName}-->
-    <!--                            on:enter={handleRegisterPasskey}-->
-    <!--                            width={inputWidth}-->
-    <!--                            disabled={success}-->
-    <!--                    >-->
-    <!--                        {t.mfa.passkeyName}-->
-    <!--                    </Input>-->
-    <!--                    <Button-->
-    <!--                            on:click={handleRegisterPasskey} width={btnWidth}-->
-    <!--                            level={success ? 2 : 1}-->
-    <!--                            isDisabled={success}-->
-    <!--                    >-->
-    <!--                        {t.mfa.register.toUpperCase()}-->
-    <!--                    </Button>-->
-
-    <!--                    {#if success}-->
-    <!--                        <div class="success">-->
-    <!--                            <p>{t.successPasskey1}</p>-->
-    <!--                            <p>{t.successPasskey2}</p>-->
-    <!--                            <Button on:click={navigateToAccount} width={btnWidth} level={1}>-->
-    <!--                                {t.accountLogin.toUpperCase()}-->
-    <!--                            </Button>-->
-    <!--                        </div>-->
-    <!--                    {/if}-->
-    <!--                </div>-->
-    <!--            {/if}-->
-    <!--        {:else if requestType.startsWith('password_reset')}-->
-    <!--            {#if webauthnData}-->
-    <!--                <WebauthnRequest-->
-    <!--                        bind:data={webauthnData}-->
-    <!--                        purpose="PasswordReset"-->
-    <!--                        onSuccess={onWebauthnSuccess}-->
-    <!--                        onError={onWebauthnError}-->
-    <!--                />-->
-    <!--            {/if}-->
-
-    <!--            <h1>Password Reset</h1>-->
-
-    <!--            <PasswordPolicy {t} bind:accepted {policy} password={formValues.password}/>-->
-
-    <!--            <PasswordInput-->
-    <!--                    bind:value={formValues.password}-->
-    <!--                    error={formErrors.password}-->
-    <!--                    autocomplete="new-password"-->
-    <!--                    placeholder={t.password}-->
-    <!--                    width={inputWidth}-->
-    <!--                    {showCopy}-->
-    <!--            >-->
-    <!--                {t.password.toUpperCase()}-->
-    <!--            </PasswordInput>-->
-    <!--            <PasswordInput-->
-    <!--                    bind:value={formValues.passwordConfirm}-->
-    <!--                    error={formErrors.passwordConfirm}-->
-    <!--                    autocomplete="new-password"-->
-    <!--                    placeholder={t.passwordConfirm}-->
-    <!--                    width={inputWidth}-->
-    <!--                    {showCopy}-->
-    <!--            >-->
-    <!--                {t.passwordConfirm.toUpperCase()}-->
-    <!--            </PasswordInput>-->
-
-    <!--            <Button on:click={generate} width={btnWidth} level={3}>-->
-    <!--                {t.generate.toUpperCase()}-->
-    <!--            </Button>-->
-    <!--            <Button on:click={passwordReset} width={btnWidth} bind:isLoading level={2}>-->
-    <!--                {t.save.toUpperCase()}-->
-    <!--            </Button>-->
-
-    <!--            {#if success}-->
-    <!--                <div class="success">-->
-    <!--                    {t.success1}-->
-    <!--                    {t.success2}-->
-    <!--                    <br>-->
-    <!--                    {t.success3}-->
-    <!--                    <br>-->
-    <!--                    <a href={redirectUri || '/auth/v1/account'}>Link</a>-->
-    <!--                </div>-->
-    <!--            {/if}-->
-    <!--        {/if}-->
-
-    <!--        {#if err}-->
-    <!--            <div class="err">-->
-    <!--                {err}-->
-    <!--            </div>-->
-    <!--        {/if}-->
-    <!--    </div>-->
-
-    <LangSelector absolute/>
-</WithI18n>
+<div class="container">
+    {#if requestType.startsWith('new_user')}
+        {#if webauthnData}
+            <WebauthnRequest
+                    bind:data={webauthnData}
+                    onSuccess={onWebauthnSuccess}
+                    onError={onWebauthnError}
+            />
+        {/if}
+
+        <h1>{t.passwordReset.newAccount}</h1>
+        <p>{t.passwordReset.newAccDesc1}</p>
+        <p>{t.passwordReset.newAccDesc2}<a href={t.passwordReset.fidoLink} target="_blank">FIDO Alliance</a></p>
+
+        <div style:margin-bottom="1rem">
+            <Button
+                    on:click={() => accountTypeNew = "passkey"}
+                    width={btnWidth}
+                    bind:isLoading
+                    level={2}
+                    isDisabled={success}
+            >
+                {t.passwordReset.passwordless}
+            </Button>
+            <Button
+                    on:click={() => accountTypeNew = "password"}
+                    width={btnWidth}
+                    bind:isLoading
+                    level={3}
+                    isDisabled={success}
+            >
+                {t.passwordReset.password}
+            </Button>
+        </div>
+
+        {#if accountTypeNew === "password"}
+            <div transition:slide>
+                <PasswordPolicy bind:accepted {policy} password={formValues.password}/>
+
+                <PasswordInput
+                        bind:value={formValues.password}
+                        error={formErrors.password}
+                        autocomplete="new-password"
+                        placeholder={t.passwordReset.password}
+                        width={inputWidth}
+                        {showCopy}
+                        disabled={success}
+                >
+                    {t.passwordReset.password.toUpperCase()}
+                </PasswordInput>
+                <PasswordInput
+                        bind:value={formValues.passwordConfirm}
+                        error={formErrors.passwordConfirm}
+                        autocomplete="new-password"
+                        placeholder={t.passwordReset.passwordConfirm}
+                        width={inputWidth}
+                        {showCopy}
+                        disabled={success}
+                >
+                    {t.passwordReset.passwordConfirm.toUpperCase()}
+                </PasswordInput>
+
+                <Button
+                        on:click={generate}
+                        width={btnWidth}
+                        level={3}
+                        isDisabled={success}
+                >
+                    {t.passwordReset.generate}
+                </Button>
+                <Button
+                        on:click={passwordReset}
+                        width={btnWidth}
+                        bind:isLoading level={2}
+                        isDisabled={success}
+                >
+                    {t.common.save}
+                </Button>
+
+                {#if success}
+                    <div class="success">
+                        {t.passwordReset.success1}
+                        <br>
+                        {t.passwordReset.success2}
+                    </div>
+                {/if}
+            </div>
+        {:else if accountTypeNew === "passkey"}
+            <div transition:slide>
+                <Input
+                        bind:value={formValues.passkeyName}
+                        bind:error={formErrors.passkeyName}
+                        autocomplete="off"
+                        placeholder={t.mfa.passkeyName}
+                        on:enter={handleRegisterPasskey}
+                        width={inputWidth}
+                        disabled={success}
+                >
+                    {t.mfa.passkeyName}
+                </Input>
+                <Button
+                        on:click={handleRegisterPasskey} width={btnWidth}
+                        level={success ? 2 : 1}
+                        isDisabled={success}
+                >
+                    {t.mfa.register}
+                </Button>
+
+                {#if success}
+                    <div class="success">
+                        <p>{t.passwordReset.successPasskey1}</p>
+                        <p>{t.passwordReset.successPasskey2}</p>
+                        <Button on:click={navigateToAccount} width={btnWidth} level={1}>
+                            {t.passwordReset.accountLogin}
+                        </Button>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+    {:else if requestType.startsWith('password_reset')}
+        {#if webauthnData}
+            <WebauthnRequest
+                    bind:data={webauthnData}
+                    purpose="PasswordReset"
+                    onSuccess={onWebauthnSuccess}
+                    onError={onWebauthnError}
+            />
+        {/if}
+
+        <h1>Password Reset</h1>
+
+        <PasswordPolicy bind:accepted {policy} password={formValues.password}/>
+
+        <PasswordInput
+                bind:value={formValues.password}
+                error={formErrors.password}
+                autocomplete="new-password"
+                placeholder={t.passwordReset.password}
+                width={inputWidth}
+                {showCopy}
+        >
+            {t.passwordReset.password.toUpperCase()}
+        </PasswordInput>
+        <PasswordInput
+                bind:value={formValues.passwordConfirm}
+                error={formErrors.passwordConfirm}
+                autocomplete="new-password"
+                placeholder={t.passwordReset.passwordConfirm}
+                width={inputWidth}
+                {showCopy}
+        >
+            {t.passwordReset.passwordConfirm.toUpperCase()}
+        </PasswordInput>
+
+        <Button on:click={generate} width={btnWidth} level={3}>
+            {t.passwordReset.generate}
+        </Button>
+        <Button on:click={passwordReset} width={btnWidth} bind:isLoading level={2}>
+            {t.common.save}
+        </Button>
+
+        {#if success}
+            <div class="success">
+                {t.passwordReset.success1}
+                {t.passwordReset.success2}
+                <br>
+                {t.passwordReset.success3}
+                <br>
+                <a href={redirectUri || '/auth/v1/account'}>Link</a>
+            </div>
+        {/if}
+    {/if}
+
+    {#if err}
+        <div class="err">
+            {err}
+        </div>
+    {/if}
+</div>
+
+<LangSelector absolute/>
 
 <style>
     a {
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 55c640c22..d221644fd 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -76,7 +76,7 @@ export const EVENT_TYPES = [
     'UserPasswordReset',
     'Test',
 ]
-export const LANGUAGES = ['DE', 'EN', 'ZH', 'KO'];
+export const LANGUAGES = ['de', 'en', 'zh', 'ko'];
 export const TOKEN_ALGS = [
     'RS256',
     'RS384',
diff --git a/frontend/src/utils/dataFetching.js b/frontend/src/utils/dataFetching.js
index dc22d5c38..cf6e38532 100644
--- a/frontend/src/utils/dataFetching.js
+++ b/frontend/src/utils/dataFetching.js
@@ -1,4 +1,4 @@
-import {getCsrfToken} from "./helpers.js";
+import {getCsrfToken} from "./helpers";
 
 const HEADERS = {
     json: {
diff --git a/frontend/src/utils/dataFetchingAdmin.js b/frontend/src/utils/dataFetchingAdmin.js
index 66325c8d1..7b351a6fd 100644
--- a/frontend/src/utils/dataFetchingAdmin.js
+++ b/frontend/src/utils/dataFetchingAdmin.js
@@ -1,5 +1,5 @@
-import {getCsrfToken} from "./helpers.js";
-import {sleepAwait} from "$lib/utils/helpers.js";
+import {getCsrfToken} from "./helpers";
+import {sleepAwait} from "$lib/utils/helpers";
 
 const HEADERS = {
     'Content-Type': 'application/json',
diff --git a/frontend/src/utils/helpers.js b/frontend/src/utils/helpers.ts
similarity index 79%
rename from frontend/src/utils/helpers.js
rename to frontend/src/utils/helpers.ts
index e881c65d9..9942e475b 100644
--- a/frontend/src/utils/helpers.js
+++ b/frontend/src/utils/helpers.ts
@@ -13,17 +13,21 @@ import {
 import {decode, encode} from "base64-arraybuffer";
 import {getProvidersTemplate} from "./dataFetching.js";
 
-export function buildWebIdUri(userId) {
+export function buildWebIdUri(userId: string) {
     return `${window.location.origin}/auth/${userId}/profile#me`
 }
 
-export function extractFormErrors(err) {
-    return err.inner.reduce((acc, err) => {
+export function extractFormErrors(err: any): any {
+    return err.inner.reduce((acc: any, err: any) => {
         return {...acc, [err.path]: err.message};
     }, {});
 }
 
-export function isDefaultScope(name) {
+export function isBrowser() {
+    return typeof window !== 'undefined';
+}
+
+export function isDefaultScope(name: string) {
     return name === 'openid' || name === 'profile' || name === 'email' || name === 'groups'
         || name === 'address' || name === 'phone';
 }
@@ -35,7 +39,7 @@ export function isDefaultScope(name) {
  */
 export async function getAuthProvidersTemplate() {
     if ('production' === import.meta.env.MODE) {
-        const providerTpl = document.getElementsByTagName('template').namedItem('auth_providers').innerHTML;
+        const providerTpl = document?.getElementsByTagName('template')?.namedItem('auth_providers')?.innerHTML;
         if (providerTpl) {
             return JSON.parse(providerTpl);
         }
@@ -49,7 +53,7 @@ export async function getAuthProvidersTemplate() {
     }
 }
 
-export const redirectToLogin = (state) => {
+export const redirectToLogin = (state: string) => {
     getPkce(64, (error, {challenge, verifier}) => {
         if (!error) {
             localStorage.setItem(PKCE_VERIFIER, verifier);
@@ -67,7 +71,7 @@ export const redirectToLogout = () => {
     window.location.href = url;
 };
 
-export const saveCsrfToken = (csrf) => {
+export const saveCsrfToken = (csrf: string) => {
     localStorage.setItem(CSRF_TOKEN, csrf);
 }
 
@@ -75,15 +79,15 @@ export const getCsrfToken = () => {
     return localStorage.getItem(CSRF_TOKEN) || '';
 }
 
-export const saveIdToken = (token) => {
+export const saveIdToken = (token: string) => {
     localStorage.setItem(ID_TOKEN, token);
 }
 
-export const saveAccessToken = (token) => {
+export const saveAccessToken = (token: string) => {
     localStorage.setItem(ACCESS_TOKEN, token);
 }
 
-export const saveProviderToken = (token) => {
+export const saveProviderToken = (token: string) => {
     localStorage.setItem(PROVIDER_TOKEN, token);
 }
 export const getProviderToken = () => {
@@ -114,27 +118,27 @@ export const purgeStorage = () => {
     localStorage.removeItem(PROVIDER_TOKEN);
 }
 
-export function arrBufToBase64UrlSafe(buffer) {
+export function arrBufToBase64UrlSafe(buffer: ArrayBuffer) {
     let base64 = encode(buffer);
     const enc = {
         '+': '-',
         '/': '_',
         '=': ''
     }
-    return base64.replace(/[+/=]/g, (m) => enc[m])
+    return base64.replace(/[+/=]/g, m => enc[m as '+' | '/' | '='])
 }
 
-export function base64UrlSafeToArrBuf(base64url) {
+export function base64UrlSafeToArrBuf(base64url: string) {
     const dec = {
         '-': '+',
         '_': '/',
         '.': '='
     }
-    const base64 = base64url.replace(/[-_.]/g, (m) => dec[m])
+    const base64 = base64url.replace(/[-_.]/g, (m) => dec[m as '-' | '_' | '.'])
     return decode(base64);
 }
 
-export function eventColor(level) {
+export function eventColor(level: string) {
     switch (level) {
         case 'test':
             return '#b2b2b2';
@@ -150,12 +154,12 @@ export function eventColor(level) {
 }
 
 
-export const formatDateToDateInput = date => {
+export const formatDateToDateInput = (date: Date) => {
     return date.toISOString().slice(0, 16);
     // return date.toISOString().split('.')[0];
 }
 
-export const formatUtcTsFromDateInput = inputDate => {
+export const formatUtcTsFromDateInput = (inputDate: string) => {
     let d = Date.parse(inputDate);
     if (isNaN(d)) {
         return;
@@ -163,29 +167,29 @@ export const formatUtcTsFromDateInput = inputDate => {
     return d / 1000;
 }
 
-export const formatDateFromTs = (ts, fmtIso) => {
+export const formatDateFromTs = (ts: number, fmtIso: boolean) => {
     const utcOffsetMinutes = -new Date().getTimezoneOffset();
     const d = new Date((ts + utcOffsetMinutes * 60) * 1000);
 
-    let dd = d.getUTCDate();
+    let dd: number | string = d.getUTCDate();
     if (dd < 10) {
         dd = '0' + dd;
     }
-    let mm = d.getUTCMonth() + 1;
+    let mm: number | string = d.getUTCMonth() + 1;
     if (mm < 10) {
         mm = '0' + mm;
     }
     const yyyy = d.getUTCFullYear();
 
-    let hr = d.getUTCHours();
+    let hr: number | string = d.getUTCHours();
     if (hr < 10) {
         hr = '0' + hr;
     }
-    let mn = d.getUTCMinutes();
+    let mn: number | string = d.getUTCMinutes();
     if (mn < 10) {
         mn = '0' + mn;
     }
-    let sc = d.getUTCSeconds();
+    let sc: number | string = d.getUTCSeconds();
     if (sc < 10) {
         sc = '0' + sc;
     }
@@ -196,7 +200,13 @@ export const formatDateFromTs = (ts, fmtIso) => {
     return `${yyyy}/${mm}/${dd} ${hr}:${mn}:${sc}`;
 }
 
-export const generatePassword = (length, minLowerCase, minUpperCase, minDigit, minSpecial) => {
+export const generatePassword = (
+    length: number,
+    minLowerCase: number,
+    minUpperCase: number,
+    minDigit: number,
+    minSpecial: number,
+) => {
     const lowerCaseNeeded = minLowerCase || 1;
     const upperCaseNeeded = minUpperCase || 1;
     const digitNeeded = minDigit || 1;
@@ -252,7 +262,7 @@ export const generatePassword = (length, minLowerCase, minUpperCase, minDigit, m
 };
 
 // Returns a short random key, which can be used in components to identify them uniquely.
-export const getKey = (i) => {
+export const getKey = (i: number) => {
     let res = '';
 
     const target = i || 8;
@@ -269,13 +279,13 @@ export const getKey = (i) => {
 
 export const getQueryParams = () => {
     return new Proxy(new URLSearchParams(window.location.search), {
-        get: (searchParams, prop) => searchParams.get(prop),
+        get: (searchParams, prop) => searchParams.get(prop.toString()),
     });
 }
 
 // races a promise against a given timeout and throws an exception if exceeded
-export const promiseTimeout = (prom, time) => {
-    let timer;
+export const promiseTimeout = (prom: Promise<any>, time: number) => {
+    let timer: any;
     return Promise.race([
         prom,
         new Promise(
@@ -285,4 +295,4 @@ export const promiseTimeout = (prom, time) => {
 }
 
 // async sleep in ms
-export const sleepAwait = async (ms) => await new Promise(x => setTimeout(x, ms));
+export const sleepAwait = async (ms: number) => await new Promise(x => setTimeout(x, ms));
diff --git a/frontend/src/utils/webauthn.js b/frontend/src/utils/webauthn.js
index ddb093317..ec98b05d2 100644
--- a/frontend/src/utils/webauthn.js
+++ b/frontend/src/utils/webauthn.js
@@ -1,5 +1,5 @@
 import {webauthnAuthFinish, webauthnAuthStart} from "./dataFetching.js";
-import {arrBufToBase64UrlSafe, base64UrlSafeToArrBuf} from "./helpers.js";
+import {arrBufToBase64UrlSafe, base64UrlSafeToArrBuf} from "./helpers";
 
 export async function webauthnAuth(uid, data, errorMsg) {
     let res = await webauthnAuthStart(uid, data);
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 402970e13..555352a7c 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -30,7 +30,7 @@ const config = {
             '/auth/v1/oidc/callback': backend,
             '/auth/v1/oidc/certs': backend,
             '/auth/v1/oidc/device': backend,
-            '/auth/v1/oidc/logout': backend,
+            // '/auth/v1/oidc/logout': backend,
             '/auth/v1/oidc/rotate_jwk': backend,
             '/auth/v1/oidc/sessioninfo': backend,
             '/auth/v1/oidc/token': backend,
diff --git a/src/api/src/generic.rs b/src/api/src/generic.rs
index 7e080b908..d576fdb1b 100644
--- a/src/api/src/generic.rs
+++ b/src/api/src/generic.rs
@@ -1,18 +1,18 @@
-use crate::{Assets, ReqPrincipal};
-use actix_web::http::header::{HeaderValue, CONTENT_TYPE};
-use actix_web::http::{header, StatusCode};
+use crate::ReqPrincipal;
+use actix_web::http::header;
+use actix_web::http::header::HeaderValue;
 use actix_web::web::{Json, Query};
 use actix_web::{get, post, put, web, HttpRequest, HttpResponse, Responder};
 use chrono::Utc;
 use cryptr::EncKeys;
 use rauthy_api_types::generic::{
     AppVersionResponse, Argon2ParamsResponse, EncKeyMigrateRequest, EncKeysResponse,
-    HealthResponse, I18nContent, I18nRequest, LoginTimeResponse, PasswordHashTimesRequest,
-    PasswordPolicyRequest, PasswordPolicyResponse, SearchParams, SearchParamsType,
+    HealthResponse, LoginTimeResponse, PasswordHashTimesRequest, PasswordPolicyRequest,
+    PasswordPolicyResponse, SearchParams, SearchParamsType,
 };
 use rauthy_common::constants::{
-    APPLICATION_JSON, APP_START, HEADER_ALLOW_ALL_ORIGINS, HEADER_HTML, HEALTH_CHECK_DELAY_SECS,
-    IDX_LOGIN_TIME, RAUTHY_VERSION, SUSPICIOUS_REQUESTS_BLACKLIST, SUSPICIOUS_REQUESTS_LOG,
+    APP_START, HEADER_ALLOW_ALL_ORIGINS, HEALTH_CHECK_DELAY_SECS, IDX_LOGIN_TIME, RAUTHY_VERSION,
+    SUSPICIOUS_REQUESTS_BLACKLIST, SUSPICIOUS_REQUESTS_LOG,
 };
 use rauthy_common::utils::real_ip_from_req;
 use rauthy_error::ErrorResponse;
@@ -20,8 +20,6 @@ use rauthy_models::app_state::AppState;
 use rauthy_models::database::{Cache, DB};
 use rauthy_models::entity::api_keys::{AccessGroup, AccessRights};
 use rauthy_models::entity::app_version::LatestAppVersion;
-use rauthy_models::entity::auth_providers::AuthProviderTemplate;
-use rauthy_models::entity::colors::ColorEntity;
 use rauthy_models::entity::is_db_alive;
 use rauthy_models::entity::password::{PasswordHashTimes, PasswordPolicy};
 use rauthy_models::entity::pow::PowEntity;
@@ -29,235 +27,14 @@ use rauthy_models::entity::sessions::Session;
 use rauthy_models::entity::users::User;
 use rauthy_models::events::event::Event;
 use rauthy_models::events::ip_blacklist_handler::{IpBlacklist, IpBlacklistReq};
-use rauthy_models::i18n::account::I18nAccount;
-use rauthy_models::i18n::authorize::I18nAuthorize;
-use rauthy_models::i18n::device::I18nDevice;
-use rauthy_models::i18n::email_confirm_change_html::I18nEmailConfirmChangeHtml;
-use rauthy_models::i18n::error::I18nError;
-use rauthy_models::i18n::index::I18nIndex;
-use rauthy_models::i18n::logout::I18nLogout;
-use rauthy_models::i18n::password_reset::I18nPasswordReset;
-use rauthy_models::i18n::register::I18nRegister;
-use rauthy_models::i18n::SsrJson;
 use rauthy_models::language::Language;
-use rauthy_models::templates::{
-    AccountHtml, AdminApiKeysHtml, AdminAttributesHtml, AdminBlacklistHtml, AdminClientsHtml,
-    AdminConfigHtml, AdminDocsHtml, AdminGroupsHtml, AdminHtml, AdminRolesHtml, AdminScopesHtml,
-    AdminSessionsHtml, AdminUsersHtml, DeviceHtml, FedCMHtml, IndexHtml, ProvidersHtml,
-};
 use rauthy_service::{encryption, suspicious_request_block};
 use semver::Version;
-use std::borrow::Cow;
 use std::ops::{Add, Sub};
 use std::str::FromStr;
 use tracing::{error, info, warn};
 use validator::Validate;
 
-#[get("/")]
-pub async fn get_index(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let lang = Language::try_from(&req).unwrap_or_default();
-    let body = IndexHtml::build(&colors, &lang);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/{_:.*}")]
-pub async fn get_static_assets(
-    path: web::Path<String>,
-    accept_encoding: web::Header<header::AcceptEncoding>,
-) -> HttpResponse {
-    let path = path.into_inner();
-    let accept_encoding = accept_encoding.into_inner();
-
-    let mime = mime_guess::from_path(&path);
-    let (p, encoding) = if accept_encoding.contains(&"br".parse().unwrap()) {
-        (Cow::from(format!("{}.br", path)), "br")
-    } else if accept_encoding.contains(&"gzip".parse().unwrap()) {
-        (Cow::from(format!("{}.gz", path)), "gzip")
-    } else {
-        (Cow::from(path), "none")
-    };
-
-    match Assets::get(p.as_ref()) {
-        Some(content) => HttpResponse::Ok()
-            .insert_header(("cache-control", "max-age=2592000"))
-            .insert_header(("content-encoding", encoding))
-            .content_type(mime.first_or_octet_stream().as_ref())
-            .body(content.data.into_owned()),
-        None => {
-            // Since this may resolve to a sub url path of any length, we cannot now, which
-            // error template we need to serve -> just return not found
-            HttpResponse::NotFound().finish()
-        }
-    }
-}
-
-#[post("/i18n")]
-pub async fn post_i18n(
-    req: HttpRequest,
-    // no validation needed for I18nRequest
-    Json(payload): Json<I18nRequest>,
-) -> Result<HttpResponse, ErrorResponse> {
-    let lang = Language::try_from(&req).unwrap_or_default();
-    let body = match payload.content {
-        I18nContent::Authorize => I18nAuthorize::build(&lang).as_json(),
-        I18nContent::Account => I18nAccount::build(&lang).as_json(),
-        I18nContent::Device => I18nDevice::build(&lang).as_json(),
-        I18nContent::EmailChangeConfirm => I18nEmailConfirmChangeHtml::build(&lang).as_json(),
-        // Just return some default values for local dev -> dynamically built during prod
-        I18nContent::Error => {
-            I18nError::build_with(&lang, StatusCode::NOT_FOUND, Some("<empty>")).as_json()
-        }
-        I18nContent::Index => I18nIndex::build(&lang).as_json(),
-        I18nContent::Logout => I18nLogout::build(&lang).as_json(),
-        I18nContent::PasswordReset => I18nPasswordReset::build(&lang).as_json(),
-        I18nContent::Register => I18nRegister::build(&lang).as_json(),
-    };
-
-    Ok(HttpResponse::Ok()
-        .insert_header((CONTENT_TYPE, APPLICATION_JSON))
-        .body(body))
-}
-
-#[get("/account")]
-pub async fn get_account_html(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let lang = Language::try_from(&req).unwrap_or_default();
-    let providers = AuthProviderTemplate::get_all_json_template().await?;
-    let body = AccountHtml::build(&colors, &lang, providers);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin")]
-pub async fn get_admin_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/api_keys")]
-pub async fn get_admin_api_keys_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminApiKeysHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/attributes")]
-pub async fn get_admin_attr_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminAttributesHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/blacklist")]
-pub async fn get_admin_blacklist_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminBlacklistHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/clients")]
-pub async fn get_admin_clients_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminClientsHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/config")]
-pub async fn get_admin_config_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminConfigHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/docs")]
-pub async fn get_admin_docs_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminDocsHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/events")]
-pub async fn get_admin_events_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminUsersHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/groups")]
-pub async fn get_admin_groups_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminGroupsHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/providers")]
-pub async fn get_admin_providers_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = ProvidersHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/roles")]
-pub async fn get_admin_roles_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminRolesHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/scopes")]
-pub async fn get_admin_scopes_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminScopesHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/sessions")]
-pub async fn get_admin_sessions_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminSessionsHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/admin/users")]
-pub async fn get_admin_users_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = AdminUsersHtml::build(&colors);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/device")]
-pub async fn get_device_html(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let lang = Language::try_from(&req).unwrap_or_default();
-    let body = DeviceHtml::build(&colors, &lang);
-
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
-#[get("/fedcm")]
-pub async fn get_fed_cm_html() -> Result<HttpResponse, ErrorResponse> {
-    let colors = ColorEntity::find_rauthy().await?;
-    let body = FedCMHtml::build(&colors);
-    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
-}
-
 /// Check if the current session is valid
 #[utoipa::path(
     get,
@@ -660,10 +437,7 @@ pub async fn catch_all(
     }
 
     Ok(HttpResponse::MovedPermanently()
-        .insert_header((
-            header::LOCATION,
-            HeaderValue::from_str("/auth/v1/").unwrap(),
-        ))
+        .insert_header((header::LOCATION, HeaderValue::from_static("/auth/v1/")))
         .finish())
 }
 
diff --git a/src/api/src/html.rs b/src/api/src/html.rs
new file mode 100644
index 000000000..986f79d16
--- /dev/null
+++ b/src/api/src/html.rs
@@ -0,0 +1,192 @@
+use crate::Assets;
+use actix_web::http::header;
+use actix_web::{get, web, HttpRequest, HttpResponse};
+use rauthy_common::constants::HEADER_HTML;
+use rauthy_error::ErrorResponse;
+use rauthy_models::entity::auth_providers::AuthProviderTemplate;
+use rauthy_models::entity::colors::ColorEntity;
+use rauthy_models::language::Language;
+use rauthy_models::templates::{
+    AccountHtml, AdminApiKeysHtml, AdminAttributesHtml, AdminBlacklistHtml, AdminClientsHtml,
+    AdminConfigHtml, AdminDocsHtml, AdminGroupsHtml, AdminHtml, AdminRolesHtml, AdminScopesHtml,
+    AdminSessionsHtml, AdminUsersHtml, DeviceHtml, FedCMHtml, IndexHtml, ProvidersHtml,
+};
+use std::borrow::Cow;
+
+#[get("/{_:.*}")]
+pub async fn get_static_assets(
+    path: web::Path<String>,
+    accept_encoding: web::Header<header::AcceptEncoding>,
+) -> HttpResponse {
+    let path = path.into_inner();
+    let accept_encoding = accept_encoding.into_inner();
+
+    let mime = mime_guess::from_path(&path);
+    let (p, encoding) = if accept_encoding.contains(&"br".parse().unwrap()) {
+        (Cow::from(format!("{}.br", path)), "br")
+    } else if accept_encoding.contains(&"gzip".parse().unwrap()) {
+        (Cow::from(format!("{}.gz", path)), "gzip")
+    } else {
+        (Cow::from(path), "none")
+    };
+
+    match Assets::get(p.as_ref()) {
+        Some(content) => HttpResponse::Ok()
+            .insert_header(("cache-control", "max-age=2592000"))
+            .insert_header(("content-encoding", encoding))
+            .content_type(mime.first_or_octet_stream().as_ref())
+            .body(content.data.into_owned()),
+        None => {
+            // Since this may resolve to a sub url path of any length, we cannot now, which
+            // error template we need to serve -> just return not found
+            HttpResponse::NotFound().finish()
+        }
+    }
+}
+
+#[get("/")]
+pub async fn get_index(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let lang = Language::try_from(&req).unwrap_or_default();
+    let body = IndexHtml::build(&colors, &lang);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/account")]
+pub async fn get_account_html(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let lang = Language::try_from(&req).unwrap_or_default();
+    let providers = AuthProviderTemplate::get_all_json_template().await?;
+    let body = AccountHtml::build(&colors, &lang, providers);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin")]
+pub async fn get_admin_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/api_keys")]
+pub async fn get_admin_api_keys_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminApiKeysHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/attributes")]
+pub async fn get_admin_attr_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminAttributesHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/blacklist")]
+pub async fn get_admin_blacklist_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminBlacklistHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/clients")]
+pub async fn get_admin_clients_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminClientsHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/config")]
+pub async fn get_admin_config_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminConfigHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/docs")]
+pub async fn get_admin_docs_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminDocsHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/events")]
+pub async fn get_admin_events_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminUsersHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/groups")]
+pub async fn get_admin_groups_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminGroupsHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/providers")]
+pub async fn get_admin_providers_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = ProvidersHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/roles")]
+pub async fn get_admin_roles_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminRolesHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/scopes")]
+pub async fn get_admin_scopes_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminScopesHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/sessions")]
+pub async fn get_admin_sessions_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminSessionsHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/admin/users")]
+pub async fn get_admin_users_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = AdminUsersHtml::build(&colors);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/device")]
+pub async fn get_device_html(req: HttpRequest) -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let lang = Language::try_from(&req).unwrap_or_default();
+    let body = DeviceHtml::build(&colors, &lang);
+
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
+
+#[get("/fedcm")]
+pub async fn get_fed_cm_html() -> Result<HttpResponse, ErrorResponse> {
+    let colors = ColorEntity::find_rauthy().await?;
+    let body = FedCMHtml::build(&colors);
+    Ok(HttpResponse::Ok().insert_header(HEADER_HTML).body(body))
+}
diff --git a/src/api/src/lib.rs b/src/api/src/lib.rs
index f35f1b6e5..49bafd59e 100644
--- a/src/api/src/lib.rs
+++ b/src/api/src/lib.rs
@@ -25,6 +25,7 @@ pub mod events;
 pub mod fed_cm;
 pub mod generic;
 pub mod groups;
+pub mod html;
 pub mod oidc;
 pub mod openapi;
 pub mod roles;
diff --git a/src/bin/Cargo.toml b/src/bin/Cargo.toml
index 1424fd2ff..f61f198cb 100644
--- a/src/bin/Cargo.toml
+++ b/src/bin/Cargo.toml
@@ -35,6 +35,11 @@ tokio = { workspace = true }
 utoipa = { workspace = true }
 utoipa-swagger-ui = { workspace = true }
 
+[build-dependencies]
+rauthy-models = { path = "../models" }
+serde_json = { workspace = true }
+strum = { workspace = true }
+
 [dev-dependencies]
 rauthy-api-types = { path = "../api_types" }
 
diff --git a/src/bin/build.rs b/src/bin/build.rs
new file mode 100644
index 000000000..ffc4a10d1
--- /dev/null
+++ b/src/bin/build.rs
@@ -0,0 +1,32 @@
+// use rauthy_models::i18n_email::ui::I18n;
+// use rauthy_models::language::Language;
+// use std::fs;
+// use std::process::Command;
+// use strum::IntoEnumIterator;
+//
+fn main() {
+    //         let dir = "../../frontend/src/i18n_email";
+    //         println!("Building I18n JSON for UI DEV SSR in {}", dir);
+    //
+    //         fs::create_dir_all(dir).unwrap();
+    //         fs::write(
+    //             format!("{}/DO_NOT_EDIT.txt", dir),
+    //             r#"Do NOT edit the files in this directory.
+    //     These are automatically managed by the build script in 'src/bin/build.rs' and will be overwritten.
+    //             "#,
+    //         )
+    //         .unwrap();
+    //
+    //         for lang in Language::iter() {
+    //             let i18n_email = I18n::build(&lang);
+    //             let path = format!("{}/{}.json", dir, lang.as_str());
+    //             let json = serde_json::to_string(&i18n_email).unwrap();
+    //             fs::write(path, json).unwrap();
+    //         }
+    //
+    //         Command::new("git")
+    //             .arg("add")
+    //             .arg(format!("{dir}/*"))
+    //             .spawn()
+    //             .unwrap();
+}
diff --git a/src/bin/src/main.rs b/src/bin/src/main.rs
index e669aef4b..d2186fc33 100644
--- a/src/bin/src/main.rs
+++ b/src/bin/src/main.rs
@@ -15,8 +15,8 @@ use rauthy_common::utils::UseDummyAddress;
 use rauthy_common::{is_sqlite, password_hasher};
 use rauthy_handlers::openapi::ApiDoc;
 use rauthy_handlers::{
-    api_keys, auth_providers, blacklist, clients, events, fed_cm, generic, groups, oidc, roles,
-    scopes, sessions, themes, users,
+    api_keys, auth_providers, blacklist, clients, events, fed_cm, generic, groups, html, oidc,
+    roles, scopes, sessions, themes, users,
 };
 use rauthy_middlewares::csrf_protection::CsrfProtectionMiddleware;
 use rauthy_middlewares::ip_blacklist::RauthyIpBlacklistMiddleware;
@@ -395,27 +395,26 @@ async fn actix_main(app_state: web::Data<AppState>) -> std::io::Result<()> {
                             .service(events::post_events)
                             .service(events::sse_events)
                             .service(events::post_event_test)
-                            .service(generic::get_index)
-                            .service(generic::get_account_html)
-                            .service(generic::get_admin_html)
-                            .service(generic::get_admin_api_keys_html)
-                            .service(generic::get_admin_attr_html)
-                            .service(generic::get_admin_blacklist_html)
-                            .service(generic::get_admin_clients_html)
-                            .service(generic::get_admin_config_html)
-                            .service(generic::get_admin_docs_html)
-                            .service(generic::get_admin_events_html)
-                            .service(generic::get_admin_groups_html)
-                            .service(generic::get_admin_roles_html)
-                            .service(generic::get_admin_scopes_html)
-                            .service(generic::get_admin_providers_html)
-                            .service(generic::get_admin_sessions_html)
-                            .service(generic::get_admin_users_html)
-                            .service(generic::get_device_html)
-                            .service(generic::get_fed_cm_html)
+                            .service(html::get_index)
+                            .service(html::get_account_html)
+                            .service(html::get_admin_html)
+                            .service(html::get_admin_api_keys_html)
+                            .service(html::get_admin_attr_html)
+                            .service(html::get_admin_blacklist_html)
+                            .service(html::get_admin_clients_html)
+                            .service(html::get_admin_config_html)
+                            .service(html::get_admin_docs_html)
+                            .service(html::get_admin_events_html)
+                            .service(html::get_admin_groups_html)
+                            .service(html::get_admin_roles_html)
+                            .service(html::get_admin_scopes_html)
+                            .service(html::get_admin_providers_html)
+                            .service(html::get_admin_sessions_html)
+                            .service(html::get_admin_users_html)
+                            .service(html::get_device_html)
+                            .service(html::get_fed_cm_html)
                             .service(generic::get_auth_check)
                             .service(generic::get_auth_check_admin)
-                            .service(generic::post_i18n)
                             .service(generic::post_update_language)
                             .service(generic::get_version)
                             .service(generic::get_whoami)
@@ -523,7 +522,7 @@ async fn actix_main(app_state: web::Data<AppState>) -> std::io::Result<()> {
                             .service(oidc::get_well_known)
                             .service(generic::get_health)
                             .service(generic::get_ready)
-                            .service(generic::get_static_assets),
+                            .service(html::get_static_assets),
                     ),
             );
 
diff --git a/src/models/src/email.rs b/src/models/src/email.rs
index a165b682c..7c7aeeda6 100644
--- a/src/models/src/email.rs
+++ b/src/models/src/email.rs
@@ -1,12 +1,11 @@
 use crate::app_state::AppState;
 use crate::entity::magic_links::MagicLink;
 use crate::entity::users::User;
-use crate::i18n::email_change_info_new::I18nEmailChangeInfoNew;
-use crate::i18n::email_confirm_change::I18nEmailConfirmChange;
-use crate::i18n::email_password_new::I18nEmailPasswordNew;
-use crate::i18n::email_reset::I18nEmailReset;
-use crate::i18n::email_reset_info::I18nEmailResetInfo;
-use crate::i18n::SsrJson;
+use crate::i18n_email::change_info_new::I18nEmailChangeInfoNew;
+use crate::i18n_email::confirm_change::I18nEmailConfirmChange;
+use crate::i18n_email::password_new::I18nEmailPasswordNew;
+use crate::i18n_email::reset::I18nEmailReset;
+use crate::i18n_email::reset_info::I18nEmailResetInfo;
 use actix_web::web;
 use askama_actix::Template;
 use chrono::DateTime;
@@ -55,7 +54,7 @@ pub struct EMailChangeInfoNewHtml<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub header: &'a str,
     pub click_link: &'a str,
     pub validity: &'a str,
@@ -69,7 +68,7 @@ pub struct EMailChangeInfoNewTxt<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub header: &'a str,
     pub click_link: &'a str,
     pub validity: &'a str,
@@ -102,7 +101,7 @@ pub struct EMailResetHtml<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub header: &'a str,
     pub click_link: &'a str,
     pub text: &'a str,
@@ -118,7 +117,7 @@ pub struct EmailResetTxt<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub header: &'a str,
     pub click_link: &'a str,
     pub text: &'a str,
@@ -133,7 +132,7 @@ pub struct EMailResetInfoHtml<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub expires_1: &'a str,
     pub expires_2: &'a str,
     pub update: &'a str,
@@ -146,7 +145,7 @@ pub struct EmailResetInfoTxt<'a> {
     pub email_sub_prefix: &'a str,
     pub link: &'a str,
     pub exp: &'a str,
-    // i18n
+    // i18n_email
     pub expires_1: &'a str,
     pub expires_2: &'a str,
     pub update: &'a str,
diff --git a/src/models/src/entity/theme.rs b/src/models/src/entity/theme.rs
index 5130a4d79..605d4f864 100644
--- a/src/models/src/entity/theme.rs
+++ b/src/models/src/entity/theme.rs
@@ -218,7 +218,7 @@ impl ThemeCssFull {
     pub async fn etag_update(client_id: &str) -> Result<String, ErrorResponse> {
         // TODO get "real" etag from DB in that case to avoid re-fetches between restarts.
         // timestamp is just a placeholder for now
-        let etag = Utc::now().timestamp().to_string();
+        let etag = BUILD_TIME.timestamp().to_string();
         DB::client()
             .put_bytes(
                 Cache::Etag,
diff --git a/src/models/src/i18n/account.rs b/src/models/src/i18n/account.rs
deleted file mode 100644
index 929900082..000000000
--- a/src/models/src/i18n/account.rs
+++ /dev/null
@@ -1,606 +0,0 @@
-use crate::i18n::password_policy::I18nPasswordPolicy;
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nAccount<'a> {
-    account: &'a str,
-    acc_type: &'a str,
-    acc_type_passkey_text_1: &'a str,
-    acc_type_passkey_text_2: &'a str,
-    acc_type_passkey_text_3: &'a str,
-    access_exp: &'a str,
-    access_renew: &'a str,
-    access_renew_delete: &'a str,
-    birthdate: &'a str,
-    cancel: &'a str,
-    city: &'a str,
-    change_password: &'a str,
-    convert_account: &'a str,
-    convert_account_p_1: &'a str,
-    country: &'a str,
-    device_id: &'a str,
-    device_name: &'a str,
-    devices: &'a str,
-    devices_desc: &'a str,
-    email: &'a str,
-    email_update_confirm: &'a str,
-    email_verified: &'a str,
-    family_name: &'a str,
-    federated_convert_password_1: &'a str,
-    federated_convert_password_2: &'a str,
-    generate_random: &'a str,
-    given_name: &'a str,
-    groups: &'a str,
-    invalid_input: &'a str,
-    key: &'a str,
-    key_unique: &'a str,
-    last_login: &'a str,
-    mfa: I18nAccountMfa<'a>,
-    mfa_activated: &'a str,
-    nav_info: &'a str,
-    nav_edit: &'a str,
-    nav_mfa: &'a str,
-    nav_password: &'a str,
-    nav_logout: &'a str,
-    never: &'a str,
-    optional_values: &'a str,
-    password_confirm: &'a str,
-    password_curr: &'a str,
-    password_curr_req: &'a str,
-    password_new: &'a str,
-    password_new_req: &'a str,
-    password_no_match: &'a str,
-    password_expiry: &'a str,
-    password_policy: I18nPasswordPolicy<'a>,
-    password_policy_follow: &'a str,
-    password_reset: &'a str,
-    phone: &'a str,
-    provider_link: &'a str,
-    provider_link_desc: &'a str,
-    provider_unlink: &'a str,
-    provider_unlink_desc: &'a str,
-    reg_date: &'a str,
-    reg_ip: &'a str,
-    roles: &'a str,
-    save: &'a str,
-    street: &'a str,
-    user: &'a str,
-    user_created: &'a str,
-    user_enabled: &'a str,
-    user_expiry: &'a str,
-    user_verified_tooltip: &'a str,
-    valid_email: &'a str,
-    valid_given_name: &'a str,
-    valid_family_name: &'a str,
-    web_id_desc: &'a str,
-    web_id_desc_data: &'a str,
-    web_id_expert_mode: &'a str,
-    zip: &'a str,
-}
-
-impl SsrJson for I18nAccount<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nAccount<'_> {
-    fn build_en() -> Self {
-        Self {
-            account: "User Account",
-            acc_type: "Account Type",
-            acc_type_passkey_text_1: r#"This account is currently a passkey only account.
-This means, that you do not have any password, because you don't need one."#,
-            acc_type_passkey_text_2: r#"You can convert your account and add a password. But keep
-in mind, that this implies, that you need to verify each new device with the password additionally.
-You then cannot just log in on any device, where you have not entered the password beforehand at
-least once."#,
-            acc_type_passkey_text_3: "Do you want to convert your account and add a password?",
-            access_exp: "Access Expires",
-            access_renew: "Access Renew Until",
-            access_renew_delete: "Delete the possibility to renew",
-            birthdate: "Birthdate",
-            cancel: "Cancel",
-            city: "City",
-            change_password: "Change Password",
-            convert_account: "Convert Account",
-            convert_account_p_1: r#"You can convert your account to a Passkey-Only account.
-This conversion deletes your password and you can and must only ever login with your registered
-passkeys. Keep in mind, that only passkeys with the additional User Verification will be accepted.
-If you passkeys support this, you will find a small symbol behind the name of the key on the 'MFA'
-page."#,
-            country: "Country",
-            device_id: "ID",
-            device_name: "Name",
-            devices: "Devices",
-            devices_desc: "Devices linked to this account",
-            email: "E-Mail",
-            email_update_confirm: r#"The E-Mail address has not been updated yet. A message has been
-sent out to your new address. You need to click the confirmation link inside it. Once it has been
-confirmed, your new address will be updated."#,
-            email_verified: "E-Mail verified",
-            family_name: "Family Name",
-            federated_convert_password_1: r#"You have a federated account. This means you log in
-by using an external authentication provider. Your current provider is:"#,
-            federated_convert_password_2: r#"You can request a password reset via email. This will
-add a local password to your account upon completion. You would then be able to log in via your
-external provider or by local password. Do you want to request a reset?"#,
-            generate_random: "Generate Randomly",
-            given_name: "Given Name",
-            groups: "Groups",
-            invalid_input: "Invalid Input",
-            key: "Key",
-            key_unique: "Key must be unique",
-            last_login: "Last Login",
-            mfa: I18nAccountMfa::build_en(),
-            mfa_activated: "MFA activated",
-            nav_info: "Info",
-            nav_edit: "Edit",
-            nav_mfa: "MFA",
-            nav_password: "Password",
-            nav_logout: "Logout",
-            never: "Never",
-            optional_values: "Optional Values",
-            password_confirm: "Confirm Password",
-            password_curr: "Current Password",
-            password_curr_req: "Current password is required",
-            password_new: "New Password",
-            password_new_req: "New password is required",
-            password_no_match: "Password verification is required",
-            password_expiry: "Password expiry",
-            password_policy: I18nPasswordPolicy::build_en(),
-            password_policy_follow: "You must follow the password policy",
-            password_reset: "Password Reset",
-            phone: "Phone",
-            provider_link: "Federate Account",
-            provider_link_desc: r#"You can link this account to one of the following login providers.
-After activating this function, you will be redirected to the login page of the chosen one.
-After a successful login and if the email matches, your account will be linked."#,
-            provider_unlink: "Unlink Federation",
-            provider_unlink_desc: r#"Only if you have set up at least a password or a passkey for this
-account, you can unlink it from the upstream provider."#,
-            reg_date: "Registration Date",
-            reg_ip: "Registration from IP",
-            roles: "Roles",
-            save: "Save",
-            street: "Street",
-            user: "User",
-            user_created: "User Created",
-            user_enabled: "User Enabled",
-            user_expiry: "User Expires",
-            user_verified_tooltip: "Secured with fingerprint or PIN",
-            valid_email: "Invalid E-Mail format",
-            valid_given_name: "Your given name should have 1 - 32 non-special characters",
-            valid_family_name: "Your family name should have 1 - 32 non-special characters",
-            web_id_desc: r#"You can configure the fields that should be exposed with your WebID.
-This is a feature used by some networks for decentralized logins. If you do not know what it is,
-you most probably do not need it."#,
-            web_id_desc_data:
-                "You can add custom data fields to your WebID in valid FOAF Vocabulary",
-            web_id_expert_mode: "Enable Expert Mode",
-            zip: "ZIP",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            account: "Benutzer Account",
-            acc_type: "Account Typ",
-            acc_type_passkey_text_1: r#"Dies ist ein "Passkey-Only" Account. Das bedeutet, dass
-dieser Account kein Passwort hat und auch keines benötigt."#,
-            acc_type_passkey_text_2: r#"Der Account kann in einen Passwort-Account umgewandelt
-werden. Das würde allerdings bedeuten, dass ein Login auf einem neuen Gerät ohne vorherige, zumindest
-einmalige zusätzliche Verifizierung des Passwortes nicht mehr möglich sein wird."#,
-            acc_type_passkey_text_3:
-                "Soll dieser Account gewandelt und ein Passwort hinzugefügt werden?",
-            access_exp: "Zugang erlischt",
-            access_renew: "Zugang Erneuerung bis",
-            access_renew_delete: "Möglichkeit zur Erneuerung löschen",
-            birthdate: "Geburtsdatum",
-            cancel: "Abbrechen",
-            city: "Stadt",
-            change_password: "Passwort wechseln",
-            convert_account: "Account Umwandeln",
-            convert_account_p_1: r#"Dieser Account kann in einen Passkey-Only Account umgewandelt
-werden. Diese Umwandling löscht das Passwort und erlaubt den alleinigen Login mit den registrieren
-Passkeys. Nur Passkeys mit zusätzlicher Benutzerverifizierung werden akzeptiert. Diese sind auf der
-'MFA' Seite durch das zusätzliche Symbol hinter dem Passkey Namen gekennzeichnet."#,
-            country: "Land",
-            device_id: "ID",
-            device_name: "Name",
-            devices: "Geräte",
-            devices_desc: "Mit diesem Account verknüpfte Geräte",
-            email: "E-Mail",
-            email_update_confirm: r#"Die E-Mail Adresse wurde noch nicht aktualisiert. Eine Nachricht
-mit einem Bestätigungslink wurde an die neue Adresse geschickt. Das Update muss über den
-enthaltenen Link bestätigt werden. Nach der Bestätigung wird die neue Adresse gesetzt."#,
-            email_verified: "E-Mail verifiziert",
-            family_name: "Nachname",
-            federated_convert_password_1: r#"Dies ist ein verknüpfter Account. Das bedeutet, dass
-der Login via externem Provider zur Authenzifizierung geschieht. Der derzeitige Provider ist:"#,
-            federated_convert_password_2: r#"Es kann ein Passwort Reset via E-Mail angefordert
-werden. Das würde nach Abschluss diesem Account ein lokales Passwort hinzufügen. Danach wäre der
-Login entweder per externem Provider oder lokalem Password möglich. Passwort Reset anfordern?"#,
-            generate_random: "Zufällig generiert",
-            given_name: "Vorname",
-            groups: "Gruppen",
-            invalid_input: "Ungültige Eingaben",
-            key: "Schlüssel",
-            key_unique: "Schlüssel muss einzigartig sein",
-            last_login: "Letzter Login",
-            mfa: I18nAccountMfa::build_de(),
-            mfa_activated: "MFA aktiviert",
-            nav_info: "Info",
-            nav_edit: "Editieren",
-            nav_mfa: "MFA",
-            nav_password: "Passwort",
-            nav_logout: "Logout",
-            never: "Niemals",
-            optional_values: "Optionale Angaben",
-            password_confirm: "Passwort bestätigen",
-            password_curr: "Derzeitiges Passwort",
-            password_curr_req: "Derzeitiges Passwort ist notwendig",
-            password_new: "Neues Passwort",
-            password_new_req: "Neues Passwort ist notwendig",
-            password_no_match: "Passwörter stimmen nicht überein",
-            password_expiry: "Passwort Ablauf",
-            password_policy: I18nPasswordPolicy::build_de(),
-            password_policy_follow: "Befolgen Sie die Passwort Regeln",
-            password_reset: "Passwort Reset",
-            phone: "Telefon",
-            provider_link: "Account Verbinden",
-            provider_link_desc: r#"Dieser Account kann mit einem der folgenden Login Provider
-verbunden werden. Nach der Aktivierung des Prozesses wird eine Weiterleitung auf die Login Seite
-des gewählten Providers ausgelöst. Nach erfolgreichem Login und bei Übereinstimmung der E-Mail
-Adressen wird dieser Account verknüpft."#,
-            provider_unlink: "Verbindung Trennen",
-            provider_unlink_desc: r#"Nur wenn mindestens ein Passwort oder ein Passkey für diesen
-Account gesetzt ist, kann die Verbindung zum Provider gelöst werden."#,
-            reg_date: "Datum der Registrierung",
-            reg_ip: "Registrierung von IP",
-            roles: "Rollen",
-            save: "Speichern",
-            street: "Straße",
-            user: "Benutzer",
-            user_created: "Benutzer erstellt",
-            user_enabled: "Benutzer Aktiviert",
-            user_expiry: "Benutzer Ablauf",
-            user_verified_tooltip: "Abgesichert durch Fingerabdruck oder PIN",
-            valid_email: "Gültige E-Mail Adresse",
-            valid_given_name: "Vorname, 1 - 32 Buchstaben, keine Sonderzeichen",
-            valid_family_name: "Nachname, 1 - 32  Buchstaben, keine Sonderzeichen",
-            web_id_desc: r#"Hier können Sie die Felder festlegen, die über Ihre WebID veröffentlicht
-werden. Dies ist ein Feature, was von manchen Netzwerken für dezentrale Logins genutzt wird.
-Sollten Sie nicht wissen, was die WebID ist, brauchen Sie sie höchstwahrscheinlich nicht."#,
-            web_id_desc_data: r#"Sie können eigene Daten zu Ihrer WebID in gültigem FOAF Vokabular
-hinzufügen:"#,
-            web_id_expert_mode: "Expertenmodus aktivieren",
-            zip: "PLZ",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            account: "用户账户",
-            acc_type: "账户类型",
-            acc_type_passkey_text_1: r#"此账户目前为仅密钥登录账户。
-因此，此账户没有密码，也无需设置密码。"#,
-            acc_type_passkey_text_2: r#"您可以转换此账户并添加密码。
-但请注意，调整后在新设备上登录时需额外进行密码验证。
-如果您没有事先输入过至少一次密码，您将无法在任何设备上登录。"#,
-            acc_type_passkey_text_3: "您想要转换您的账户并添加一个密码吗？",
-            access_exp: "过期",
-            access_renew: "续期至",
-            access_renew_delete: "禁止续期",
-            birthdate: "生日",
-            cancel: "取消",
-            city: "城市",
-            change_password: "更改密码",
-            convert_account: "转换账户",
-            convert_account_p_1: r#"您可以将您的账户转换为仅密钥登陆账户。
-此转换将删除您的密码，您将仅能够通过注册的密钥进行登陆。
-请注意，只有支持额外用户验证的密钥可被用于登陆。
-如果您的密钥支持用户验证，您可以在“MFA”页面中，密钥名称的后面看到一个符号。"#,
-            country: "国家",
-            device_id: "ID",
-            device_name: "名称",
-            devices: "设备",
-            devices_desc: "链接到此账户的设备",
-            email: "电子邮箱",
-            email_update_confirm: r#"电子邮件地址未被更新。我们已向您的新邮箱发送了一封消息。
-您需要点击其中的确认链接，电子邮件地址将在被确认后更新。"#,
-            email_verified: "已验证电子邮箱",
-            family_name: "姓",
-            federated_convert_password_1: r#"您有一个联合账户。
-这意味着您是通过外部鉴权提供者登陆的。您当前的提供者是："#,
-            federated_convert_password_2: r#"您可以通过电子邮件请求密码重置。这将向您的本地账户添加密码，
-之后您可以通过本地密码或您的外部提供者进行登陆。您想要请求密码重置吗？"#,
-            generate_random: "随机生成",
-            given_name: "名",
-            groups: "组",
-            invalid_input: "无效输入",
-            key: "密钥",
-            key_unique: "密钥必须是唯一的",
-            last_login: "最后登录",
-            mfa: I18nAccountMfa::build_zh_hans(),
-            mfa_activated: "多因子认证",
-            nav_info: "信息",
-            nav_edit: "编辑",
-            nav_mfa: "多因子认证",
-            nav_password: "密码",
-            nav_logout: "退出登录",
-            never: "从不",
-            optional_values: "可选项",
-            password_confirm: "确认密码",
-            password_curr: "当前密码",
-            password_curr_req: "当前密码必填。",
-            password_new: "新密码",
-            password_new_req: "新密码必填",
-            password_no_match: "密码验证必填。",
-            password_expiry: "密码过期",
-            password_policy: I18nPasswordPolicy::build_zh_hans(),
-            password_policy_follow: "密码不符合要求。",
-            password_reset: "重置密码",
-            phone: "手机",
-            provider_link: "联合账户",
-            provider_link_desc: r#"您可以将此账户连接到下列登陆提供者之一。
-激活此功能后，您将被重定向至所选提供者的登陆页面。在成功登陆后，如果电子邮件匹配，您的账户将被连接。"#,
-            provider_unlink: "取消联合",
-            provider_unlink_desc: r#"仅当您已设置至少一个密码或登陆密钥后，您才能和登陆提供者取消连接。"#,
-            reg_date: "注册日期",
-            reg_ip: "注册IP地址",
-            roles: "角色",
-            save: "保存",
-            street: "街道",
-            user: "用户",
-            user_created: "创建于",
-            user_enabled: "启用",
-            user_expiry: "过期",
-            user_verified_tooltip: "指纹或PIN保护",
-            valid_email: "无效电子邮箱格式",
-            valid_given_name: "您的名字需要有2-32个非特殊字符",
-            valid_family_name: "您的姓氏需要有2-32个非特殊字符",
-            web_id_desc: r#"您可以选择哪些字段能够通过WebID发布。
-WebID被一些网络用于去中心化登陆。如果您不知道这是什么，您通常不需要选择。"#,
-            web_id_desc_data: "您可以以FOAF词汇格式向您的 WebID 添加自定义数据字段",
-            web_id_expert_mode: "启用专家模式",
-            zip: "邮政编码",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            account: "사용자 계정",
-            acc_type: "계정 종류",
-            acc_type_passkey_text_1: r#"이 계정은 현재 패스키 전용 계정입니다.
-즉, 비밀번호가 필요하지 않으므로, 비밀번호가 전혀 없다는 뜻입니다."#,
-            acc_type_passkey_text_2: r#"계정을 전환하고 비밀번호를 추가할 수 있습니다.
-다만, 이렇게 하면 새 기기를 인증할 때마다 추가적으로 비밀번호 인증을 해야 한다는 것을 명심해 주세요.
-한 번도 비밀번호를 입력한 적이 없는 기기에서는 바로 로그인할 수 없습니다."#,
-            acc_type_passkey_text_3: "계정을 전환하고 비밀번호를 추가하겠습니까?",
-            access_exp: "접근 만료",
-            access_renew: "접근 갱신 기한",
-            access_renew_delete: "갱신할 가능성을 제거",
-            birthdate: "생년월일",
-            cancel: "취소",
-            city: "도시",
-            change_password: "비밀번호 변경",
-            convert_account: "계정 전환",
-            convert_account_p_1: r#"계정을 패스키 전용 계정으로 전환할 수 있습니다.
-이 전환은 비밀번호를 삭제하며, 등록된 패스키를 사용해서만 로그인할 수 있습니다.
-추가적인 사용자 인증이 가능한 패스키만 허용된다는 점을 명심해 주세요.
-패스키가 지원한다면, 'MFA' 페이지에서 키 이름 뒤에 작은 표시가 있는 것을 찾을 수 있을 겁니다."#,
-            country: "국가",
-            device_id: "아이디",
-            device_name: "이름",
-            devices: "기기",
-            devices_desc: "이 계정에 연결된 기기",
-            email: "이메일",
-            email_update_confirm: r#"아직 이메일 주소가 변경되지 않았습니다. 새 주소로 메시지가 전송되었습니다.
-내부에 있는 승인 링크를 클릭해야 합니다. 승인되면 이메일 주소가 새 주소로 변경될 겁니다."#,
-            email_verified: "이메일 인증 여부",
-            family_name: "성",
-            federated_convert_password_1: r#"페더레이션 계정을 가지고 있습니다. 즉, 외부 인증 제공자를 사용하여
-로그인한다는 것을 의미합니다. 현재 제공자는 다음과 같습니다:"#,
-            federated_convert_password_2: r#"이메일을 통해 비밀번호 초기화를 요청할 수 있습니다. 완료하면 내부적인
-비밀번호가 계정에 추가될 겁니다. 그러면 외부 제공자 또는 내부적인 비밀번호를 통하여 로그인할 수 있습니다. 초기화를 요청하겠습니까?"#,
-            generate_random: "무작위로 생성",
-            given_name: "이름",
-            groups: "그룹",
-            invalid_input: "유효하지 않은 입력입니다.",
-            key: "키",
-            key_unique: "키는 고유해야 합니다.",
-            last_login: "마지막 로그인 일",
-            mfa: I18nAccountMfa::build_ko(),
-            mfa_activated: "MFA 활성화 여부",
-            nav_info: "정보",
-            nav_edit: "수정",
-            nav_mfa: "MFA",
-            nav_password: "비밀번호",
-            nav_logout: "로그아웃",
-            never: "무기한",
-            optional_values: "선택 항목",
-            password_confirm: "비밀번호 확인",
-            password_curr: "현재 비밀번호",
-            password_curr_req: "현재 비밀번호가 필요합니다.",
-            password_new: "새 비밀번호",
-            password_new_req: "새 비밀번호가 필요합니다.",
-            password_no_match: "비밀번호 확인이 필요합니다.",
-            password_expiry: "비밀번호 만료일",
-            password_policy: I18nPasswordPolicy::build_ko(),
-            password_policy_follow: "비밀번호 정책을 준수해야 합니다.",
-            password_reset: "비밀번호 초기화",
-            phone: "전화번호",
-            provider_link: "페더레이션 계정",
-            provider_link_desc: r#"이 계정은 다음 중 하나의 로그인 제공자에 연결할 수 있습니다.
-이 기능을 활성화하면, 선택한 것의 로그인 페이지로 리다이렉트될 겁니다. 성공적으로 로그인하고 이메일이 일치하면, 계정이 연결될 겁니다."#,
-            provider_unlink: "페더레이션 해제",
-            provider_unlink_desc: r#"이 계정에 최소 하나의 비밀번호 또는 패스키를 설정하면, 상위 제공자로부터 연결을 해제할 수 있습니다."#,
-            reg_date: "가입일",
-            reg_ip: "IP에서 가입",
-            roles: "역할",
-            save: "저장",
-            street: "주소",
-            user: "사용자",
-            user_created: "사용자 생성일",
-            user_enabled: "사용자 활성화 여부",
-            user_expiry: "사용자 만료",
-            user_verified_tooltip: "지문 또는 PIN을 통해 보호",
-            valid_email: "유효하지 않은 이메일 형식입니다.",
-            valid_given_name: "이름은 특수문자를 제외한 1자에서 32자이어야 합니다.",
-            valid_family_name: "성은 특수문자를 제외한 1자에서 32자이어야 합니다.",
-            web_id_desc: r#"WebID와 함께 노출할 항목을 설정할 수 있습니다.
-이 기능은 몇몇 탈중앙화된 로그인 네트워크에서 사용됩니다. 이것이 무엇인지 모르면, 대체로 필요하지 않을 것입니다."#,
-            web_id_desc_data:
-                "WebID에서 유효한 FOAF 어휘를 사용자 지정 데이터 항목에 추가할 수 있습니다",
-            web_id_expert_mode: "전문가 모드 활성화",
-            zip: "우편번호",
-        }
-    }
-}
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nAccountMfa<'a> {
-    p_1: &'a str,
-    p_2: &'a str,
-
-    delete: &'a str,
-    error_reg: &'a str,
-    invalid_key_used: &'a str,
-    last_used: &'a str,
-    no_key: &'a str,
-    register: &'a str,
-    register_new: &'a str,
-    registerd: &'a str,
-    registerd_keys: &'a str,
-    passkey_name: &'a str,
-    passkey_name_err: &'a str,
-    test: &'a str,
-    test_error: &'a str,
-    test_success: &'a str,
-}
-
-impl SsrJson for I18nAccountMfa<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nAccountMfa<'_> {
-    pub(crate) fn build_en() -> Self {
-        Self {
-            p_1: "If you plan on using your MFA key with multiple systems like Windows and \
-            Android, you should do the registration with Android.",
-            p_2: "Android is the platform with the least supported features for the passwordless \
-            technology. Keys you register with Android work elsewhere too. However, this does not \
-            apply the other way around.",
-
-            delete: "Delete",
-            error_reg: "Error starting the Registration process",
-            invalid_key_used: "Invalid Key used",
-            last_used: "Last used",
-            no_key: "No Security key registered on this slot",
-            register: "Register",
-            register_new: "Register New Key",
-            registerd: "Registered",
-            registerd_keys: "Registered Keys",
-            passkey_name: "Passkey Name",
-            passkey_name_err: "2 - 32 non-special characters",
-            test: "Test",
-            test_error: "Error starting the Test",
-            test_success: "Test successful",
-        }
-    }
-
-    pub(crate) fn build_de() -> Self {
-        Self {
-            p_1: "Wenn Sie mehrere Systeme parallel nutzen möchten, wie z.B. Windows und Android, \
-            sollten Sie die Registrierung mit Android durchführen.",
-            p_2: "Android ist diejenige Plattform, die derzeit die wenigsten Features der \
-            passwortlosen Technologie unterstützt. Schlüssel, die dort registriert werden, \
-            funktionieren auf anderen Geräten gleichermaßen. Dies gilt jedoch nicht andersherum.",
-
-            delete: "Löschen",
-            error_reg: "Fehler beim Starten der Registrierung",
-            invalid_key_used: "Ungültiger Sicherheitsschlüssel benutzt",
-            last_used: "Zuletzt genutzt",
-            no_key: "Es wurde in diesem Speicher noch kein Sicherheitsschlüssel registriert",
-            register: "Registrieren",
-            register_new: "Neuen Key Registrieren",
-            registerd: "Registriert",
-            registerd_keys: "Registrierte Keys",
-            passkey_name: "Passkey Name",
-            passkey_name_err: "2 - 32 Buchstaben, keine Sonderzeichen",
-            test: "Test",
-            test_error: "Fehler beim Starten des Tests",
-            test_success: "Test erfolgreich",
-        }
-    }
-
-    pub(crate) fn build_zh_hans() -> Self {
-        Self {
-            p_1: "如果您计划在多个系统上使用您的MFA密钥，例如Windows和Android，您应该在Android上进行注册。",
-            p_2: "Android是支持无密码登陆特性最少的平台。能够在Android上进行注册的密钥也应能在其他平台上使用。",
-
-            delete: "删除",
-            error_reg: "开始注册过程时出现错误。",
-            invalid_key_used: "使用的密钥无效",
-            last_used: "最后使用",
-            no_key: "此槽位没有已注册的安全密钥",
-            register: "注册",
-            register_new: "注册新的密钥",
-            registerd: "注册时间",
-            registerd_keys: "已注册的密钥",
-            passkey_name: "密钥名称",
-            passkey_name_err: "需要名称需要有2-32个非特殊字符",
-            test: "测试",
-            test_error: "开始测试时出现错误",
-            test_success: "测试成功！",
-        }
-    }
-
-    pub(crate) fn build_ko() -> Self {
-        Self {
-            p_1: "윈도우와 안드로이드와 같은 여러 시스템에서 MFA 키를 사용하려면, 안드로이드에서 등록해야 합니다.",
-            p_2: "안드로이드는 비밀번호 없이 인증하는 기술을 가장 적게 지원하는 플랫폼 중 하나입니다. \
-            안드로이드에서 등록한 키는 다른 곳에서도 작동합니다. 그러나, 그 반대로는 적용되지 않습니다.",
-
-            delete: "삭제",
-            error_reg: "가입 절차 시작 중 오류가 발생했습니다.",
-            invalid_key_used: "유효하지 않은 키가 사용되었습니다.",
-            last_used: "마지막 사용",
-            no_key: "이 슬롯에 등록된 보안 키가 없습니다.",
-            register: "등록",
-            register_new: "새 키 등록",
-            registerd: "등록되었습니다.",
-            registerd_keys: "등록된 키",
-            passkey_name: "패스키 이름",
-            passkey_name_err: "특수문자를 제외한 2자에서 32자이어야 합니다.",
-            test: "테스트",
-            test_error: "테스트 시작 중에 오류가 발생했습니다.",
-            test_success: "테스트 성공",
-        }
-    }
-}
diff --git a/src/models/src/i18n/authorize.rs b/src/models/src/i18n/authorize.rs
deleted file mode 100644
index a40dcb0ec..000000000
--- a/src/models/src/i18n/authorize.rs
+++ /dev/null
@@ -1,135 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nAuthorize<'a> {
-    client_force_mfa: &'a str,
-    email: &'a str,
-    email_bad_format: &'a str,
-    email_required: &'a str,
-    email_sent_msg: &'a str,
-    http_429: &'a str,
-    invalid_credentials: &'a str,
-    invalid_key_used: &'a str,
-    login: &'a str,
-    mfa_ack: &'a str,
-    password: &'a str,
-    password_forgotten: &'a str,
-    password_request: &'a str,
-    password_required: &'a str,
-    provide_mfa: &'a str,
-    request_expires: &'a str,
-    sign_up: &'a str,
-}
-
-impl SsrJson for I18nAuthorize<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nAuthorize<'_> {
-    fn build_en() -> Self {
-        Self {
-            client_force_mfa: r#"This login forces MFA to achieve higher security.
-To get access, you need to log in to your account and add at least one additional Passkey"#,
-            email: "E-Mail",
-            email_bad_format: "Bad E-Mail format",
-            email_required: "E-Mail is required",
-            email_sent_msg: "If your E-Mail exists, a request has been sent",
-            http_429: "Too many invalid inputs. Locked until:",
-            invalid_credentials: "Invalid credentials",
-            invalid_key_used: "Invalid Key",
-            login: "Login",
-            mfa_ack: "Acknowledged",
-            password: "Password",
-            password_forgotten: "Password forgotten?",
-            password_request: "Request",
-            password_required: "Password is required",
-            provide_mfa: "Please login with your MFA device",
-            request_expires: "Request expires",
-            sign_up: "User Registration",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            client_force_mfa: r#"Dieser Login setzt MFA voraus für eine erhöhte Sicherheit.
-Um Zugang zu bekommen, müssen Sie sie in Ihren Account einloggen und mindestens einen Passkey
-hinzufügen."#,
-            email: "E-Mail",
-            email_bad_format: "Inkorrektes E-Mail Format",
-            email_required: "E-Mail ist notwendig",
-            email_sent_msg: "Sollte Ihre Adresse registriert sein, wurde eine Nachricht versandt",
-            http_429: "Zu viele ungültige Versuche. Gesperrt bis:",
-            invalid_credentials: "Ungültige Zugangsdaten",
-            invalid_key_used: "Ungültiger Sicherheitsschlüssel",
-            login: "Login",
-            mfa_ack: "Bestätigt",
-            password: "Password",
-            password_forgotten: "Password vergessen?",
-            password_request: "Anfordern",
-            password_required: "Password ist notwendig",
-            provide_mfa: "Bitte stellen Sie Ihr MFA Gerät zur Verfügung",
-            request_expires: "Anfrage läuft ab",
-            sign_up: "Benutzer Registrierung",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            client_force_mfa: r#"本次登陆强制使用多因子认证以增强安全性。
-要完成登陆，请登入您的账户并添加一个登陆密钥。"#,
-            email: "电子邮件地址",
-            email_bad_format: "错误的电子邮件地址格式",
-            email_required: "电子邮件地址必填。",
-            email_sent_msg: "如果您的电子邮件存在，我们已发送请求邮件。",
-            http_429: "过多无效输入，已锁定至：",
-            invalid_credentials: "无效证明",
-            invalid_key_used: "无效密钥",
-            login: "登陆",
-            mfa_ack: "已确认",
-            password: "密码",
-            password_forgotten: "忘记密码",
-            password_request: "请求",
-            password_required: "密码必填。",
-            provide_mfa: "请使用MFA设备登陆",
-            request_expires: "请求过期",
-            sign_up: "用户注册",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            client_force_mfa: r#"이 로그인은 더 높은 수준의 보안을 위해서 MFA를 강제합니다.
-접근하려면, 계정에 로그인하고 최소 하나 이상의 패스키를 추가해야 합니다."#,
-            email: "이메일",
-            email_bad_format: "잘못된 이메일 형식입니다.",
-            email_required: "이메일이 필요합니다.",
-            email_sent_msg: "이메일이 존재하면, 요청이 전송되었을 것입니다.",
-            http_429: "유효하지 않은 입력이 너무 많습니다. 다음 시간 전까지 비활성화합니다:",
-            invalid_credentials: "유효하지 않은 인증 정보입니다.",
-            invalid_key_used: "유효하지 않은 키입니다.",
-            login: "로그인",
-            mfa_ack: "확인되었습니다.",
-            password: "비밀번호",
-            password_forgotten: "비밀번호를 잊으셨나요?",
-            password_request: "요청",
-            password_required: "비밀번호는 필요합니다.",
-            provide_mfa: "MFA 기기를 통해 로그인해 주세요.",
-            request_expires: "요청 만료일",
-            sign_up: "사용자 가입",
-        }
-    }
-}
diff --git a/src/models/src/i18n/device.rs b/src/models/src/i18n/device.rs
deleted file mode 100644
index 565f669a8..000000000
--- a/src/models/src/i18n/device.rs
+++ /dev/null
@@ -1,120 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nDevice<'a> {
-    accept: &'a str,
-    auto_redirect_account: &'a str,
-    close_window: &'a str,
-    decline: &'a str,
-    desc: &'a str,
-    desc_scopes: &'a str,
-    err_too_short: &'a str,
-    err_too_long: &'a str,
-    invalid_input: &'a str,
-    is_accepted: &'a str,
-    is_declined: &'a str,
-    submit: &'a str,
-    title: &'a str,
-    user_code: &'a str,
-    wrong_or_expired: &'a str,
-}
-
-impl SsrJson for I18nDevice<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nDevice<'_> {
-    fn build_en() -> Self {
-        Self {
-            accept: "Accept",
-            auto_redirect_account: "You will be redirected to your account now",
-            close_window: "You can close this window now.",
-            decline: "Decline",
-            desc: "Please enter the {{count}} characters user code from your device.",
-            desc_scopes: "The device requests access to:",
-            err_too_short: "Input too short",
-            err_too_long: "Input too long",
-            invalid_input: "Invalid Input",
-            is_accepted: "The request has been accepted.",
-            is_declined: "The request has been declined.",
-            submit: "Submit",
-            title: "Device Authorization",
-            user_code: "User Code",
-            wrong_or_expired: "Wrong or expired code",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            accept: "Akzeptieren",
-            auto_redirect_account: "Automatische Weiterleitung zum Account folgt",
-            close_window: "Dieses Fenster kann nun geschlossen werden.",
-            decline: "Ablehnen",
-            desc: "Bitte den {{count}}-stelligen vom Geräte angezeigten Benutzer Code eingeben.",
-            desc_scopes: "Das Gerät fragt Zugang an zu:",
-            err_too_short: "Eingabe zu kurz",
-            err_too_long: "Eingabe zu lang",
-            invalid_input: "Ungültige Eingabe",
-            is_accepted: "Die Anfrage wurde akzeptiert",
-            is_declined: "Die Anfrage wurde abgewiesen",
-            submit: "Absenden",
-            title: "Gerät Authorisierung",
-            user_code: "Benutzer Code",
-            wrong_or_expired: "Ungültiger oder abgelaufener Code",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            accept: "接受",
-            auto_redirect_account: "您将被自动重定向至您的账户。",
-            close_window: "您现在可以关闭此窗口了。",
-            decline: "拒绝",
-            desc: "请输入来自您的设备的{{count}}位用户代码。",
-            desc_scopes: "此设备请求访问：",
-            err_too_short: "输入过短",
-            err_too_long: "输入过长",
-            invalid_input: "无效输入",
-            is_accepted: "请求已被接受。",
-            is_declined: "请求已被拒绝。",
-            submit: "提交",
-            title: "设备授权",
-            user_code: "用户代码",
-            wrong_or_expired: "代码错误或已过期",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            accept: "수락",
-            auto_redirect_account: "지금 계정으로 리다이렉트될 예정입니다.",
-            close_window: "이제 창을 닫아도 됩니다.",
-            decline: "거절",
-            desc: "기기에서 {{count}}자의 사용자 코드를 입력해 주세요.",
-            desc_scopes: "다음 기기가 접근을 요청합니다:",
-            err_too_short: "입력이 너무 짧습니다.",
-            err_too_long: "입력이 너무 깁니다.",
-            invalid_input: "유효하지 않은 입력입니다.",
-            is_accepted: "요청이 수락되었습니다.",
-            is_declined: "요청이 거절되었습니다.",
-            submit: "제출",
-            title: "기기 인증",
-            user_code: "사용자 코드",
-            wrong_or_expired: "잘못되거나 만료된 코드입니다.",
-        }
-    }
-}
diff --git a/src/models/src/i18n/error.rs b/src/models/src/i18n/error.rs
deleted file mode 100644
index 495d22592..000000000
--- a/src/models/src/i18n/error.rs
+++ /dev/null
@@ -1,117 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use actix_web::http::StatusCode;
-use serde::Serialize;
-use std::borrow::Cow;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nError<'a> {
-    error: String,
-    error_text: &'static str,
-    details: &'a str,
-    details_text: Option<Cow<'static, str>>,
-}
-
-impl I18nError<'_> {
-    pub fn build_with<C>(lang: &Language, status_code: StatusCode, details_text: Option<C>) -> Self
-    where
-        C: Into<Cow<'static, str>>,
-    {
-        match lang {
-            Language::En => Self::build_en(status_code, details_text.map(|t| t.into())),
-            Language::De => Self::build_de(status_code, details_text.map(|t| t.into())),
-            Language::ZhHans => Self::build_zh_hans(status_code, details_text.map(|t| t.into())),
-            Language::Ko => Self::build_ko(status_code, details_text.map(|t| t.into())),
-        }
-    }
-}
-
-impl SsrJson for I18nError<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(StatusCode::NOT_FOUND, None),
-            Language::De => Self::build_de(StatusCode::NOT_FOUND, None),
-            Language::ZhHans => Self::build_zh_hans(StatusCode::NOT_FOUND, None),
-            Language::Ko => Self::build_ko(StatusCode::NOT_FOUND, None),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nError<'_> {
-    fn build_en(status_code: StatusCode, details_text: Option<Cow<'static, str>>) -> Self {
-        let error_text = match status_code {
-            StatusCode::BAD_REQUEST => {
-                "Your request is malformed or incorrect, please see details."
-            }
-            StatusCode::UNAUTHORIZED | StatusCode::FORBIDDEN => {
-                "Access denied - you are not allowed to use or access this resource."
-            }
-            StatusCode::INTERNAL_SERVER_ERROR => "Internal Server Error",
-            _ => "The requested data could not be found",
-        };
-
-        Self {
-            error: status_code.to_string(),
-            error_text,
-            details: "Show Details",
-            details_text,
-        }
-    }
-
-    fn build_de(status_code: StatusCode, details_text: Option<Cow<'static, str>>) -> Self {
-        let error_text = match status_code {
-            StatusCode::BAD_REQUEST => "Der Request ist falsch formuliert. Weitere Informationen in den Details.",
-            StatusCode::UNAUTHORIZED | StatusCode::FORBIDDEN => "Zugriff verweigert - das Nutzen oder der Zugriff auf diese Ressource ist nicht erlaubt.",
-            StatusCode::INTERNAL_SERVER_ERROR => "Interner Server Fehler",
-           _ =>  "Die angeforderte Seite konnte nicht gefunden werden.",
-        };
-
-        Self {
-            error: status_code.to_string(),
-            error_text,
-            details: "Details Anzeigen",
-            details_text,
-        }
-    }
-
-    fn build_zh_hans(status_code: StatusCode, details_text: Option<Cow<'static, str>>) -> Self {
-        let error_text = match status_code {
-            StatusCode::BAD_REQUEST => "您的请求异常，请参见详情。",
-            StatusCode::UNAUTHORIZED | StatusCode::FORBIDDEN => "拒绝访问——您未被允许访问此资源。",
-            StatusCode::INTERNAL_SERVER_ERROR => "内部服务器错误",
-            _ => "找不到请求的资源",
-        };
-
-        Self {
-            error: status_code.to_string(),
-            error_text,
-            details: "显示详情",
-            details_text,
-        }
-    }
-
-    fn build_ko(status_code: StatusCode, details_text: Option<Cow<'static, str>>) -> Self {
-        let error_text = match status_code {
-            StatusCode::BAD_REQUEST => {
-                "요청이 손상되었거나 잘못되었습니다. 자세한 정보를 참고해 주세요."
-            }
-            StatusCode::UNAUTHORIZED | StatusCode::FORBIDDEN => {
-                "접근 거부 - 이 리소스를 사용하거나 접근할 수 없습니다."
-            }
-            StatusCode::INTERNAL_SERVER_ERROR => "내부적인 서버 오류",
-            _ => "요청 정보를 찾을 수 없습니다.",
-        };
-
-        Self {
-            error: status_code.to_string(),
-            error_text,
-            details: "자세한 정보 표시",
-            details_text,
-        }
-    }
-}
diff --git a/src/models/src/i18n/index.rs b/src/models/src/i18n/index.rs
deleted file mode 100644
index 4254f3f19..000000000
--- a/src/models/src/i18n/index.rs
+++ /dev/null
@@ -1,60 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nIndex<'a> {
-    register: &'a str,
-    account_login: &'a str,
-    admin_login: &'a str,
-}
-
-impl SsrJson for I18nIndex<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nIndex<'_> {
-    fn build_en() -> Self {
-        Self {
-            register: "Register",
-            account_login: "Account",
-            admin_login: "Admin",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            register: "Registrieren",
-            account_login: "Account",
-            admin_login: "Admin",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            register: "注册",
-            account_login: "登陆",
-            admin_login: "管理",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            register: "가입",
-            account_login: "계정",
-            admin_login: "관리",
-        }
-    }
-}
diff --git a/src/models/src/i18n/logout.rs b/src/models/src/i18n/logout.rs
deleted file mode 100644
index 28364ff31..000000000
--- a/src/models/src/i18n/logout.rs
+++ /dev/null
@@ -1,61 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nLogout<'a> {
-    logout: &'a str,
-    confirm_msg: &'a str,
-    cancel: &'a str,
-}
-
-impl SsrJson for I18nLogout<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nLogout<'_> {
-    fn build_en() -> Self {
-        Self {
-            logout: "Logout",
-            confirm_msg: "Do you really want to logout and end your session?",
-            cancel: "Cancel",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            logout: "Logout",
-            confirm_msg:
-                "Sind Sie sicher, dass Sie sich ausloggen und die Session beenden möchten?",
-            cancel: "Abbrechen",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            logout: "退出登录",
-            confirm_msg: "您确定要退出登录并结束会话吗？",
-            cancel: "取消",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            logout: "로그아웃",
-            confirm_msg: "정말로 로그아웃하고 세션을 종료하겠습니까?",
-            cancel: "취소",
-        }
-    }
-}
diff --git a/src/models/src/i18n/mod.rs b/src/models/src/i18n/mod.rs
deleted file mode 100644
index 6636b9ee3..000000000
--- a/src/models/src/i18n/mod.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-use crate::language::Language;
-
-pub mod account;
-pub mod authorize;
-pub mod device;
-pub mod email_change_info_new;
-pub mod email_change_info_old;
-pub mod email_confirm_change;
-pub mod email_confirm_change_html;
-pub mod email_password_new;
-pub mod email_reset;
-pub mod email_reset_info;
-pub mod error;
-pub mod index;
-pub mod logout;
-pub mod password_policy;
-pub mod password_reset;
-pub mod register;
-
-pub trait SsrJson {
-    fn build(lang: &Language) -> Self;
-    fn as_json(&self) -> String;
-}
diff --git a/src/models/src/i18n/password_policy.rs b/src/models/src/i18n/password_policy.rs
deleted file mode 100644
index f2608eb63..000000000
--- a/src/models/src/i18n/password_policy.rs
+++ /dev/null
@@ -1,68 +0,0 @@
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nPasswordPolicy<'a> {
-    password_policy: &'a str,
-    length_min: &'a str,
-    length_max: &'a str,
-    lowercase_min: &'a str,
-    uppercase_min: &'a str,
-    digits_min: &'a str,
-    special_min: &'a str,
-    not_recent: &'a str,
-}
-
-impl I18nPasswordPolicy<'_> {
-    pub fn build_en() -> Self {
-        Self {
-            password_policy: "Password Policy",
-            length_min: "Length min",
-            length_max: "Length max",
-            lowercase_min: "Lowercase letters min",
-            uppercase_min: "Uppercase letters min",
-            digits_min: "Digits min",
-            special_min: "Special characters min",
-            not_recent: "Not one of last recent passwords",
-        }
-    }
-
-    pub fn build_de() -> Self {
-        Self {
-            password_policy: "Passwort Regeln",
-            length_min: "Länge min",
-            length_max: "Länge max",
-            lowercase_min: "Kleinbuchstaben min",
-            uppercase_min: "Großbuchstaben min",
-            digits_min: "Ziffern min",
-            special_min: "Spezielle Buchstaben min",
-            not_recent: "Keins der letzten Passwörter",
-        }
-    }
-
-    pub(crate) fn build_zh_hans() -> Self {
-        Self {
-            password_policy: "密码要求",
-            length_min: "最小长度",
-            length_max: "最长长度",
-            lowercase_min: "最少小写字母",
-            uppercase_min: "最少大写字母",
-            digits_min: "最少数字",
-            special_min: "最少特殊字符",
-            not_recent: "不是最近使用过的密码之一",
-        }
-    }
-
-    pub fn build_ko() -> Self {
-        Self {
-            password_policy: "비밀번호 정책",
-            length_min: "최소 자수",
-            length_max: "최대 자수",
-            lowercase_min: "최소 소문자 자수",
-            uppercase_min: "최소 대문자 자수",
-            digits_min: "최소 숫자 자수",
-            special_min: "최소 특수문자 자수",
-            not_recent: "최근 사용한 비밀번호 중 하나가 아닌 것",
-        }
-    }
-}
diff --git a/src/models/src/i18n/password_reset.rs b/src/models/src/i18n/password_reset.rs
deleted file mode 100644
index c346fdf31..000000000
--- a/src/models/src/i18n/password_reset.rs
+++ /dev/null
@@ -1,179 +0,0 @@
-use crate::i18n::account::I18nAccountMfa;
-use crate::i18n::password_policy::I18nPasswordPolicy;
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nPasswordReset<'a> {
-    password_policy: I18nPasswordPolicy<'a>,
-
-    account_login: &'a str,
-    bad_format: &'a str,
-    fido_link: &'a str,
-    generate: &'a str,
-    mfa: I18nAccountMfa<'a>,
-    new_acc_desc_1: &'a str,
-    new_acc_desc_2: &'a str,
-    new_account: &'a str,
-    password_reset: &'a str,
-    password: &'a str,
-    passwordless: &'a str,
-    password_confirm: &'a str,
-    password_no_match: &'a str,
-    required: &'a str,
-    save: &'a str,
-    success_1: &'a str,
-    success_2: &'a str,
-    success_3: &'a str,
-    success_passkey_1: &'a str,
-    success_passkey_2: &'a str,
-}
-
-impl SsrJson for I18nPasswordReset<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-// batman@batcave.io
-// 6f#h5b+eLZ9$9h5%hBQH,RH+
-
-impl I18nPasswordReset<'_> {
-    pub fn build_en() -> Self {
-        Self {
-            password_policy: I18nPasswordPolicy::build_en(),
-
-            account_login: "Account Login",
-            bad_format: "Bad Format",
-            fido_link: "https://fidoalliance.org/fido2",
-            generate: "Generate",
-            mfa: I18nAccountMfa::build_en(),
-            new_acc_desc_1:
-                "You have the option between two account types: passwordless or traditional password",
-            new_acc_desc_2: r#"The passwordless account is always preferred, because it provides
-a way with stronger security. You will need at least one passkey (Yubikey, Apple Touch ID, Windows Hello,
-...) to create such an account. Your device must embrace the FIDO2 standard. For more information
-about this, you may follow this link: "#,
-            new_account: "New Account",
-            password_reset: "Password Reset",
-            password: "Password",
-            passwordless: "FIDO Passkey",
-            password_confirm: "Password Confirm",
-            password_no_match: "Passwords do not match",
-            required: "Required",
-            save: "Save",
-            success_1: "The password has been updated successfully.",
-            success_2: "You will be redirected shortly.",
-            success_3: "If you are not being redirected, please click here:",
-            success_passkey_1: "Your new passkey has been registered successfully.",
-            success_passkey_2: r#"Please log into your account and register a second backup key as
-soon as possible. With a passkey only account, you wil not be able to use a password reset via
-E-Mail in case you lose your current key."#,
-        }
-    }
-
-    pub fn build_de() -> Self {
-        Self {
-            password_policy: I18nPasswordPolicy::build_de(),
-
-            account_login: "Account Login",
-            bad_format: "Ungültiges Format",
-            fido_link: "https://fidoalliance.org/fido2",
-            generate: "Generieren",
-            mfa: I18nAccountMfa::build_de(),
-            new_acc_desc_1: r#"Sie haben die Option zwischen zwei Account Typen zu wählen: Passwortlos oder
-traditionalles Passwort."#,
-            new_acc_desc_2: r#"Der passwortlose Account Typ ist immer zu bevorzugen. Er bietet einen
-sehr viel höheren Sicherheitsstandard als traditionelle Passwörter und gleichzeitig einen einfacheren
-und schnelleren Login.
-Dazu wird mindestens ein Passkey (Yubikey, Apple Touch ID, Windows Hello, ...) benötigt, welcher dem
-FIDO2 Standard gerecht wird. Für weitere Informationen können Sie diesem Link folgen: "#,
-            new_account: "Neuer Account",
-            password_reset: "Passwort Zurücksetzen",
-            password: "Passwort",
-            passwordless: "FIDO Passkey",
-            password_confirm: "Passwort bestätigen",
-            password_no_match: "Passwörter stimmen nicht überein",
-            required: "Notwendig",
-            save: "Speichern",
-            success_1: "Das Passwort wurde erfolgreich zurückgesetzt.",
-            success_2: "Sie werden in Kürze weitergeleitet.",
-            success_3: "Sollte Sie nicht weitergeleitet werden, klicken Sie bitte hier:",
-            success_passkey_1: "Der neue Passkey wurde erfolgreich registriert.",
-            success_passkey_2: r#"Bitte loggen Sie sich direkt in Ihren Account ein und registrieren
-Sie mindestens einen weiteren Backup Passkey. Ein passwortloser Account kann nicht den Passwort
-Reset via E-Mail nutzen für den Fall, dass der derzeitige Passkey abhanden kommt."#,
-        }
-    }
-
-    pub fn build_zh_hans() -> Self {
-        Self {
-            password_policy: I18nPasswordPolicy::build_zh_hans(),
-
-            account_login: "账户登录",
-            bad_format: "格式错误",
-            fido_link: "https://fidoalliance.org/fido2/?lang=zh-hans",
-            generate: "生成",
-            mfa: I18nAccountMfa::build_zh_hans(),
-            new_acc_desc_1: "您可以在无密码账户和传统的密码账户之中选择其一。",
-            new_acc_desc_2: r#"无密码账户应被优先考虑，因为其提供更强的安全性。
-您需要至少一个支持FIDO2标准的通行密钥（Yubikey、Apple Touch ID或Windows Hello等）以完成账户创建。
-获取更多信息："#,
-            new_account: "新账户",
-            password_reset: "密码重置",
-            password: "密码",
-            passwordless: "FIDO通行密钥",
-            password_confirm: "密码确认",
-            password_no_match: "密码不匹配",
-            required: "必填",
-            save: "保存",
-            success_1: "密码已成功更新。",
-            success_2: "您将被重定向。",
-            success_3: "如果您未被重定向，请点击此链接：",
-            success_passkey_1: "您的通行密钥已成功注册。",
-            success_passkey_2: r#"请登入您的账户并尽快注册一个备份密钥。
-对于仅密钥登陆的账户，在丢失您当前的密钥时，您无法通过电子邮件进行密码重置。"#,
-        }
-    }
-
-    pub fn build_ko() -> Self {
-        Self {
-            password_policy: I18nPasswordPolicy::build_ko(),
-
-            account_login: "계정 로그인",
-            bad_format: "잘못된 형식",
-            fido_link: "https://fidoalliance.org/fido2/?lang=ko",
-            generate: "생성",
-            mfa: I18nAccountMfa::build_ko(),
-            new_acc_desc_1: "계정 종류는 비밀번호가 없는 계정 또는 기존의 비밀번호가 있는 계정 중 하나를 선택할 수 있습니다.",
-            new_acc_desc_2: r#"비밀번호가 없는 계정은 더 강력한 보안 방법을 제공하기 때문에 항상 선호됩니다.
-이러한 계정을 생성하려면 최소 하나의 패스키(Yubikey, Apple Touch ID, Windows Hello, ...)가 필요합니다. 기기가 FIDO2 표준을 지원해야 합니다.
-더 자세한 사항은 다음 링크를 참고해 주세요: "#,
-            new_account: "새 계정",
-            password_reset: "비밀번호 초기화",
-            password: "비밀번호",
-            passwordless: "FIDO 패스키",
-            password_confirm: "비밀번호 확인",
-            password_no_match: "비밀번호가 일치하지 않습니다.",
-            required: "필수",
-            save: "저장",
-            success_1: "비밀번호가 성공적으로 변경되었습니다.",
-            success_2: "곧 리다이렉트됩니다.",
-            success_3: "만약 리다이렉트가 되지 않으면, 여기를 클릭해 주세요:",
-            success_passkey_1: "새로운 패스키가 성공적으로 등록되었습니다.",
-            success_passkey_2: r#"계정에 로그인하여 가능한 한 빨리 두 번째 백업 키를 등록해 주세요.
-패스키 전용 계정은 현재 패스키를 잃어버리면, 이메일을 통하여 비밀번호 초기화할 수 없습니다."#,
-        }
-    }
-}
diff --git a/src/models/src/i18n/register.rs b/src/models/src/i18n/register.rs
deleted file mode 100644
index a61f39c6b..000000000
--- a/src/models/src/i18n/register.rs
+++ /dev/null
@@ -1,110 +0,0 @@
-use crate::i18n::SsrJson;
-use crate::language::Language;
-use serde::Serialize;
-
-#[derive(Debug, Default, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct I18nRegister<'a> {
-    domain_allowed: &'a str,
-    domain_err: &'a str,
-    domain_restricted: &'a str,
-    email: &'a str,
-    email_bad_format: &'a str,
-    email_check: &'a str,
-    family_name: &'a str,
-    given_name: &'a str,
-    regex_name: &'a str,
-    register: &'a str,
-    required: &'a str,
-    success: &'a str,
-    user_reg: &'a str,
-}
-
-impl SsrJson for I18nRegister<'_> {
-    fn build(lang: &Language) -> Self {
-        match lang {
-            Language::En => Self::build_en(),
-            Language::De => Self::build_de(),
-            Language::ZhHans => Self::build_zh_hans(),
-            Language::Ko => Self::build_ko(),
-        }
-    }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
-}
-
-impl I18nRegister<'_> {
-    fn build_en() -> Self {
-        Self {
-            domain_allowed: "Allowed domain:",
-            domain_err: "E-Mail domain not allowed",
-            domain_restricted: "E-Mail domains are restricted",
-            email: "E-Mail",
-            email_bad_format: "Bad E-Mail format",
-            email_check: "Please check your E-Mail inbox",
-            family_name: "Family Name",
-            given_name: "Given Name",
-            regex_name: "Name should have 2 - 32 non-special characters",
-            register: "Register",
-            required: "Required",
-            success: "Registration successful",
-            user_reg: "User Registration",
-        }
-    }
-
-    fn build_de() -> Self {
-        Self {
-            domain_allowed: "Erlaubte Domain:",
-            domain_err: "E-Mail Domain ist nicht erlaubt",
-            domain_restricted: "E-Mail Domains sind beschränkt",
-            email: "E-Mail",
-            email_bad_format: "Ungültiges E-Mail Format",
-            email_check: "Bitte prüfen Sie Ihren E-Mail Posteingang",
-            family_name: "Nachname",
-            given_name: "Vorname",
-            regex_name: "Name mit 2 - 32 Buchstaben ohne Sonderzeichen",
-            register: "Registrieren",
-            required: "Notwendig",
-            success: "Registrierung erfolgreich",
-            user_reg: "Benutzer Registrierung",
-        }
-    }
-
-    fn build_zh_hans() -> Self {
-        Self {
-            domain_allowed: "允许的域名：",
-            domain_err: "此电子邮件域名不被允许",
-            domain_restricted: "电子邮件域名被限制",
-            email: "电子邮件",
-            email_bad_format: "错误的电子邮件地址格式",
-            email_check: "请检查您的电子邮件收件箱",
-            family_name: "姓氏",
-            given_name: "名字",
-            regex_name: "名字应有2-32个非特殊字符。",
-            register: "注册",
-            required: "必填",
-            success: "注册成功",
-            user_reg: "用户注册",
-        }
-    }
-
-    fn build_ko() -> Self {
-        Self {
-            domain_allowed: "허용된 도메인:",
-            domain_err: "허용되지 않은 이메일의 도메인입니다.",
-            domain_restricted: "이메일의 도메인이 제한되어 있습니다.",
-            email: "이메일",
-            email_bad_format: "잘못된 이메일 형식입니다.",
-            email_check: "이메일 보관함을 확인해 주세요.",
-            family_name: "성",
-            given_name: "이름",
-            regex_name: "이름은 특수문자를 제외한 2자에서 32자이어야 합니다.",
-            register: "가입",
-            required: "필수 항목입니다.",
-            success: "성공적으로 가입되었습니다.",
-            user_reg: "사용자 가입",
-        }
-    }
-}
diff --git a/src/models/src/i18n/email_change_info_new.rs b/src/models/src/i18n_email/change_info_new.rs
similarity index 92%
rename from src/models/src/i18n/email_change_info_new.rs
rename to src/models/src/i18n_email/change_info_new.rs
index d30809bbf..c89a821b7 100644
--- a/src/models/src/i18n/email_change_info_new.rs
+++ b/src/models/src/i18n_email/change_info_new.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use serde::Serialize;
 
@@ -12,8 +11,8 @@ pub struct I18nEmailChangeInfoNew<'a> {
     pub button_text: &'a str,
 }
 
-impl SsrJson for I18nEmailChangeInfoNew<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailChangeInfoNew<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -21,10 +20,6 @@ impl SsrJson for I18nEmailChangeInfoNew<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailChangeInfoNew<'_> {
diff --git a/src/models/src/i18n/email_change_info_old.rs b/src/models/src/i18n_email/change_info_old.rs
similarity index 93%
rename from src/models/src/i18n/email_change_info_old.rs
rename to src/models/src/i18n_email/change_info_old.rs
index ed4855c44..87ae1455b 100644
--- a/src/models/src/i18n/email_change_info_old.rs
+++ b/src/models/src/i18n_email/change_info_old.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use serde::Serialize;
 
@@ -13,8 +12,8 @@ pub struct I18nEmailChangeInfoOld<'a> {
     pub button_text: &'a str,
 }
 
-impl SsrJson for I18nEmailChangeInfoOld<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailChangeInfoOld<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -22,10 +21,6 @@ impl SsrJson for I18nEmailChangeInfoOld<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailChangeInfoOld<'_> {
diff --git a/src/models/src/i18n/email_confirm_change.rs b/src/models/src/i18n_email/confirm_change.rs
similarity index 88%
rename from src/models/src/i18n/email_confirm_change.rs
rename to src/models/src/i18n_email/confirm_change.rs
index 6d5fafc13..db41bf6fb 100644
--- a/src/models/src/i18n/email_confirm_change.rs
+++ b/src/models/src/i18n_email/confirm_change.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use serde::Serialize;
 
@@ -9,8 +8,8 @@ pub struct I18nEmailConfirmChange<'a> {
     pub msg_from_admin: &'a str,
 }
 
-impl SsrJson for I18nEmailConfirmChange<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailConfirmChange<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -18,10 +17,6 @@ impl SsrJson for I18nEmailConfirmChange<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailConfirmChange<'_> {
diff --git a/src/models/src/i18n/email_confirm_change_html.rs b/src/models/src/i18n_email/confirm_change_html.rs
similarity index 89%
rename from src/models/src/i18n/email_confirm_change_html.rs
rename to src/models/src/i18n_email/confirm_change_html.rs
index 04dfc059c..e5f139756 100644
--- a/src/models/src/i18n/email_confirm_change_html.rs
+++ b/src/models/src/i18n_email/confirm_change_html.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use serde::Serialize;
 
@@ -10,8 +9,8 @@ pub struct I18nEmailConfirmChangeHtml<'a> {
     pub to: &'a str,
 }
 
-impl SsrJson for I18nEmailConfirmChangeHtml<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailConfirmChangeHtml<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -19,10 +18,6 @@ impl SsrJson for I18nEmailConfirmChangeHtml<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailConfirmChangeHtml<'_> {
diff --git a/src/models/src/i18n_email/mod.rs b/src/models/src/i18n_email/mod.rs
new file mode 100644
index 000000000..572f272ac
--- /dev/null
+++ b/src/models/src/i18n_email/mod.rs
@@ -0,0 +1,7 @@
+pub mod change_info_new;
+pub mod change_info_old;
+pub mod confirm_change;
+pub mod confirm_change_html;
+pub mod password_new;
+pub mod reset;
+pub mod reset_info;
diff --git a/src/models/src/i18n/email_password_new.rs b/src/models/src/i18n_email/password_new.rs
similarity index 97%
rename from src/models/src/i18n/email_password_new.rs
rename to src/models/src/i18n_email/password_new.rs
index d11200f7b..d18dc586f 100644
--- a/src/models/src/i18n/email_password_new.rs
+++ b/src/models/src/i18n_email/password_new.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use once_cell::sync::Lazy;
 use serde::Serialize;
@@ -84,8 +83,8 @@ pub struct I18nEmailPasswordNew<'a> {
     pub footer: Option<&'a str>,
 }
 
-impl SsrJson for I18nEmailPasswordNew<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailPasswordNew<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -93,10 +92,6 @@ impl SsrJson for I18nEmailPasswordNew<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailPasswordNew<'_> {
diff --git a/src/models/src/i18n/email_reset.rs b/src/models/src/i18n_email/reset.rs
similarity index 97%
rename from src/models/src/i18n/email_reset.rs
rename to src/models/src/i18n_email/reset.rs
index 8039b39c9..bf79087f0 100644
--- a/src/models/src/i18n/email_reset.rs
+++ b/src/models/src/i18n_email/reset.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use once_cell::sync::Lazy;
 use serde::Serialize;
@@ -81,8 +80,8 @@ pub struct I18nEmailReset<'a> {
     pub footer: Option<&'a str>,
 }
 
-impl SsrJson for I18nEmailReset<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailReset<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -90,10 +89,6 @@ impl SsrJson for I18nEmailReset<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailReset<'_> {
diff --git a/src/models/src/i18n/email_reset_info.rs b/src/models/src/i18n_email/reset_info.rs
similarity index 89%
rename from src/models/src/i18n/email_reset_info.rs
rename to src/models/src/i18n_email/reset_info.rs
index adaa6fef8..80f50cf49 100644
--- a/src/models/src/i18n/email_reset_info.rs
+++ b/src/models/src/i18n_email/reset_info.rs
@@ -1,4 +1,3 @@
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use serde::Serialize;
 
@@ -11,8 +10,8 @@ pub struct I18nEmailResetInfo<'a> {
     pub button_text: &'a str,
 }
 
-impl SsrJson for I18nEmailResetInfo<'_> {
-    fn build(lang: &Language) -> Self {
+impl I18nEmailResetInfo<'_> {
+    pub fn build(lang: &Language) -> Self {
         match lang {
             Language::En => Self::build_en(),
             Language::De => Self::build_de(),
@@ -20,10 +19,6 @@ impl SsrJson for I18nEmailResetInfo<'_> {
             Language::Ko => Self::build_ko(),
         }
     }
-
-    fn as_json(&self) -> String {
-        serde_json::to_string(self).unwrap()
-    }
 }
 
 impl I18nEmailResetInfo<'_> {
diff --git a/src/models/src/language.rs b/src/models/src/language.rs
index e3b0f8215..7e94750ca 100644
--- a/src/models/src/language.rs
+++ b/src/models/src/language.rs
@@ -8,7 +8,7 @@ use std::fmt::{Display, Formatter};
 use tracing::debug;
 
 // Note: Updating this enum will require an update on the LANGUAGES constant for the frontend too
-#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize, Type)]
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize, Type, strum::EnumIter)]
 #[sqlx(type_name = "varchar")]
 #[sqlx(rename_all = "lowercase")]
 #[serde(rename_all = "lowercase")]
diff --git a/src/models/src/lib.rs b/src/models/src/lib.rs
index 0e6f8cb24..2c067fbce 100644
--- a/src/models/src/lib.rs
+++ b/src/models/src/lib.rs
@@ -21,7 +21,7 @@ pub mod database;
 pub mod email;
 pub mod entity;
 pub mod events;
-pub mod i18n;
+pub mod i18n_email;
 pub mod language;
 pub mod migration;
 pub mod templates;
diff --git a/src/models/src/templates.rs b/src/models/src/templates.rs
index ca2bb5df3..d3d48e200 100644
--- a/src/models/src/templates.rs
+++ b/src/models/src/templates.rs
@@ -1,15 +1,5 @@
 use crate::entity::colors::Colors;
 use crate::entity::password::PasswordPolicy;
-use crate::i18n::account::I18nAccount;
-use crate::i18n::authorize::I18nAuthorize;
-use crate::i18n::device::I18nDevice;
-use crate::i18n::email_confirm_change_html::I18nEmailConfirmChangeHtml;
-use crate::i18n::error::I18nError;
-use crate::i18n::index::I18nIndex;
-use crate::i18n::logout::I18nLogout;
-use crate::i18n::password_reset::I18nPasswordReset;
-use crate::i18n::register::I18nRegister;
-use crate::i18n::SsrJson;
 use crate::language::Language;
 use actix_web::http::StatusCode;
 use actix_web::{HttpResponse, HttpResponseBuilder};
@@ -58,7 +48,6 @@ pub struct IndexHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -82,7 +71,6 @@ impl IndexHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nIndex::build(lang).as_json(),
             ..Default::default()
         };
 
@@ -111,7 +99,6 @@ pub struct AccountHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: String,
 }
 
@@ -133,7 +120,6 @@ impl AccountHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nAccount::build(lang).as_json(),
             auth_providers: auth_providers_json.unwrap_or_default(),
             ..Default::default()
         };
@@ -162,7 +148,6 @@ pub struct AdminHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -212,7 +197,6 @@ pub struct DeviceHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -236,7 +220,6 @@ impl DeviceHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nDevice::build(lang).as_json(),
             ..Default::default()
         };
 
@@ -265,7 +248,6 @@ pub struct FedCMHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -317,7 +299,6 @@ pub struct ErrorHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -344,7 +325,6 @@ impl ErrorHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nError::build_with(lang, status_code, details_text).as_json(),
             ..Default::default()
         };
 
@@ -385,7 +365,6 @@ pub struct Error1Html<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -415,7 +394,6 @@ impl Error1Html<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nError::build_with(lang, status_code, details_text).as_json(),
             ..Default::default()
         };
 
@@ -444,7 +422,6 @@ pub struct Error2Html<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -474,7 +451,6 @@ impl Error2Html<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nError::build_with(lang, status_code, details_text).as_json(),
             ..Default::default()
         };
 
@@ -503,7 +479,6 @@ pub struct Error3Html<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -533,7 +508,6 @@ impl Error3Html<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nError::build_with(lang, status_code, details_text).as_json(),
             ..Default::default()
         };
 
@@ -562,7 +536,6 @@ pub struct AdminApiKeysHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -612,7 +585,6 @@ pub struct AdminAttributesHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -662,7 +634,6 @@ pub struct AdminBlacklistHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -712,7 +683,6 @@ pub struct AdminClientsHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -762,7 +732,6 @@ pub struct AdminConfigHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -812,7 +781,6 @@ pub struct AdminDocsHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -862,7 +830,6 @@ pub struct AdminEventsHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -912,7 +879,6 @@ pub struct AdminGroupsHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -962,7 +928,6 @@ pub struct AdminRolesHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1012,7 +977,6 @@ pub struct AdminScopesHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1062,7 +1026,6 @@ pub struct AdminSessionsHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1112,7 +1075,6 @@ pub struct AdminUsersHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1162,7 +1124,6 @@ pub struct AuthorizeHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: String,
 }
 
@@ -1193,7 +1154,6 @@ impl AuthorizeHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nAuthorize::build(lang).as_json(),
             auth_providers: auth_providers_json.unwrap_or_default(),
             ..Default::default()
         };
@@ -1227,7 +1187,6 @@ pub struct CallbackHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1277,7 +1236,6 @@ pub struct ProvidersHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1327,7 +1285,6 @@ pub struct ProviderCallbackHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1349,7 +1306,6 @@ impl ProviderCallbackHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nAuthorize::build(lang).as_json(),
             ..Default::default()
         };
 
@@ -1378,7 +1334,6 @@ pub struct LogoutHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1402,7 +1357,6 @@ impl LogoutHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nLogout::build(lang).as_json(),
             ..Default::default()
         };
 
@@ -1431,7 +1385,6 @@ pub struct PwdResetHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1475,7 +1428,6 @@ impl PwdResetHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nPasswordReset::build(lang).as_json(),
             ..Default::default()
         };
 
@@ -1517,7 +1469,6 @@ pub struct UserEmailChangeConfirmHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1542,7 +1493,6 @@ impl UserEmailChangeConfirmHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nEmailConfirmChangeHtml::build(lang).as_json(),
             ..Default::default()
         }
         .render()
@@ -1571,7 +1521,6 @@ pub struct UserRegisterHtml<'a> {
     pub col_ghigh: &'a str,
     pub col_text: &'a str,
     pub col_bg: &'a str,
-    pub i18n: String,
     pub auth_providers: &'a str,
 }
 
@@ -1597,7 +1546,6 @@ impl UserRegisterHtml<'_> {
             col_ghigh: &colors.ghigh,
             col_text: &colors.text,
             col_bg: &colors.bg,
-            i18n: I18nRegister::build(lang).as_json(),
             ..Default::default()
         }
         .render()