diff --git a/src/BootstrapBlazor.Server/Components/Pages/Index.razor b/src/BootstrapBlazor.Server/Components/Pages/Index.razor
index b108059f8e9..bff36cd1b45 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Index.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/Index.razor
@@ -13,6 +13,7 @@
                 </span>
             </a>
             <div class="bb-logo d-sm-block mx-auto my-5">
+                <div class="holder"></div>
                 <img src="./favicon.png" alt="bootstrap-blazor">
             </div>
             <h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css
index 52f83a19bad..8ee3049ac6a 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css
@@ -38,6 +38,11 @@
         border-radius: 30px;
     }
 
+        .bd-masthead .bb-logo .holder {
+            background-color: var(--bb-primary-color);
+        }
+
+        .bd-masthead .bb-logo .holder,
         .bd-masthead .bb-logo img {
             width: calc(100% - 2 * var(--bb-btn-space));
             height: calc(100% - 2 * var(--bb-btn-space));