diff --git a/binderhub/main.py b/binderhub/main.py
index 792d038e4..e42ee8c2d 100644
--- a/binderhub/main.py
+++ b/binderhub/main.py
@@ -25,6 +25,7 @@ def get(self):
             "logoWidth": "320px",
             "repoProviders": repoproviders_display_config,
             "aboutMessage": self.settings["about_message"],
+            "bannerHtml": self.settings["banner_message"],
             "binderVersion": binder_version,
         }
         self.render_template(
diff --git a/binderhub/static/js/App.jsx b/binderhub/static/js/App.jsx
index 42e3a74bb..14428e169 100644
--- a/binderhub/static/js/App.jsx
+++ b/binderhub/static/js/App.jsx
@@ -80,14 +80,22 @@ const router = createBrowserRouter(
 );
 function App() {
   return (
-    <div className="container-md">
-      <div className="col-8 offset-md-2">
-        <div className="text-center m-4">
-          <img src={PAGE_CONFIG.logoUrl} width={PAGE_CONFIG.logoWidth} />
+    <>
+      {PAGE_CONFIG.bannerHtml && (
+        <div
+          className="p-3 bg-light shadow-sm text-center"
+          dangerouslySetInnerHTML={{ __html: PAGE_CONFIG.bannerHtml }}
+        ></div>
+      )}
+      <div className="container-md">
+        <div className="col-8 offset-md-2">
+          <div className="text-center m-4">
+            <img src={PAGE_CONFIG.logoUrl} width={PAGE_CONFIG.logoWidth} />
+          </div>
+          <RouterProvider router={router} />
         </div>
-        <RouterProvider router={router} />
       </div>
-    </div>
+    </>
   );
 }