diff --git a/frontend/src/app.html b/frontend/src/app.html
index bee14a627..55b5d9eaf 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -15,10 +15,6 @@
     <link rel="preload" href="/auth/v1/theme/{{client_id}}" as="style"/>
     <link rel="stylesheet" href="/auth/v1/theme/{{client_id}}"/>
     <style>
-        * {
-            box-sizing: border-box;
-        }
-
         :root {
             --col-act1: #6b3d99;
             --col-act1a: #714d99;
@@ -51,12 +47,6 @@
         a:hover {
             color: var(--col-act2a)
         }
-
-        .content {
-            width: 100%;
-            height: 100vh;
-            padding: 20px 10px;
-        }
     </style>
     %sveltekit.head%
 </head>
@@ -66,6 +56,6 @@
 <input name="rauthy-csrf-token" id="{{ csrf_token }}" type="hidden"/>
 <input name="rauthy-data" id="{{ data }}" type="hidden"/>
 <input name="rauthy-action" id="{{ action }}" type="hidden"/>
-<div>%sveltekit.body%</div>
+<div style="display: contents">%sveltekit.body%</div>
 </body>
 </html>
diff --git a/frontend/src/components/Error.svelte b/frontend/src/components/Error.svelte
index 87aaf80df..f6f06da7e 100644
--- a/frontend/src/components/Error.svelte
+++ b/frontend/src/components/Error.svelte
@@ -1,51 +1,58 @@
 <script>
-    import { slide } from 'svelte/transition';
+    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 Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     let t = $state();
     let showDetails = $state(false);
 
 </script>
 
-<BrowserCheck>
-    <WithI18n bind:t content="error">
-        <h1>{t.error}</h1>
-        <p>{t.errorText}</p>
+<Main>
+    <ContentCenter>
+        <WithI18n bind:t content="error">
+            <div class="flex-col">
+                <h1>{t.error}</h1>
+                <br>
+                <p>{t.errorText}</p>
 
-        {#if t.detailsText}
-            <div
-                    role="button"
-                    tabindex="0"
-                    class="showDetails"
-                    onclick={() => showDetails = !showDetails}
-                    onkeypress={() => showDetails = !showDetails}
-            >
-                {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>
-            </div>
+                {#if t.detailsText}
+                    <div
+                            role="button"
+                            tabindex="0"
+                            class="showDetails"
+                            onclick={() => showDetails = !showDetails}
+                            onkeypress={() => showDetails = !showDetails}
+                    >
+                        {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>
+                    </div>
 
-            {#if showDetails}
-                <div transition:slide class="details">
-                    {t.detailsText}
-                </div>
-            {/if}
-        {/if}
+                    {#if showDetails}
+                        <div transition:slide class="details">
+                            {t.detailsText}
+                        </div>
+                    {/if}
+                {/if}
 
-        <LangSelector absolute />
-    </WithI18n>
-</BrowserCheck>
+                <LangSelector absolute/>
+            </div>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     .chevron {
diff --git a/frontend/src/components/account/AccPassword.svelte b/frontend/src/components/account/AccPassword.svelte
index 11abb645d..01491cbde 100644
--- a/frontend/src/components/account/AccPassword.svelte
+++ b/frontend/src/components/account/AccPassword.svelte
@@ -29,7 +29,7 @@
     } = $props();
     let inputWidth = $derived(viewModePhone ? 'calc(100vw - 1.5rem)' : '300px');
 
-    const btnWidth = "12rem";
+    const btnWidth = "13rem";
 
     let accType = user.account_type;
     let passkeys = $state([]);
diff --git a/frontend/src/components/admin/AdminMainPre.svelte b/frontend/src/components/admin/AdminMainPre.svelte
index 47f0d6f61..265ad92fa 100644
--- a/frontend/src/components/admin/AdminMainPre.svelte
+++ b/frontend/src/components/admin/AdminMainPre.svelte
@@ -13,7 +13,7 @@
      */
 
     /** @type {Props} */
-    let { selected = $bindable('Users') } = $props();
+    let {selected = $bindable('Users')} = $props();
 
     let sessionInfo = $state();
     let isAdmin = $state(false);
@@ -45,30 +45,28 @@
     <title>Admin</title>
 </svelte:head>
 
-<BrowserCheck>
-    {#if !sessionInfo && !mfaReqErr}
-        <Loading/>
-    {:else if mfaReqErr}
-        <div class="noAdmin">
-            <div class="text">
-                A rauthy admin account must have <b>MFA enabled.</b><br>
-                Please navigate to your <b>account</b> and activate MFA.<br>
-                Afterwards, you need to do a logout and log back in.
-            </div>
-            <Button on:click={() => window.location.href = '/auth/v1/account'}>ACCOUNT</Button>
+{#if !sessionInfo && !mfaReqErr}
+    <Loading/>
+{:else if mfaReqErr}
+    <div class="noAdmin">
+        <div class="text">
+            A rauthy admin account must have <b>MFA enabled.</b><br>
+            Please navigate to your <b>account</b> and activate MFA.<br>
+            Afterwards, you need to do a logout and log back in.
         </div>
-    {:else if !isAdmin}
-        <div class="noAdmin">
-            <div class="text">
-                You are not assigned to the <b>rauthy_admin</b> role.<br/>
-                You do not have access to the admin panel.
-            </div>
-            <Button on:click={() => window.location.href = '/auth/v1/'}>GO BACK</Button>
+        <Button on:click={() => window.location.href = '/auth/v1/account'}>ACCOUNT</Button>
+    </div>
+{:else if !isAdmin}
+    <div class="noAdmin">
+        <div class="text">
+            You are not assigned to the <b>rauthy_admin</b> role.<br/>
+            You do not have access to the admin panel.
         </div>
-    {:else}
-        <AdminMain bind:selected/>
-    {/if}
-</BrowserCheck>
+        <Button on:click={() => window.location.href = '/auth/v1/'}>GO BACK</Button>
+    </div>
+{:else}
+    <AdminMain bind:selected/>
+{/if}
 
 <style>
     .noAdmin {
diff --git a/frontend/src/components/admin/ContentWrapper.svelte b/frontend/src/components/admin/ContentWrapper.svelte
index cd75e1115..02ec35b2a 100644
--- a/frontend/src/components/admin/ContentWrapper.svelte
+++ b/frontend/src/components/admin/ContentWrapper.svelte
@@ -21,10 +21,12 @@
 
 <style>
     .content {
+        padding-left: 1rem;
+        padding-top: 2.5rem;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
+        /*justify-content: center;*/
+        /*align-items: center;*/
         height: 100vh;
         flex: 1;
         overflow-y: auto;
diff --git a/frontend/src/components/admin/clients/ClientBranding.svelte b/frontend/src/components/admin/clients/ClientBranding.svelte
index 59f71b245..9b7b638f4 100644
--- a/frontend/src/components/admin/clients/ClientBranding.svelte
+++ b/frontend/src/components/admin/clients/ClientBranding.svelte
@@ -389,10 +389,10 @@
     </div>
 
     <div class="btns">
-        <Button on:click={onSubmit} bind:isLoading level={1} width="4rem">
+        <Button on:click={onSubmit} bind:isLoading level={1}>
             SAVE
         </Button>
-        <Button on:click={onReset} bind:isLoading level={3} width="4rem">
+        <Button on:click={onReset} bind:isLoading level={3}>
             RESET
         </Button>
 
diff --git a/frontend/src/components/admin/clients/ClientSecret.svelte b/frontend/src/components/admin/clients/ClientSecret.svelte
index 23b27f41f..5e69f708b 100644
--- a/frontend/src/components/admin/clients/ClientSecret.svelte
+++ b/frontend/src/components/admin/clients/ClientSecret.svelte
@@ -59,7 +59,6 @@
     <Button
             on:click={generateSecret}
             level={1}
-            width="130px"
     >
         GENERATE NEW
     </Button>
diff --git a/frontend/src/components/admin/events/Events.svelte b/frontend/src/components/admin/events/Events.svelte
index 9a414ac54..168eadf04 100644
--- a/frontend/src/components/admin/events/Events.svelte
+++ b/frontend/src/components/admin/events/Events.svelte
@@ -30,8 +30,6 @@
         eventLevel = await readSavedEventLevel();
     });
 
-    //
-
     async function readSavedEventLevel() {
         return localStorage.getItem('eventLevel') || 'Info';
     }
diff --git a/frontend/src/components/admin/events/EventsArchive.svelte b/frontend/src/components/admin/events/EventsArchive.svelte
index 001da2e15..543657d69 100644
--- a/frontend/src/components/admin/events/EventsArchive.svelte
+++ b/frontend/src/components/admin/events/EventsArchive.svelte
@@ -1,7 +1,7 @@
 <script>
     import {run} from 'svelte/legacy';
 
-    import {onMount} from "svelte";
+    import {onMount, untrack} from "svelte";
     import {postEvents} from "../../../utils/dataFetchingAdmin.js";
     import {formatDateToDateInput, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
@@ -10,6 +10,7 @@
     import OptionSelect from "$lib/OptionSelect.svelte";
     import Event from "./Event.svelte";
     import Switch from "$lib/Switch.svelte";
+    import {sleepAwait} from "$lib/utils/helpers.js";
 
     let err = '';
     let events = $state([]);
@@ -22,7 +23,6 @@
     let filter = $state(false);
     let typ = $state(EVENT_TYPES[0]);
 
-
     let searchOptions = [
         {
             label: 'IP',
@@ -39,7 +39,7 @@
         {label: 'Type', callback: (a, b) => a.typ.localeCompare(b.typ)},
     ];
 
-    onMount(() => {
+    $effect(() => {
         fetchData();
     });
 
@@ -67,12 +67,6 @@
     function onSave() {
         fetchData();
     }
-
-    run(() => {
-        if (from || until || level || filter || typ) {
-            fetchData();
-        }
-    });
 </script>
 
 <div class="content">
diff --git a/frontend/src/components/admin/users/UserForceLogout.svelte b/frontend/src/components/admin/users/UserForceLogout.svelte
index 38bf20777..c2d447a9f 100644
--- a/frontend/src/components/admin/users/UserForceLogout.svelte
+++ b/frontend/src/components/admin/users/UserForceLogout.svelte
@@ -29,7 +29,7 @@
         Invalidate all existing sessions and refresh tokens for this user?
     </div>
 
-    <Button on:click={onSubmit} bind:isLoading level={1} width="5rem">
+    <Button on:click={onSubmit} bind:isLoading level={1}>
         LOGOUT
     </Button>
 
diff --git a/frontend/src/components/passwordReset/PasswordPolicy.svelte b/frontend/src/components/passwordReset/PasswordPolicy.svelte
index 3bbb6b3e0..9fc9dc8c3 100644
--- a/frontend/src/components/passwordReset/PasswordPolicy.svelte
+++ b/frontend/src/components/passwordReset/PasswordPolicy.svelte
@@ -159,12 +159,18 @@
 {/if}
 
 <style>
+    ul {
+        margin-left: 1rem;
+    }
+
     .li {
+        margin-left: 1.5rem;
         width: 100%;
     }
 
     .policyContainer {
-        margin-left: -10px;
+        margin-left: -.5rem;
+        margin-bottom: 1rem;
     }
 
     .policyErr {
diff --git a/frontend/src/css/global.css b/frontend/src/css/global.css
index d517a80cc..faa85defe 100644
--- a/frontend/src/css/global.css
+++ b/frontend/src/css/global.css
@@ -1,3 +1,13 @@
+/*
+Some lines are out-commented until all components have been updated properly.
+These need to be taken into account again after the migration to the new theme
+has been finished:
+
+- body line height and colors
+- h1, h2, h3, h4, h5, h6 color
+- global input settings
+ */
+
 /* CSS Reset */
 *, *::before, *::after {
     box-sizing: border-box;
@@ -68,7 +78,7 @@ blockquote {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: hsl(var(--text-high));
+    /*color: hsl(var(--text-high));*/
     overflow-wrap: break-word;
 }
 
diff --git a/frontend/src/global_state/is_dev.svelte.ts b/frontend/src/global_state/is_dev.svelte.ts
new file mode 100644
index 000000000..78a2c68e5
--- /dev/null
+++ b/frontend/src/global_state/is_dev.svelte.ts
@@ -0,0 +1,22 @@
+let _isDev = $state(typeof (process) !== 'undefined' && process.env.DEV_MODE === 'true');
+
+export function useIsDev() {
+    if (typeof (process) !== 'undefined') {
+        _isDev = process.env.DEV_MODE === 'true';
+    } else if (typeof (window) !== 'undefined') {
+        // We can take advantage of the fast that SSR template values will not exist during local dev.
+        // TODO needs adjustment as soon as this has been converted into a template
+        let elem = window.document.getElementsByName('rauthy-csrf-token')[0];
+        _isDev = elem.id === '{{ csrf_token }}';
+    }
+    console.log('isDev: ', _isDev);
+
+    return {
+        get(): boolean {
+            return _isDev;
+        },
+        set(value: boolean) {
+            _isDev = value;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/lib/nav/Nav.svelte b/frontend/src/lib/nav/Nav.svelte
index adad3a064..ac3cdbb33 100644
--- a/frontend/src/lib/nav/Nav.svelte
+++ b/frontend/src/lib/nav/Nav.svelte
@@ -75,6 +75,7 @@
 
 <nav
         class="nav"
+        style:min-width="{$width}px"
         style:width="{$width}px"
         style:padding={isExpanded ? '20px 10px' : '10px 3px'}
 >
diff --git a/frontend/src/lib_svelte5/ContentCenter.svelte b/frontend/src/lib_svelte5/ContentCenter.svelte
new file mode 100644
index 000000000..77d85d9dd
--- /dev/null
+++ b/frontend/src/lib_svelte5/ContentCenter.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {type Snippet} from "svelte";
+
+    let {children}: { children: Snippet } = $props();
+</script>
+
+<div>
+    {@render children()}
+</div>
+
+
+<style>
+    div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/lib_svelte5/Main.svelte b/frontend/src/lib_svelte5/Main.svelte
new file mode 100644
index 000000000..ec414cdf5
--- /dev/null
+++ b/frontend/src/lib_svelte5/Main.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {type Snippet} from "svelte";
+
+    let {children}: { children: Snippet } = $props();
+</script>
+
+<main>
+    {@render children()}
+</main>
+
+
+<style>
+    main {
+        width: 100%;
+        display: flex;
+        overflow-y: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 183f20429..bf50c6b7c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
     import {onMount, type Snippet} from 'svelte'
 
     import "../css/global.css";
+    import {useIsDev} from "../global_state/is_dev.svelte.ts";
 
     let {
         children,
@@ -9,13 +10,12 @@
         children: Snippet,
     } = $props();
 
+    let isDev = useIsDev();
     let cookiesEnabled = $state(true);
 
     onMount(() => {
         cookiesEnabled = navigator.cookieEnabled;
     });
-
-
 </script>
 
 <noscript>
@@ -29,8 +29,7 @@
         <h1>Cookies disabled</h1>
         <p>
             You need to enable Cookies.<br>
-            Without them, a safe interaction with Rauthy cannot happen.
+            Without them, a safe interaction with Rauthy is not possible.
         </p>
     </div>
 {/if}
-
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index e2fd23559..339d78078 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -6,6 +6,8 @@
     import {redirectToLogin} from "../../utils/helpers.js";
     import BrowserCheck from "../../components/BrowserCheck.svelte";
     import WithI18n from "$lib/WithI18n.svelte";
+    import Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     let t = $state();
     let sessionInfo = $state();
@@ -48,12 +50,14 @@
     <title>{t?.account || 'Account'} {user?.email}</title>
 </svelte:head>
 
-<BrowserCheck>
-    <WithI18n bind:t content="account">
-        {#if !isReady}
-            <Loading/>
-        {:else}
-            <AccMain {t} {sessionInfo} bind:user bind:webIdData/>
-        {/if}
-    </WithI18n>
-</BrowserCheck>
+<Main>
+    <ContentCenter>
+        <WithI18n bind:t content="account">
+            {#if !isReady}
+                <Loading/>
+            {:else}
+                <AccMain {t} {sessionInfo} bind:user bind:webIdData/>
+            {/if}
+        </WithI18n>
+    </ContentCenter>
+</Main>
diff --git a/frontend/src/routes/device/+page.svelte b/frontend/src/routes/device/+page.svelte
index 8c57e2a1c..ae900c5ae 100644
--- a/frontend/src/routes/device/+page.svelte
+++ b/frontend/src/routes/device/+page.svelte
@@ -1,10 +1,9 @@
 <script>
     import {run} from 'svelte/legacy';
     import {onMount} from "svelte";
-    import {postDeviceVerify, getPow, getSessionInfo} from "../../utils/dataFetching.js";
+    import {postDeviceVerify, getSessionInfo} from "../../utils/dataFetching.js";
     import Loading from "../../components/Loading.svelte";
     import {extractFormErrors, getQueryParams, redirectToLogin} from "../../utils/helpers.js";
-    import BrowserCheck from "../../components/BrowserCheck.svelte";
     import WithI18n from "$lib/WithI18n.svelte";
     import LangSelector from "$lib/LangSelector.svelte";
     import Input from "$lib/inputs/Input.svelte";
@@ -12,6 +11,8 @@
     import * as yup from "yup";
     import {REGEX_URI} from "../../utils/constants.js";
     import {fetchSolvePow} from "../../utils/pow.ts";
+    import Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     const btnWidthInline = '8rem';
 
@@ -126,83 +127,85 @@
     <title>{t?.title || 'Device Authorization'}</title>
 </svelte:head>
 
-<BrowserCheck>
-    <WithI18n bind:t content="device">
-        {#if !sessionInfo}
-            <Loading/>
-        {:else}
-            <div class="container">
-                <div class="name">
-                    <h2>{t.title}</h2>
-                </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>
-
-                    <Button on:click={() => onSubmit('pending')} bind:isLoading>
-                        {t.submit.toUpperCase()}
-                    </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>
+<Main>
+    <ContentCenter>
+        <WithI18n bind:t content="device">
+            {#if !sessionInfo}
+                <Loading/>
+            {:else}
+                <div class="container">
+                    <div class="name">
+                        <h2>{t.title}</h2>
                     </div>
 
-                    <div class="inline">
-                        <Button
-                                on:click={() => onSubmit('accept')}
-                                bind:isLoading
-                                level={1}
-                                width={btnWidthInline}
+                    {#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.accept}
-                        </Button>
-                        <Button
-                                on:click={() => onSubmit('decline')}
-                                bind:isLoading
-                                level={3}
-                                width={btnWidthInline}
-                        >
-                            {t.decline}
-                        </Button>
-                    </div>
-                {/if}
+                            {t.userCode.toUpperCase()}
+                        </Input>
 
-                <div class="err">{err}</div>
-            </div>
-        {/if}
+                        <Button on:click={() => onSubmit('pending')} bind:isLoading>
+                            {t.submit.toUpperCase()}
+                        </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}
 
-        <LangSelector absolute/>
-    </WithI18n>
-</BrowserCheck>
+            <LangSelector absolute/>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     .container {
diff --git a/frontend/src/routes/fedcm/+page.svelte b/frontend/src/routes/fedcm/+page.svelte
index bcec895d3..3dfa19594 100644
--- a/frontend/src/routes/fedcm/+page.svelte
+++ b/frontend/src/routes/fedcm/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
     import {getKey} from "$lib/utils/helpers.js";
@@ -10,6 +10,8 @@
     import {extractFormErrors} from "../../utils/helpers.js";
     import CheckIcon from "$lib/CheckIcon.svelte";
     import {getFedCMStatus} from "../../utils/dataFetching.js";
+    import Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     let configUrl = $state('');
     let isSupported = $state(false);
@@ -102,51 +104,57 @@
     }
 </script>
 
-<h1>FedCM Testing</h1>
-<div class="row">
-    <div><b>FedCM supported:</b></div>
-    <div class="check">
-        <CheckIcon check={isSupported}/>
-    </div>
-</div>
-{#if !isSupported}
-    <br>-> enable idp registration:<br>
-    <code>chrome://flags/#fedcm-idp-registration</code>
-{/if}
-
-{#if isSupported}
-    <p>
-        <Button on:click={register} level={3}>Register IdP</Button>
-    </p>
-
-    <p>
-        <Input
-                bind:value={formValues.clientId}
-                bind:error={formErrors.clientId}
-                autocomplete="off"
-                placeholder="Client Id"
-                on:input={validateForm}
-        >
-            CLIENT ID
-        </Input>
-        <Input
-                bind:value={formValues.configUrl}
-                bind:error={formErrors.configUrl}
-                autocomplete="off"
-                placeholder="Config URL"
-                on:input={validateForm}
-        >
-            CONFIG URL
-        </Input>
-        <Button on:click={login}>Login</Button>
-    </p>
-    <div class="row">
-        <b>Logged In:</b>
-        <div class="check">
-            <CheckIcon check={isLoggedIn}/>
+<Main>
+    <ContentCenter>
+        <div class="flex-col">
+            <h1>FedCM Testing</h1>
+            <div class="row">
+                <div><b>FedCM supported:</b></div>
+                <div class="check">
+                    <CheckIcon check={isSupported}/>
+                </div>
+            </div>
+            {#if !isSupported}
+                <br>-> enable idp registration:<br>
+                <code>chrome://flags/#fedcm-idp-registration</code>
+            {/if}
+
+            {#if isSupported}
+                <p>
+                    <Button on:click={register} level={3}>Register IdP</Button>
+                </p>
+
+                <p>
+                    <Input
+                            bind:value={formValues.clientId}
+                            bind:error={formErrors.clientId}
+                            autocomplete="off"
+                            placeholder="Client Id"
+                            on:input={validateForm}
+                    >
+                        CLIENT ID
+                    </Input>
+                    <Input
+                            bind:value={formValues.configUrl}
+                            bind:error={formErrors.configUrl}
+                            autocomplete="off"
+                            placeholder="Config URL"
+                            on:input={validateForm}
+                    >
+                        CONFIG URL
+                    </Input>
+                    <Button on:click={login}>Login</Button>
+                </p>
+                <div class="row">
+                    <b>Logged In:</b>
+                    <div class="check">
+                        <CheckIcon check={isLoggedIn}/>
+                    </div>
+                </div>
+            {/if}
         </div>
-    </div>
-{/if}
+    </ContentCenter>
+</Main>
 
 {#if credentials}
     <div class="row">
diff --git a/frontend/src/routes/index/+page.svelte b/frontend/src/routes/index/+page.svelte
index a78084db6..5a8036d54 100644
--- a/frontend/src/routes/index/+page.svelte
+++ b/frontend/src/routes/index/+page.svelte
@@ -1,10 +1,12 @@
 <script>
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
-    import BrowserCheck from "../../components/BrowserCheck.svelte";
     import WithI18n from "$lib/WithI18n.svelte";
     import LangSelector from "$lib/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";
 
     const btnWidth = "9rem";
 
@@ -12,8 +14,9 @@
     let renderReg = $state(false);
 
     onMount(() => {
+        let isDev = useIsDev();
         const data = window.document.getElementsByName('rauthy-data')[0].id
-        if ('true' === data) {
+        if ('true' === data || isDev) {
             renderReg = true;
         }
     });
@@ -35,22 +38,24 @@
     <title>Rauthy</title>
 </svelte:head>
 
-<BrowserCheck>
-    <WithI18n bind:t content="index">
-        <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>
-        <LangSelector absolute />
+<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 />
+            <AppVersion/>
         </div>
-    </WithI18n>
-</BrowserCheck>
+    </Main>
+</WithI18n>
 
 <style>
     .btn {
diff --git a/frontend/src/routes/oidc/authorize/+page.svelte b/frontend/src/routes/oidc/authorize/+page.svelte
index c98629bc3..6a25df292 100644
--- a/frontend/src/routes/oidc/authorize/+page.svelte
+++ b/frontend/src/routes/oidc/authorize/+page.svelte
@@ -27,6 +27,8 @@
     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";
 
     let t = {};
 
@@ -321,144 +323,146 @@
     <title>Login {clientName || clientId}</title>
 </svelte:head>
 
-<BrowserCheck>
-    <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"/>
+<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>
                     {/if}
                 </div>
-                {#if clientUri}
-                    <a class="home" href={clientUri}>
-                        <IconHome opacity={0.5}/>
-                    </a>
-                {/if}
-            </div>
 
-            <div class="name">
-                <h2>{clientName || clientId}</h2>
-            </div>
+                <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.email}
-                        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}
+                {#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.email}
                             disabled={tooManyRequests || clientMfaForce}
                             on:enter={onSubmit}
+                            on:input={onEmailInput}
                     >
-                        {t.password?.toUpperCase()}
-                    </PasswordInput>
-
-                    {#if showResetRequest && !tooManyRequests}
-                        <div
-                                role="button"
-                                tabindex="0"
-                                class="forgotten"
-                                transition:scale|global
-                                on:click={handleShowReset}
-                                on:keypress={handleShowReset}
+                        {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.passwordForgotten}
-                        </div>
+                            {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}
                     {/if}
                 {/if}
 
-                {#if !tooManyRequests && !clientMfaForce}
-                    {#if showReset}
-                        <div class="btn flex-col">
-                            <Button on:click={requestReset}>
-                                {t.passwordRequest?.toUpperCase()}
+                {#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>
-                    {:else}
-                        <div class="btn flex-col">
-                            <Button on:click={onSubmit} bind:isLoading>
-                                {t.login?.toUpperCase()}
-                            </Button>
-                        </div>
-                    {/if}
+                        {/each}
+                    </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>
-                        </Button>
-                    {/each}
-                </div>
-            {/if}
 
-            {#if err}
-                <div class="errMsg errMsgApi">
-                    {err}
-                </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>
-                {:else}
-                    <a class="reg" href="/auth/v1/users/register" target="_blank">
-                        {t.signUp}
-                    </a>
+                {#if emailSuccess}
+                    <div class="success">
+                        {t.emailSentMsg}
+                    </div>
                 {/if}
-            {/if}
 
-            {#if clientMfaForce}
-                <div class="btn flex-col">
-                    <Button on:click={() => window.location.href = '/auth/v1/account'}>
-                        ACCOUNT
-                    </Button>
-                </div>
-            {/if}
-        </div>
+                {#if isRegOpen && !clientMfaForce && !showResetRequest && !tooManyRequests}
+                    {#if clientUri}
+                        <a class="reg" href="/auth/v1/users/register?redirect_uri={clientUri}" target="_blank">
+                            {t.signUp}
+                        </a>
+                    {:else}
+                        <a class="reg" href="/auth/v1/users/register" target="_blank">
+                            {t.signUp}
+                        </a>
+                    {/if}
+                {/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>
-</BrowserCheck>
+            <LangSelector absolute/>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     .btn {
diff --git a/frontend/src/routes/oidc/logout/+page.svelte b/frontend/src/routes/oidc/logout/+page.svelte
index d40f6008f..e3a853bae 100644
--- a/frontend/src/routes/oidc/logout/+page.svelte
+++ b/frontend/src/routes/oidc/logout/+page.svelte
@@ -3,7 +3,6 @@
     import {getQueryParams, purgeStorage, saveCsrfToken} from "../../../utils/helpers.js";
     import {logout} from "../../../utils/dataFetching.js";
     import Button from "$lib/Button.svelte";
-    import Loading from "$lib/Loading.svelte";
     import WithI18n from "$lib/WithI18n.svelte";
 
     let t = $state();
@@ -48,7 +47,7 @@
     async function handleRes(res) {
         purgeStorage();
         if (res.ok) {
-            window.location.href = postLogoutUri;
+            window.location.href = res.headers.get('location');
         } else {
             await handleCancel();
         }
diff --git a/frontend/src/routes/users/register/+page.svelte b/frontend/src/routes/users/register/+page.svelte
index 712920e37..73c23de1c 100644
--- a/frontend/src/routes/users/register/+page.svelte
+++ b/frontend/src/routes/users/register/+page.svelte
@@ -7,10 +7,12 @@
     import {registerUser} from "../../../utils/dataFetching.js";
     import {onMount, tick} from "svelte";
     import Input from "$lib/inputs/Input.svelte";
-    import BrowserCheck from "../../../components/BrowserCheck.svelte";
     import WithI18n from "$lib/WithI18n.svelte";
     import LangSelector from "$lib/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";
 
     let t = $state();
     let restrictedDomain = $state();
@@ -37,7 +39,10 @@
     });
 
     onMount(() => {
-        restrictedDomain = window.document.getElementsByName('rauthy-data')[0].id;
+        const data = window.document.getElementsByName('rauthy-data')[0].id;
+        if (useIsDev() && data !== '{{ data }}') {
+            restrictedDomain = data;
+        }
 
         const params = getQueryParams();
         redirectUri = params.redirect_uri;
@@ -62,7 +67,7 @@
             return;
         }
 
-        if (!formValues.email.endsWith(restrictedDomain)) {
+        if (restrictedDomain && !formValues.email.endsWith(restrictedDomain)) {
             err = t.domainErr;
             return;
         }
@@ -109,64 +114,66 @@
     <title>{t?.register || 'Register'}</title>
 </svelte:head>
 
-<BrowserCheck>
-    <WithI18n bind:t content="register">
-        <div class="container">
+<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="domainTxt">
-                <h1>{t.userReg}</h1>
-                {#if restrictedDomain}
-                    {t.domainRestricted}<br>
-                    {t.domainAllowed} <code>@{restrictedDomain}</code>
+                <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>
                 {/if}
             </div>
 
-            <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>
-            {/if}
-        </div>
-
-        <LangSelector absolute/>
-    </WithI18n>
-</BrowserCheck>
+            <LangSelector absolute/>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     .container {
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 6d43f8095..044fcce1a 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
@@ -4,6 +4,8 @@
     import WithI18n from "$lib/WithI18n.svelte";
     import LangSelector from "$lib/LangSelector.svelte";
     import Button from "$lib/Button.svelte";
+    import Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     let t = $state();
     let emailOld = $state('old@mail.org');
@@ -23,26 +25,28 @@
     <title>{t?.title || 'E-Mail Change Confirm'}</title>
 </svelte:head>
 
-<BrowserCheck>
-    <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>
+<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>
-        </div>
-        <LangSelector absolute/>
-    </WithI18n>
-</BrowserCheck>
+            <LangSelector absolute/>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     p {
diff --git a/frontend/src/routes/users/{id}/reset/reset/+page.svelte b/frontend/src/routes/users/{id}/reset/reset/+page.svelte
index 8fd747808..dc8cf2863 100644
--- a/frontend/src/routes/users/{id}/reset/reset/+page.svelte
+++ b/frontend/src/routes/users/{id}/reset/reset/+page.svelte
@@ -1,6 +1,5 @@
 <script>
     import {run} from 'svelte/legacy';
-
     import * as yup from "yup";
     import {onMount} from "svelte";
     import {
@@ -27,6 +26,7 @@
     import {slide} from "svelte/transition";
     import LangSelector from "$lib/LangSelector.svelte";
     import {REGEX_NAME} from "../../../../../utils/constants.js";
+    import {useIsDev} from "$state/is_dev.svelte";
 
     const btnWidth = '150px';
     const inputWidth = '320px';
@@ -41,8 +41,8 @@
     let isLoading = $state(false);
     let err = $state('');
     let userId = '';
-    // let requestType = '';
-    let requestType = $state("password_reset")
+    let requestType = $state('');
+    // let requestType = $state("password_reset")
     let accountTypeNew = $state('');
     let magicLinkId = '';
     let redirectUri = $state();
@@ -61,10 +61,15 @@
     let schemaPasskey = $state();
     let schemaPassword = $state();
 
-
     onMount(async () => {
-        // const policy_vals = '10, 128, 1, 1, 1, 1, 3';
-        const policy_vals = document.getElementsByName('rauthy-data')[0].id;
+        let isDev = useIsDev();
+
+        let policy_vals;
+        if (isDev) {
+            policy_vals = '10, 128, 1, 1, 1, 1, 3';
+        } else {
+            policy_vals = document.getElementsByName('rauthy-data')[0].id;
+        }
         const arr = [];
         policy_vals
             .split(',')
@@ -84,8 +89,12 @@
         userId = window.location.href.split("/users/")[1].split("/")[0];
         magicLinkId = window.location.href.split("/reset/")[1].split("?")[0];
 
-        const params = getQueryParams();
-        requestType = params['type'];
+        if (isDev) {
+            requestType = 'password_reset';
+        } else {
+            const params = getQueryParams();
+            requestType = params['type'];
+        }
 
         isReady = true;
     })
@@ -328,195 +337,193 @@
 
 </svelte:head>
 
-<BrowserCheck>
-    {#if !isReady}
-        <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} bind: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} bind: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>
-</BrowserCheck>
+{#if !isReady}
+    <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>
 
 <style>
     a {
diff --git a/frontend/src/utils/dataFetching.js b/frontend/src/utils/dataFetching.js
index 97563f498..cbccaa9a7 100644
--- a/frontend/src/utils/dataFetching.js
+++ b/frontend/src/utils/dataFetching.js
@@ -87,10 +87,15 @@ export async function getSessionInfoXsrf(accessToken) {
 }
 
 export async function logout(data) {
+    let body = new FormData();
+    for (let key in data) {
+        body.append(key, data[key]);
+    }
+
     return await fetch('/auth/v1/oidc/logout', {
         method: 'POST',
         headers: getCsrfHeaders(),
-        body: data,
+        body,
     });
 }
 
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 914c77a9d..a6f2beebd 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -29,6 +29,7 @@ const config = {
             // After this is done and no errors are thrown, we can do a very easy
             // switch to the original `lib` via global search and replace.
             $lib5: 'src/lib_svelte5',
+            $state: 'src/global_state',
         },
         csp: isDev ? {} : {
             directives: {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5037934f2..402970e13 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -38,7 +38,7 @@ const config = {
             '/auth/v1/encryption/keys': backend,
             '/auth/v1/encryption/migrate': backend,
             '/auth/v1/login_time': backend,
-            '/auth/v1/users': backend,
+            '^^(?!\/auth\/v1\/users\/(register|%7Bid%7D))\/auth\/v1\/users.*': backend,
             '/auth/v1/pow': backend,
             '/auth/v1/roles': backend,
             '/auth/v1/groups': backend,