diff --git a/README.md b/README.md
index 6fb9d89ea1..d7ead7023c 100644
--- a/README.md
+++ b/README.md
@@ -304,6 +304,14 @@
 <p><a href="https://docs.theme-park.dev/themes/docmost"><img src="https://docs.theme-park.dev/site_assets/docmost/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/docmost">Docmost</a></p>
 </td>
+<td>
+<p><a href="https://docs.theme-park.dev/themes/authelia"><img src="https://docs.theme-park.dev/site_assets/authelia/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/authelia">Authelia</a></p>
+</td>
+<td>
+<p><a href="https://docs.theme-park.dev/themes/lldap"><img src="https://docs.theme-park.dev/site_assets/lldap/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/lldap">Authelia</a></p>
+</td>
 </tr>
 </tbody>
 </table>
diff --git a/css/addons/authelia/authelia-bazarr-logo/authelia-bazarr-logo.css b/css/addons/authelia/authelia-bazarr-logo/authelia-bazarr-logo.css
new file mode 100644
index 0000000000..c7e0e19c9a
--- /dev/null
+++ b/css/addons/authelia/authelia-bazarr-logo/authelia-bazarr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-bazarr-logo/bazarr.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-bazarr-logo/bazarr.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Bazarr";
+}
+
+#sign-in-button::after {
+    content: " - Bazarr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-bazarr-logo/bazarr.webp b/css/addons/authelia/authelia-bazarr-logo/bazarr.webp
new file mode 100644
index 0000000000..50e07ff583
Binary files /dev/null and b/css/addons/authelia/authelia-bazarr-logo/bazarr.webp differ
diff --git a/css/addons/authelia/authelia-jellyfin-logo/authelia-jellyfin-logo.css b/css/addons/authelia/authelia-jellyfin-logo/authelia-jellyfin-logo.css
new file mode 100644
index 0000000000..173b479553
--- /dev/null
+++ b/css/addons/authelia/authelia-jellyfin-logo/authelia-jellyfin-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-jellyfin-logo/jellyfin.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-jellyfin-logo/jellyfin.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Jellyfin";
+}
+
+#sign-in-button::after {
+    content: " - Jellyfin";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-jellyfin-logo/jellyfin.webp b/css/addons/authelia/authelia-jellyfin-logo/jellyfin.webp
new file mode 100644
index 0000000000..ca8069cd1b
Binary files /dev/null and b/css/addons/authelia/authelia-jellyfin-logo/jellyfin.webp differ
diff --git a/css/addons/authelia/authelia-jellyseerr-logo/authelia-jellyseerr-logo.css b/css/addons/authelia/authelia-jellyseerr-logo/authelia-jellyseerr-logo.css
new file mode 100644
index 0000000000..f5fedbc491
--- /dev/null
+++ b/css/addons/authelia/authelia-jellyseerr-logo/authelia-jellyseerr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-jellyseerr-logo/jellyseerr.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-jellyseerr-logo/jellyseerr.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Jellyseerr";
+}
+
+#sign-in-button::after {
+    content: " - Jellyseerr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-jellyseerr-logo/jellyseerr.webp b/css/addons/authelia/authelia-jellyseerr-logo/jellyseerr.webp
new file mode 100644
index 0000000000..eef3e15e63
Binary files /dev/null and b/css/addons/authelia/authelia-jellyseerr-logo/jellyseerr.webp differ
diff --git a/css/addons/authelia/authelia-komga-logo/authelia-komga-logo.css b/css/addons/authelia/authelia-komga-logo/authelia-komga-logo.css
new file mode 100644
index 0000000000..bb96bae82f
--- /dev/null
+++ b/css/addons/authelia/authelia-komga-logo/authelia-komga-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-komga-logo/komga.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-komga-logo/komga.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Komga";
+}
+
+#sign-in-button::after {
+    content: " - Komga";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-komga-logo/komga.webp b/css/addons/authelia/authelia-komga-logo/komga.webp
new file mode 100644
index 0000000000..cb1283cc2a
Binary files /dev/null and b/css/addons/authelia/authelia-komga-logo/komga.webp differ
diff --git a/css/addons/authelia/authelia-lidarr-logo/authelia-lidarr-logo.css b/css/addons/authelia/authelia-lidarr-logo/authelia-lidarr-logo.css
new file mode 100644
index 0000000000..76bd286c2f
--- /dev/null
+++ b/css/addons/authelia/authelia-lidarr-logo/authelia-lidarr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-lidarr-logo/lidarr.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-lidarr-logo/lidarr.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: "- Lidarr";
+}
+
+#sign-in-button::after {
+    content: "- Lidarr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-lidarr-logo/lidarr.webp b/css/addons/authelia/authelia-lidarr-logo/lidarr.webp
new file mode 100644
index 0000000000..f14ba5080f
Binary files /dev/null and b/css/addons/authelia/authelia-lidarr-logo/lidarr.webp differ
diff --git a/css/addons/authelia/authelia-lldap-logo/authelia-lldap-logo.css b/css/addons/authelia/authelia-lldap-logo/authelia-lldap-logo.css
new file mode 100644
index 0000000000..f33b8d4d29
--- /dev/null
+++ b/css/addons/authelia/authelia-lldap-logo/authelia-lldap-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-lldap-logo/lldap.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-lldap-logo/lldap.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - LLDAP";
+}
+
+#sign-in-button::after {
+    content: " - LLDAP";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-lldap-logo/lldap.webp b/css/addons/authelia/authelia-lldap-logo/lldap.webp
new file mode 100644
index 0000000000..bab213bd3f
Binary files /dev/null and b/css/addons/authelia/authelia-lldap-logo/lldap.webp differ
diff --git a/css/addons/authelia/authelia-mylar-logo/authelia-mylar-logo.css b/css/addons/authelia/authelia-mylar-logo/authelia-mylar-logo.css
new file mode 100644
index 0000000000..1ccf45a74a
--- /dev/null
+++ b/css/addons/authelia/authelia-mylar-logo/authelia-mylar-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-mylar-logo/mylar3.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-mylar-logo/mylar3.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Mylar";
+}
+
+#sign-in-button::after {
+    content: " - Mylar";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-mylar-logo/mylar3.webp b/css/addons/authelia/authelia-mylar-logo/mylar3.webp
new file mode 100644
index 0000000000..8412692e64
Binary files /dev/null and b/css/addons/authelia/authelia-mylar-logo/mylar3.webp differ
diff --git a/css/addons/authelia/authelia-photoprism-logo/authelia-photoprism-logo.css b/css/addons/authelia/authelia-photoprism-logo/authelia-photoprism-logo.css
new file mode 100644
index 0000000000..22dd524b31
--- /dev/null
+++ b/css/addons/authelia/authelia-photoprism-logo/authelia-photoprism-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-photoprism-logo/photoprism.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-photoprism-logo/photoprism.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - PhotoPrism";
+}
+
+#sign-in-button::after {
+    content: " - PhotoPrism";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-photoprism-logo/photoprism.webp b/css/addons/authelia/authelia-photoprism-logo/photoprism.webp
new file mode 100644
index 0000000000..db3581e194
Binary files /dev/null and b/css/addons/authelia/authelia-photoprism-logo/photoprism.webp differ
diff --git a/css/addons/authelia/authelia-pihole-logo/authelia-pihole-logo.css b/css/addons/authelia/authelia-pihole-logo/authelia-pihole-logo.css
new file mode 100644
index 0000000000..e7654fa225
--- /dev/null
+++ b/css/addons/authelia/authelia-pihole-logo/authelia-pihole-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-pihole-logo/pi-hole.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-pihole-logo/pi-hole.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Pi-hole";
+}
+
+#sign-in-button::after {
+    content: " - Pi-hole";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-pihole-logo/pi-hole.webp b/css/addons/authelia/authelia-pihole-logo/pi-hole.webp
new file mode 100644
index 0000000000..5cb5b64a51
Binary files /dev/null and b/css/addons/authelia/authelia-pihole-logo/pi-hole.webp differ
diff --git a/css/addons/authelia/authelia-prowlarr-logo/authelia-prowlarr-logo.css b/css/addons/authelia/authelia-prowlarr-logo/authelia-prowlarr-logo.css
new file mode 100644
index 0000000000..c0db29b29a
--- /dev/null
+++ b/css/addons/authelia/authelia-prowlarr-logo/authelia-prowlarr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-prowlarr-logo/prowlarr.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-prowlarr-logo/prowlarr.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Prowlarr";
+}
+
+#sign-in-button::after {
+    content: " - Prowlarr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-prowlarr-logo/prowlarr.webp b/css/addons/authelia/authelia-prowlarr-logo/prowlarr.webp
new file mode 100644
index 0000000000..623247aa7d
Binary files /dev/null and b/css/addons/authelia/authelia-prowlarr-logo/prowlarr.webp differ
diff --git a/css/addons/authelia/authelia-qbittorrent-logo/authelia-qbittorrent-logo.css b/css/addons/authelia/authelia-qbittorrent-logo/authelia-qbittorrent-logo.css
new file mode 100644
index 0000000000..165f6ab15e
--- /dev/null
+++ b/css/addons/authelia/authelia-qbittorrent-logo/authelia-qbittorrent-logo.css
@@ -0,0 +1,24 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-qbittorrent-logo/qbittorrent.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-qbittorrent-logo/qbittorrent.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+
+h5.MuiTypography-root::after {
+    /*font-size: 0.875rem;*/
+    content: " - qBittorrent";
+}
+
+#sign-in-button::after {
+    /*font-size: 0.875rem;*/
+    content: " - qBittorrent";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-qbittorrent-logo/qbittorrent.webp b/css/addons/authelia/authelia-qbittorrent-logo/qbittorrent.webp
new file mode 100644
index 0000000000..3e0108d25f
Binary files /dev/null and b/css/addons/authelia/authelia-qbittorrent-logo/qbittorrent.webp differ
diff --git a/css/addons/authelia/authelia-radarr-logo/authelia-radarr-logo.css b/css/addons/authelia/authelia-radarr-logo/authelia-radarr-logo.css
new file mode 100644
index 0000000000..f3bfbafd87
--- /dev/null
+++ b/css/addons/authelia/authelia-radarr-logo/authelia-radarr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-radarr-logo/radarr-light-hybrid.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-radarr-logo/radarr-light-hybrid.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Radarr";
+}
+
+#sign-in-button::after {
+    content: " - Radarr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-radarr-logo/radarr-light-hybrid.webp b/css/addons/authelia/authelia-radarr-logo/radarr-light-hybrid.webp
new file mode 100644
index 0000000000..5999a8b466
Binary files /dev/null and b/css/addons/authelia/authelia-radarr-logo/radarr-light-hybrid.webp differ
diff --git a/css/addons/authelia/authelia-radarr-logo/radarr.webp b/css/addons/authelia/authelia-radarr-logo/radarr.webp
new file mode 100644
index 0000000000..afc8170346
Binary files /dev/null and b/css/addons/authelia/authelia-radarr-logo/radarr.webp differ
diff --git a/css/addons/authelia/authelia-romm-logo/authelia-romm-logo.css b/css/addons/authelia/authelia-romm-logo/authelia-romm-logo.css
new file mode 100644
index 0000000000..94eb064ac8
--- /dev/null
+++ b/css/addons/authelia/authelia-romm-logo/authelia-romm-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-romm-logo/romm.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-romm-logo/romm.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - RomM";
+}
+
+#sign-in-button::after {
+    content: " - RomM";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-romm-logo/romm.webp b/css/addons/authelia/authelia-romm-logo/romm.webp
new file mode 100644
index 0000000000..9dd216ddf3
Binary files /dev/null and b/css/addons/authelia/authelia-romm-logo/romm.webp differ
diff --git a/css/addons/authelia/authelia-sabnzbd-logo/authelia-sabnzbd-logo.css b/css/addons/authelia/authelia-sabnzbd-logo/authelia-sabnzbd-logo.css
new file mode 100644
index 0000000000..6c8ba8bdb5
--- /dev/null
+++ b/css/addons/authelia/authelia-sabnzbd-logo/authelia-sabnzbd-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-sabnzbd-logo/sabnzbd.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-sabnzbd-logo/sabnzbd.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Sabnzbd";
+}
+
+#sign-in-button::after {
+    content: " - Sabnzbd";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-sabnzbd-logo/sabnzbd.webp b/css/addons/authelia/authelia-sabnzbd-logo/sabnzbd.webp
new file mode 100644
index 0000000000..aa76ce0877
Binary files /dev/null and b/css/addons/authelia/authelia-sabnzbd-logo/sabnzbd.webp differ
diff --git a/css/addons/authelia/authelia-sonarr-logo/authelia-sonarr-logo.css b/css/addons/authelia/authelia-sonarr-logo/authelia-sonarr-logo.css
new file mode 100644
index 0000000000..07bdb0eef1
--- /dev/null
+++ b/css/addons/authelia/authelia-sonarr-logo/authelia-sonarr-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-sonarr-logo/sonarr.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-sonarr-logo/sonarr.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Sonarr";
+}
+
+#sign-in-button::after {
+    content: " - Sonarr";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-sonarr-logo/sonarr.webp b/css/addons/authelia/authelia-sonarr-logo/sonarr.webp
new file mode 100644
index 0000000000..9d57566eb3
Binary files /dev/null and b/css/addons/authelia/authelia-sonarr-logo/sonarr.webp differ
diff --git a/css/addons/authelia/authelia-traefik-logo/authelia-traefik-logo.css b/css/addons/authelia/authelia-traefik-logo/authelia-traefik-logo.css
new file mode 100644
index 0000000000..86f5fa94a5
--- /dev/null
+++ b/css/addons/authelia/authelia-traefik-logo/authelia-traefik-logo.css
@@ -0,0 +1,21 @@
+/* replace a user configured logo */
+.MuiBox-root[alt*="Logo"] {
+    content: url("/css/addons/authelia/authelia-traefik-logo/traefik.webp");
+}
+
+/* Replace the default svg icon */
+svg#UserSvg[class*="-icon"] {
+    fill: none;
+    background-image: url("/css/addons/authelia/authelia-traefik-logo/traefik.webp");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+h5.MuiTypography-root::after {
+    content: " - Traefik";
+}
+
+#sign-in-button::after {
+    content: " - Traefik";
+}
\ No newline at end of file
diff --git a/css/addons/authelia/authelia-traefik-logo/traefik.webp b/css/addons/authelia/authelia-traefik-logo/traefik.webp
new file mode 100644
index 0000000000..bca1775649
Binary files /dev/null and b/css/addons/authelia/authelia-traefik-logo/traefik.webp differ
diff --git a/css/base/authelia/authelia-base.css b/css/base/authelia/authelia-base.css
new file mode 100644
index 0000000000..a083b86bc4
--- /dev/null
+++ b/css/base/authelia/authelia-base.css
@@ -0,0 +1,535 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN - Authelia base by @emilyy3k					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
+:root body {
+    background: var(--main-bg-color);
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
+    color: var(--text);
+}
+
+.MuiTypography-root {
+    color: var(--text);
+}
+
+/* Login Page Styles */
+button[aria-label="toggle password visibility"] {
+    color: var(--text);
+}
+
+button[aria-label="toggle password visibility"]:hover {
+    --IconButton-hoverBg: rgba(from var(--accent-color-hover) r g b / 0.08);
+}
+
+[class*="-rememberMe"] .MuiFormControlLabel-label.Mui-disabled {
+    color: rgba(from var(--text) r g b / 0.5);
+}
+
+svg#UserSvg[class*="-icon"] {
+    fill: var(--text-hover)
+}
+
+/* Button styles */
+.MuiButton-colorPrimary, .MuiButton-colorInfo {
+    --variant-containedBg: var(--button-color);
+    --variant-containedColor: var(--button-text);
+    --variant-textColor: rgb(var(--accent-color));
+    --variant-outlinedColor: rgb(var(--accent-color));
+}
+
+.MuiButton-colorPrimary:hover, .MuiButton-colorInfo:hover {
+    --variant-containedBg: var(--button-color-hover);
+    --variant-containedColor: var(--button-text-hover);
+    --variant-textColor: var(--accent-color-hover);
+    --variant-outlinedColor: var(--accent-color-hover);
+    --variant-textBg: rgba(from var(--accent-color-hover) r g b / 0.08);
+    --variant-outlinedBg: rgba(from var(--accent-color-hover) r g b / 0.08);
+}
+
+.MuiButton-colorPrimary .MuiTypography-root {
+    color: var(--variant-containedColor);
+}
+
+.MuiButton-textSecondary {
+    --variant-textColor: rgb(var(--accent-color));
+}
+
+.MuiButton-textSecondary:hover {
+    --variant-textColor: var(--accent-color-hover);
+}
+
+.MuiButton-textSuccess {
+    --variant-textColor: var(--arr-queue-color);
+}
+
+.MuiButton-colorSuccess {
+    --variant-textBg: transparent;
+    --variant-containedBg: var(--arr-queue-color);
+}
+
+.MuiDialogActions-root button[id="dialog-next"] {
+    --variant-textBg: transparent;
+}
+
+.MuiDialogActions-root button[id="dialog-next"]:hover {
+    --variant-textBg: rgba(from var(--button-color) r g b / 0.08);
+}
+
+.MuiButton-colorSuccess:hover {
+    --variant-textBg: rgba(from var(--arr-queue-color) r g b / 0.08);
+    --variant-containedBg: rgba(from var(--arr-queue-color) r g b / 0.8);
+}
+
+.MuiButton-colorError {
+    --variant-textBg: transparent;
+    --variant-containedBg: var(--plex-poster-unwatched);
+    --variant-outlinedColor: var(--plex-poster-unwatched);
+    --variant-outlinedBorder: rgba(from var(--plex-poster-unwatched) r g b / 0.5);
+}
+
+.MuiButton-colorError:hover {
+    --variant-textBg: rgba(from var(--plex-poster-unwatched) r g b / 0.08);
+    --variant-containedBg: rgba(from var(--plex-poster-unwatched) r g b / 0.8);
+    --variant-outlinedBg: rgba(from var(--plex-poster-unwatched) r g b / 0.08);
+    --variant-outlinedBorder: rgba(from var(--plex-poster-unwatched) r g b / 0.8);
+}
+
+.MuiButton-colorSecondary {
+    --variant-containedBg: rgba(from var(--button-color) r g b / 0.50);
+    --variant-containedColor: var(--button-text);
+    --variant-outlinedBorder: rgba(from var(--button-color) r g b / 0.15);
+}
+
+.MuiButton-colorSecondary:hover {
+    --variant-containedBg: rgba(from var(--button-color-hover) r g b / 0.50);
+    --variant-containedColor: var(--button-text-hover);
+    --variant-outlinedBorder: rgba(from var(--button-color-hover) r g b / 0.15);
+    --variant-textBg: rgba(from var(--button-color-hover) r g b / 0.08);
+}
+
+.MuiButton-outlinedPrimary  {
+    --variant-outlinedBorder: rgba(from rgb(var(--accent-color)) r g b / 0.7);
+    --variant-outlinedColor: rgb(var(--accent-color));
+}
+
+.MuiButton-outlinedPrimary:hover  {
+    --variant-outlinedBorder: rgba(from var(--accent-color-hover) r g b / 0.7);
+    --variant-outlinedColor: var(--accent-color-hover);
+    --variant-textBg: rgba(from var(--accent-color-hover) r g b / 0.08);
+    --variant-outlinedBg: rgba(from var(--accent-color-hover) r g b / 0.08);
+}
+
+.MuiButtonBase-root.Mui-disabled {
+    color: rgba(from var(--text) r g b / 0.3) !important;
+}
+
+.MuiButton-colorPrimary .MuiButton-icon svg {
+    fill: var(--button-text) !important;
+}
+
+.MuiButton-colorPrimary:hover .MuiButton-icon svg {
+    fill: var(--button-text-hover) !important;
+}
+
+/* Progress Bar styles */
+.MuiLinearProgress-colorPrimary {
+    background-color: var(--button-color);
+}
+
+.MuiLinearProgress-barColorPrimary {
+    background-color: var(--button-color-hover);
+}
+
+/* Link styles */
+.MuiLink-root {
+    color: var(--link-color);
+}
+
+.MuiLink-root:hover {
+    color: var(--link-color-hover);
+}
+
+.MuiLink-underlineHover[href*="authelia.com"] {
+    color: var(--text-muted);
+}
+
+.MuiLink-button {
+    color: var(--link-color);
+}
+
+/* OAuth Styles */
+[class*="scopesListContainer"] .MuiList-root[class*="-scopesList"] {
+    -webkit-backdrop-filter: saturate(1) blur(1.5em);
+    backdrop-filter: saturate(1) blur(1.5em);
+    background: var(--transparency-dark-25);
+}
+
+/* Settings Styles */
+.MuiAppBar-colorPrimary, [class*="MuiDrawer-paper"] {
+    background: var(--transparency-dark-25);
+}
+
+.MuiPaper-rounded:not([class*="Alert"]) {
+    background: var(--transparency-dark-35);
+}
+
+.MuiPaper-outlined {
+    border-color: var(--transparency-dark-10) !important;
+}
+
+.MuiDivider-root {
+    border-color: var(--transparency-light-10) !important;
+}
+
+.MuiSvgIcon-colorPrimary {
+    color: rgb(var(--accent-color)) !important;
+}
+
+.success-icon {
+    color: var(--arr-queue-color) !important;
+}
+
+.failure-icon {
+    color: var(--plex-poster-unwatched) !important;
+}
+
+.MuiStack-root .MuiBox-root .MuiBox-root {
+    border-color: rgba(from var(--text) r g b / 0.45)
+}
+
+#language-button {
+    color: var(--text);
+}
+
+#language-button:hover {
+    --IconButton-hoverBg: rgba(from var(--text) r g b / 0.08);
+}
+
+/* Alert Styles */
+.MuiAlert-filled {
+    -webkit-backdrop-filter: saturate(1) blur(0.5em);
+    backdrop-filter: saturate(1) blur(0.5em);
+    --ath-alert-opacity: 0.7;
+}
+
+.MuiAlert-filledError {
+    background-color: rgba(211, 47, 47, var(--ath-alert-opacity));
+}
+
+.MuiAlert-filledWarning {
+    background-color: rgba(237, 108, 2, var(--ath-alert-opacity));
+}
+
+.MuiAlert-filledSuccess {
+    background-color: rgba(46, 125, 50, var(--ath-alert-opacity));
+}
+
+.MuiAlert-filledInfo {
+    background-color: rgba(2, 136, 209, var(--ath-alert-opacity));
+}
+
+/* Button List Menu Styles */
+.MuiListItemButton-root.Mui-selected {
+    background-color: rgba(from var(--button-color) r g b / 0.16) !important;
+}
+.MuiListItemButton-root.Mui-selected:hover {
+    background-color: rgb(from var(--button-color) r g b / 0.24) !important;
+}
+
+.MuiListItemButton-root:hover:not(.Mui-selected) {
+    background-color: rgba(from var(--text) r g b / 0.08) !important;
+}
+
+#settings-menu .MuiSvgIcon-root {
+    color: var(--text) !important;
+    --IconButton-hoverBg: rgba(from var(--text) r g b / 0.08);
+}
+
+.MuiFormLabel-colorPrimary {
+    color: rgb(from var(--text) r g b / 0.7);
+}
+
+.MuiFormControlLabel-label {
+    color: var(--text);
+}
+
+/* WebAuthn Registration Styles */
+.information-icon {
+    color: rgb(var(--accent-color));
+}
+
+.MuiStepConnector-line {
+    border-color: rgba(from var(--text) r g b / 0.45) !important;
+}
+
+.MuiStepIcon-root.Mui-active {
+    color: rgb(var(--accent-color));
+}
+
+.MuiStepIcon-root.Mui-completed {
+    color: rgb(var(--accent-color));
+}
+
+.MuiStepLabel-label:not(.Mui-active) {
+    color: rgba(from var(--text) r g b / 0.7) !important;
+}
+
+.MuiStepLabel-iconContainer.Mui-active .MuiStepIcon-text, .MuiStepLabel-label.Mui-active {
+    fill: var(--text);
+}
+
+.MuiStepLabel-label.Mui-active {
+    color: var(--text);
+}
+
+.MuiStepLabel-iconContainer.Mui-disabled .MuiStepIcon-text {
+    fill: rgba(from var(--text) r g b / 0.9);
+}
+
+.MuiStepLabel-iconContainer.Mui-disabled .MuiStepIcon-root {
+    color: rgba(from var(--text) r g b / 0.5);
+}
+
+.tss-1nomc0u-icon svg circle[stroke-width="10"] {
+    stroke: rgb(var(--accent-color));
+}
+.tss-1nomc0u-icon svg circle[stroke="transparent"] {
+    fill: var(--text);
+}
+.tss-1nomc0u-icon svg circle[stroke-width="2"] {
+    stroke: var(--text);
+}
+
+/* Icon Button Styles */
+.MuiIconButton-colorPrimary {
+    color: rgb(var(--accent-color));
+    fill: rgb(var(--accent-color));
+}
+
+.MuiIconButton-colorPrimary:hover {
+   background-color: rgba(from rgb(var(--accent-color)) r g b / 0.055) !important;
+}
+
+/* Avatar Styles */
+.MuiAvatar-colorDefault { 
+    color: var(--button-color);
+    background-color: var(--button-color-hover);
+}
+
+.MuiPopover-paper, .MuiPopover-paper::before {
+    background-color: var(--transparency-dark-25);
+}
+
+/* Logged In Page, 2FA and MFA Styles */
+[id="authenticated-stage"] [class*="-mainContainer"], [id*="second-factor-stage"] [class*="-methodContainer"] {
+    border-color: var(--transparency-light-20) !important;
+}
+
+[id="one-time-password-method"] [class*="-iconContainer"] svg circle[stroke-width="2"] {
+    stroke: rgba(from var(--text) r g b / 0.8);
+}
+
+[id="one-time-password-method"] [class*="-iconContainer"] svg circle[stroke="transparent"] {
+    fill: rgba(from var(--text) r g b / 0.8);
+}
+
+[id="one-time-password-method"] [class*="-iconContainer"] svg circle[stroke-width="10"] {
+    stroke: rgb(var(--accent-color));
+}
+
+[id="2fa-container"] .information-icon, [id="2fa-container"] [class*="-infoTypography"] {
+    color: var(--accent-color-hover);
+}
+
+[id="one-time-password-option"] button svg circle[stroke-width="10"] {
+    stroke: rgb(var(--accent-color));
+}
+[id="one-time-password-option"] button svg circle[stroke="transparent"] {
+    fill: var(--button-text);
+}
+[id="one-time-password-option"] button svg circle[stroke-width="2"] {
+    stroke: var(--button-text);
+}
+
+[id="one-time-password-option"] button:hover svg circle[stroke-width="10"] {
+    stroke: rgb(var(--accent-color));
+}
+[id="one-time-password-option"] button:hover svg circle[stroke="transparent"] {
+    fill: var(--button-text-hover);
+}
+[id="one-time-password-option"] button:hover svg circle[stroke-width="2"] {
+    stroke: var(--button-text-hover);
+}
+
+/* Language Selector Styles */
+[id*="language-"].MuiMenuItem-root.Mui-selected {
+    background-color: rgba(from var(--button-color) r g b / 0.30) !important;
+}
+
+[id*="language-"].MuiMenuItem-root.Mui-selected:hover {
+    background-color: rgba(from var(--button-color-hover) r g b / 0.30) !important;
+}
+
+[id*="language-"] div.MuiPaper-root.MuiPaper-elevation.MuiMenu-paper {
+    background: var(--transparency-dark-25);
+}
+
+/* Account Menu Settings Styles */
+[id*="account-menu"] div.MuiPaper-root.MuiPaper-elevation.MuiMenu-paper {
+    background: var(--transparency-dark-25);
+}
+
+.MuiMenuItem-root, .MuiMenuItem-root svg {
+    color: var(--text) !important;
+}
+
+.MuiMenuItem-root:hover {
+    background-color: rgba(from var(--text) r g b / 0.08);
+}
+
+/* Tooltip Style */
+div.MuiPopper-root > div.MuiTooltip-tooltip {
+    -webkit-backdrop-filter: saturate(1) blur(1.5em);
+    backdrop-filter: saturate(1) blur(1.5em);
+    background: rgb(var(--accent-color),0.2);
+    color: var(--text);
+}
+
+/* Dialogue box styles */
+[class*="MuiDialog-paper"] {
+    background: var(--modal-bg-color);
+    -webkit-backdrop-filter: saturate(1) blur(1.5em);
+    backdrop-filter: saturate(1) blur(1.5em);
+}
+
+[class*="MuiDialogContentText"] {
+    color: rgba(from var(--text) r g b / 0.7);
+}
+
+/* Loading Bar Styles */
+.mui-19midj6 span span {
+    background-color: var(--text) !important;
+}
+
+/* INPUT FIELDS */
+
+/* Text Input styles */
+.MuiTextField-root, .MuiTextField-root .MuiInputBase-root {
+    color: var(--text);
+}
+
+.MuiTextField-root .MuiInputLabel-root {
+    color: rgba(from var(--text) r g b / 0.7);
+}
+
+.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(from var(--text) r g b / 0.23);
+}
+
+.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgb(var(--text));
+}
+
+.MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: rgb(var(--accent-color)) !important;
+}
+.MuiFormLabel-root.Mui-focused {
+    color: rgb(var(--accent-color)) !important;
+}
+
+.MuiInputBase-colorPrimary.MuiInput-underline::before {
+    border-color: rgba(from var(--text) r g b / 0.7);
+}
+
+.MuiInputBase-colorPrimary.MuiInput-underline:hover:not(.Mui-disabled, .Mui-error)::before {
+    border-color: var(--text);
+}
+
+.MuiInputBase-colorPrimary.MuiInput-underline::after {
+    border-color: rgb(var(--accent-color));
+}
+
+/* Text Digit Input styles */
+input[class*="-otpDigitInput"] {
+    background-color: var(--transparency-dark-10);
+    border-color: rgba(from var(--text) r g b / 0.3) !important;
+    color: var(--text);
+}
+
+input[class*="-otpDigitInput"]:focus {
+    border-color: rgb(var(--accent-color)) !important;
+    outline: none;
+    box-shadow: 0 0 0.2em 0 rgba(from rgb(var(--accent-color)) r g b / 0.3);
+}
+
+/* Checkbox styles */
+.MuiCheckbox-root .MuiTouchRipple-root {
+    color: rgb(var(--accent-color)) !important;
+}
+
+.MuiCheckbox-colorPrimary {
+    color: rgb(from var(--text) r g b / 0.7);
+}
+
+.MuiCheckbox-root.MuiCheckbox-colorPrimary.Mui-checked, .Mui-checked {
+    color: rgb(var(--accent-color));
+}
+
+.MuiCheckbox-root.MuiCheckbox-colorPrimary:hover {
+    background-color: rgba(from rgb(var(--accent-color)) r g b / 0.08) !important;
+}
+
+/* Radio Button Styles */
+.MuiRadio-colorPrimary:not(.Mui-checked) {
+    color: rgb(from var(--text) r g b / 0.7);
+}
+.MuiRadio-colorPrimary:hover {
+    background-color: rgba(from rgb(var(--accent-color)) r g b / 0.055) !important;
+}
+
+.MuiRadio-colorPrimary.Mui-checked {
+    color: rgb(var(--accent-color));
+    fill: rgb(var(--accent-color));
+}
+
+.MuiRadio-colorPrimary.Mui-checked:hover {
+    background-color: rgba(from rgb(var(--accent-color)) r g b / 0.055) !important;
+}
+
+/* Switch Styles */
+.MuiSwitch-colorPrimary:not(.Mui-checked), .MuiSwitch-colorPrimary:not(.Mui-checked) + .MuiSwitch-track {
+    color: var(--text);
+}
+
+.MuiSwitch-colorPrimary.Mui-checked {
+    color: rgb(var(--accent-color));
+}
+
+.MuiSwitch-colorPrimary.Mui-checked:hover {
+    background-color: rgba(from rgb(var(--accent-color)) r g b / 0.08) !important;
+}
+
+.MuiSwitch-colorPrimary:hover:not(.Mui-checked) {
+    background-color: rgba(from var(--text) r g b / 0.08) !important;
+}
+
+.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
+    background-color: rgb(var(--accent-color));
+}
\ No newline at end of file
diff --git a/css/base/lldap/lldap-base.css b/css/base/lldap/lldap-base.css
new file mode 100644
index 0000000000..25484702d9
--- /dev/null
+++ b/css/base/lldap/lldap-base.css
@@ -0,0 +1,303 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN - LLDAP base by emilyy3k					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
+body {
+    /* Base Colors */
+    --bs-body-color: var(--text);
+    --bs-body-bg: var(--main-bg-color);
+    --bs-body-color-alt: var(--text);
+    --bs-body-bg-alt: var(--main-bg-color);
+    background: var(--main-bg-color);
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
+    /* --text: greenyellow;
+    --button-text: red;
+    --button-text-hover: yellow; */
+    color: var(--text);
+}
+
+/* Header/NavBar Styles */
+html[class][lang] .nav-link {
+    color: var(--text);
+}
+
+html[class][lang] .nav-link:hover, html[class][lang] .nav-link:focus {
+    color: var(--link-color-hover);
+}
+
+header a.d-flex.mt-2 h2 {
+    color: var(--text);
+}
+
+header a.d-flex.mt-2 h2:hover, header a.d-flex.mt-2 h2:focus {
+    color: var(--link-color-hover);
+}
+
+html[class][lang] header.border-bottom {
+	border-color: var(--transparency-dark-10) !important;
+}
+
+/* User Dropdown Menu */
+html[class][lang] .dropdown-menu {
+    -webkit-backdrop-filter: saturate(1) blur(1.0em);
+    backdrop-filter: saturate(1) blur(1.0em);
+    color: var(--text);
+    border-color: rgba(from var(--text) r g b / 0.15);
+    border-radius: .25rem;
+	background: var(--drop-down-menu-bg);
+	background-repeat: repeat, no-repeat;
+	background-attachment: fixed, fixed;
+	background-position: center center, center center;
+	background-size: auto, cover;
+	-webkit-background-size: auto, cover;
+	-moz-background-size: auto, cover;
+	-o-background-size: auto, cover;
+}
+
+html[class][lang] .dropdown-menu .dropdown-divider {
+    color: var(--transparency-light-15);
+}
+
+html[class][lang] .dropdown-item {
+    color: var(--text);
+}
+
+html[class][lang] .dropdown-item:hover {
+    color: var(--text-hover);
+    background-color: var(--transparency-light-15);
+}
+
+/* Button Styles */
+html[class][lang] .btn.btn-primary {
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+    color: var(--button-text);
+}
+
+html[class][lang] .btn.btn-primary:hover {
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+    color: var(--button-text-hover);
+}
+
+
+html[class][lang] .btn.btn-secondary, html[class][lang] .btn-danger {
+    background-color: rgba(from var(--button-color) r g b / 0.5);
+    border-color: rgba(from var(--button-color) r g b / 0.15);
+    color: var(--button-text);
+}
+
+html[class][lang] .btn.btn-secondary:hover, html[class][lang] .btn-danger:hover {
+    background-color: rgba(from var(--button-color-hover) r g b / 0.75);
+    border-color: rgba(from var(--button-color-hover) r g b / 0.4);
+    color: var(--button-text-hover);
+}
+
+/* table elements */
+thead, tbody {
+    --bs-table-hover-color: var(--text);
+    --bs-table-active-color: var(--text);
+    --bs-table-striped-color: var(--text);
+    color: var(--text);
+    border-color: var(--accent-color);
+}
+
+/* Link Styles */
+
+html[class][lang] a {
+    color: var(--text);
+}
+
+html[class][lang] a:hover {
+    color: var(--link-color-hover);
+}
+
+html[class][lang] a.link-secondary {
+    color: rgb(var(--accent-color));
+}
+
+html[class][lang] a.link-secondary:hover {
+    color: var(--accent-color-hover);
+}
+
+/* Muted Text */
+html[class][lang] .text-muted {
+    color: var(--text-muted) !important;
+}
+
+/* Info Circle Styles */
+html[class][lang] .btn-link {
+    color: var(--accent-color-hover);
+}
+
+html[class][lang] .btn-link:hover {
+    color: rgb(var(--accent-color));
+}
+
+/* Tooltip Styles */
+html[class][lang] div.tooltip {
+    opacity: 1 !important;
+}
+
+html[class][lang] .bs-tooltip-end .tooltip-arrow::before {
+    -webkit-backdrop-filter: saturate(1) blur(1.5em);
+    backdrop-filter: saturate(1) blur(1.5em);
+    border-right-color: rgb(var(--accent-color),0.2);
+    fill: rgb(var(--accent-color),0.2);
+}
+
+html[class][lang] div.tooltip .tooltip-inner {
+    -webkit-backdrop-filter: saturate(1) blur(1.5em);
+    backdrop-filter: saturate(1) blur(1.5em);
+    background: rgb(var(--accent-color),0.2);
+    color: var(--text);
+}
+
+/* Dropdown Selector Styles */
+html[class][lang] select {
+  &, &::picker(select) {
+    appearance: base-select; 
+  }
+}
+
+html[class][lang] select {
+    background-color: var(--transparency-dark-25);
+    color: var(--text);
+    border-color: rgba(from var(--text) r g b / 0.25);
+    background-image: none;
+    padding: .375rem .75rem;
+}
+
+html[class][lang] select:focus {
+    border-color: rgb(var(--accent-color));
+    box-shadow: 0 0 0.25em .25rem rgba(from rgb(var(--accent-color)) r g b / 0.25) !important;
+}
+
+html[class][lang] select:hover {
+    border-color: var(--accent-color-hover);
+}
+
+html[class][lang] select::picker(select) {
+    -webkit-backdrop-filter: saturate(1) blur(1.0em);
+    backdrop-filter: saturate(1) blur(1.0em);
+    color: var(--text);
+    border-color: rgba(from var(--text) r g b / 0.15);
+    border-radius: .25rem;
+	background: var(--drop-down-menu-bg);
+	background-repeat: repeat, no-repeat;
+	background-attachment: fixed, fixed;
+	background-position: center center, center center;
+	background-size: auto, cover;
+	-webkit-background-size: auto, cover;
+	-moz-background-size: auto, cover;
+	-o-background-size: auto, cover;
+}
+
+html[class][lang] select option {
+    padding: .375rem .75rem;
+}
+
+html[class][lang] select.option:hover {
+    background: var(--transparency-light-10);
+}
+
+/* Switch Styles */
+html[class][lang] input#darkModeToggle.form-check-input:checked {
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+
+html[class][lang] input#darkModeToggle.form-check-input:focus {
+    border-color: var(--button-color-hover);
+    box-shadow: 0 0 0 .25rem rgba(from var(--button-color-hover) r g b / 0.25);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+}
+
+/* Checkbox Styles */
+html[class][lang] .form-check-input {
+    background-color: var(--transparency-dark-25);
+    border-color: rgba(from var(--text) r g b / 0.25);
+}
+
+html[class][lang] .form-check-input:hover {
+    border-color: var(--accent-color-hover);
+}
+
+html[class][lang] .form-check-input:checked {
+    background-color: rgba(var(--accent-color));
+    border-color: transparent;
+}
+
+html[class][lang] .form-check-input:focus {
+    border-color: var(--accent-color-hover);
+    box-shadow: 0 0 0.25em .25rem rgba(from rgb(var(--accent-color)) r g b / 0.25) !important;
+}
+
+/* Text Input Styles */
+html[class][lang] input.form-control {
+    background-color: var(--transparency-dark-25);
+    color: var(--text-muted);
+    border-color: rgba(from var(--text) r g b / 0.25);
+}
+
+html[class][lang] input.form-control[type="text"]:hover {
+    border-color: var(--accent-color-hover)
+}
+
+html[class][lang] .form-control:focus {
+    background-color: var(--transparency-dark-50);
+    border-color: var(--accent-color-hover) !important;
+    box-shadow: 0 0 0.25em .25rem rgba(from rgb(var(--accent-color)) r g b / 0.25) !important;
+    color: var(--text);
+}
+
+/* File Input Styles */
+html[class][lang] input.form-control[type="file"]::file-selector-button {
+    background-color: var(--button-color);
+    color: var(--button-text);
+    border-color: inherit;
+}
+
+html.dark .form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: var(--button-color-hover);
+    color: var(--button-text-hover);
+}
+
+/* Footer Stuff */
+html[class][lang] footer.bg-light {
+    background: none;
+    background-color: transparent !important;
+    position: relative;
+}
+
+body > div > div.container.py-3 > div.row.justify-content-center {
+    padding-bottom: 2em !important;
+}
+
+/* Login Page */
+html[class][lang] .input-group-text {
+    background-color: var(--transparency-light-15);
+    color: var(--text);
+    border-color: rgba(from var(--text) r g b / 0.15);
+}
+
+span#uuid.form-control-static, span#creation_date.form-control-static {
+    color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/css/community-theme-options/catppuccin-frappe.css b/css/community-theme-options/catppuccin-frappe.css
index 945e43235e..7b29ac9771 100644
--- a/css/community-theme-options/catppuccin-frappe.css
+++ b/css/community-theme-options/catppuccin-frappe.css
@@ -20,7 +20,7 @@
 
   --text: #c6d0f5;
   --text-hover: var(--text);
