diff --git a/web/__test__/components/HeaderServerStatus.test.ts b/web/__test__/components/HeaderServerStatus.test.ts
new file mode 100644
index 0000000000..cb3e194648
--- /dev/null
+++ b/web/__test__/components/HeaderServerStatus.test.ts
@@ -0,0 +1,93 @@
+import { nextTick } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { mount } from '@vue/test-utils';
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+import ServerStatus from '~/components/UserProfile/ServerStatus.vue';
+import UptimeExpire from '~/components/UserProfile/UptimeExpire.vue';
+import { useServerStore } from '~/store/server';
+import { createTestI18n } from '../utils/i18n';
+
+vi.mock('~/store/server', async () => {
+  const { defineStore } = await import('pinia');
+  return {
+    useServerStore: defineStore('server', {
+      state: () => ({
+        state: 'LIFETIME',
+        uptime: Date.now() - 9 * 86400000,
+        expireTime: Date.now() + 14 * 86400000,
+        dateTimeFormat: { date: '%c', time: '%R' },
+      }),
+    }),
+  };
+});
+
+vi.mock('@unraid/ui', () => {
+  const slot = { template: '<div><slot /></div>' };
+  return {
+    cn: (...values: string[]) => values.filter(Boolean).join(' '),
+    Tooltip: slot,
+    TooltipContent: slot,
+    TooltipProvider: slot,
+    TooltipTrigger: slot,
+  };
+});
+
+describe('header uptime and expiry states', () => {
+  let wrapper: VueWrapper | undefined;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-10-10T12:00:00Z'));
+    setActivePinia(createPinia());
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  it('refreshes the compact timestamp when a running server changes to a trial or expired trial', async () => {
+    wrapper = mount(ServerStatus, {
+      global: { plugins: [createTestI18n()], stubs: { UpcServerState: true } },
+    });
+    const server = useServerStore();
+    expect(wrapper.text()).toContain('Uptime 9 days');
+
+    server.state = 'TRIAL';
+    await nextTick();
+    expect(wrapper.text()).toContain('Expires in 14 days');
+    expect(wrapper.text()).not.toContain('Expires in 9 days');
+
+    server.expireTime = Date.now() + 17 * 86400000;
+    await nextTick();
+    expect(wrapper.text()).toContain('Expires in 17 days');
+
+    server.state = 'ENOCONN';
+    await nextTick();
+    expect(wrapper.text()).toContain('Expires in 17 days');
+
+    server.state = 'EEXPIRED';
+    server.expireTime = Date.now() - 2 * 86400000;
+    await nextTick();
+    expect(wrapper.text()).toContain('Expired 2 days');
+  });
+
+  it('keeps compact expiry to its largest unit while preserving the full expiry display', () => {
+    const server = useServerStore();
+    server.state = 'TRIAL';
+    server.expireTime = Date.now() + 14 * 86400000 + 2 * 3600000 + 3 * 60000;
+    wrapper = mount(UptimeExpire, {
+      props: { shortText: true },
+      global: { plugins: [createTestI18n()] },
+    });
+    expect(wrapper.text()).toBe('Expires in 14 days');
+    wrapper.unmount();
+    wrapper = mount(UptimeExpire, { global: { plugins: [createTestI18n()] } });
+    expect(wrapper.text()).toContain('14 days 2 hours 3 minutes');
+  });
+});
diff --git a/web/__test__/components/HeaderThemes.test.ts b/web/__test__/components/HeaderThemes.test.ts
index 88872ff65a..762905501c 100644
--- a/web/__test__/components/HeaderThemes.test.ts
+++ b/web/__test__/components/HeaderThemes.test.ts
@@ -1,4 +1,7 @@
-import { ref } from 'vue';
+import { readFileSync } from 'node:fs';
+import { URL as NodeURL } from 'node:url';
+
+import { nextTick, ref } from 'vue';
 import { setActivePinia } from 'pinia';
 import { provideApolloClient } from '@vue/apollo-composable';
 import { mount } from '@vue/test-utils';
