diff --git a/docs/_assets/style.css b/docs/_assets/style.css
index acd3196d5..8b8fdbc54 100644
--- a/docs/_assets/style.css
+++ b/docs/_assets/style.css
@@ -130,3 +130,13 @@ rocket-navigation ul > li:nth-child(n + 6).active > ul {
   font-size: inherit;
   color: inherit;
 }
+
+.announcement-bar {
+  background: var(--primary-color);
+  color: white;
+  text-align: center;
+
+  & a {
+    color: white;
+  }
+}
\ No newline at end of file
diff --git a/docs/_includes/partials/header.njk b/docs/_includes/partials/header.njk
index c10244050..a77d8e103 100644
--- a/docs/_includes/partials/header.njk
+++ b/docs/_includes/partials/header.njk
@@ -1,8 +1,8 @@
-<div style="background: linear-gradient(to right, var(--primary-color-lighter), var(--primary-color)); padding: 2px 20px;">
-   <p style="color: #fff">A new portal is coming! <a href="/about/astro">Check this out.</a></p>
+<div class="announcement-bar">
+   <p>A new portal is coming! Check out <a href="/about/astro">the technical release of our Astro portal</a></p>
 </div>
 
-<header id="main-header" style="top: 20px;">
+<header id="main-header">
   <div class="content-area">
     {% for blockName, blockPath in _joiningBlocks.header %}
       {% include blockPath %}