diff --git a/src/css/banner.css b/src/css/banner.css
new file mode 100644
index 0000000..8f55c36
--- /dev/null
+++ b/src/css/banner.css
@@ -0,0 +1,7 @@
+.banner-nightly {
+  background-color: #fa0;
+}
+
+.banner-outdated {
+  background: #f80;
+}
diff --git a/src/css/header.css b/src/css/header.css
index f9588e2..ec9d3b2 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -6,15 +6,18 @@ body {
   padding-top: var(--navbar-height);
 }
 
+.header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--z-index-navbar);
+}
+
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
   height: var(--navbar-height);
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: var(--z-index-navbar);
 }
 
 .navbar a {
@@ -176,11 +179,9 @@ body {
 
 .navbar-sub {
   display: block;
-  position: relative;
   background-color: var(--color-brand-primary);
   padding: 5px 15px 5px 0;
   transition: all 0.5s;
-  height: 42px;
   /* overflow: hidden; */
 }
 
diff --git a/src/css/site.css b/src/css/site.css
index e40d63b..6f03e49 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,6 +1,7 @@
 @import "typeface-roboto-mono.css";
 @import "typeface-titillium-web.css";
 @import "vars.css";
+@import "banner.css";
 @import "base.css";
 @import "body.css";
 @import "search.css";
diff --git a/src/css/vars.css b/src/css/vars.css
index 1d6d6ed..fe6fb38 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -34,6 +34,7 @@
   --panel-background: var(--color-smoke-30);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-thumb-color: var(--color-gray-10);
+  /* banners */
   /* navbar */
   --navbar-background: var(--color-jet-70);
   --navbar-font-color: var(--color-white);
@@ -120,6 +121,7 @@
   --footer-font-color: var(--color-white);
   --footer-link-font-color: var(--color-smoke-70);
   /* dimensions and positioning */
+  --banner-height: calc(45 / var(--rem-base) * 1rem);
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
diff --git a/src/partials/banner-outdated-version.hbs b/src/partials/banner-outdated-version.hbs
new file mode 100644
index 0000000..2fd28b6
--- /dev/null
+++ b/src/partials/banner-outdated-version.hbs
@@ -0,0 +1,12 @@
+{{#if (eq page.version "nightly")}}
+<div class="banner-nightly">
+  These are the docs for a nightly preview version of the Stackable Data Platform. Latest stable release is XY.Z
+</div>
+{{else}}
+{{#unless (eq page.version page.component.latest.version)}}
+<div class="banner-outdated">
+  These are the docs for an older version of the Stackable Data Platform (XY.Z). Latest stable release is XY.Z
+</div>
+{{/unless}}
+{{/if}}
+</div>
\ No newline at end of file
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index b40c124..636a196 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -1,4 +1,5 @@
 <header class="header">
+{{> banner-outdated-version}}
   <nav class="navbar">
     <div class="container">
       <div class="navbar-brand">