diff --git a/docusaurus.config.js b/docusaurus.config.js
index 71707f07..7c6cb2e4 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -63,8 +63,13 @@ module.exports = async function createConfigAsync() {
               position: 'right',
             },
           ],
+        },
+        announcementBar: {
+          id: "DevConnect",
+          content:
+            '<a href="https://lu.ma/hookathon" target="_blank" rel="noreferrer">🦄 ⚡️ Join the UNISUAVE Researchathon @Devconnect Istanbul!</a>',
+          isCloseable: false,
         }
-
       }),
     presets: [
       [
diff --git a/src/css/custom.css b/src/css/custom.css
index a16497b4..79d6b1ea 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -80,4 +80,40 @@ h2 {
 .menu__link--sublist::after {
   background: var(--ifm-menu-link-sublist-icon) 50%/1.5rem 1.5rem;
   opacity: .75;
-}
\ No newline at end of file
+}
+
+div[role=banner] { 
+  min-height: 32px;
+
+  > div {
+    min-height: 32px;
+    padding: 0px;
+    border: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 10px;
+    background-color: #e982ff;
+    color: #000000;
+    text-align: center;
+    font-size: 100%;
+    a {
+      font-family: "CMU-Serif";
+      font-size: 16px;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+@media (min-width: 341px) and (max-width: 640px) {
+  div[role=banner] > div a {
+    flex-basis: 280px;
+  }
+}
+@media (max-width: 340px) {
+  div[role=banner] > div a {
+    flex-basis: 150px;
+  }
+}