diff --git a/Cargo.lock b/Cargo.lock
index b68ac7b74..87c741c80 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -405,6 +405,12 @@ version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
 
+[[package]]
+name = "adler32"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aae1277d39aeec15cb388266ecc24b11c80469deae6067e17a1a7aa9e5c1f234"
+
 [[package]]
 name = "aead"
 version = "0.5.2"
@@ -1544,6 +1550,15 @@ version = "0.8.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
 
+[[package]]
+name = "core2"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b49ba7ef1ad6107f8824dbe97de947cbaac53c44e7f9756a1fba0d37c1eec505"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "cpufeatures"
 version = "0.2.16"
@@ -1762,6 +1777,12 @@ dependencies = [
  "syn 2.0.93",
 ]
 
+[[package]]
+name = "dary_heap"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04d2cd9c18b9f454ed67da600630b021a8a80bf33f8c95896ab33aaf1c26b728"
+
 [[package]]
 name = "data-encoding"
 version = "2.6.0"
@@ -3243,6 +3264,30 @@ version = "0.2.169"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b5aba8db14291edd000dfcc4d620c7ebfb122c613afb886ca8803fa4e128a20a"
 
+[[package]]
+name = "libflate"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "45d9dfdc14ea4ef0900c1cddbc8dcd553fbaacd8a4a282cf4018ae9dd04fb21e"
+dependencies = [
+ "adler32",
+ "core2",
+ "crc32fast",
+ "dary_heap",
+ "libflate_lz77",
+]
+
+[[package]]
+name = "libflate_lz77"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6e0d73b369f386f1c44abd9c570d5318f55ccde816ff4b562fa452e5182863d"
+dependencies = [
+ "core2",
+ "hashbrown 0.14.5",
+ "rle-decode-fast",
+]
+
 [[package]]
 name = "libfuzzer-sys"
 version = "0.4.8"
