diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
index 290b867..d3665c2 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
@@ -149,14 +149,16 @@
 .immersive-header--compact {
   min-height: 0;
   padding-bottom: 1.5rem;
-  background: #171717;
+  color: #666666;
+  background: transparent;
 }
 .immersive-header--compact .immersive-header__backdrop {
-  position: absolute;
-  inset: 0;
+  display: none;
 }
-.immersive-header--compact .immersive-header__backdrop::after {
-  background: rgba(0, 0, 0, 0.65);
+
+:host ::ng-deep .immersive-header--compact .immersive-header__actions .icon-btn,
+:host ::ng-deep .immersive-header--compact .immersive-header__actions .cart-icon {
+  color: #666666;
 }
 
 @media (max-width: 600px) {
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss
index 28b6e02..0750e38 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss
@@ -2,6 +2,17 @@
   display: block;
 }
 
+:host(.immersive-shell--compact) {
+  background-color: #f5f5f5;
+  background-position: center 42%;
+  background-size: cover;
+}
+
+:host(.immersive-shell--compact) .immersive-categories {
+  border-top: 1px solid rgba(255, 255, 255, 0.6);
+  background: transparent;
+}
+
 .immersive-categories {
   width: 100%;
   overflow-x: auto;
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.ts b/src/app/core/layout/store-layout/store-header/store-header.component.ts
index 9f9bccd..caf76b6 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts
@@ -1,5 +1,5 @@
 import { NgTemplateOutlet, UpperCasePipe } from '@angular/common';
-import { Component, input, output } from '@angular/core';
+import { Component, computed, input, output } from '@angular/core';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { Category, Menu, WebsiteExtras } from '../../../services/tenant.interface';
 import { ImmersiveStoreHeaderComponent } from './immersive-store-header.component';
@@ -12,6 +12,10 @@ export type StoreHeaderType = 'standard' | 'immersive';
   imports: [NgTemplateOutlet, UpperCasePipe, StandardStoreHeaderComponent, ImmersiveStoreHeaderComponent],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss',
+  host: {
+    '[class.immersive-shell--compact]': 'isCompactImmersive()',
+    '[style.background-image]': 'compactBackground()',
+  },
 })
 export class StoreHeaderComponent {
   readonly headerType = input<StoreHeaderType>('standard');
@@ -20,6 +24,17 @@ export class StoreHeaderComponent {
   readonly heroContent = input<WebsiteExtras['immersiveHero']>(undefined);
   readonly carouselImages = input<readonly string[]>([]);
   readonly showHero = input(true);
+  protected readonly isCompactImmersive = computed(
+    () => this.headerType() === 'immersive' && !this.showHero(),
+  );
+  protected readonly compactBackground = computed(() => {
+    if (!this.isCompactImmersive()) return null;
+
+    const gradient =
+      'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 100%)';
+    const image = this.backgroundImageUrl();
+    return image ? `${gradient}, url(${JSON.stringify(image)})` : gradient;
+  });
   readonly cartQuantity = input<number>(0);
   readonly user = input<AuthUser | null>(null);
   readonly isAuthenticated = input<boolean>(false);