-  --text-muted: a5adce;
+  --text-muted: #a5adce;
 
   /* Specials */
   --arr-queue-color: #a6d189; /* Servarr apps + Bazarr */
diff --git a/css/community-theme-options/catppuccin-latte.css b/css/community-theme-options/catppuccin-latte.css
index 56fce33c00..23e4b38ca5 100644
--- a/css/community-theme-options/catppuccin-latte.css
+++ b/css/community-theme-options/catppuccin-latte.css
@@ -20,7 +20,7 @@
 
   --text: #4c4f69;
   --text-hover: var(--text);
-  --text-muted: 6c6f85;
+  --text-muted: #6c6f85;
 
   /* Specials */
   --arr-queue-color: #40a02b; /* Servarr apps + Bazarr */
diff --git a/css/community-theme-options/catppuccin-macchiato.css b/css/community-theme-options/catppuccin-macchiato.css
index 4e533f9660..3ff2f4aff2 100644
--- a/css/community-theme-options/catppuccin-macchiato.css
+++ b/css/community-theme-options/catppuccin-macchiato.css
@@ -20,7 +20,7 @@
 
   --text: #cad3f5;
   --text-hover: var(--text);
-  --text-muted: a5adcb;
+  --text-muted: #a5adcb;
 
   /* Specials */
   --arr-queue-color: #a6da95; /* Servarr apps + Bazarr */
diff --git a/css/community-theme-options/catppuccin-mocha.css b/css/community-theme-options/catppuccin-mocha.css
index 3522092dc1..652a169a6a 100644
--- a/css/community-theme-options/catppuccin-mocha.css
+++ b/css/community-theme-options/catppuccin-mocha.css
@@ -20,7 +20,7 @@
 
   --text: #cdd6f4;
   --text-hover: var(--text);
-  --text-muted: a6adc8;
+  --text-muted: #a6adc8;
 
   /* Specials */
   --arr-queue-color: #a6e3a1; /* Servarr apps + Bazarr */