@@ -4331,12 +4376,14 @@ dependencies = [
  "actix-web",
  "argon2",
  "base64 0.22.1",
+ "brotli 7.0.0",
  "chacha20poly1305",
  "chrono",
  "cidr",
  "flume",
  "gethostname",
  "lazy_static",
+ "libflate",
  "once_cell",
  "pretty_assertions",
  "rand",
@@ -4851,6 +4898,12 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "rle-decode-fast"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3582f63211428f83597b51b2ddb88e2a91a9d52d12831f9d08f5e624e8977422"
+
 [[package]]
 name = "rocksdb"
 version = "0.22.0"
diff --git a/Cargo.toml b/Cargo.toml
index 20a700da7..5290c3a34 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -38,6 +38,7 @@ askama_actix = "0.14"
 async-trait = "0.1.74"
 base64 = "0.22.0"
 bincode = "1"
+brotli = "7.0.0"
 cached = "0.54"
 chacha20poly1305 = { version = "0.10", features = ["std"] }
 chrono = { version = "0.4", default-features = false, features = ["clock", "serde", "std"] }
@@ -65,6 +66,7 @@ lazy_static = "1"
 lettre = { version = "0.11", default-features = false, features = [
     "builder", "smtp-transport", "tokio1-rustls-tls", "tracing"
 ] }
+libflate = "2.1.0"
 mime = "0.3.17"
 mime_guess = "2"
 num_cpus = "1"
diff --git a/frontend/build.sh b/frontend/build.sh
deleted file mode 100755
index 472a57ff4..000000000
--- a/frontend/build.sh
+++ /dev/null
@@ -1,44 +0,0 @@
-#!/bin/bash
-
-rm -rf ../static/v1/*
-rm -rf ../templates/html/*
-
-folders=(
-"../templates/html"
-"../static/v1"
-)
-for folder in "${folders[@]}"; do
-  if [ ! -d "$folder" ]; then
-      mkdir -p "$directory"
-  fi
-done
-
-npm run build
-
-pages=(
-"../templates/html/*.html"
-"../templates/html/oidc/*.html"
-"../templates/html/users/*.html"
-"../templates/html/users/{id}/reset/*.html"
-)
-for folder in "${pages[@]}"; do
-    for html in $folder; do
-      # for pre-rendering colors
-      sed -i 's/#6b3d99;/{{ col_act1 }};/g' "$html"
-      sed -i 's/#714d99;/{{ col_act1a }};/g' "$html"
-      sed -i 's/#388c51;/{{ col_act2 }};/g' "$html"
-      sed -i 's/#4d8c62;/{{ col_act2a }};/g' "$html"
-      sed -i 's/#3d5d99;/{{ col_acnt }};/g' "$html"
-      sed -i 's/#36486b;/{{ col_acnta }};/g' "$html"
-      sed -i 's/#43993d;/{{ col_ok }};/g' "$html"
-      sed -i 's/#993d49;/{{ col_err }};/g' "$html"
-      sed -i 's/#545454;/{{ col_glow }};/g' "$html"
-      sed -i 's/#b2b2b2;/{{ col_gmid }};/g' "$html"
-      sed -i 's/#f2f2f2;/{{ col_ghigh }};/g' "$html"
-      sed -i 's/#383838;/{{ col_text }};/g' "$html"
-      sed -i 's/#f7f7f7;/{{ col_bg }};/g' "$html"
-      # for the nonce in the CSP for script files
-      sed -i 's/<link /<link nonce="{{ nonce }}" /g' "$html"
-      sed -i 's/<script>/<script nonce="{{ nonce }}">/g' "$html"
-    done;
-done
diff --git a/frontend/src/api/request/admin/themes.ts b/frontend/src/api/request/admin/themes.ts
new file mode 100644
index 000000000..4217036a7
--- /dev/null
+++ b/frontend/src/api/request/admin/themes.ts
@@ -0,0 +1,19 @@
+export interface ThemeCss {
+    text: number[],
+    textHigh: number[],
+    bg: number[],
+    bgHigh: number[],
+    action: number[],
+    accent: number[],
+    error: number[],
+    btnText: string,
+    themeSun: string,
+    themeMoon: string,
+}
+
+export interface ThemeRequestResponse {
+    clientId: string,
+    light: ThemeCss,
+    dark: ThemeCss,
+    borderRadius: string,
+}
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 29ba7bbbf..3a1f4c17f 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,10 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="%lang%">
 <head>
     <meta charset="utf-8"/>
     <meta name="robots" content="noindex, nofollow">
-    <link rel="icon" href="%sveltekit.assets%/assets/favicon.svg"/>
     <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>
         * {
             box-sizing: border-box;
diff --git a/frontend/src/hooks.server.js b/frontend/src/hooks.server.js
new file mode 100644
index 000000000..3a88d9bee
--- /dev/null
+++ b/frontend/src/hooks.server.js
@@ -0,0 +1,31 @@
+const isDev = process.env.DEV_MODE === 'true';
+
+const langDefault = 'en';
+const themeDefault = 'body{--text:208 10 40;--text-high:208 20 20;--bg:228 2 98;--bg-high:228 8 84;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:white;--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);--border-radius:5px;}.theme-dark{--text:228 2 70;--text-high:228 8 90;--bg:208 90 4;--bg-high:208 30 19;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:hsl(var(--bg));--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}@media (prefers-color-scheme: dark){body{--text:228 2 70;--text-high:228 8 90;--bg:208 90 4;--bg-high:208 30 19;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:hsl(var(--bg));--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}.theme-light{--text:208 10 40;--text-high:208 20 20;--bg:228 2 98;--bg-high:228 8 84;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:white;--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}}';
+
+/**
+ * This hook only runs during local dev and compiling into static HTML.
+ * Proxy values in `vite.config.js` have a higher priority.
+ *
+ * We can use it to fix "error" popping up because of for instance invalid CSS
+ * values inside `app.html`, which will be used in production for SSR.
+ *
+ * @type {import('@sveltejs/kit').Handle}
+ */
+export async function handle({event, resolve}) {
+    let path = event.url.pathname;
+
+    if (path === '/auth/v1/theme/%7B%7Bclient_id%7D%7D') {
+        return new Response(themeDefault);
+    }
+
+    return resolve(event, {
+        transformPageChunk: ({html}) => {
+            if (isDev) {
+                return html.replace('%lang%', langDefault);
+            } else {
+                return html.replace('%lang%', '{{lang}}');
+            }
+        }
+    });
+}
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index f3ced37f5..a7bbf702c 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -9,13 +9,19 @@ const config = {
         paths: {
             base: '/auth/v1',
         },
-        adapter: adapter({
-            fallback: null,
-            pages: '../templates/html',
-            assets: '../static/v1',
-            precompress: true,
-            strict: true,
-        }),
+        alias: {
+            // Contains all the API request and response types
+            // (as soon as Svelte 5 + TS migration is done)
+            $api: 'src/api',
+            // The `lib5` is a temp lib which will exist until all core components
+            // have been migrated to Svelte5 + TS. Migration all dependencies will
+            // be a lot safer when changing each component to `lib5` first.
+            // Later on, the old component can be removed from `lib` and via compiler
+            // warnings, we can be 100% sure, that we have not forgotten any migration.
+            // 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',
+        },
         csp: isDev ? {} : {
             directives: {
                 'default-src': ['none'],
@@ -25,6 +31,13 @@ const config = {
                 'img-src': ['self'],
             },
         },
+        adapter: adapter({
+            fallback: null,
+            pages: '../templates/html',
+            assets: '../static/v1',
+            precompress: true,
+            strict: true,
+        }),
     },
 };
 
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index eac92451a..5037934f2 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -48,6 +48,7 @@ const config = {
             '/auth/v1/scopes': backend,
             '/auth/v1/search': backend,
             '/auth/v1/sessions': backend,
+            '/auth/v1/theme': backend,
             '/auth/v1/update_language': backend,
             '/auth/v1/version': backend,
             '/auth/webid/': backend,
diff --git a/justfile b/justfile
index bfc09237b..400a102da 100644
--- a/justfile
+++ b/justfile
@@ -320,7 +320,7 @@ build-ui:
     for folder in "${PAGES[@]}"; do
         for html in $folder; do
           # set correct document language
-          sd 'lang="en"' 'lang="{{{{ lang }}"' $html
+          #sd 'lang="en"' 'lang="{{{{ lang }}"' $html
           # for pre-rendering colors
           sd '#6b3d99;' '{{{{ col_act1 }};' $html
           sd '#714d99;' '{{{{ col_act1a }};' "$html"
diff --git a/migrations/hiqlite/4_themes.sql b/migrations/hiqlite/4_themes.sql
new file mode 100644
index 000000000..624ee11f9
--- /dev/null
+++ b/migrations/hiqlite/4_themes.sql
@@ -0,0 +1,14 @@
+CREATE TABLE themes
+(
+    client_id     TEXT    NOT NULL
+        CONSTRAINT themes_pk
+            PRIMARY KEY
+        CONSTRAINT themes_clients_id_fk
+            REFERENCES clients
+            ON UPDATE CASCADE ON DELETE CASCADE,
+    last_update   INTEGER NOT NULL,
+    version       INTEGER NOT NULL,
+    light         BLOB    NOT NULL,
+    dark          BLOB    NOT NULL,
+    border_radius TEXT    NOT NULL
+) STRICT;
\ No newline at end of file
diff --git a/migrations/postgres/30_themes.sql b/migrations/postgres/30_themes.sql
new file mode 100644
index 000000000..5ba48209d
--- /dev/null
+++ b/migrations/postgres/30_themes.sql
@@ -0,0 +1,14 @@
+CREATE TABLE themes
+(
+    client_id     VARCHAR NOT NULL
+        CONSTRAINT themes_pk
+            PRIMARY KEY
+        CONSTRAINT themes_clients_id_fk
+            REFERENCES clients
+            ON UPDATE CASCADE ON DELETE CASCADE,
+    last_update   BIGINT  NOT NULL,
+    version       INT     NOT NULL,
+    light         BYTEA   NOT NULL,
+    dark          BYTEA   NOT NULL,
+    border_radius VARCHAR NOT NULL
+);
\ No newline at end of file
diff --git a/src/api/src/lib.rs b/src/api/src/lib.rs
index 07aff1205..f35f1b6e5 100644
--- a/src/api/src/lib.rs
+++ b/src/api/src/lib.rs
@@ -2,6 +2,7 @@
 
 #![forbid(unsafe_code)]
 
+use actix_web::http::header::{HeaderMap, HeaderValue};
 use actix_web::{web, HttpRequest, HttpResponse};
 use rauthy_api_types::users::WebauthnLoginResponse;
 use rauthy_common::constants::COOKIE_MFA;
@@ -29,12 +30,51 @@ pub mod openapi;
 pub mod roles;
 pub mod scopes;
 pub mod sessions;
+pub mod themes;
 pub mod users;
 
 pub type ReqApiKey = web::ReqData<Option<ApiKey>>;
 pub type ReqPrincipal = web::ReqData<Principal>;
 pub type ReqSession = web::ReqData<Option<Session>>;
 
+#[derive(Debug, PartialEq)]
+enum AcceptEncoding {
+    Br,
+    Gzip,
+    None,
+}
+
+impl From<&HeaderMap> for AcceptEncoding {
+    #[inline]
+    fn from(headers: &HeaderMap) -> Self {
+        if let Some(accept) = headers
+            .get("accept-encoding")
+            .map(|v| v.to_str().unwrap_or_default())
+        {
+            if accept.contains("br") {
+                Self::Br
+            } else if accept.contains("gzip") {
+                Self::Gzip
+            } else {
+                Self::None
+            }
+        } else {
+            Self::None
+        }
+    }
+}
+
+impl AcceptEncoding {
+    #[inline]
+    pub fn value(&self) -> HeaderValue {
+        match self {
+            AcceptEncoding::Br => HeaderValue::from_static("br"),
+            AcceptEncoding::Gzip => HeaderValue::from_static("gzip"),
+            AcceptEncoding::None => HeaderValue::from_static("none"),
+        }
+    }
+}
+
 #[derive(RustEmbed)]
 #[folder = "../../static/v1/"]
 struct Assets;
diff --git a/src/api/src/openapi.rs b/src/api/src/openapi.rs
index 1dc921e6c..a33724e90 100644
--- a/src/api/src/openapi.rs
+++ b/src/api/src/openapi.rs
@@ -1,11 +1,11 @@
 use crate::{
     api_keys, auth_providers, blacklist, clients, events, fed_cm, generic, groups, oidc, roles,
-    scopes, sessions, users,
+    scopes, sessions, themes, users,
 };
 use actix_web::web;
 use rauthy_api_types::{
     api_keys::*, auth_providers::*, blacklist::*, clients::*, events::*, fed_cm::*, generic::*,
-    groups::*, oidc::*, roles::*, scopes::*, sessions::*, users::*,
+    groups::*, oidc::*, roles::*, scopes::*, sessions::*, themes::*, users::*,
 };
 use rauthy_common::constants::{PROXY_MODE, RAUTHY_VERSION};
 use rauthy_error::{ErrorResponse, ErrorResponseType};
@@ -122,6 +122,10 @@ use utoipa::{openapi, OpenApi};
         sessions::delete_sessions,
         sessions::delete_sessions_for_user,
 
+        themes::get_theme,
+        themes::put_theme,
+        themes::delete_theme,
+
         users::get_users,
         users::post_users,
         users::get_cust_attr,
@@ -259,6 +263,8 @@ use utoipa::{openapi, OpenApi};
             ScopeResponse,
             SessionResponse,
             SessionInfoResponse,
+            ThemeCss,
+            ThemeRequestResponse,
             TokenInfo,
             UserAttrConfigResponse,
             UserAttrConfigValueResponse,
diff --git a/src/api/src/themes.rs b/src/api/src/themes.rs
new file mode 100644
index 000000000..5b7d1c916
--- /dev/null
+++ b/src/api/src/themes.rs
@@ -0,0 +1,118 @@
+use crate::{AcceptEncoding, ReqPrincipal};
+use actix_web::body::BoxBody;
+use actix_web::http::header::{CACHE_CONTROL, CONTENT_ENCODING, CONTENT_TYPE, ETAG};
+use actix_web::http::StatusCode;
+use actix_web::web::Json;
+use actix_web::{delete, get, put, web, HttpRequest, HttpResponse};
+use rauthy_api_types::themes::ThemeRequestResponse;
+use rauthy_error::{ErrorResponse, ErrorResponseType};
+use rauthy_models::entity::api_keys::{AccessGroup, AccessRights};
+use rauthy_models::entity::clients::Client;
+use rauthy_models::entity::theme::ThemeCssFull;
+
+/// Get the theme for the given `client_id`.
+///
+/// Returns the Rauthy default, if no custom theme exists.
+#[utoipa::path(
+    get,
+    path = "/theme/{client_id}",
+    tag = "clients",
+    responses(
+        (status = 200, description = "Ok", body = String),
+    ),
+)]
+#[get("/theme/{client_id}")]
+pub async fn get_theme(
+    path: web::Path<String>,
+    req: HttpRequest,
+) -> Result<HttpResponse, ErrorResponse> {
+    let client_id = path.into_inner();
+    let etag = ThemeCssFull::etag(&client_id).await?;
+
+    if let Some(etag_remote) = req.headers().get("if-none-match") {
+        let etag_remote = etag_remote.to_str().unwrap_or_default();
+        if etag_remote == etag {
+            return Ok(HttpResponse::new(StatusCode::from_u16(304).unwrap()));
+        }
+    }
+
+    let enc = AcceptEncoding::from(req.headers());
+    let body = match enc {
+        AcceptEncoding::Br => BoxBody::new(ThemeCssFull::br(&client_id).await?),
+        AcceptEncoding::Gzip => BoxBody::new(ThemeCssFull::gzip(&client_id).await?),
+        AcceptEncoding::None => BoxBody::new(ThemeCssFull::plain(client_id).await?),
+    };
+
+    Ok(HttpResponse::build(StatusCode::OK)
+        .insert_header((CONTENT_TYPE, "text/css"))
+        .insert_header((CONTENT_ENCODING, enc.value()))
+        .insert_header((
+            CACHE_CONTROL,
+            "max-age=43200, stale-while-revalidate=2592000, public",
+        ))
+        .insert_header((ETAG, etag))
+        .body(body))
+}
+
+/// Update the theme for a client
+#[utoipa::path(
+    get,
+    path = "/theme/{client_id}",
+    tag = "clients",
+    request_body = ThemeRequestResponse,
+    responses(
+        (status = 200, description = "Ok"),
+        (status = 400, description = "BadRequest", body = ErrorResponse),
+        (status = 401, description = "Unauthorized", body = ErrorResponse),
+    ),
+)]
+#[put("/theme/{client_id}")]
+pub async fn put_theme(
+    principal: ReqPrincipal,
+    path: web::Path<String>,
+    Json(payload): Json<ThemeRequestResponse>,
+) -> Result<HttpResponse, ErrorResponse> {
+    principal.validate_api_key_or_admin_session(AccessGroup::Clients, AccessRights::Update)?;
+    payload.validate()?;
+
+    let client_id = path.into_inner();
+    if client_id != payload.client_id {
+        return Err(ErrorResponse::new(
+            ErrorResponseType::BadRequest,
+            "mismatch in client_id",
+        ));
+    }
+
+    // make sure the client exists
+    Client::find(client_id).await?;
+    ThemeCssFull::upsert(
+        payload.client_id,
+        payload.light.into(),
+        payload.dark.into(),
+        payload.border_radius,
+    )
+    .await?;
+
+    Ok(HttpResponse::Ok().finish())
+}
+
+/// Delete the theme for a client
+#[utoipa::path(
+    get,
+    path = "/theme/{client_id}",
+    tag = "clients",
+    responses(
+        (status = 200, description = "Ok"),
+        (status = 401, description = "Unauthorized", body = ErrorResponse),
+    ),
+)]
+#[delete("/theme/{client_id}")]
+pub async fn delete_theme(
+    principal: ReqPrincipal,
+    path: web::Path<String>,
+) -> Result<HttpResponse, ErrorResponse> {
+    principal.validate_api_key_or_admin_session(AccessGroup::Clients, AccessRights::Delete)?;
+
+    ThemeCssFull::delete(path.into_inner()).await?;
+    Ok(HttpResponse::Ok().finish())
+}
diff --git a/src/api_types/src/lib.rs b/src/api_types/src/lib.rs
index 2bd6b09ea..31aea3ae6 100644
--- a/src/api_types/src/lib.rs
+++ b/src/api_types/src/lib.rs
@@ -11,4 +11,5 @@ pub mod oidc;
 pub mod roles;
 pub mod scopes;
 pub mod sessions;
