diff --git a/content/css/docs.css b/content/css/docs.css
index 88148654c..ad4183e71 100644
--- a/content/css/docs.css
+++ b/content/css/docs.css
@@ -78,6 +78,37 @@ body {
   color: white;
 }
 
+.banner {
+  background-color: #ffc107;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  gap: 32px;
+  align-items: center;
+  justify-content: center;
+}
+
+.banner button {
+  background-color: transparent;
+  color: rgb(36, 36, 152);
+  border: none;
+}
+
+.banner button:hover {
+  border: rgb(36, 36, 152);
+}
+
+.banner a {
+  text-decoration: underline;
+  font-style: italic;
+}
+
+.banner h3 {
+  font-size: 16px;
+  font-weight: 600;
+  font-family: Lato, sans-serif;
+}
+
 .jumbotron {
   background-color: #e6522c;
   background-image: url("/assets/jumbotron-background.png");
diff --git a/layouts/banner.html b/layouts/banner.html
new file mode 100644
index 000000000..bdee828d3
--- /dev/null
+++ b/layouts/banner.html
@@ -0,0 +1,5 @@
+<div class="container banner" id="banner">
+  <h3>We are doing a <a href="https://forms.gle/TomwH6tFGecZCUNy9" target="_blank">survey</a>, please participate!!!
+  </h3>
+  <button type="button" aria-label="Close" onclick="hideBanner()">X</button>
+</div>
diff --git a/layouts/footer.html b/layouts/footer.html
index a3dd5163b..5fcd78734 100644
--- a/layouts/footer.html
+++ b/layouts/footer.html
@@ -18,5 +18,13 @@
         debug: false // Set debug to true if you want to inspect the dropdown
       });
     </script>
+    <script>
+      function hideBanner() {
+        const banner = document.getElementById('banner');
+        if (banner) {
+          banner.style.display = 'none';
+        }
+      }
+    </script>
   </body>
 </html>
diff --git a/layouts/header.html b/layouts/header.html
index ed7380330..0822f10f8 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -91,4 +91,6 @@
         </div>
       </div>
     </nav>
+    <%= render 'banner' %>
+
   </div>