diff --git a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css
index 3902f865ad3f..a50a8d260220 100644
--- a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css
+++ b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css
@@ -1,6 +1,7 @@
 /*#if (SampleContent)*/
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --maui-status-bar-safe-area-background: rgb(3, 23, 62);
 }
 
 a, .btn-link {
diff --git a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css
index 4e9b695ea188..4619b5119079 100644
--- a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css
+++ b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css
@@ -1,19 +1,13 @@
 .status-bar-safe-area {
-    display: none;
+    display: flex;
+    position: sticky;
+    top: 0;
+    height: env(safe-area-inset-top, 0px);
+    background-color: var(--maui-status-bar-safe-area-background, transparent);
+    width: 100%;
+    z-index: 1;
 }
 
-@supports (-webkit-touch-callout: none) {
-    .status-bar-safe-area {
-        display: flex;
-        position: sticky;
-        top: 0;
-        height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
-        width: 100%;
-        z-index: 1;
-    }
-
-    .flex-column, .navbar-brand {
-        padding-left: env(safe-area-inset-left);
-    }
+.flex-column, .navbar-brand {
+    padding-left: env(safe-area-inset-left, 0px);
 }
diff --git a/src/Templates/src/templates/maui-blazor/wwwroot/app.css b/src/Templates/src/templates/maui-blazor/wwwroot/app.css
index d0824de909ce..d69bd2650816 100644
--- a/src/Templates/src/templates/maui-blazor/wwwroot/app.css
+++ b/src/Templates/src/templates/maui-blazor/wwwroot/app.css
@@ -1,6 +1,7 @@
 /*#if (SampleContent)*/
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --maui-status-bar-safe-area-background: rgb(3, 23, 62);
 }
 
 a, .btn-link {
@@ -83,21 +84,15 @@ h1:focus {
 }
 
 .status-bar-safe-area {
-    display: none;
+    display: flex;
+    position: sticky;
+    top: 0;
+    height: env(safe-area-inset-top, 0px);
+    background-color: var(--maui-status-bar-safe-area-background, transparent);
+    width: 100%;
+    z-index: 1;
 }
 
-@supports (-webkit-touch-callout: none) {
-    .status-bar-safe-area {
-        display: flex;
-        position: sticky;
-        top: 0;
-        height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
-        width: 100%;
-        z-index: 1;
-    }
-
-    .flex-column, .navbar-brand {
-        padding-left: env(safe-area-inset-left);
-    }
+.flex-column, .navbar-brand {
+    padding-left: env(safe-area-inset-left, 0px);
 }