diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index b858dd165..d195edb99 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -31,9 +31,10 @@ const siteConfig = {
     announcementBar: {
       id: 'support_ukraine',
       content:
-        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
-      backgroundColor: '#fff',
-      textColor: 'rgb(28, 30, 33)',
+        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.fb.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
+      backgroundColor: '#20232a',
+      textColor: '#fff',
+      isCloseable: false,
     },
     navbar: {
       title: fbContent({
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 2f9de55f7..f63e83cf7 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -534,3 +534,40 @@ border: 1px solid black;
 .ios-support-matrix td {
   border: 1px solid black;
 }
+
+/* Announcement banner */
+
+:root {
+  --docusaurus-announcement-bar-height: auto !important;
+}
+
+div[class^="announcementBarContent"] {
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 8px 30px;
+}
+
+div[class^="announcementBarContent"] a {
+  text-decoration: underline;
+  display: inline-block;
+  color: var(--ifm-color-primary-lightest) !important;
+}
+
+div[class^="announcementBarContent"] a:hover {
+  color: var(--brand) !important;
+}
+
+@media only screen and (max-width: 768px) {
+  .announcement {
+    font-size: 18px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .announcement {
+    font-size: 15px;
+    line-height: 22px;
+    padding: 6px 30px;
+  }
+}