diff --git a/doc/_static/css/custom_styles.css b/doc/_static/css/custom_styles.css
index b6f8a149..52ecf64f 100644
--- a/doc/_static/css/custom_styles.css
+++ b/doc/_static/css/custom_styles.css
@@ -205,27 +205,10 @@ a[href="#join-our-community"] + ul li.toc-h3 {
   display: none;
 }
 
-/* Version selector and header */
+/* Version selector */
 
-#versions-header {
-  color: rgb(0 0 0 / 65%);
-  font-size: 0.8rem;
-  margin-top: 1.1rem;
-  text-transform: uppercase;
-}
-
-#select-versions {
-  background-color: transparent;
-  border: 1px solid rgb(0 0 0 / 15%);
-  color: rgb(0 0 0 / 65%);
-  font-size: 90%;
-  margin-bottom: 7px;
-  padding: 2px;
-}
-
-#select-versions,
-#select-versions option {
-  width: 98%;
+.version-switcher__button {
+  margin-bottom: 0 !important;
 }
 
 /*** Styles for video transcript dropdown elements ***/
diff --git a/doc/_static/versions.json b/doc/_static/versions.json
new file mode 100644
index 00000000..52b55f86
--- /dev/null
+++ b/doc/_static/versions.json
@@ -0,0 +1,15 @@
+[
+    {
+        "version": "5",
+        "preferred": true,
+        "url": "https://docs.spyder-ide.org/5/"
+    },
+    {
+        "version": "4",
+        "url": "https://docs.spyder-ide.org/4/"
+    },
+    {
+        "version": "3",
+        "url": "https://docs.spyder-ide.org/3/"
+    }
+]
diff --git a/doc/conf.py b/doc/conf.py
index 48df7931..4afed9d9 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -143,7 +143,13 @@
 html_logo = "_static/images/spyder_logo.svg"
 html_theme_options = {
     "header_links_before_dropdown": 8,
+    "navbar_start": ["navbar-logo", "version-switcher"],
     "navigation_with_keys": False,
+    "show_version_warning_banner": True,
+    "switcher": {
+        "json_url": "https://docs.spyder-ide.org/versions.json",
+        "version_match": version,
+    },
 }
 html_context = {
     "github_user": "spyder-ide",