diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.common.scss
similarity index 75%
rename from core/src/components/header/header.scss
rename to core/src/components/header/header.common.scss
index 7cb29aefa5..e336423792 100644
--- a/core/src/components/header/header.scss
+++ b/core/src/components/header/header.common.scss
@@ -1,5 +1,3 @@
-@import "../../themes/native/native.globals";
-
 // Header
 // --------------------------------------------------
 
@@ -10,8 +8,6 @@ ion-header {
   order: -1;
 
   width: 100%;
-
-  z-index: $z-index-toolbar;
 }
 
 ion-header ion-toolbar:first-of-type {
diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss
new file mode 100644
index 0000000000..014fe8486d
--- /dev/null
+++ b/core/src/components/header/header.ionic.scss
@@ -0,0 +1,10 @@
+@use "./header.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Header
+// --------------------------------------------------
+
+ion-header {
+  box-shadow: #{globals.$ionic-elevation-200};
+  z-index: 10;
+}
diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index c8f9bd25d5..a48fd5b228 100644
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -1,4 +1,4 @@
-@import "./header";
+@import "./header.native";
 @import "./header.ios.vars";
 
 // iOS Header
diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss
index 96cf48f92c..49d700192e 100644
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -1,4 +1,4 @@
-@import "./header";
+@import "./header.native";
 @import "./header.md.vars";
 
 // Material Design Header
diff --git a/core/src/components/header/header.native.scss b/core/src/components/header/header.native.scss
new file mode 100644
index 0000000000..9c10aadffe
--- /dev/null
+++ b/core/src/components/header/header.native.scss
@@ -0,0 +1,9 @@
+@import "./header.common";
+@import "../../themes/native/native.globals";
+
+// Header
+// --------------------------------------------------
+
+ion-header {
+  z-index: $z-index-toolbar;
+}
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index c8bf3af6ed..7972542f51 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -26,7 +26,7 @@ import {
   styleUrls: {
     ios: 'header.ios.scss',
     md: 'header.md.scss',
-    ionic: 'header.md.scss',
+    ionic: 'header.ionic.scss',
   },
 })
 export class Header implements ComponentInterface {
diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts
index 67f3be9217..7941424a1d 100644
--- a/core/src/components/header/test/basic/header.e2e.ts
+++ b/core/src/components/header/test/basic/header.e2e.ts
@@ -1,22 +1,31 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: rendering'), () => {
     test('should not have visual regressions with basic header', async ({ page }) => {
       await page.setContent(
         `
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header>
+        <style>
+          .container {
+            background-color: #eaeaea;
+            padding: 10px;
+          }
+        </style>
+      
+        <div class="container">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Header - Default</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </div>
       `,
         config
       );
 
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`header-diff`));
+      const container = page.locator('.container');
+      await expect(container).toHaveScreenshot(screenshot(`header-diff`));
     });
   });
 });
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..17749a6590
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d06c7e1d97
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1d05ccb932
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png
index a19ad269a6..ba3cc588c2 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png
index 55ea7993f9..e355aa2c09 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png
index f431465c92..ddea176f11 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png
index d40a3be222..ef35714957 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png
index 03a66cbbfa..bebf0a4983 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png
index fa758fa560..a5384aeaa5 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png differ