@@ -88,7 +91,7 @@ const THEMES = [
 const layoutSignature = (wrapper: VueWrapper) => {
   const root = wrapper.get('#UnraidHeader');
   const gradient = root.find('.unraid-banner-gradient-layer');
-  const logoSvg = root.find('.uh-logo-block a svg');
+  const logoSvg = root.find('.uh-logo-block a :is(svg, img)');
   return {
     gradientLayer: gradient.exists() ? [...gradient.classes()].sort().join(' ') : null,
     logoSvg: logoSvg.exists() ? [...logoSvg.classes()].sort().join(' ') : null,
@@ -185,6 +188,19 @@ describe('Header.standalone.vue theme layout', () => {
     }
   );
 
+  it('embeds the original WebGUI logo asset without reconstructing its paths', () => {
+    const image = mountWithTheme('white').get('.uh-logo-block img');
+    const original = readFileSync(
+      new NodeURL('../../../api/dev/webGui/images/UN-logotype-gradient.svg', import.meta.url),
+      'utf8'
+    );
+    expect(decodeURIComponent(image.attributes('src')!.replace('data:image/svg+xml,', ''))).toBe(
+      original
+    );
+    expect(image.attributes('width')).toBe('222.36');
+    expect(image.attributes('height')).toBe('39.04');
+  });
+
   it.each(['gradient', 'theme'] as const)('renders the %s header logo style', (logoStyle) => {
     expect(layoutSignature(mountWithTheme('white', { logoStyle })).logoSvg).toMatchSnapshot();
   });
@@ -199,7 +215,7 @@ describe('Header.standalone.vue theme layout', () => {
   it.each(THEMES.map((theme) => [theme.name, theme] as const))(
     'keeps the logo a fixed size on the %s theme so the boot placeholder cannot resize on mount',
     (_name, theme) => {
-      const logoSvg = mountWithTheme(theme.name).get('.uh-logo-block a svg');
+      const logoSvg = mountWithTheme(theme.name).get('.uh-logo-block a :is(svg, img)');
       expect(logoSvg.classes()).toContain('shrink-0');
       expect(logoSvg.classes()).not.toContain('max-w-full');
       expect(logoSvg.classes()).toContain('w-[14rem]');
@@ -207,19 +223,33 @@ describe('Header.standalone.vue theme layout', () => {
     }
   );
 
-  /**
-   * Regression guard: the banner gradient must stay within the legacy header's
-   * `min(30%, 320px)` edge width. A bare `left-[55%]` covered the right 45%
-   * (~576px at 1280px, ~1.8x legacy) and visibly obscured users' banner images.
-   */
-  it('scopes the banner gradient to the legacy edge width', () => {
-    const gradient = mountWithTheme('white').get('.unraid-banner-gradient-layer');
-    expect(gradient.classes()).toContain('w-[min(30%,320px)]');
-    expect(gradient.classes()).toContain('right-0');
-    expect(gradient.classes()).not.toContain('left-[55%]');
+  it('enables the header fade only while both banner and fade are enabled', async () => {
+    const style = document.documentElement.style;
+    const previousGradient = style.getPropertyValue('--banner-gradient');
+    style.setProperty('--banner-gradient', 'linear-gradient(90deg, transparent, #1c1b1b)');
+    try {
+      const wrapper = mountWithTheme('white');
+      const themeStore = useThemeStore();
+      expect(wrapper.classes()).toContain('uh-banner-gradient-enabled');
+
+      themeStore.setTheme({ bannerGradient: false });
+      await nextTick();
+      expect(wrapper.classes()).not.toContain('uh-banner-gradient-enabled');
+
+      themeStore.setTheme({ bannerGradient: true });
+      await nextTick();
+      expect(wrapper.classes()).toContain('uh-banner-gradient-enabled');
+
+      themeStore.setTheme({ banner: false });
+      await nextTick();
+      expect(wrapper.classes()).not.toContain('uh-banner-gradient-enabled');
+    } finally {
+      if (previousGradient) style.setProperty('--banner-gradient', previousGradient);
+      else style.removeProperty('--banner-gradient');
+    }
   });
 
-  it('omits the banner gradient styling hook only when the theme disables it', () => {
+  it('disables the backdrop without a banner', () => {
     const themeStore = useThemeStore();
     themeStore.setTheme({
       name: 'white',
@@ -235,9 +265,8 @@ describe('Header.standalone.vue theme layout', () => {
       global: { plugins: [pinia], stubs },
     });
     wrappers.push(wrapper);
-    // The layer is always present; `--banner-gradient` is null when disabled, so
-    // it self-gates in CSS rather than by conditional rendering.
     expect(wrapper.find('.unraid-banner-gradient-layer').exists()).toBe(true);
+    expect(wrapper.classes()).not.toContain('uh-banner-gradient-enabled');
     expect(wrapper.find('.uh-meta-over-banner').exists()).toBe(false);
   });
 });
diff --git a/web/__test__/components/__snapshots__/HeaderThemes.test.ts.snap b/web/__test__/components/__snapshots__/HeaderThemes.test.ts.snap
index acc7c2ec62..b16733f77f 100644
--- a/web/__test__/components/__snapshots__/HeaderThemes.test.ts.snap
+++ b/web/__test__/components/__snapshots__/HeaderThemes.test.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Header.standalone.vue theme layout > renders a consistent layout on the azure theme 1`] = `
 {
-  "gradientLayer": "absolute inset-y-0 pointer-events-none right-0 unraid-banner-gradient-layer w-[min(30%,320px)] z-0",
-  "logoSvg": "h-auto max-h-[3rem] shrink-0 w-[14rem] xs:w-[16rem]",
+  "gradientLayer": "absolute inset-y-0 pointer-events-none unraid-banner-gradient-layer z-0",
+  "logoSvg": "h-auto max-h-[3rem] object-contain shrink-0 w-[14rem] xs:w-[16rem]",
   "metaOverBanner": true,
   "regions": {
     "arrayUsage": true,
@@ -17,8 +17,8 @@ exports[`Header.standalone.vue theme layout > renders a consistent layout on the
 
 exports[`Header.standalone.vue theme layout > renders a consistent layout on the black theme 1`] = `
 {
-  "gradientLayer": "absolute inset-y-0 pointer-events-none right-0 unraid-banner-gradient-layer w-[min(30%,320px)] z-0",
-  "logoSvg": "h-auto max-h-[3rem] shrink-0 w-[14rem] xs:w-[16rem]",
+  "gradientLayer": "absolute inset-y-0 pointer-events-none unraid-banner-gradient-layer z-0",
+  "logoSvg": "h-auto max-h-[3rem] object-contain shrink-0 w-[14rem] xs:w-[16rem]",
   "metaOverBanner": true,
   "regions": {
     "arrayUsage": false,
@@ -32,8 +32,8 @@ exports[`Header.standalone.vue theme layout > renders a consistent layout on the
 
 exports[`Header.standalone.vue theme layout > renders a consistent layout on the gray theme 1`] = `
 {
-  "gradientLayer": "absolute inset-y-0 pointer-events-none right-0 unraid-banner-gradient-layer w-[min(30%,320px)] z-0",
-  "logoSvg": "h-auto max-h-[3rem] shrink-0 w-[14rem] xs:w-[16rem]",
+  "gradientLayer": "absolute inset-y-0 pointer-events-none unraid-banner-gradient-layer z-0",
+  "logoSvg": "h-auto max-h-[3rem] object-contain shrink-0 w-[14rem] xs:w-[16rem]",
   "metaOverBanner": true,
   "regions": {
     "arrayUsage": true,
@@ -47,8 +47,8 @@ exports[`Header.standalone.vue theme layout > renders a consistent layout on the
 
 exports[`Header.standalone.vue theme layout > renders a consistent layout on the white theme 1`] = `
 {
-  "gradientLayer": "absolute inset-y-0 pointer-events-none right-0 unraid-banner-gradient-layer w-[min(30%,320px)] z-0",
-  "logoSvg": "h-auto max-h-[3rem] shrink-0 w-[14rem] xs:w-[16rem]",
+  "gradientLayer": "absolute inset-y-0 pointer-events-none unraid-banner-gradient-layer z-0",
+  "logoSvg": "h-auto max-h-[3rem] object-contain shrink-0 w-[14rem] xs:w-[16rem]",
   "metaOverBanner": true,
   "regions": {
     "arrayUsage": false,
@@ -60,6 +60,6 @@ exports[`Header.standalone.vue theme layout > renders a consistent layout on the
 }
 `;
 
-exports[`Header.standalone.vue theme layout > renders the gradient header logo style 1`] = `"h-auto max-h-[3rem] shrink-0 w-[14rem] xs:w-[16rem]"`;
+exports[`Header.standalone.vue theme layout > renders the gradient header logo style 1`] = `"h-auto max-h-[3rem] object-contain shrink-0 w-[14rem] xs:w-[16rem]"`;
 
 exports[`Header.standalone.vue theme layout > renders the theme header logo style 1`] = `"h-auto max-h-[3rem] shrink-0 text-header-text-primary w-[14rem] xs:w-[16rem]"`;
diff --git a/web/src/assets/UN-logotype-gradient.svg b/web/src/assets/UN-logotype-gradient.svg
new file mode 100644
index 0000000000..fe08730371
--- /dev/null
+++ b/web/src/assets/UN-logotype-gradient.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 222.36 39.04"><defs><linearGradient id="header-logo" x1="47.53" y1="79.1" x2="170.71" y2="-44.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e32929"/><stop offset="1" stop-color="#ff8d30"/></linearGradient></defs><title>unraid.net</title><path d="M146.7,29.47H135l-3,9h-6.49L138.93,0h8l13.41,38.49h-7.09L142.62,6.93l-5.83,16.88h8ZM29.69,0V25.4c0,8.91-5.77,13.64-14.9,13.64S0,34.31,0,25.4V0H6.54V25.4c0,5.17,3.19,7.92,8.25,7.92s8.36-2.75,8.36-7.92V0ZM50.86,12v26.5H44.31V0h6.11l17,26.5V0H74V38.49H67.9ZM171.29,0h6.54V38.49h-6.54Zm51.07,24.69c0,9-5.88,13.8-15.17,13.8H192.67V0H207.3c9.18,0,15.06,4.78,15.06,13.8ZM215.82,13.8c0-5.28-3.3-8.14-8.52-8.14h-8.08V32.77h8c5.33,0,8.63-2.8,8.63-8.08ZM108.31,23.92c4.34-1.6,6.93-5.28,6.93-11.55C115.24,3.68,110.18,0,102.48,0H88.84V38.49h6.55V5.66h6.87c3.8,0,6.21,1.82,6.21,6.71s-2.41,6.76-6.21,6.76H98.88l9.21,19.36h7.53Z" fill="url(#header-logo)"/></svg>
diff --git a/web/src/components/Brand/Avatar.vue b/web/src/components/Brand/Avatar.vue
index 4be7462d89..7b5ea9cb83 100644
--- a/web/src/components/Brand/Avatar.vue
+++ b/web/src/components/Brand/Avatar.vue
@@ -22,11 +22,7 @@ const { avatar, connectPluginInstalled, registered, username } = storeToRefs(ser
       class="absolute inset-0 z-10 h-9 w-9 overflow-hidden rounded-full object-cover"
     />
     <template v-else>
-      <BrandMark
-        gradient-start="#fff"
-        gradient-stop="#fff"
-        class="absolute z-10 h-9 w-9 p-[6px] opacity-100"
-      />
+      <BrandMark gradient-start="#fff" gradient-stop="#fff" class="absolute z-10 h-6 w-6 opacity-100" />
     </template>
   </figure>
 </template>
diff --git a/web/src/components/Header.standalone.vue b/web/src/components/Header.standalone.vue
index 7630aad806..d68978cb24 100644
--- a/web/src/components/Header.standalone.vue
+++ b/web/src/components/Header.standalone.vue
@@ -29,12 +29,8 @@ import { useThemeStore } from '~/store/theme';
  * multi-component header (`unraid-header-os-version` + `unraid-user-profile`) is
  * rendered instead.
  *
- * Layout is a CSS grid so a single `actions` block (bell + account menu) can be
- * repositioned across the breakpoint without duplicating stateful components:
- *   - mobile: app-style — logo + actions share the top row, then version, then
- *     status, then name.
- *   - sm+: two columns — logo/version on the left, status over name+actions on the
- *     right (the prior desktop look).
+ * A single grid keeps stateful controls mounted once. On mobile the version and
+ * update notice span the header width instead of competing with account actions.
  */
 export interface Props {
   server?: Server | string;
@@ -73,10 +69,6 @@ const theme = computed(() => themeStore.theme);
 const logoStyle = computed<HeaderLogoStyle>(() =>
   props.headerLogoStyle === 'theme' ? 'theme' : 'gradient'
 );
-// On mobile the meta row spans full width over the banner image, so its text
-// needs its own legibility treatment (drop-shadow) rather than the right-only
-// banner gradient. Only when a banner image is present, otherwise the header is
-// a solid color the theme text already reads against.
 const hasBanner = computed(() => theme.value?.banner === true);
 
 const dropdownOpen = ref(false);
@@ -90,23 +82,15 @@ const copyLanIp = async () => {
 </script>
 
 <template>
-  <div id="UnraidHeader" class="unraid-header-shell text-foreground relative z-20 w-full max-w-full">
-    <!--
-      Banner-gradient backdrop. Darkens the right of the header so the metadata,
-      server name, and account controls stay legible over a bright banner image,
-      matching the legacy header. Rendered inside the component (in the `.unapi`
-      scope) because the webgui `#header` element lives outside that scope, so the
-      main.css `#header.image::before` edge gradient never matches here. The
-      `.unraid-banner-gradient-layer` class (styled in main.css) paints
-      `var(--banner-gradient)`, which is null when the banner gradient is
-      disabled, so this self-gates. Sits behind the content columns (z-0).
-      Width matches the legacy `#header.image::before` edge gradient in main.css
-      (`background-size: min(30%, 320px) 100%`) rather than a bare percentage:
-      `left-[55%]` covered the right 45% (576px at a 1280px viewport), roughly
-      1.8x the legacy 320px, which visibly obscured users' banner images.
-    -->
+  <div
+    id="UnraidHeader"
+    class="unraid-header-shell text-foreground relative z-20 w-full max-w-full"
+    :class="{ 'uh-banner-gradient-enabled': themeStore.bannerGradient }"
+  >
+    <!-- Start the desktop fade before the account column so it follows the
+         content width. Mobile uses a backdrop across all header rows. -->
     <div
-      class="unraid-banner-gradient-layer pointer-events-none absolute inset-y-0 right-0 z-0 w-[min(30%,320px)]"
+      class="unraid-banner-gradient-layer pointer-events-none absolute inset-y-0 z-0"
       aria-hidden="true"
     />
 
@@ -114,22 +98,21 @@ const copyLanIp = async () => {
       class="uh-meta-right relative z-10 flex max-w-full min-w-0 flex-col items-end gap-y-1 text-end"
       :class="{ 'uh-meta-over-banner': hasBanner }"
     >
-      <ArrayUsage v-if="showArrayUsage" />
+      <ArrayUsage v-if="showArrayUsage" class="uh-array-usage" />
       <!--
         Below sm the meta row becomes a full-width top strip so the uptime and
         registration state split to opposite ends (uptime left, state right)
         instead of stacking cramped on the right. At sm+ it collapses back to the
-        right-aligned desktop cluster. Over a banner, force white text so both
-        ends read against the image (paired with the drop-shadow in scoped CSS).
+        right-aligned desktop cluster. The backdrop provides contrast while
+        preserving the configured header text colors.
       -->
       <UpcServerStatus
-        class="max-sm:!w-full max-sm:!flex-row max-sm:!items-center max-sm:!justify-between max-sm:!gap-x-2 max-sm:pr-2"
-        :class="{ 'max-sm:!text-white': hasBanner }"
+        class="uh-server-status max-sm:!w-full max-sm:!flex-row max-sm:!flex-wrap max-sm:!items-center max-sm:!justify-between max-sm:!gap-x-2"
       />
     </div>
 
     <div class="uh-logo-block relative z-10 flex min-w-0 flex-col items-start justify-center gap-y-2">
-      <HeaderLogo :logo-style="logoStyle" />
+      <HeaderLogo class="uh-logo" :logo-style="logoStyle" />
       <div class="uh-version flex min-w-0">
         <HeaderVersion />
       </div>
@@ -144,101 +127,85 @@ const copyLanIp = async () => {
             class="hidden truncate text-end text-base md:!inline-flex md:!items-center"
             v-html="description"
           />
-          <span class="text-header-text-secondary hidden px-2 md:!inline-flex md:!items-center"
-            >&bull;</span
-          >
+          <span class="text-header-text-secondary hidden md:!inline-flex md:!items-center">&bull;</span>
         </template>
         <Button
           v-if="lanIp"
           variant="ghost"
           :title="t('userProfile.clickToCopyLanIp', [lanIp])"
-          class="text-header-text-primary flex h-auto min-w-0 items-center truncate p-0 text-base opacity-100 transition-opacity hover:opacity-75 focus:opacity-75"
+          class="text-header-text-primary flex h-auto max-w-full min-w-0 items-center truncate p-0 text-base opacity-100 transition-opacity hover:opacity-75 focus:opacity-75"
           @click="copyLanIp()"
         >
-          {{ name }}
+          <span class="truncate">{{ name }}</span>
         </Button>
         <span v-else class="text-header-text-primary xs:text-base flex items-center truncate text-sm">
           {{ name }}
         </span>
       </div>
 
-      <NotificationsSidebar />
+      <div class="uh-actions flex shrink-0 items-center gap-x-1">
+        <NotificationsSidebar />
 
-      <DropdownMenu v-model:open="dropdownOpen" align="end" side="bottom" :side-offset="4">
-        <template #trigger>
-          <UpcDropdownTrigger />
-        </template>
-        <template #content>
-          <div class="max-w-[350px] sm:min-w-[350px]">
-            <UpcDropdownContent @close-dropdown="dropdownOpen = false" />
-          </div>
-        </template>
-      </DropdownMenu>
+        <DropdownMenu v-model:open="dropdownOpen" align="end" side="bottom" :side-offset="4">
+          <template #trigger>
+            <UpcDropdownTrigger compact />
+          </template>
+          <template #content>
+            <div class="max-w-[350px] sm:min-w-[350px]">
+              <UpcDropdownContent @close-dropdown="dropdownOpen = false" />
+            </div>
+          </template>
+        </DropdownMenu>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-/*
- * Three bands: metadata anchors top/bottom while the logo and UPC controls stay
- * centered in the primary middle band without overlapping the tags.
- */
-/*
- * The `639.98px` media-query boundaries below are Tailwind's `sm` breakpoint
- * (640px) minus a hair, so these hand-written queries stay in lockstep with the
- * `sm:`/`max-sm:` utility classes used in the template above.
- */
 .unraid-header-shell {
+  --uh-header-inset: calc(var(--spacing) * 2.5);
   display: grid;
+  padding: calc(var(--spacing) * 1.25) var(--uh-header-inset);
   column-gap: 0.75rem;
   align-items: stretch;
   grid-template-columns: minmax(0, 1fr) auto;
   grid-template-rows: auto minmax(max-content, 1fr) auto;
 }
 
+.unraid-banner-gradient-layer {
+  --uh-banner-color: var(--header-gradient-end, var(--color-header-gradient-end));
+  --uh-banner-fade-width: clamp(14rem, 20vw, 32rem);
+  grid-column: 2 / -1;
+  inset-inline-start: calc(var(--uh-banner-fade-width) * -1);
+  inset-inline-end: calc(var(--uh-header-inset) * -1);
+  background-image: none;
+}
+
+.uh-banner-gradient-enabled .unraid-banner-gradient-layer {
+  background-image: linear-gradient(
+    90deg,
+    transparent 0,
+    color-mix(in srgb, var(--uh-banner-color) 3%, transparent) calc(var(--uh-banner-fade-width) * 0.1),
+    color-mix(in srgb, var(--uh-banner-color) 10%, transparent) calc(var(--uh-banner-fade-width) * 0.2),
+    color-mix(in srgb, var(--uh-banner-color) 22%, transparent) calc(var(--uh-banner-fade-width) * 0.3),
+    color-mix(in srgb, var(--uh-banner-color) 35%, transparent) calc(var(--uh-banner-fade-width) * 0.4),
+    color-mix(in srgb, var(--uh-banner-color) 50%, transparent) calc(var(--uh-banner-fade-width) * 0.5),
+    color-mix(in srgb, var(--uh-banner-color) 65%, transparent) calc(var(--uh-banner-fade-width) * 0.6),
+    color-mix(in srgb, var(--uh-banner-color) 78%, transparent) calc(var(--uh-banner-fade-width) * 0.7),
+    color-mix(in srgb, var(--uh-banner-color) 90%, transparent) calc(var(--uh-banner-fade-width) * 0.8),
+    color-mix(in srgb, var(--uh-banner-color) 97%, transparent) calc(var(--uh-banner-fade-width) * 0.9),
+    var(--uh-banner-color) var(--uh-banner-fade-width)
+  );
+}
+
 .uh-meta-right {
   grid-column: 2;
   grid-row: 1;
   align-self: start;
   justify-self: end;
-  /*
-   * The account trigger below has 8px of internal right padding, so the meta
-   * row needs the same inset for its right edge (uptime/registration/purchase)
-   * to line up with the nav controls. Reset on mobile where the row goes
-   * full-width (its inner content owns the padding there).
-   */
   padding-right: 0.5rem;
 }
 
-/*
- * Mobile (below sm): the meta row spans the full width as a top strip so uptime
- * and registration state split to opposite ends. Over a banner image the text
- * gets a drop-shadow (and white color, set on the child) for legibility instead
- * of a heavy backdrop bar; the right-only banner gradient does not reach the
- * left-aligned uptime. At sm+ the desktop right-aligned cluster (above) applies
- * unchanged.
- */
-@media (max-width: 639.98px) {
-  .uh-meta-right {
-    grid-column: 1 / -1;
-    justify-self: stretch;
-    padding-right: 0;
-  }
-
-  .uh-meta-over-banner {
-    text-shadow:
-      0 1px 2px rgb(0 0 0 / 0.95),
-      0 0 4px rgb(0 0 0 / 0.8);
-  }
-}
-
-/*
- * Logo + version as one vertically-centered group (matching the legacy header),
- * rather than the logo floating in the middle band with the version pinned to
- * the bottom, which left an awkward gap above the logo. On desktop the group
- * spans the full height so it centers against the whole header; the mobile
- * override below re-places it.
- */
 .uh-logo-block {
   grid-column: 1;
   grid-row: 1 / -1;
@@ -246,26 +213,6 @@ const copyLanIp = async () => {
   justify-self: start;
 }
 
-/*
- * Mobile: the meta row is a full-width top strip (see .uh-meta-right override),
- * so the logo block and nav controls share the middle grid row. Both keep the
- * base `align-self: center`, so the logo and the DEVGEN/bell/menu/avatar cluster
- * stay vertically centered on the same line. The version sits directly under the
- * logo in normal flow (the block is a left-aligned flex column, see template),
- * so it shares the logo's left edge and gets natural space above the nav tabs
- * rather than being floated hard against the header's bottom edge.
- */
-@media (max-width: 639.98px) {
-  .unraid-header-shell {
-    height: 100%;
-    padding-top: 0.25rem;
-  }
-
-  .uh-logo-block {
-    grid-row: 2;
-  }
-}
-
 .uh-nav-right {
   grid-column: 2;
   grid-row: 2;
@@ -273,14 +220,111 @@ const copyLanIp = async () => {
   justify-self: end;
 }
 
-/*
- * Nudge the version tag down so its baseline lines up with the bottom of the
- * account controls (hamburger/avatar) instead of sitting high against the logo.
- * `position: relative` shifts it visually without reflowing the logo above it,
- * so the logo/nav center alignment is preserved. Applies at both breakpoints.
- */
 .uh-version {
   position: relative;
   top: 0.5rem;
 }
+
+.uh-name {
+  column-gap: calc(var(--spacing) * 2);
+}
+
+@media (max-width: 639.98px) {
+  .unraid-header-shell {
+    --uh-header-inset: calc(var(--spacing) * 2);
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto auto auto;
+    column-gap: var(--spacing);
+    row-gap: var(--spacing);
+    padding-block: var(--spacing);
+    padding-inline: var(--uh-header-inset) !important;
+  }
+
+  .uh-logo-block {
+    display: contents;
+  }
+
+  .uh-nav-right {
+    grid-column: 2;
+    grid-row: 2;
+    width: 100%;
+  }
+
+  .uh-logo {
+    position: relative;
+    z-index: 10;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+  }
+
+  .uh-actions {
+    column-gap: 0;
+  }
+
+  .uh-actions :deep([role='button']) {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 0;
+  }
+
+  .uh-server-status :deep(.text-unraid-red),
+  .uh-actions :deep(.text-unraid-red) {
+    color: color-mix(in srgb, var(--color-unraid-red) 75%, var(--color-header-text-primary));
+  }
+
+  .uh-name {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .uh-version {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    top: auto;
+  }
+
+  .uh-meta-right {
+    display: contents;
+  }
+
+  .uh-server-status,
+  .uh-array-usage {
+    position: relative;
+    z-index: 10;
+  }
+
+  .uh-server-status {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .uh-array-usage {
+    grid-column: 1 / -1;
+    grid-row: 4;
+  }
+
+  .uh-meta-right,
+  .uh-version {
+    --color-header-text-secondary: var(--color-header-text-primary);
+  }
+
+  .unraid-banner-gradient-layer {
+    grid-column: 1 / -1;
+    inset-inline: calc(var(--uh-header-inset) * -1);
+    width: auto;
+    background-image: none;
+  }
+
+  .uh-banner-gradient-enabled .unraid-banner-gradient-layer {
+    background-image:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--uh-banner-color) 95%, transparent) 0%,
+        color-mix(in srgb, var(--uh-banner-color) 55%, transparent) 35%,
+        var(--uh-banner-color) 100%
+      ),
+      linear-gradient(90deg, transparent 40%, var(--uh-banner-color) 80%);
+  }
+}
 </style>
diff --git a/web/src/components/Header/ArrayUsage.vue b/web/src/components/Header/ArrayUsage.vue
index f52bff0d76..05602d1414 100644
--- a/web/src/components/Header/ArrayUsage.vue
+++ b/web/src/components/Header/ArrayUsage.vue
@@ -47,14 +47,18 @@ const hasData = computed(() => array.value != null);
 <template>
   <div
     v-if="hasData"
-    class="flex w-full flex-col gap-y-0.5 sm:w-40"
+    class="flex w-full items-center gap-x-2 gap-y-0.5 sm:w-40 sm:flex-col sm:items-stretch"
     :title="started ? t('headerArrayUsage.usedOfArray', [usedPercent]) : undefined"
   >
-    <div class="text-header-text-secondary flex items-center justify-between text-xs leading-none">
+    <div
+      class="text-header-text-secondary flex shrink-0 items-center justify-between gap-x-2 text-xs leading-none"
+    >
       <span>{{ t('headerArrayUsage.array') }}</span>
       <span v-if="started" class="font-semibold">{{ usedPercent }}%</span>
     </div>
-    <div class="bg-header-text-secondary/20 h-1.5 w-full overflow-hidden rounded-full">
+    <div
+      class="bg-header-text-secondary/20 h-1.5 min-w-0 flex-1 overflow-hidden rounded-full sm:w-full sm:flex-none"
+    >
       <div
         v-if="started"
         class="h-full rounded-full transition-[width]"
diff --git a/web/src/components/Header/HeaderLogo.vue b/web/src/components/Header/HeaderLogo.vue
index a56d6e10a9..c9ec5e3cf6 100644
--- a/web/src/components/Header/HeaderLogo.vue
+++ b/web/src/components/Header/HeaderLogo.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import gradientLogoSvg from '~/assets/UN-logotype-gradient.svg?raw';
+
 import { computed, nextTick, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -9,6 +11,7 @@ const { logoStyle = 'gradient' } = defineProps<{
 }>();
 
 const { t } = useI18n();
+const gradientLogoSrc = `data:image/svg+xml,${encodeURIComponent(gradientLogoSvg)}`;
 
 // Defer legacy logo cleanup to avoid blocking mount.
 onMounted(() => {
@@ -36,7 +39,10 @@ const unraidLogoHeaderLink = computed<{ href: string; title: string }>(() => ({
     <svg
       v-if="logoStyle === 'theme'"
       xmlns="http://www.w3.org/2000/svg"
+      width="222.36"
+      height="39.04"
       viewBox="0 0 222.36 39.04"
+      preserveAspectRatio="xMinYMid meet"
       class="text-header-text-primary xs:w-[16rem] h-auto max-h-[3rem] w-[14rem] shrink-0"
       aria-hidden="true"
       focusable="false"
@@ -46,39 +52,16 @@ const unraidLogoHeaderLink = computed<{ href: string; title: string }>(() => ({
         d="M146.7,29.47H135l-3,9h-6.49L138.93,0h8l13.41,38.49h-7.09L142.62,6.93l-5.83,16.88h8ZM29.69,0V25.4c0,8.91-5.77,13.64-14.9,13.64S0,34.31,0,25.4V0H6.54V25.4c0,5.17,3.19,7.92,8.25,7.92s8.36-2.75,8.36-7.92V0ZM50.86,12v26.5H44.31V0h6.11l17,26.5V0H74V38.49H67.9ZM171.29,0h6.54V38.49h-6.54Zm51.07,24.69c0,9-5.88,13.8-15.17,13.8H192.67V0H207.3c9.18,0,15.06,4.78,15.06,13.8ZM215.82,13.8c0-5.28-3.3-8.14-8.52-8.14h-8.08V32.77h8c5.33,0,8.63-2.8,8.63-8.08ZM108.31,23.92c4.34-1.6,6.93-5.28,6.93-11.55C115.24,3.68,110.18,0,102.48,0H88.84V38.49h6.55V5.66h6.87c3.8,0,6.21,1.82,6.21,6.71s-2.41,6.76-6.21,6.76H98.88l9.21,19.36h7.53Z"
       />
     </svg>
-    <!--
-      Inline the gradient logo (same paths as the theme variant above, same
-      gradient as /webGui/images/UN-logotype-gradient.svg) rather than an <img>.
-      The webgui boot logo paints an <img> of that file; re-rendering it as a
-      fresh <img> on mount re-requests the asset (it ships without Cache-Control,
-      so the browser revalidates), blanking the logo for a frame. Inline SVG
-      paints immediately with no network round-trip, so the swap is seamless.
-    -->
-    <svg
+    <!-- Render the original asset in its own image context so legacy SVG rules
+         and other inline gradient IDs cannot alter the wordmark. The embedded
+         source needs no additional request when replacing the boot placeholder. -->
+    <img
       v-else
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 222.36 39.04"
-      class="xs:w-[16rem] h-auto max-h-[3rem] w-[14rem] shrink-0"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <defs>
-        <linearGradient
-          id="unraid-header-logo-gradient"
-          x1="47.53"
-          y1="79.1"
-          x2="170.71"
-          y2="-44.08"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stop-color="#e32929" />
-          <stop offset="1" stop-color="#ff8d30" />
-        </linearGradient>
-      </defs>
-      <path
-        fill="url(#unraid-header-logo-gradient)"
-        d="M146.7,29.47H135l-3,9h-6.49L138.93,0h8l13.41,38.49h-7.09L142.62,6.93l-5.83,16.88h8ZM29.69,0V25.4c0,8.91-5.77,13.64-14.9,13.64S0,34.31,0,25.4V0H6.54V25.4c0,5.17,3.19,7.92,8.25,7.92s8.36-2.75,8.36-7.92V0ZM50.86,12v26.5H44.31V0h6.11l17,26.5V0H74V38.49H67.9ZM171.29,0h6.54V38.49h-6.54Zm51.07,24.69c0,9-5.88,13.8-15.17,13.8H192.67V0H207.3c9.18,0,15.06,4.78,15.06,13.8ZM215.82,13.8c0-5.28-3.3-8.14-8.52-8.14h-8.08V32.77h8c5.33,0,8.63-2.8,8.63-8.08ZM108.31,23.92c4.34-1.6,6.93-5.28,6.93-11.55C115.24,3.68,110.18,0,102.48,0H88.84V38.49h6.55V5.66h6.87c3.8,0,6.21,1.82,6.21,6.71s-2.41,6.76-6.21,6.76H98.88l9.21,19.36h7.53Z"
-      />
-    </svg>
+      :src="gradientLogoSrc"
+      width="222.36"
+      height="39.04"
+      alt=""
+      class="xs:w-[16rem] h-auto max-h-[3rem] w-[14rem] shrink-0 object-contain"
+    />
   </a>
 </template>
diff --git a/web/src/components/Header/HeaderVersion.vue b/web/src/components/Header/HeaderVersion.vue
index b280d57bc7..9f9d327007 100644
--- a/web/src/components/Header/HeaderVersion.vue
+++ b/web/src/components/Header/HeaderVersion.vue
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { useLazyQuery } from '@vue/apollo-composable';
 
 import {
+  ArrowPathIcon,
   ArrowTopRightOnSquareIcon,
   BellAlertIcon,
   ClipboardDocumentIcon,
@@ -116,7 +117,8 @@ const updateOsStatus = computed(() => {
     return {
       badge: {
         color: 'yellow',
-        icon: ExclamationTriangleIcon,
+        icon:
+          rebootType.value === 'thirdPartyDriversDownloading' ? ArrowPathIcon : ExclamationTriangleIcon,
       },
       href: rebootType.value === 'downgrade' ? WEBGUI_TOOLS_DOWNGRADE : WEBGUI_TOOLS_UPDATE,
       text: t(rebootTypeText.value),
@@ -146,7 +148,7 @@ const updateOsStatus = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center justify-start gap-2">
+  <div class="header-version flex min-w-0 flex-wrap items-center justify-start gap-2">
     <DropdownMenuRoot @update:open="handleDropdownOpen">
       <DropdownMenuTrigger as-child>
         <Button
@@ -218,12 +220,18 @@ const updateOsStatus = computed(() => {
       :title="updateOsStatus.title ?? updateOsStatus.text"
       :disabled="!updateOsStatus.href && !updateOsStatus.click"
       size="sm"
+      class="header-update-status max-w-full text-start whitespace-normal max-sm:min-h-6"
+      :class="updateOsStatus.badge?.color === 'orange' ? 'text-gray-950' : ''"
       @click="handleUpdateStatusClick"
     >
       <span v-if="updateOsStatus.badge?.icon" class="inline-flex h-4 w-4 shrink-0">
-        <component :is="updateOsStatus.badge.icon" class="h-full w-full" />
+        <component
+          :is="updateOsStatus.badge.icon"
+          class="h-full w-full"
+          :class="{ 'motion-safe:animate-spin': rebootType === 'thirdPartyDriversDownloading' }"
+        />
       </span>
-      {{ updateOsStatus.text || '' }}
+      <span class="min-w-0">{{ updateOsStatus.text || '' }}</span>
     </Button>
   </div>
 
@@ -235,3 +243,18 @@ const updateOsStatus = computed(() => {
     @close="showOsReleaseNotesModal = false"
   />
 </template>
+
+<style scoped>
+@media (max-width: 639.98px) {
+  .header-version {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    width: 100%;
+  }
+
+  .header-update-status {
+    width: fit-content;
+    padding-inline: calc(var(--spacing) * 3);
+  }
+}
+</style>
diff --git a/web/src/components/UserProfile/DropdownTrigger.vue b/web/src/components/UserProfile/DropdownTrigger.vue
index 87a0c14be5..880ef54207 100644
--- a/web/src/components/UserProfile/DropdownTrigger.vue
+++ b/web/src/components/UserProfile/DropdownTrigger.vue
@@ -15,6 +15,8 @@ import BrandAvatar from '~/components/Brand/Avatar.vue';
 import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
+const { compact = false } = defineProps<{ compact?: boolean }>();
+
 const { t } = useI18n();
 
 const { errors } = storeToRefs(useErrorsStore());
@@ -68,7 +70,9 @@ const title = computed((): string => {
       />
     </span>
 
-    <Bars3Icon class="w-5" />
+    <!-- In the combined mobile header, the alert replaces the menu glyph.
+         Keep the alert visible without adding another icon to the row. -->
+    <Bars3Icon class="w-5" :class="{ 'max-sm:!hidden': compact && errors.length && errors[0].level }" />
 
     <BrandAvatar v-if="connectPluginInstalled" />
   </Button>
diff --git a/web/src/components/UserProfile/ServerStatus.vue b/web/src/components/UserProfile/ServerStatus.vue
index c1fcca2675..7d58147788 100644
--- a/web/src/components/UserProfile/ServerStatus.vue
+++ b/web/src/components/UserProfile/ServerStatus.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+
 import { cn } from '@unraid/ui';
 
 import type { ClassValue } from '@unraid/ui';
 
 import UpcServerState from '~/components/UserProfile/ServerState.vue';
 import UpcUptimeExpire from '~/components/UserProfile/UptimeExpire.vue';
+import { useServerStore } from '~/store/server';
+
+const { state, uptime, expireTime } = storeToRefs(useServerStore());
+// The date helper captures its starting timestamp. Refresh it when server data
+// changes from uptime to a trial expiry (or the expiry itself changes).
+const uptimeKey = computed(() => `${state.value}:${uptime.value}:${expireTime.value}`);
 </script>
 
 <template>
@@ -19,7 +28,7 @@ import UpcUptimeExpire from '~/components/UserProfile/UptimeExpire.vue';
       )
     "
   >
-    <UpcUptimeExpire :as="'span'" :short-text="true" class="text-xs" />
+    <UpcUptimeExpire :key="uptimeKey" :as="'span'" :short-text="true" class="text-xs" />
     <span class="xs:!inline hidden">&bull;</span>
     <UpcServerState class="text-xs" />
   </div>
diff --git a/web/src/components/UserProfile/UptimeExpire.vue b/web/src/components/UserProfile/UptimeExpire.vue
index 7fd5c3a578..394b0de60e 100644
--- a/web/src/components/UserProfile/UptimeExpire.vue
+++ b/web/src/components/UserProfile/UptimeExpire.vue
@@ -42,7 +42,7 @@ const time = computed(() => {
   if (props.forExpire && expireTime.value) {
     return expireTime.value;
   }
-  return (state.value === 'TRIAL' || state.value === 'EEXPIRED') &&
+  return (state.value === 'TRIAL' || state.value === 'EEXPIRED' || state.value === 'ENOCONN') &&
     expireTime.value &&
     expireTime.value > 0
     ? expireTime.value
@@ -76,10 +76,10 @@ const output = computed(() => {
       text:
         state.value === 'EEXPIRED'
           ? props.shortText
-            ? t('userProfile.uptimeExpire.expired', [readableDiff.value])
+            ? t('userProfile.uptimeExpire.expired', [readableDiffShort.value])
             : t('userProfile.uptimeExpire.trialKeyExpired', [readableDiff.value])
           : props.shortText
-            ? t('userProfile.uptimeExpire.expiresIn', [readableDiff.value])
+            ? t('userProfile.uptimeExpire.expiresIn', [readableDiffShort.value])
             : t('userProfile.uptimeExpire.trialKeyExpiresIn', [readableDiff.value]),
     };
   }
diff --git a/web/test-pages/combined-header.js b/web/test-pages/combined-header.js
new file mode 100644
index 0000000000..143e59c1b0
--- /dev/null
+++ b/web/test-pages/combined-header.js
@@ -0,0 +1,203 @@
+import { createApp, h, ref } from 'vue';
+import { createPinia } from 'pinia';
+import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable';
+
+import { ApolloClient, ApolloLink, InMemoryCache, Observable } from '@apollo/client/core';
+import Header from '/src/components/Header.standalone.vue';
+import { ARRAY_CAPACITY_QUERY } from '/src/components/Header/arrayCapacity.query';
+import { notificationsOverview } from '/src/components/Notifications/graphql/notification.query';
+import { createI18nInstance, ensureLocale } from '/src/helpers/i18n-loader';
+import { useServerStore } from '/src/store/server';
+import { useThemeStore } from '/src/store/theme';
+
+import '/src/assets/main.css';
+import '@unraid/ui/styles';
+
+const params = new URLSearchParams(location.search);
+const normalizeUsedPercent = (value) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.min(100, Math.max(0, parsed)) : 38;
+};
+let usedPercent = normalizeUsedPercent(params.get('used') || 38);
+let arrayState = params.get('array') === 'stopped' ? 'STOPPED' : 'STARTED';
+const arrayData = () => ({
+  id: 'preview-array',
+  state: arrayState,
+  capacity: { kilobytes: { total: '100', free: String(100 - usedPercent), used: String(usedPercent) } },
+});
+const counts = { info: 0, warning: 0, alert: 0, total: 0 };
+if (params.get('notification')) {
+  counts[params.get('notification')] = 2;
+  counts.total = 2;
+}
+const overview = () => ({ unread: { ...counts }, archive: { info: 0, warning: 0, alert: 0, total: 0 } });
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: new ApolloLink(
+    (operation) =>
+      new Observable((observer) => {
+        if (operation.query.definitions.some((def) => def.operation === 'subscription')) return;
+        const data = {
+          customization: null,
+          vars: null,
+          config: null,
+          owner: null,
+          registration: null,
+          cloud: null,
+          recalculateOverview: overview(),
+          array: arrayData(),
+          info: {
+            id: 'preview-info',
+            primaryNetwork: null,
+            os: { id: 'preview-os', hostname: 'Tower' },
+            versions: { id: 'preview-versions', core: { unraid: '7.4.0-beta.3', api: '4.37.5' } },
+          },
+          notifications: {
+            id: 'preview-notifications',
+            overview: overview(),
+            list: [],
+          },
+        };
+        observer.next({ data });
+        observer.complete();
+      })
+  ),
+});
+provideApolloClient(client);
+const pinia = createPinia();
+const server = {
+  name: params.has('long') ? 'Home-Media-and-Backup-Server-With-A-Long-Name' : 'Tower',
+  description: 'Media server',
+  osVersion: '7.4.0-beta.3',
+  rebootType: 'update',
+  state: params.get('license') || 'LIFETIME',
+  registered: false,
+  lanIp: '192.0.2.10',
+  connectPluginInstalled: params.has('no-connect') ? '' : 'dynamix.unraid.net.plg',
+  guid: 'PREVIEW-GUID',
+  keyfile: '',
+  dateTimeFormat: { date: '%c', time: '%R' },
+  uptime: Date.now() - 9 * 86400000,
+  expireTime: Date.now() + (params.get('license') === 'EEXPIRED' ? -2 : 14) * 86400000,
+  deviceCount: 4,
+};
+const theme =
+  getComputedStyle(document.documentElement).getPropertyValue('--theme-name').trim() || 'black';
+// Match the custom dark header and light text in the reported mobile banner.
+if (params.get('header') === 'dark') {
+  document.documentElement.style.setProperty('--header-background-color', '#1c1b1b');
+  document.documentElement.style.setProperty('--header-text-color', '#f2f2f2');
+}
+const usage = ref(params.has('usage'));
+const logoStyle = ref(params.get('logo') === 'theme' ? 'theme' : 'gradient');
+const app = createApp({
+  setup() {
+    const themeStore = useThemeStore();
+    const serverStore = useServerStore();
+    const hasBanner = !params.has('no-banner');
+    const hasFade = !params.has('no-fade');
+    themeStore.setTheme({
+      name: theme,
+      banner: hasBanner,
+      bannerGradient: hasFade,
+      descriptionShow: true,
+    });
+    document.querySelector('#header').classList.toggle('image', hasBanner);
+    document.querySelector('#banner').checked = hasBanner;
+    document.querySelector('#fade').checked = hasFade;
+    if (!hasFade) document.documentElement.style.setProperty('--banner-gradient', 'none');
+    document.querySelector('#usage').checked = usage.value;
+    document.querySelector('#long-name').checked = params.has('long');
+    document.querySelector('#license').value = server.state;
+    document.querySelector('#logo-style').value = logoStyle.value;
+    document.querySelector('#array-state').value = arrayState;
+    document.querySelector('#array-used').value = usedPercent;
+    document.querySelector('#notification').value = params.get('notification') || 'none';
+
+    const setStatus = (status) => {
+      const updateAvailable = status === 'available' || status === 'renewal';
+      const rebootType = ['update', 'downgrade', 'thirdPartyDriversDownloading'].includes(status)
+        ? status
+        : '';
+      serverStore.rebootType = server.rebootType = rebootType;
+      serverStore.regUpdatesExpired = server.regUpdatesExpired = status === 'renewal';
+      serverStore.regExp = server.regExp = status === 'renewal' ? 1 : 0;
+      serverStore.updateOsResponse = server.updateOsResponse = updateAvailable
+        ? {
+            version: '7.4.0-rc.1',
+            name: 'Unraid 7.4.0-rc.1',
+            date: '2026-10-09',
+            isEligible: status !== 'renewal',
+            isNewer: true,
+            changelog: null,
+            sha256: null,
+          }
+        : undefined;
+      document.querySelector('#reboot').checked = Boolean(rebootType);
+      document.querySelector('#operating-state').value = status;
+    };
+    setStatus(params.get('status') || 'update');
+    document
+      .querySelector('#operating-state')
+      .addEventListener('change', (event) => setStatus(event.target.value));
+    document.querySelector('#array-state').addEventListener('change', (event) => {
+      arrayState = event.target.value;
+      client.writeQuery({ query: ARRAY_CAPACITY_QUERY, data: { array: arrayData() } });
+    });
+    document.querySelector('#array-used').addEventListener('change', (event) => {
+      usedPercent = normalizeUsedPercent(event.target.value);
+      client.writeQuery({ query: ARRAY_CAPACITY_QUERY, data: { array: arrayData() } });
+    });
+    document.querySelector('#notification').addEventListener('change', (event) => {
+      Object.assign(counts, { info: 0, warning: 0, alert: 0, total: 0 });
+      if (event.target.value !== 'none') {
+        counts[event.target.value] = 2;
+        counts.total = 2;
+      }
+      client.writeQuery({
+        query: notificationsOverview,
+        data: { notifications: { id: 'preview-notifications', overview: overview() } },
+      });
+    });
+    document
+      .querySelector('#logo-style')
+      .addEventListener('change', (event) => (logoStyle.value = event.target.value));
+    document.querySelector('#fade').addEventListener('change', (event) => {
+      themeStore.setTheme({ bannerGradient: event.target.checked });
+      document.documentElement.style.setProperty(
+        '--banner-gradient',
+        event.target.checked
+          ? 'linear-gradient(90deg, transparent 0, var(--header-gradient-end) var(--banner-gradient-stop, 30%))'
+          : 'none'
+      );
+    });
+    document.querySelector('#banner').addEventListener('change', (event) => {
+      themeStore.setTheme({ banner: event.target.checked });
+      document.querySelector('#header').classList.toggle('image', event.target.checked);
+    });
+    document
+      .querySelector('#reboot')
+      .addEventListener('change', (event) => setStatus(event.target.checked ? 'update' : 'normal'));
+    document
+      .querySelector('#long-name')
+      .addEventListener(
+        'change',
+        (event) =>
+          (serverStore.name = server.name =
+            event.target.checked ? 'Home-Media-and-Backup-Server-With-A-Long-Name' : 'Tower')
+      );
+    document
+      .querySelector('#usage')
+      .addEventListener('change', (event) => (usage.value = event.target.checked));
+    document.querySelector('#license').addEventListener('change', (event) => {
+      serverStore.state = server.state = event.target.value;
+      serverStore.expireTime = server.expireTime =
+        Date.now() + (event.target.value === 'EEXPIRED' ? -2 : 14) * 86400000;
+    });
+
+    return () => h(Header, { server, showArrayUsage: usage.value, headerLogoStyle: logoStyle.value });
+  },
+});
+const i18n = createI18nInstance();
+await ensureLocale(i18n, params.get('locale') || 'en_US');
+app.use(pinia).use(i18n).provide(DefaultApolloClient, client).mount('#header-preview');
diff --git a/web/test-pages/header-banner.png b/web/test-pages/header-banner.png
new file mode 100644
index 0000000000..9981e9f036
Binary files /dev/null and b/web/test-pages/header-banner.png differ
diff --git a/web/test-pages/pages/combined-header.njk b/web/test-pages/pages/combined-header.njk
new file mode 100644
index 0000000000..be3390e4e2
--- /dev/null
+++ b/web/test-pages/pages/combined-header.njk
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Combined header preview</title>
+  {% set resolvedTheme = query.theme or resolvedTheme %}
+  {% include "partials/styles.njk" %}
+  <style>
+    body { margin: 0; padding: 0; }
+    :root {
+      --header-gradient-end: var(--header-background-color);
+      --banner-gradient: linear-gradient(90deg, transparent 0, var(--header-gradient-end) var(--banner-gradient-stop, 30%));
+      --header-text-primary: var(--header-text-color);
+      --header-text-secondary: var(--header-text-color);
+    }
+    #header { padding-inline: 0; }
+    #header-preview { align-self: stretch; display: flex; }
+    #header.image { background-image: url('/test-pages/header-banner.png'); background-size: cover; }
+    .preview-controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 16px; font-size: 14px; }
+    .preview-controls label { display: flex; gap: 8px; align-items: center; }
+  </style>
+</head>
+<body>
+  <div id="header" class="unapi image unraid-consolidated-header"><unraid-header id="header-preview" class="unapi" style="width: 100%"></unraid-header></div>
+  <form class="preview-controls">
+    <label>Banner <input id="banner" type="checkbox" checked></label>
+    <label>Fade <input id="fade" type="checkbox" checked></label>
+    <label>Reboot required <input id="reboot" type="checkbox" checked></label>
+    <label>Status <select id="operating-state"><option value="normal">Normal</option><option value="update">Reboot for update</option><option value="downgrade">Reboot for downgrade</option><option value="thirdPartyDriversDownloading">Drivers downloading</option><option value="available">Update available</option><option value="renewal">Update needs renewal</option></select></label>
+    <label>Logo <select id="logo-style"><option value="gradient">Original gradient</option><option value="theme">Theme color</option></select></label>
+    <label>Array state <select id="array-state"><option value="STARTED">Started</option><option value="STOPPED">Stopped</option></select></label>
+    <label>Used % <input id="array-used" type="number" min="0" max="100" value="38" style="width: 60px"></label>
+    <label>Notifications <select id="notification"><option value="none">None</option><option value="info">Unread</option><option value="warning">Warning</option><option value="alert">Alert</option></select></label>
+    <label>Long server name <input id="long-name" type="checkbox"></label>
+    <label>Array usage <input id="usage" type="checkbox"></label>
+    <label>License <select id="license"><option>LIFETIME</option><option>STARTER</option><option>PRO</option><option>TRIAL</option><option>EEXPIRED</option><option>ENOKEYFILE</option><option>ENOCONN</option><option>EGUID</option><option>EDEVICECOUNT</option></select></label>
+  </form>
+  <p style="padding-inline: 16px; font-size: 14px">Illustrative server data. Resize the browser and use ?theme=white, black, gray, or azure.</p>
+  <script type="module" src="/test-pages/combined-header.js"></script>
+</body>
+</html>