diff --git a/store/theme.ts b/store/theme.ts
index 40b790327..77fe9d1ea 100644
--- a/store/theme.ts
+++ b/store/theme.ts
@@ -9,13 +9,19 @@ setActivePinia(createPinia());
 
 export const useThemeStore = defineStore('theme', () => {
   // State
-  const serverTheme = ref<Theme|undefined>();
+  const theme = ref<Theme|undefined>();
   // Getters
-  const darkMode = computed(() => (serverTheme.value?.name === 'black' || serverTheme.value?.name === 'azure') ?? false);
+  const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'azure') ?? false);
+  const bannerGradient = computed(() => {
+    if (!theme.value?.banner || !theme.value?.bannerGradient) return undefined;
+    const start = theme.value?.bgColor ? 'var(--color-customgradient-start)' : 'rgba(0, 0, 0, 0)';
+    const end = theme.value?.bgColor ? 'var(--color-customgradient-end)' : 'var(--color-beta)';
+    return `background-image: linear-gradient(90deg, ${start} 0, ${end} 30%);`;
+  });
   // Actions
   const setTheme = (data: Theme) => {
     console.debug('[setTheme]');
-    serverTheme.value = data;
+    theme.value = data;
   };
   const setCssVars = () => {
     const body = document.body;
@@ -33,13 +39,13 @@ export const useThemeStore = defineStore('theme', () => {
     };
     let { alpha, beta, gamma } = darkMode.value ? defaultColors.darkTheme : defaultColors.lightTheme;
     // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
-    if (serverTheme.value?.textColor) alpha = serverTheme.value?.textColor;
-    if (serverTheme.value?.bgColor) {
-      beta = serverTheme.value?.bgColor;
+    if (theme.value?.textColor) alpha = theme.value?.textColor;
+    if (theme.value?.bgColor) {
+      beta = theme.value?.bgColor;
       body.style.setProperty('--color-customgradient-start', hexToRgba(beta, 0));
-      body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.9));
+      body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.7));
     }
-    if (serverTheme.value?.metaColor) gamma = serverTheme.value?.metaColor;
+    if (theme.value?.metaColor) gamma = theme.value?.metaColor;
     body.style.setProperty('--color-alpha', alpha);
     body.style.setProperty('--color-beta', beta);
     body.style.setProperty('--color-gamma', gamma);
@@ -49,11 +55,15 @@ export const useThemeStore = defineStore('theme', () => {
     body.style.setProperty('--ring-shadow', `0 0 ${beta}`);
   };
 
-  watch(serverTheme, () => {
+  watch(theme, () => {
     setCssVars();
   });
 
   return {
+    // state
+    theme,
+    bannerGradient,
+    // actions
     setTheme,
   };
 });