diff --git a/ghost/announcement-bar/src/components/AnnouncementBar.js b/ghost/announcement-bar/src/components/AnnouncementBar.js
index addbd9f79f..9ededc0a7d 100644
--- a/ghost/announcement-bar/src/components/AnnouncementBar.js
+++ b/ghost/announcement-bar/src/components/AnnouncementBar.js
@@ -5,16 +5,15 @@ import {ReactComponent as CloseIcon} from '../icons/clear.svg';
 
 export function AnnouncementBar({settings}) {
     const [visible, setVisible] = React.useState(true);
-    // eslint-disable-next-line no-unused-vars
-    const [data, setData] = React.useState({content: '<p>Content with <a href="https://ghost.org/">link</a></p>'});
 
     if (!visible) {
         return null;
     }
 
+    let className = 'gh-announcement-bar ' + settings?.announcement_background;
     return (
-        <div className="gh-announcement-bar dark">
-            <div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: data.content}}></div>
+        <div className={className}>
+            <div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: settings?.announcement}}></div>
             <button onClick={() => setVisible(false)}>
                 <CloseIcon />
             </button>