+pub mod themes;
 pub mod users;
diff --git a/src/api_types/src/themes.rs b/src/api_types/src/themes.rs
new file mode 100644
index 000000000..52ad0ef0c
--- /dev/null
+++ b/src/api_types/src/themes.rs
@@ -0,0 +1,99 @@
+use rauthy_common::constants::{RE_CLIENT_ID_EPHEMERAL, RE_CSS_VALUE_LOOSE};
+use rauthy_error::{ErrorResponse, ErrorResponseType};
+use serde::{Deserialize, Serialize};
+use utoipa::ToSchema;
+
+#[derive(Debug, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeCss {
+    // HSL values without prefix
+    pub text: [u16; 3],
+    pub text_high: [u16; 3],
+    pub bg: [u16; 3],
+    pub bg_high: [u16; 3],
+    pub action: [u16; 3],
+    pub accent: [u16; 3],
+    pub error: [u16; 3],
+
+    // fully valid values
+    pub btn_text: String,
+    pub theme_sun: String,
+    pub theme_moon: String,
+}
+
+impl ThemeCss {
+    #[inline]
+    pub fn validate(&self) -> Result<(), ErrorResponse> {
+        Self::validate_hsl(self.text)?;
+        Self::validate_hsl(self.text_high)?;
+        Self::validate_hsl(self.bg)?;
+        Self::validate_hsl(self.bg_high)?;
+        Self::validate_hsl(self.accent)?;
+        Self::validate_hsl(self.accent)?;
+        Self::validate_hsl(self.error)?;
+
+        ThemeRequestResponse::validate_css_loose(&self.btn_text)?;
+        ThemeRequestResponse::validate_css_loose(&self.theme_sun)?;
+        ThemeRequestResponse::validate_css_loose(&self.theme_moon)?;
+
+        Ok(())
+    }
+
+    #[inline]
+    fn validate_hsl(values: [u16; 3]) -> Result<(), ErrorResponse> {
+        if values[0] > 360 {
+            return Err(ErrorResponse::new(
+                ErrorResponseType::BadRequest,
+                "hue max value is 360",
+            ));
+        }
+
+        if values[1] > 100 || values[2] > 100 {
+            return Err(ErrorResponse::new(
+                ErrorResponseType::BadRequest,
+                "sat|lum max value is 100",
+            ));
+        }
+
+        Ok(())
+    }
+}
+
+#[derive(Debug, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeRequestResponse {
+    pub client_id: String,
+    pub light: ThemeCss,
+    pub dark: ThemeCss,
+    pub border_radius: String,
+}
+
+impl ThemeRequestResponse {
+    pub fn validate(&self) -> Result<(), ErrorResponse> {
+        if !RE_CLIENT_ID_EPHEMERAL.is_match(&self.client_id) {
+            return Err(ErrorResponse::new(
+                ErrorResponseType::BadRequest,
+                "client_id must match: ^[a-zA-Z0-9,.:/_\\-&?=~#!$'()*+%]{2,256}$",
+            ));
+        }
+
+        self.light.validate()?;
+        self.dark.validate()?;
+
+        Self::validate_css_loose(&self.border_radius)?;
+
+        Ok(())
+    }
+
+    #[inline]
+    fn validate_css_loose(value: &str) -> Result<(), ErrorResponse> {
+        if !RE_CSS_VALUE_LOOSE.is_match(value) {
+            return Err(ErrorResponse::new(
+                ErrorResponseType::BadRequest,
+                "css value must match: ^[a-z0-9-,.()%]+$",
+            ));
+        }
+
+        Ok(())
+    }
+}
diff --git a/src/bin/src/main.rs b/src/bin/src/main.rs
index 6828eb648..d99a859f5 100644
--- a/src/bin/src/main.rs
+++ b/src/bin/src/main.rs
@@ -10,14 +10,14 @@ use cryptr::EncKeys;
 use hiqlite::params;
 use prometheus::Registry;
 use rauthy_common::constants::{
-    APP_START, RAUTHY_VERSION, SWAGGER_UI_EXTERNAL, SWAGGER_UI_INTERNAL,
+    BUILD_TIME, RAUTHY_VERSION, SWAGGER_UI_EXTERNAL, SWAGGER_UI_INTERNAL,
 };
 use rauthy_common::utils::UseDummyAddress;
 use rauthy_common::{is_hiqlite, 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, users,
+    scopes, sessions, themes, users,
 };
 use rauthy_middlewares::csrf_protection::CsrfProtectionMiddleware;
 use rauthy_middlewares::ip_blacklist::RauthyIpBlacklistMiddleware;
