diff --git a/index.html b/index.html
index ae29604..3221ca5 100644
--- a/index.html
+++ b/index.html
@@ -35,10 +35,11 @@
     </div>
 
   <div class="header" style="margin-top: 2cm;">
-
+    <!-- <div class="banner">
+      📢 Announcement goes here
+    </div> -->
   </div>
 
-
   <div class="grid-container">
 
     <div class="middle-large">
diff --git a/style.css b/style.css
index 5fdea78..84f0035 100644
--- a/style.css
+++ b/style.css
@@ -28,6 +28,15 @@ h1 {margin-top: 3vh;}
     align-items: center;
 }
 
+.banner {
+  
+  width: 90%;
+  text-align: center;
+  font-weight: bold;
+  padding: 0.2cm;
+  border-radius:10px;
+}
+
 .name {
   display: flex;
   justify-content: center;
@@ -238,6 +247,7 @@ h1 {margin-top: 3vh;}
 /* For phone screens */
 @media only screen and (max-width: 750px) {
   h1 {margin-top: 8vh;}
+  .banner {margin-top: 1cm;}
 }
 
 @media (prefers-color-scheme: light) {
@@ -255,6 +265,7 @@ h1 {margin-top: 3vh;}
   .itemcard-stealth:hover {background-color: #e0e0e0;}
   .infocard {background-color: var(--white);}
   .separator {background-color: rgba(237, 237, 237, 1);}
+  .banner {background-color: #BFD7F3;}
 }
 
 @media (prefers-color-scheme: dark) {
@@ -269,4 +280,5 @@ h1 {margin-top: 3vh;}
   .itemcard-stealth:hover {background-color: #4a4a4a;}
   .infocard {background-color: #303030;}
   .separator {background-color: #232323;}
+  .banner {background-color: #29415E;}
 }