diff --git a/web/e.cash/components/announcement-bar/index.js b/web/e.cash/components/announcement-bar/index.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/announcement-bar/index.js
@@ -0,0 +1,24 @@
+// Copyright (c) 2023 The Bitcoin developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+import { AnnouncementBarCtn } from './styles';
+import CustomLink from '/components/custom-link';
+
+/**
+ * Component to render navbar announcement bar
+ * Can render as a link or just text
+ * @param {string} href - url to pass to the link (optional)
+ * @param {string} text - text to display
+ * @param {boolean} navBackground - boolean based on window height to control the visibility of the bar
+ */
+export default function AnnouncementBar({ href, text, navBackground }) {
+    return (
+        <AnnouncementBarCtn navBackground={navBackground}>
+            {href ? (
+                <CustomLink href={href}>{text}</CustomLink>
+            ) : (
+                <div>{text}</div>
+            )}
+        </AnnouncementBarCtn>
+    );
+}
diff --git a/web/e.cash/components/announcement-bar/styles.js b/web/e.cash/components/announcement-bar/styles.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/announcement-bar/styles.js
@@ -0,0 +1,40 @@
+// Copyright (c) 2023 The Bitcoin developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+import styled from 'styled-components';
+
+export const AnnouncementBarCtn = styled.div`
+    a,
+    div {
+        width: 100%;
+        background-color: ${props => props.theme.colors.black};
+        padding: 0px 24px;
+        text-align: center;
+        color: ${props => props.theme.colors.contrast};
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        font-size: 14px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 200ms ease-in-out;
+        margin-top: ${props => (props.navBackground ? '-34px' : '0')};
+    }
+    a {
+        :hover {
+            background-color: ${props => props.theme.colors.accent};
+            color: ${props => props.theme.colors.contrast};
+        }
+    }
+
+    ${props => props.theme.breakpoint.medium} {
+        a,
+        div {
+            padding: 0px 10px;
+            font-size: 12px;
+            height: 30px;
+        }
+    }
+`;
diff --git a/web/e.cash/components/layout/index.js b/web/e.cash/components/layout/index.js
--- a/web/e.cash/components/layout/index.js
+++ b/web/e.cash/components/layout/index.js
@@ -40,12 +40,7 @@
                 <link rel="alternate" hreflang="tr" href="https://tr.e.cash" />
                 <link rel="alternate" hreflang="es" href="https://es.e.cash" />
             </Head>
-            <Nav
-                announcementbar={{
-                    link: 'https://avalanche.cash/',
-                    text: 'Avalanche Consensus is live!',
-                }}
-            />
+            <Nav />
             <main>{children}</main>
             <Footer />
         </>
diff --git a/web/e.cash/components/navbar/index.js b/web/e.cash/components/navbar/index.js
--- a/web/e.cash/components/navbar/index.js
+++ b/web/e.cash/components/navbar/index.js
@@ -6,6 +6,7 @@
 import { useEffect, useState } from 'react';
 import { navitems } from '../../data/navitems';
 import { NavbarOuter, NavbarCtn } from './styles';
+import AnnouncementBar from '/components/announcement-bar';
 
 export default function Navbar({ announcementbar }) {
     const [priceLinkText, setPriceLinkText] = useState('Buy XEC');
@@ -61,16 +62,11 @@
 
     return (
         <NavbarOuter navBackground={navBackground}>
-            {announcementbar && (
-                <Link
-                    href={announcementbar.link}
-                    className="announcementbar_ctn"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    {announcementbar.text}
-                </Link>
-            )}
+            <AnnouncementBar
+                href="https://avalanche.cash/"
+                text="Avalanche Consensus is live!"
+                navBackground={navBackground}
+            />
             <NavbarCtn navBackground={navBackground}>
                 <div className="navbar">
                     <Link href="/" className="nav_logo">
diff --git a/web/e.cash/components/navbar/styles.js b/web/e.cash/components/navbar/styles.js
--- a/web/e.cash/components/navbar/styles.js
+++ b/web/e.cash/components/navbar/styles.js
@@ -8,28 +8,6 @@
     top: 0;
     width: 100%;
     z-index: 9999;
-
-    .announcementbar_ctn {
-        width: 100%;
-        background-color: ${props => props.theme.colors.black};
-        padding: 0px 24px;
-        text-align: center;
-        color: ${props => props.theme.colors.contrast};
-        font-weight: 600;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 14px;
-        height: 34px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 200ms ease-in-out;
-        margin-top: ${props => (props.navBackground ? '-34px' : '0')};
-        &:hover {
-            background-color: ${props => props.theme.colors.accent};
-            color: ${props => props.theme.colors.contrast};
-        }
-    }
 `;
 
 export const NavbarCtn = styled.div`
@@ -233,12 +211,6 @@
     ${props => props.theme.breakpoint.medium} {
         padding: 15px 20px;
 
-        .announcementbar_ctn {
-            padding: 0px 10px;
-            font-size: 12px;
-            height: 30px;
-        }
-
         .navbar {
             position: unset;
         }