@@ -81,7 +81,7 @@ async fn main() -> Result<(), Box<dyn Error>> {
     }
 
     let log_level = setup_logging();
-    info!("{} - Starting Rauthy v{}", *APP_START, RAUTHY_VERSION);
+    info!("Starting Rauthy v{} ({})", RAUTHY_VERSION, *BUILD_TIME);
     info!("Log Level set to '{}'", log_level);
     if test_mode {
         info!("Application started in Integration Test Mode");
@@ -552,6 +552,9 @@ async fn actix_main(app_state: web::Data<AppState>) -> std::io::Result<()> {
                             .service(generic::get_enc_keys)
                             .service(generic::post_migrate_enc_key)
                             .service(generic::ping)
+                            .service(themes::get_theme)
+                            .service(themes::put_theme)
+                            .service(themes::delete_theme)
                             .service(oidc::post_validate_token)
                             .service(oidc::get_well_known)
                             .service(generic::get_health)
diff --git a/src/common/Cargo.toml b/src/common/Cargo.toml
index af481923e..97ae7ebe5 100644
--- a/src/common/Cargo.toml
+++ b/src/common/Cargo.toml
@@ -11,12 +11,14 @@ rauthy-error = { path = "../error" }
 actix-web = { workspace = true }
 argon2 = { workspace = true }
 base64 = { workspace = true }
+brotli = { workspace = true }
 chacha20poly1305 = { workspace = true }
 chrono = { workspace = true }
 cidr = { workspace = true }
 flume = { workspace = true }
 gethostname = { workspace = true }
 lazy_static = { workspace = true }
+libflate = { workspace = true }
 once_cell = { workspace = true }
 rand = { workspace = true }
 rand_core = { workspace = true }
@@ -26,6 +28,9 @@ serde_json = { workspace = true }
 tracing = { workspace = true }
 tokio = { workspace = true }
 
+[build-dependencies]
+chrono = { version = "0.4", default-features = false, features = ["now"] }
+
 [dev-dependencies]
 pretty_assertions = "1"
 tokio-test = "*"
diff --git a/src/common/build.rs b/src/common/build.rs
new file mode 100644
index 000000000..bdb3ac245
--- /dev/null
+++ b/src/common/build.rs
@@ -0,0 +1,6 @@
+fn main() {
+    println!(
+        "cargo::rustc-env=BUILD_TIME={}",
+        chrono::Utc::now().timestamp()
+    );
+}
diff --git a/src/common/src/compression.rs b/src/common/src/compression.rs
new file mode 100644
index 000000000..25e80db20
--- /dev/null
+++ b/src/common/src/compression.rs
@@ -0,0 +1,52 @@
+use brotli::enc::BrotliEncoderParams;
+use libflate::gzip::Encoder;
+use rauthy_error::ErrorResponse;
+use std::io::{Cursor, Write};
+use std::sync::LazyLock;
+
+static BROTLI_PARAMS: LazyLock<BrotliEncoderParams> = LazyLock::new(BrotliEncoderParams::default);
+static BROTLI_PARAMS_9: LazyLock<BrotliEncoderParams> = LazyLock::new(|| BrotliEncoderParams {
+    quality: 9,
+    ..Default::default()
+});
+// Params for dynamic compression which happens often like with every new request.
+// We don't want to compress too high in that case because of diminishing returns.
+// TODO test compression times for dyn compression and find best compromise
+static BROTLI_PARAMS_DYN: LazyLock<BrotliEncoderParams> = LazyLock::new(|| BrotliEncoderParams {
+    quality: 5,
+    ..Default::default()
+});
+
+/// Brotli compression with max quality
+#[inline]
+pub fn compress_br(input: &[u8]) -> Result<Vec<u8>, ErrorResponse> {
+    compress_br_with(input, &BROTLI_PARAMS)
+}
+
+/// Brotli compression with quality 9
+#[inline]
+pub fn compress_br_9(input: &[u8]) -> Result<Vec<u8>, ErrorResponse> {
+    compress_br_with(input, &BROTLI_PARAMS_9)
+}
+
+/// Brotli compression with quality for dynamic content compression.
+/// Provides a balance between compression ratio and CPU usage.
+#[inline]
+pub fn compress_br_dyn(input: &[u8]) -> Result<Vec<u8>, ErrorResponse> {
+    compress_br_with(input, &BROTLI_PARAMS_DYN)
+}
+
+#[inline]
+fn compress_br_with(input: &[u8], params: &BrotliEncoderParams) -> Result<Vec<u8>, ErrorResponse> {
+    let mut writer = Cursor::new(Vec::with_capacity(input.len()));
+    let mut reader = Cursor::new(input);
+    brotli::BrotliCompress(&mut reader, &mut writer, params)?;
+    Ok(writer.into_inner())
+}
+
+#[inline]
+pub fn compress_gzip(input: &[u8]) -> Result<Vec<u8>, ErrorResponse> {
+    let mut encoder = Encoder::new(Vec::new())?;
+    encoder.write_all(input)?;
+    Ok(encoder.finish().into_result()?)
+}
diff --git a/src/common/src/constants.rs b/src/common/src/constants.rs
index 56e07bbdd..5c613f2eb 100644
--- a/src/common/src/constants.rs
+++ b/src/common/src/constants.rs
@@ -8,6 +8,7 @@ use std::env;
 use std::ops::Not;
 use std::str::FromStr;
 use std::string::ToString;
+use std::sync::LazyLock;
 
 #[derive(Debug, PartialEq)]
 pub enum CookieMode {
@@ -16,6 +17,10 @@ pub enum CookieMode {
     DangerInsecure,
 }
 
+pub static BUILD_TIME: LazyLock<DateTime<Utc>> = LazyLock::new(|| {
+    DateTime::from_timestamp(env!("BUILD_TIME").parse::<i64>().unwrap(), 0).unwrap()
+});
+
 pub const RAUTHY_VERSION: &str = env!("CARGO_PKG_VERSION");
 pub const CONTENT_TYPE_WEBP: &str = "image/webp";
 pub const HEADER_DPOP_NONCE: &str = "DPoP-Nonce";
@@ -132,6 +137,7 @@ lazy_static! {
     pub static ref RE_CLIENT_NAME: Regex = Regex::new(r"^[a-zA-Z0-9À-ſ-\s\x{3041}-\x{3096}\x{30A0}-\x{30FF}\x{3400}-\x{4DB5}\x{4E00}-\x{9FCB}\x{F900}-\x{FA6A}\x{2E80}-\x{2FD5}\x{FF66}-\x{FF9F}\x{FFA1}-\x{FFDC}\x{31F0}-\x{31FF}]{2,128}$").unwrap();
     pub static ref RE_CODE_CHALLENGE: Regex = Regex::new(r"^[a-zA-Z0-9-\._~]{43,128}$").unwrap();
     pub static ref RE_CODE_VERIFIER: Regex = Regex::new(r"^[a-zA-Z0-9-\._~+/=]+$").unwrap();
+    pub static ref RE_CSS_VALUE_LOOSE: Regex = Regex::new(r"^[a-z0-9-,.()%]+$").unwrap();
     pub static ref RE_CONTACT: Regex = Regex::new(r"^[a-zA-Z0-9\+.@/:]{0,48}$").unwrap();
     pub static ref RE_DATE_STR: Regex = Regex::new(r"^[0-9]{4}-[0-9]{2}-[0-9]{2}$").unwrap();
     pub static ref RE_GRANT_TYPES: Regex = Regex::new(r"^(authorization_code|client_credentials|urn:ietf:params:oauth:grant-type:device_code|password|refresh_token)$").unwrap();
diff --git a/src/common/src/lib.rs b/src/common/src/lib.rs
index bfb3cd2c8..e75726186 100644
--- a/src/common/src/lib.rs
+++ b/src/common/src/lib.rs
@@ -6,6 +6,7 @@
 use crate::constants::DB_TYPE;
 use std::env;
 
+pub mod compression;
 pub mod constants;
 pub mod password_hasher;
 pub mod utils;
diff --git a/src/models/src/database.rs b/src/models/src/database.rs
index 01ad66c5f..a79f93f19 100644
--- a/src/models/src/database.rs
+++ b/src/models/src/database.rs
@@ -35,6 +35,8 @@ pub enum Cache {
     ClientDynamic,
     ClientEphemeral,
     DPoPNonce,
+    Etag,
+    Html,
     IPRateLimit,
     Session,
     PoW,
diff --git a/src/models/src/entity/mod.rs b/src/models/src/entity/mod.rs
index c66c2f013..e52158d49 100644
--- a/src/models/src/entity/mod.rs
+++ b/src/models/src/entity/mod.rs
@@ -31,6 +31,7 @@ pub mod refresh_tokens_devices;
 pub mod roles;
 pub mod scopes;
 pub mod sessions;
+pub mod theme;
 pub mod user_attr;
 pub mod users;
 pub mod users_values;
diff --git a/src/models/src/entity/theme.rs b/src/models/src/entity/theme.rs
new file mode 100644
index 000000000..5130a4d79
--- /dev/null
+++ b/src/models/src/entity/theme.rs
@@ -0,0 +1,488 @@
+use crate::database::{Cache, DB};
+use chrono::Utc;
+use hiqlite::{params, Param};
+use rauthy_common::compression::{compress_br, compress_gzip};
+use rauthy_common::constants::BUILD_TIME;
+use rauthy_common::is_hiqlite;
+use rauthy_error::ErrorResponse;
+use serde::{Deserialize, Serialize};
+use sqlx::{Error, FromRow, Row};
+use std::fmt::Write;
+use tracing::error;
+
+static LATEST_CSS_VERSION: i32 = 1;
+
+#[derive(Debug)]
+pub struct ThemeCssFull {
+    pub client_id: String,
+    // used for the etag
+    pub last_update: i64,
+    // Should always be 1 for now, but makes it possible to have different structs
+    // in the future for proper deserialization.
+    pub version: i64,
+    pub light: ThemeCss,
+    pub dark: ThemeCss,
+    pub border_radius: String,
+}
+
+impl From<hiqlite::Row<'_>> for ThemeCssFull {
+    fn from(mut row: hiqlite::Row<'_>) -> Self {
+        let version: i64 = row.get("version");
+        let (light, dark) = if version == 1 {
+            let light = ThemeCss::from(row.get::<Vec<u8>>("light").as_slice());
+            let dark = ThemeCss::from(row.get::<Vec<u8>>("dark").as_slice());
+            (light, dark)
+        } else {
+            error!(
+                "Invalid CSS version {} returned from database, using defaults",
+                version
+            );
+            (ThemeCss::default_light(), ThemeCss::default_dark())
+        };
+
+        Self {
+            client_id: row.get("client_id"),
+            last_update: row.get("last_update"),
+            version,
+            light,
+            dark,
+            border_radius: row.get("border_radius"),
+        }
+    }
+}
+
+impl FromRow<'_, sqlx::postgres::PgRow> for ThemeCssFull {
+    fn from_row(row: &sqlx::postgres::PgRow) -> Result<Self, Error> {
+        let version: i64 = row.get("version");
+        let (light, dark) = if version == 1 {
+            let bytes: Vec<u8> = row.get("light");
+            let light = ThemeCss::from(bytes.as_slice());
+            let bytes: Vec<u8> = row.get("dark");
+            let dark = ThemeCss::from(bytes.as_slice());
+
+            (light, dark)
+        } else {
+            error!(
+                "Invalid CSS version {} returned from database, using defaults",
+                version
+            );
+            (ThemeCss::default_light(), ThemeCss::default_dark())
+        };
+
+        Ok(Self {
+            client_id: row.get("client_id"),
+            last_update: row.get("last_update"),
+            version,
+            light,
+            dark,
+            border_radius: row.get("border_radius"),
+        })
+    }
+}
+
+impl Default for ThemeCssFull {
+    fn default() -> Self {
+        Self {
+            client_id: "rauthy".to_string(),
+            last_update: BUILD_TIME.timestamp(),
+            version: 1,
+            light: ThemeCss::default_light(),
+            dark: ThemeCss::default_dark(),
+            border_radius: "5px".to_string(),
+        }
+    }
+}
+
+// CRUD
+impl ThemeCssFull {
+    pub async fn find(client_id: String) -> Result<Self, ErrorResponse> {
+        let opt: Option<Self> = if is_hiqlite() {
+            DB::client()
+                .query_map_optional(
+                    "SELECT * FROM themes WHERE client_id = $1",
+                    params!(client_id),
+                )
+                .await?
+        } else {
+            sqlx::query("SELECT * FROM themes WHERE client_id = $1")
+                .bind(client_id)
+                .fetch_optional(DB::conn())
+                .await?
+                .map(|row| Self::from_row(&row).unwrap())
+        };
+
+        Ok(opt.unwrap_or_default())
+    }
+
+    pub async fn delete(client_id: String) -> Result<(), ErrorResponse> {
+        let id = client_id.clone();
+
+        if is_hiqlite() {
+            DB::client()
+                .execute("DELETE FROM themes WHERE client_id = $1", params!(id))
+                .await?;
+        } else {
+            sqlx::query!("DELETE FROM themes WHERE client_id = $1", id)
+                .execute(DB::conn())
+                .await?;
+        }
+
+        Self::invalidate_caches(&client_id).await?;
+
+        Ok(())
+    }
+
+    pub async fn upsert(
+        client_id: String,
+        light: ThemeCss,
+        dark: ThemeCss,
+        border_radius: String,
+    ) -> Result<(), ErrorResponse> {
+        let id = client_id.clone();
+        let now = Utc::now().timestamp();
+        let light = light.as_bytes();
+        let dark = dark.as_bytes();
+
+        if is_hiqlite() {
+            DB::client()
+                .execute(
+                    r#"
+INSERT INTO themes (client_id, last_update, version, light, dark, border_radius)
+VALUES ($1, $2, $3, $4, $5, $6)
+ON CONFLICT (client_id) DO UPDATE
+SET last_update = $2, version = $3, light = $4, dark = $5, border_radius = $6
+"#,
+                    params!(id, now, LATEST_CSS_VERSION, light, dark, border_radius),
+                )
+                .await?;
+        } else {
+            sqlx::query!(
+                r#"
+INSERT INTO themes (client_id, last_update, version, light, dark, border_radius)
+VALUES ($1, $2, $3, $4, $5, $6)
+ON CONFLICT (client_id) DO UPDATE
+SET last_update = $2, version = $3, light = $4, dark = $5, border_radius = $6
+"#,
+                id,
+                now,
+                LATEST_CSS_VERSION,
+                light,
+                dark,
+                border_radius
+            )
+            .execute(DB::conn())
+            .await?;
+        }
+
+        // TODO if we have the prebuild fn at some point, favor this instead of invalidation
+        Self::invalidate_caches(&client_id).await?;
+
+        Ok(())
+    }
+}
+
+impl ThemeCssFull {
+    // TODO fn to pre-build and compress themes for all existing clients at app startup
+
+    pub async fn etag(client_id: &str) -> Result<String, ErrorResponse> {
+        if let Some(etag) = DB::client()
+            .get_bytes(Cache::Etag, Self::cache_key_etag(client_id))
+            .await?
+        {
+            Ok(String::from_utf8(etag)?)
+        } else {
+            Self::etag_update(client_id).await
+        }
+    }
+
+    #[inline]
+    fn cache_key_etag(client_id: &str) -> String {
+        format!("{}_theme_etag", client_id)
+    }
+
+    #[inline]
+    fn cache_key_plain(client_id: &str) -> String {
+        format!("{}_theme_plain", client_id)
+    }
+
+    #[inline]
+    fn cache_key_br(client_id: &str) -> String {
+        format!("{}_theme_br", client_id)
+    }
+
+    #[inline]
+    fn cache_key_gzip(client_id: &str) -> String {
+        format!("{}_theme_gzip", client_id)
+    }
+
+    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();
+        DB::client()
+            .put_bytes(
+                Cache::Etag,
+                Self::cache_key_etag(client_id),
+                etag.as_bytes().to_vec(),
+                None,
+            )
+            .await?;
+        Ok(etag)
+    }
+
+    async fn invalidate_caches(client_id: &str) -> Result<(), ErrorResponse> {
+        let client = DB::client();
+
+        client
+            .delete(Cache::Etag, Self::cache_key_etag(client_id))
+            .await?;
+        client
+            .delete(Cache::Html, Self::cache_key_plain(client_id))
+            .await?;
+        client
+            .delete(Cache::Html, Self::cache_key_br(client_id))
+            .await?;
+        client
+            .delete(Cache::Html, Self::cache_key_gzip(client_id))
+            .await?;
+
+        Ok(())
+    }
+
+    pub async fn plain(client_id: String) -> Result<String, ErrorResponse> {
+        // TODO do we even want to cache the plain version?
+        // It is probably only used once each time to build the compressed versions anyway.
+
+        // // Note: If only ever using ::default(), don't cache this - building from default
+        // // String is always faster than retrieving from cache!
+        // if let Some(bytes) = DB::client()
+        //     .get_bytes(Cache::Html, Self::cache_key_plain(client_id))
+        //     .await?
+        // {
+        //     let css = String::from_utf8(bytes)?;
+        //     return Ok(css);
+        // }
+
+        let slf = Self::find(client_id).await?;
+        let res = slf.as_css()?;
+
+        // DB::client()
+        //     .put_bytes(
+        //         Cache::Html,
+        //         Self::cache_key_plain(client_id),
+        //         res.as_bytes().to_vec(),
+        //         None,
+        //     )
+        //     .await?;
+
+        Ok(res)
+    }
+
+    pub async fn br(client_id: &str) -> Result<Vec<u8>, ErrorResponse> {
+        if let Some(bytes) = DB::client()
+            .get_bytes(Cache::Html, Self::cache_key_br(client_id))
+            .await?
+        {
+            return Ok(bytes);
+        }
+
+        let plain = Self::plain(client_id.to_string()).await?;
+        let compressed = compress_br(plain.as_bytes())?;
+        DB::client()
+            .put_bytes(
+                Cache::Html,
+                Self::cache_key_br(client_id),
+                compressed.clone(),
+                None,
+            )
+            .await?;
+
+        Ok(compressed)
+    }
+
+    pub async fn gzip(client_id: &str) -> Result<Vec<u8>, ErrorResponse> {
+        if let Some(bytes) = DB::client()
+            .get_bytes(Cache::Html, Self::cache_key_gzip(client_id))
+            .await?
+        {
+            return Ok(bytes);
+        }
+
+        let plain = Self::plain(client_id.to_string()).await?;
+        let compressed = compress_gzip(plain.as_bytes())?;
+        DB::client()
+            .put_bytes(
+                Cache::Html,
+                Self::cache_key_gzip(client_id),
+                compressed.clone(),
+                None,
+            )
+            .await?;
+
+        Ok(compressed)
+    }
+
+    pub fn as_css(&self) -> Result<String, ErrorResponse> {
+        let mut s = String::with_capacity(1100);
+
+        write!(s, "body{{")?;
+        self.light.append_css(&mut s)?;
+        write!(s, "--border-radius:{};", self.border_radius)?;
+        write!(s, "}}")?;
+
+        write!(s, ".theme-dark{{")?;
+        self.dark.append_css(&mut s)?;
+        write!(s, "}}")?;
+
+        write!(s, "@media (prefers-color-scheme: dark){{")?;
+        write!(s, "body{{")?;
+        self.dark.append_css(&mut s)?;
+        write!(s, "}}")?;
+
+        write!(s, ".theme-light{{")?;
+        self.light.append_css(&mut s)?;
+        write!(s, "}}")?;
+        write!(s, "}}")?;
+
+        Ok(s)
+    }
+
+    #[inline]
+    pub fn as_css_light(&self) -> Result<String, ErrorResponse> {
+        let mut s = String::with_capacity(280);
+
+        write!(s, "body{{")?;
+        self.light.append_css(&mut s)?;
+        write!(s, "--border-radius:{};", self.border_radius)?;
+        write!(s, "}}")?;
+
+        Ok(s)
+    }
+}
+
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct ThemeCss {
+    // HSL values without prefix
+    pub text: [u16; 3],
+    pub text_high: [u16; 3],
+    pub bg: [u16; 3],
+    pub bg_high: [u16; 3],
+    pub action: [u16; 3],
+    pub accent: [u16; 3],
+    pub error: [u16; 3],
+
+    // fully valid values
+    pub btn_text: String,
+    pub theme_sun: String,
+    pub theme_moon: String,
+}
+
+impl From<rauthy_api_types::themes::ThemeCss> for ThemeCss {
+    fn from(value: rauthy_api_types::themes::ThemeCss) -> Self {
+        Self {
+            text: value.text,
+            text_high: value.text_high,
+            bg: value.bg,
+            bg_high: value.bg_high,
+            action: value.action,
+            accent: value.accent,
+            error: value.error,
+            btn_text: value.btn_text,
+            theme_sun: value.theme_sun,
+            theme_moon: value.theme_moon,
+        }
+    }
+}
+
+impl From<&[u8]> for ThemeCss {
+    fn from(value: &[u8]) -> Self {
+        bincode::deserialize(value).unwrap()
+    }
+}
+
+impl ThemeCss {
+    pub fn append_css(&self, s: &mut String) -> Result<(), ErrorResponse> {
+        write!(
+            s,
+            "--text:{} {} {};",
+            self.text[0], self.text[1], self.text[2]
+        )?;
+        write!(
+            s,
+            "--text-high:{} {} {};",
+            self.text_high[0], self.text_high[1], self.text_high[2]
+        )?;
+        write!(s, "--bg:{} {} {};", self.bg[0], self.bg[1], self.bg[2])?;
+        write!(
+            s,
+            "--bg-high:{} {} {};",
+            self.bg_high[0], self.bg_high[1], self.bg_high[2]
+        )?;
+        write!(
+            s,
+            "--action:{} {} {};",
+            self.action[0], self.action[1], self.action[2]
+        )?;
+        write!(
+            s,
+            "--accent:{} {} {};",
+            self.accent[0], self.accent[1], self.accent[2]
+        )?;
+        write!(
+            s,
+            "--error:{} {} {};",
+            self.error[0], self.error[1], self.error[2]
+        )?;
+
+        write!(s, "--btn-text:{};", self.btn_text)?;
+        write!(s, "--theme-sun:{};", self.theme_sun)?;
+        write!(s, "--theme-moon:{};", self.theme_moon)?;
+
+        Ok(())
+    }
+
+    fn as_bytes(&self) -> Vec<u8> {
+        bincode::serialize(self).unwrap()
+    }
+
+    fn default_dark() -> Self {
+        Self {
+            text: [228, 2, 70],
+            text_high: [228, 8, 90],
+            bg: [208, 90, 4],
+            bg_high: [208, 30, 19],
+            action: [34, 100, 59],
+            accent: [246, 60, 53],
+            error: [15, 100, 37],
+            btn_text: "hsl(var(--bg))".to_string(),
+            theme_sun: "hsla(var(--action), .7)".to_string(),
+            theme_moon: "hsla(var(--accent), .85)".to_string(),
+        }
+    }
+
+    fn default_light() -> Self {
+        Self {
+            text: [208, 10, 40],
+            text_high: [208, 20, 20],
+            bg: [228, 2, 98],
+            bg_high: [228, 8, 84],
+            action: [34, 100, 59],
+            accent: [246, 60, 53],
+            error: [15, 100, 37],
+            btn_text: "white".to_string(),
+            theme_sun: "hsla(var(--action), .7)".to_string(),
+            theme_moon: "hsla(var(--accent), .85)".to_string(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_css_fmt() {
+        let theme = ThemeCssFull::default();
+        theme.as_css().unwrap();
+    }
+}
diff --git a/src/models/src/templates.rs b/src/models/src/templates.rs
index 2b1dcd6a0..ca2bb5df3 100644
--- a/src/models/src/templates.rs
+++ b/src/models/src/templates.rs
@@ -41,6 +41,7 @@ impl Display for FrontendAction {
 #[template(path = "html/index.html")]
 pub struct IndexHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -65,6 +66,7 @@ impl IndexHtml<'_> {
     pub fn build(colors: &Colors, lang: &Language) -> String {
         let res = IndexHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             csrf_token: "",
             data: &OPEN_USER_REG.to_string(),
             col_act1: &colors.act1,
@@ -92,6 +94,7 @@ impl IndexHtml<'_> {
 #[template(path = "html/account.html")]
 pub struct AccountHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -116,6 +119,7 @@ impl AccountHtml<'_> {
     pub fn build(colors: &Colors, lang: &Language, auth_providers_json: Option<String>) -> String {
         let res = AccountHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -141,6 +145,7 @@ impl AccountHtml<'_> {
 #[template(path = "html/admin.html")]
 pub struct AdminHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -165,6 +170,7 @@ impl AdminHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -189,6 +195,7 @@ impl AdminHtml<'_> {
 #[template(path = "html/device.html")]
 pub struct DeviceHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -213,6 +220,7 @@ impl DeviceHtml<'_> {
     pub fn build(colors: &Colors, lang: &Language) -> String {
         let res = DeviceHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             csrf_token: "",
             data: &DEVICE_GRANT_USER_CODE_LENGTH.to_string(),
             col_act1: &colors.act1,
@@ -240,6 +248,7 @@ impl DeviceHtml<'_> {
 #[template(path = "html/fedcm.html")]
 pub struct FedCMHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -264,6 +273,7 @@ impl FedCMHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = FedCMHtml {
             lang: "en",
+            client_id: "rauthy",
             csrf_token: "",
             data: &DEVICE_GRANT_USER_CODE_LENGTH.to_string(),
             col_act1: &colors.act1,
@@ -290,6 +300,7 @@ impl FedCMHtml<'_> {
 #[template(path = "html/error.html")]
 pub struct ErrorHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -319,6 +330,7 @@ impl ErrorHtml<'_> {
     ) -> String {
         let res = ErrorHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -356,6 +368,7 @@ impl ErrorHtml<'_> {
 #[template(path = "html/error/error.html")]
 pub struct Error1Html<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -388,6 +401,7 @@ impl Error1Html<'_> {
     {
         let res = Error1Html {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -413,6 +427,7 @@ impl Error1Html<'_> {
 #[template(path = "html/error/error/error.html")]
 pub struct Error2Html<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -445,6 +460,7 @@ impl Error2Html<'_> {
     {
         let res = Error2Html {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -470,6 +486,7 @@ impl Error2Html<'_> {
 #[template(path = "html/error/error/error/error.html")]
 pub struct Error3Html<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -502,6 +519,7 @@ impl Error3Html<'_> {
     {
         let res = Error3Html {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -527,6 +545,7 @@ impl Error3Html<'_> {
 #[template(path = "html/admin/api_keys.html")]
 pub struct AdminApiKeysHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -551,6 +570,7 @@ impl AdminApiKeysHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminApiKeysHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -575,6 +595,7 @@ impl AdminApiKeysHtml<'_> {
 #[template(path = "html/admin/attributes.html")]
 pub struct AdminAttributesHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -599,6 +620,7 @@ impl AdminAttributesHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminAttributesHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -623,6 +645,7 @@ impl AdminAttributesHtml<'_> {
 #[template(path = "html/admin/blacklist.html")]
 pub struct AdminBlacklistHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -647,6 +670,7 @@ impl AdminBlacklistHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminBlacklistHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -671,6 +695,7 @@ impl AdminBlacklistHtml<'_> {
 #[template(path = "html/admin/clients.html")]
 pub struct AdminClientsHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -695,6 +720,7 @@ impl AdminClientsHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminClientsHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -719,6 +745,7 @@ impl AdminClientsHtml<'_> {
 #[template(path = "html/admin/config.html")]
 pub struct AdminConfigHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -743,6 +770,7 @@ impl AdminConfigHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminConfigHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -767,6 +795,7 @@ impl AdminConfigHtml<'_> {
 #[template(path = "html/admin/docs.html")]
 pub struct AdminDocsHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -791,6 +820,7 @@ impl AdminDocsHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminDocsHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -815,6 +845,7 @@ impl AdminDocsHtml<'_> {
 #[template(path = "html/admin/events.html")]
 pub struct AdminEventsHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -839,6 +870,7 @@ impl AdminEventsHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminEventsHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -863,6 +895,7 @@ impl AdminEventsHtml<'_> {
 #[template(path = "html/admin/groups.html")]
 pub struct AdminGroupsHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -887,6 +920,7 @@ impl AdminGroupsHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminGroupsHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -911,6 +945,7 @@ impl AdminGroupsHtml<'_> {
 #[template(path = "html/admin/roles.html")]
 pub struct AdminRolesHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -935,6 +970,7 @@ impl AdminRolesHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminRolesHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -959,6 +995,7 @@ impl AdminRolesHtml<'_> {
 #[template(path = "html/admin/scopes.html")]
 pub struct AdminScopesHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -983,6 +1020,7 @@ impl AdminScopesHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminScopesHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1007,6 +1045,7 @@ impl AdminScopesHtml<'_> {
 #[template(path = "html/admin/sessions.html")]
 pub struct AdminSessionsHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1031,6 +1070,7 @@ impl AdminSessionsHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminSessionsHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1055,6 +1095,7 @@ impl AdminSessionsHtml<'_> {
 #[template(path = "html/admin/users.html")]
 pub struct AdminUsersHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1079,6 +1120,7 @@ impl AdminUsersHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = AdminUsersHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1103,6 +1145,7 @@ impl AdminUsersHtml<'_> {
 #[template(path = "html/oidc/authorize.html")]
 pub struct AuthorizeHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1134,6 +1177,7 @@ impl AuthorizeHtml<'_> {
     ) -> String {
         let mut res = AuthorizeHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             csrf_token,
             action: &action.to_string(),
             col_act1: &colors.act1,
@@ -1166,6 +1210,7 @@ impl AuthorizeHtml<'_> {
 #[template(path = "html/oidc/callback.html")]
 pub struct CallbackHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1190,6 +1235,7 @@ impl CallbackHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = CallbackHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1214,6 +1260,7 @@ impl CallbackHtml<'_> {
 #[template(path = "html/admin/providers.html")]
 pub struct ProvidersHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1238,6 +1285,7 @@ impl crate::templates::ProvidersHtml<'_> {
     pub fn build(colors: &Colors) -> String {
         let res = crate::templates::ProvidersHtml {
             lang: "en",
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1262,6 +1310,7 @@ impl crate::templates::ProvidersHtml<'_> {
 #[template(path = "html/providers/callback.html")]
 pub struct ProviderCallbackHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: &'a str,
@@ -1286,6 +1335,7 @@ impl ProviderCallbackHtml<'_> {
     pub fn build(colors: &Colors, lang: &Language) -> String {
         let res = ProviderCallbackHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
             col_act2: &colors.act2,
@@ -1311,6 +1361,7 @@ impl ProviderCallbackHtml<'_> {
 #[template(path = "html/oidc/logout.html")]
 pub struct LogoutHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -1335,6 +1386,7 @@ impl LogoutHtml<'_> {
     pub fn build(csrf_token: &str, set_logout: bool, colors: &Colors, lang: &Language) -> String {
         let res = LogoutHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             csrf_token,
             action: set_logout,
             col_act1: &colors.act1,
@@ -1362,6 +1414,7 @@ impl LogoutHtml<'_> {
 #[template(path = "html/users/{id}/reset/reset.html")]
 pub struct PwdResetHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -1406,6 +1459,7 @@ impl PwdResetHtml<'_> {
 
         let res = PwdResetHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             csrf_token,
             data: &data,
             col_act1: &colors.act1,
@@ -1446,6 +1500,7 @@ impl TooManyRequestsHtml {
 #[template(path = "html/users/{id}/email_confirm/email_confirm.html")]
 pub struct UserEmailChangeConfirmHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -1472,6 +1527,7 @@ impl UserEmailChangeConfirmHtml<'_> {
 
         UserEmailChangeConfirmHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             data: &data,
             col_act1: &colors.act1,
             col_act1a: &colors.act1a,
@@ -1498,6 +1554,7 @@ impl UserEmailChangeConfirmHtml<'_> {
 #[template(path = "html/users/register.html")]
 pub struct UserRegisterHtml<'a> {
     pub lang: &'a str,
+    pub client_id: &'a str,
     pub csrf_token: &'a str,
     pub data: &'a str,
     pub action: bool,
@@ -1522,6 +1579,7 @@ impl UserRegisterHtml<'_> {
     pub fn build(colors: &Colors, lang: &Language) -> String {
         UserRegisterHtml {
             lang: lang.as_str(),
+            client_id: "rauthy",
             data: USER_REG_DOMAIN_RESTRICTION
                 .as_ref()
                 .map(|s| s.as_str())