diff --git a/web/__test__/store/theme.test.ts b/web/__test__/store/theme.test.ts
index 0b128278f..e272595da 100644
--- a/web/__test__/store/theme.test.ts
+++ b/web/__test__/store/theme.test.ts
@@ -80,9 +80,7 @@ describe('Theme Store', () => {
         banner: true,
         bannerGradient: true,
       });
-      expect(store.bannerGradient).toBe(
-        'background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--header-background-color) 30%);'
-      );
+      expect(store.bannerGradient).toMatchInlineSnapshot(`"background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--header-background-color) 90%);"`);
 
       store.setTheme({
         ...store.theme,
@@ -90,9 +88,7 @@ describe('Theme Store', () => {
         bannerGradient: true,
         bgColor: '#123456',
       });
-      expect(store.bannerGradient).toBe(
-        'background-image: linear-gradient(90deg, var(--header-gradient-start) 0, var(--header-gradient-end) 30%);'
-      );
+      expect(store.bannerGradient).toMatchInlineSnapshot(`"background-image: linear-gradient(90deg, var(--header-gradient-start) 0, var(--header-gradient-end) 90%);"`);
     });
   });
 
diff --git a/web/components/UserProfile.ce.vue b/web/components/UserProfile.ce.vue
index c54088e80..f8bc7f3bd 100644
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -96,7 +96,7 @@ onMounted(() => {
   >
     <div
       v-if="bannerGradient"
-      class="absolute z-0 w-[125%] top-0 bottom-0 right-0"
+      class="absolute z-0 w-full top-0 bottom-0 right-0"
       :style="bannerGradient"
     />
 
diff --git a/web/store/theme.ts b/web/store/theme.ts
index 11110e48d..333c27894 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.ts
@@ -59,7 +59,7 @@ export const useThemeStore = defineStore('theme', () => {
     }
     const start = theme.value?.bgColor ? 'var(--header-gradient-start)' : 'rgba(0, 0, 0, 0)';
     const end = theme.value?.bgColor ? 'var(--header-gradient-end)' : 'var(--header-background-color)';
-    return `background-image: linear-gradient(90deg, ${start} 0, ${end} 30%);`;
+    return `background-image: linear-gradient(90deg, ${start} 0, ${end} 90%);`;
   });
   // Actions
   const setTheme = async (data?: Theme) => {
@@ -110,7 +110,7 @@ export const useThemeStore = defineStore('theme', () => {
         : customTheme['--header-gradient-end'];
 
       // set the banner gradient
-      customTheme['--banner-gradient'] = `linear-gradient(90deg, ${start} 0, ${end} 30%)`;
+      customTheme['--banner-gradient'] = `linear-gradient(90deg, ${start} 0, ${end} 90%)`;
     }
 
     // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings