diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor
index 8ac215379..375c6efd5 100644
--- a/RadzenBlazorDemos/Pages/Index.razor
+++ b/RadzenBlazorDemos/Pages/Index.razor
@@ -6,7 +6,19 @@
 <HeadContent>
     <meta name="description" content="@ExampleService.DescriptionFor(null)">
 </HeadContent>
-
+<div class="container-fluid rz-background-color-black discount-banner">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-start">
+            <RadzenText TextStyle="TextStyle.H5" Class="ml-0 my-3 rz-color-white"><strong>Black Friday Deals</strong></RadzenText>
+        </div>
+        <div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-end">
+            <RadzenText TextStyle="TextStyle.H5" Class="mx-3 my-3 rz-color-white" style="display: inline-flex;"><strong>Up to <span class="rz-color-warning">$400 OFF</span></strong></RadzenText>
+            <NavLink class="rz-button rz-button-md rz-light m-3 me-0 rz-text-align-center rz-border-radius-10" href="https://www.radzen.com/blazor-studio/pricing/" target="_blank">CHECK NOW</NavLink>
+        </div>
+      </div>
+    </div>
+</div>
 <div class="next">
   <div class="container-fluid stage light">
     <div class="container">
diff --git a/RadzenBlazorDemos/Shared/MainLayout.razor b/RadzenBlazorDemos/Shared/MainLayout.razor
index 2211e0365..521b390b8 100644
--- a/RadzenBlazorDemos/Shared/MainLayout.razor
+++ b/RadzenBlazorDemos/Shared/MainLayout.razor
@@ -14,6 +14,15 @@
 <RadzenLayout>
 <RadzenHeader>
     <ChildContent>
+        <div class="row rz-background-color-black discount-banner">
+            <div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-start">
+                <RadzenText TextStyle="TextStyle.H5" Class="ml-5 mx-3 my-3 rz-color-white"><strong>Black Friday Deals</strong></RadzenText>
+            </div>
+            <div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-end">
+                <RadzenText TextStyle="TextStyle.H5" Class="mx-3 my-3 rz-color-white" style="display: inline-flex;"><strong>Up to <span class="rz-color-warning">$400 OFF</span></strong></RadzenText>
+                <NavLink class="rz-button rz-button-md rz-light m-3 mr-5 rz-text-align-center rz-border-radius-10" href="https://www.radzen.com/blazor-studio/pricing/" target="_blank">CHECK NOW</NavLink>
+            </div>
+        </div>
         <div class="row justify-content-start align-items-center">
             <div class="col-5 d-flex align-items-center">
                 <RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">
diff --git a/RadzenBlazorDemos/wwwroot/css/site.css b/RadzenBlazorDemos/wwwroot/css/site.css
index 9177e8d83..6dce7de50 100644
--- a/RadzenBlazorDemos/wwwroot/css/site.css
+++ b/RadzenBlazorDemos/wwwroot/css/site.css
@@ -670,4 +670,23 @@ svg.illustration {
     100% {
         box-shadow: 0 0 0 20px rgba(255, 80, 77, 0.2), 0 0 0 40px rgba(255, 80, 77, 0.2);
     }
-}
\ No newline at end of file
+}
+
+.discount-banner {
+    position: relative;
+    background: linear-gradient(90deg, #000000 40%, #2e2c8f 100%);
+}
+
+.discount-banner a {
+    color: var(--rz-text-color) !important;
+}
+
+.discount-banner:before {
+    position: absolute;
+    content: "";
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #FE6E41 0%, #FF504D 30%, #AA01E4 70%, #534EEB 100%);
+}