diff --git a/frontend/src/css/modules/main-header.scss b/frontend/src/css/modules/main-header.scss
index 7466868815..a815d7cfa3 100644
--- a/frontend/src/css/modules/main-header.scss
+++ b/frontend/src/css/modules/main-header.scss
@@ -55,6 +55,33 @@
     /* horizontally center */
     align-items: center;
     /* vertically center */
+
+    .close-banner-btn {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        background: transparent;
+        border: none;
+        color: $light-gray;
+        font-size: 32px;
+        font-weight: bold;
+        cursor: pointer;
+        padding: 0;
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        transition: all 0.2s ease-in-out;
+        opacity: 0.8;
+
+        &:hover {
+            opacity: 1;
+            transform: scale(1.1);
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
 }
 
 @media only screen and (max-width: $med-screen) {
diff --git a/frontend/src/views/web/partials/main-header.html b/frontend/src/views/web/partials/main-header.html
index 7e8f4f23a1..396e091a6d 100644
--- a/frontend/src/views/web/partials/main-header.html
+++ b/frontend/src/views/web/partials/main-header.html
@@ -1,4 +1,7 @@
-<div class="announcement-banner">
+<div class="announcement-banner" id="announcement-banner">
+    <button class="close-banner-btn" onclick="document.getElementById('announcement-banner').style.display='none'; document.querySelector('.main-header nav').style.top='0';" aria-label="Close announcement">
+        ×
+    </button>
     <div style="max-width: 960px; margin: 0 auto;">
         🚨 <strong>Update:</strong> EvalAI is transitioning to a paid plan for hosting challenges and is sunsetting
         support for code-upload and static code-upload challenges. If you are planning to host a new challenge, please get in touch at