diff --git a/docs/overrides/main.html b/docs/overrides/main.html
new file mode 100644
index 0000000000000000000000000000000000000000..c6dbad9a54324f19e56f919c2b71512473bcea75
--- /dev/null
+++ b/docs/overrides/main.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% block announce %}
+<label for="version">Version</label>
+<select style="margin-left:8px;" id="version" name="version" onchange="switchVersion(this.options[this.selectedIndex].value)">
+    <option value="latest">latest</option>
+    <option value="1.3">1.3</option>
+</select>
+<script>
+    function getVersion() {
+        const segments = location.pathname.split('/')
+        if (segments.length === 5) {
+            return segments[3]
+        } else {
+            return 'latest'
+        }
+    }
+    function switchVersion(value) {
+        if (!value) { return }
+        this.location.href = location.protocol + '//' + location.host + '/infrastructures/dbrepo/' + value + '/'
+    }
+    document.getElementById("version").value = getVersion()
+</script>
+{% endblock %}
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 4c2eae68e18746404a41bce5d61a8e3048f821e2..baa66b9b7a7944f46bb95c3b354fc15d41196e0f 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -16,3 +16,12 @@
     color: var(--md-typeset-color);
     border-bottom: 2px solid var(--md-primary-fg-color--dark);
 }
+
+.md-banner {
+    background-color: var(--md-primary-fg-color--dark);
+}
+
+[data-md-component=announce] .md-banner__inner {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 8bf20165eca7c6ff4d71309def3b0237f180903d..8ce274608efb2dfe56f84de048821a391c5032a3 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -36,6 +36,7 @@ extra_css:
   - stylesheets/extra.css
 theme:
   favicon: images/signet_white.png
+  custom_dir: docs/overrides
   logo: images/signet_white.png
   font:
     text: IBM Plex Serif