diff --git a/components/blocks/autofunction.js b/components/blocks/autofunction.js
index 05062a554..b56022f6f 100644
--- a/components/blocks/autofunction.js
+++ b/components/blocks/autofunction.js
@@ -1,10 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
-import classNames from "classnames";
 import Table from "./table";
 import { H2, H3 } from "./headers";
 import Warning from "./warning";
 import Deprecation from "./deprecation";
-import { withRouter, useRouter } from "next/router";
 import Prism from "prismjs";
 import "prismjs/components/prism-python";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
@@ -17,12 +15,10 @@ import getConfig from "next/config";
 const { publicRuntimeConfig } = getConfig();
 
 import styles from "./autofunction.module.css";
-import { looksLikeVersionAndPlatformString } from "../../lib/next/utils";
 import { getThemedUrl, getThemeFromDOM } from "../../lib/next/ThemeContext";
 
 const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
 const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
-const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST;
 
 const cleanHref = (name) => {
   return String(name).replace(/\./g, "").replace(/\s+/g, "-");
@@ -37,10 +33,8 @@ const Autofunction = ({
   deprecated,
   deprecatedText,
   oldStreamlitFunction,
-  goToLatest,
 }) => {
   const blockRef = useRef();
-  const router = useRouter();
   const [isHighlighted, setIsHighlighted] = useState(false);
   const currentNumericVersion =
     version == DEFAULT_VERSION ? LATEST_VERSION : version;
@@ -104,56 +98,6 @@ const Autofunction = ({
     setIsHighlighted(true);
   };
 
-  const VersionSelector = ({ currentNumericVersion, handleSelectVersion }) => {
-    const selectClass =
-      currentNumericVersion != LATEST_VERSION
-        ? "version-select old-version"
-        : "version-select";
-
-    return (
-      <form className={classNames(selectClass, styles.Form)}>
-        <label>
-          <span className="sr-only">Streamlit Version</span>
-          <select
-            value={currentNumericVersion}
-            onChange={handleSelectVersion}
-            className={styles.Select}
-          >
-            {VERSIONS_LIST.map((version, index) => (
-              <option value={version} key={version}>
-                {"Version " + version}
-              </option>
-            ))}
-          </select>
-        </label>
-      </form>
-    );
-  };
-
-  const handleSelectVersion = (event) => {
-    const functionObject =
-      docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
-    const slicedSlug = slug.slice();
-
-    if (event.target.value !== currentNumericVersion) {
-      if (looksLikeVersionAndPlatformString(slicedSlug[0])) {
-        slicedSlug.shift();
-      }
-      if (event.target.value !== LATEST_VERSION) {
-        slicedSlug.unshift(event.target.value);
-      } else {
-        goToLatest();
-      }
-    }
-
-    if (!functionObject) {
-      router.push(`/${slicedSlug.join("/")}`);
-    } else {
-      const name = cleanHref(`st.${functionObject.name}`);
-      router.push(`/${slicedSlug.join("/")}#${name} `);
-    }
-  };
-
   const footers = [];
   const args = [];
   const returns = [];
@@ -184,31 +128,25 @@ const Autofunction = ({
     }
   } else {
     return (
-      <div className={styles.HeaderContainer}>
-        <div className={styles.TitleContainer} ref={blockRef} key={slug}>
-          <H2
-            className={`
-              ${styles.Title}
-              relative
-            `}
+      <div className={styles.HeaderContainer} ref={blockRef} key={slug}>
+        <H2
+          className={`
+            ${styles.Title}
+            relative
+          `}
+        >
+          <a
+            aria-hidden="true"
+            tabIndex="-1"
+            href={`#${cleanHref(
+              streamlitFunction.replace("streamlit", "st"),
+            )}`.toLowerCase()}
+            className="absolute"
           >
-            <a
-              aria-hidden="true"
-              tabIndex="-1"
-              href={`#${cleanHref(
-                streamlitFunction.replace("streamlit", "st"),
-              )}`.toLowerCase()}
-              className="absolute"
-            >
-              <span className="icon icon-link"></span>
-            </a>
-            {streamlitFunction.replace("streamlit", "st")}
-          </H2>
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+            <span className="icon icon-link"></span>
+          </a>
+          {streamlitFunction.replace("streamlit", "st")}
+        </H2>
         <Warning>
           <p>
             This method does not exist in version{" "}
@@ -263,18 +201,7 @@ const Autofunction = ({
     );
     header = (
       <div className={styles.HeaderContainer}>
-        <div
-          className={`
-            ${styles.TitleContainer}
-            relative
-          `}
-        >
-          {headerTitle}
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+        {headerTitle}
         {deprecated === true ? (
           <Deprecation>
             <p dangerouslySetInnerHTML={{ __html: deprecatedText }} />
@@ -543,4 +470,4 @@ const Autofunction = ({
   );
 };
 
-export default withRouter(Autofunction);
+export default Autofunction;
diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css
index f7b407c36..f56a56972 100644
--- a/components/blocks/autofunction.module.css
+++ b/components/blocks/autofunction.module.css
@@ -6,54 +6,10 @@
   @apply mb-6;
 }
 
-.TitleContainer {
-  @apply flex flex-col items-start md:flex-row md:items-baseline mt-4 mb-2;
-}
-
 .Title {
   @apply mt-6 mb-2;
 }
 
-.Form {
-  @apply relative my-4 md:my-0 ml-0 md:ml-auto min-w-fit;
-}
-
-.Form::after {
-  @apply hidden md:block md:absolute md:bottom-1/4 md:right-0 md:opacity-70 md:pointer-events-none md:w-3 md:h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Form::before {
-  @apply md:hidden block absolute bottom-1/4 left-0 opacity-70 pointer-events-none w-3 h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Select {
-  @apply appearance-none bg-white border-none p-0 m-0 w-full font-mono text-lg font-bold leading-none md:text-right text-left md:pr-5 md:pl-0 pr-0 pl-5;
-}
-
-:global(.dark) .Select {
-  @apply bg-gray-100 text-gray-40;
-}
-
-:global(.old-version) .Select {
-  @apply text-red-70;
-}
-
-:global(.sis-version) .Select {
-  @apply text-lightBlue-70;
-}
-
-:global(.dark) .Form::after {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-:global(.dark) .Form::before {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
 .CodeBlockContainer {
   @apply mb-7 relative;
 }
@@ -144,7 +100,7 @@
 
 /* Styles for deprecation notice in param */
 .DeprecatedContent {
-  @apply bg-orange-20 text-gray-90 px-2 py-1 rounded-md text-sm mb-2 flex items-center relative;
+  @apply bg-orange-10 text-gray-90 px-2 py-1 rounded-xl text-sm mb-2 flex items-center relative;
 }
 
 .DeprecatedContent i {
diff --git a/components/blocks/callout.module.css b/components/blocks/callout.module.css
index 9881364ef..b6ff5bd4a 100644
--- a/components/blocks/callout.module.css
+++ b/components/blocks/callout.module.css
@@ -1,5 +1,5 @@
 .Container {
-  @apply p-4 md:p-8 rounded-md mt-8 mb-12;
+  @apply p-4 md:p-8 rounded-xl mt-8 mb-12;
 }
 
 .Container p {
diff --git a/components/blocks/important.module.css b/components/blocks/important.module.css
index a9ed97f2a..4b95022cc 100644
--- a/components/blocks/important.module.css
+++ b/components/blocks/important.module.css
@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Important {
-  background-color: #481d00;
+  @apply bg-orange-100/30;
 }
diff --git a/components/blocks/note.module.css b/components/blocks/note.module.css
index ace7445b6..edca31fcb 100644
--- a/components/blocks/note.module.css
+++ b/components/blocks/note.module.css
@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Note {
-  background-color: #062633;
+  @apply bg-lightBlue-100/30;
 }
diff --git a/components/layouts/container.module.css b/components/layouts/container.module.css
index fa12c78eb..43e058aa3 100644
--- a/components/layouts/container.module.css
+++ b/components/layouts/container.module.css
@@ -6,6 +6,11 @@
   @apply col-span-full lg:col-start-2 lg:col-end-5;
 }
 
+.StickyContext {
+  /* Container for sticky version selector - must have height */
+  @apply relative;
+}
+
 .ArticleContainer {
   @apply relative;
 }
diff --git a/components/layouts/globalTemplate.js b/components/layouts/globalTemplate.js
index 12361fe1a..d88e4b6c2 100644
--- a/components/layouts/globalTemplate.js
+++ b/components/layouts/globalTemplate.js
@@ -4,7 +4,7 @@ import ChatSticky from "../navigation/chatSticky";
 
 import styles from "./globalTemplate.module.css";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, versionProps }) => {
   const [isSticky, setIsSticky] = useState(false);
 
   const handleScroll = () => {
@@ -22,7 +22,7 @@ const Layout = ({ children }) => {
 
   return (
     <main id="root" className="dark:bg-gray-100">
-      <Header isSticky={isSticky} />
+      <Header isSticky={isSticky} versionProps={versionProps} />
       <div className={isSticky ? styles.stickyPageWrapper : undefined}>
         {children}
       </div>
diff --git a/components/navigation/header.js b/components/navigation/header.js
index 41276cd2d..7cad443ff 100644
--- a/components/navigation/header.js
+++ b/components/navigation/header.js
@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 
 // import Navigation from
 import MobileNav from "./mobileNav";
+import VersionSelector from "../utilities/versionSelector";
 
 import styles from "./header.module.css";
 
@@ -14,7 +15,7 @@ const ThemeToggle = dynamic(() => import("../utilities/themeToggle"), {
 });
 import Search from "../utilities/search";
 
-const Header = ({ isSticky }) => {
+const Header = ({ isSticky, versionProps }) => {
   const [windowWidth, setWindowWidth] = useState();
 
   const handleResize = () => {
@@ -50,6 +51,7 @@ const Header = ({ isSticky }) => {
           <h4 className={styles.LogoText}>Documentation</h4>
         </Link>
         <section className={styles.NavigationContainer}>
+          {versionProps && <VersionSelector {...versionProps} isMobile />}
           <Search />
           <ThemeToggle />
           {mobileNav}
diff --git a/components/navigation/header.module.css b/components/navigation/header.module.css
index baa378788..1bdd0a7ba 100644
--- a/components/navigation/header.module.css
+++ b/components/navigation/header.module.css
@@ -1,26 +1,30 @@
 .Container {
-  @apply relative w-full z-30 border-b;
+  @apply relative w-full z-30;
   @apply bg-white !important;
 }
 
 .stickyContainer {
-  @apply fixed h-12 border-b-gray-30 top-0;
+  @apply fixed h-12 top-0;
+}
+
+/* Fade effect using background color gradient */
+.stickyContainer::after {
+  content: "";
+  @apply absolute left-0 right-0 h-6 pointer-events-none;
+  top: 100%;
+  background: linear-gradient(to bottom, theme("colors.white"), transparent);
 }
 
 .standardContainer {
-  @apply border-b-white h-24;
+  @apply h-24;
 }
 
 :global(.dark) .Container {
   @apply bg-gray-100 !important;
 }
 
-:global(.dark) .stickyContainer {
-  @apply border-b-gray-80 !important;
-}
-
-:global(.dark) .standardContainer {
-  @apply border-b-gray-100 !important;
+:global(.dark) .stickyContainer::after {
+  background: linear-gradient(to bottom, theme("colors.gray.100"), transparent);
 }
 
 .Navigation {
@@ -28,11 +32,11 @@
 }
 
 .LogoContainer {
-  @apply flex items-center m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70;
+  @apply flex items-center gap-4 m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70 mr-4;
 }
 
 .LogoText {
-  @apply hidden xl:block m-0 font-normal ml-4 relative top-px text-lg;
+  @apply hidden xl:block m-0 font-normal mr-4 relative top-px text-lg;
   @apply text-gray-90 !important;
 }
 
diff --git a/components/utilities/themeToggle.js b/components/utilities/themeToggle.js
index 9fc879ea9..a67ea1ee7 100644
--- a/components/utilities/themeToggle.js
+++ b/components/utilities/themeToggle.js
@@ -20,7 +20,7 @@ const ThemeToggle = () => {
   };
 
   return (
-    <React.Fragment>
+    <div className={styles.Wrapper}>
       <button
         type="button"
         onClick={toggleTheme}
@@ -34,7 +34,7 @@ const ThemeToggle = () => {
       <div className={styles.Tooltip}>
         <p>Change to {inactiveTheme} mode</p>
       </div>
-    </React.Fragment>
+    </div>
   );
 };
 
diff --git a/components/utilities/themeToggle.module.css b/components/utilities/themeToggle.module.css
index 5d482b371..733a50c11 100644
--- a/components/utilities/themeToggle.module.css
+++ b/components/utilities/themeToggle.module.css
@@ -1,5 +1,9 @@
+.Wrapper {
+  @apply relative;
+}
+
 .Container {
-  @apply relative w-8 h-8 mb-0 rounded-md p-0 block cursor-pointer flex items-center justify-center hover:opacity-90 hover:shadow-sm;
+  @apply w-8 h-8 mb-0 rounded-md p-0 block cursor-pointer flex items-center justify-center hover:opacity-90 hover:shadow-sm;
   @apply bg-gray-20 !important;
 }
 
@@ -33,7 +37,7 @@
 }
 
 .Tooltip {
-  @apply hidden absolute top-20 right-4 h-8 px-2 pt-0.5 rounded-md bg-gray-20;
+  @apply hidden absolute top-10 right-0 px-3 py-1 rounded-md bg-gray-20 z-50 whitespace-nowrap;
 }
 
 .Tooltip p {
diff --git a/components/utilities/versionSelector.js b/components/utilities/versionSelector.js
new file mode 100644
index 000000000..6d6b99abf
--- /dev/null
+++ b/components/utilities/versionSelector.js
@@ -0,0 +1,128 @@
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useRouter } from "next/router";
+import getConfig from "next/config";
+
+import { looksLikeVersionAndPlatformString } from "../../lib/next/utils";
+import styles from "./versionSelector.module.css";
+
+const { publicRuntimeConfig } = getConfig();
+
+const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
+const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
+const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST;
+
+const VersionSelector = ({ version, slug, goToLatest, isMobile = false }) => {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const currentNumericVersion =
+    version == DEFAULT_VERSION ? LATEST_VERSION : version;
+  const isOldVersion = currentNumericVersion != LATEST_VERSION;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleSelectVersion = (selectedVersion) => {
+    setIsOpen(false);
+    const slicedSlug = slug.slice();
+
+    if (selectedVersion !== currentNumericVersion) {
+      if (looksLikeVersionAndPlatformString(slicedSlug[0])) {
+        slicedSlug.shift();
+      }
+      if (selectedVersion !== LATEST_VERSION) {
+        slicedSlug.unshift(selectedVersion);
+      } else {
+        goToLatest();
+      }
+    }
+
+    router.push(`/${slicedSlug.join("/")}`);
+  };
+
+  const containerClass = isMobile ? styles.MobileContainer : styles.Container;
+
+  return (
+    <div
+      className={classNames(containerClass, {
+        [styles.OldVersion]: isOldVersion,
+      })}
+    >
+      <span className={styles.Prefix}>Show API reference for</span>
+      <div className={styles.DropdownWrapper} ref={dropdownRef}>
+        <button
+          type="button"
+          className={styles.DropdownButton}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+        >
+          {isOldVersion && (
+            <i
+              className={classNames("material-icons-sharp", styles.WarningIcon)}
+            >
+              priority_high
+            </i>
+          )}
+          <span
+            className={classNames(styles.SelectedValue, {
+              [styles.OldVersionText]: isOldVersion,
+            })}
+          >
+            <span className={styles.VersionLabelFull}>Version </span>
+            <span className={styles.VersionLabelShort}>v</span>
+            {currentNumericVersion}
+          </span>
+          <i
+            className={classNames("material-icons-sharp", styles.Arrow, {
+              [styles.ArrowOpen]: isOpen,
+            })}
+          >
+            expand_more
+          </i>
+        </button>
+        {isOpen && (
+          <ul className={styles.DropdownMenu} role="listbox">
+            {VERSIONS_LIST.map((ver) => (
+              <li
+                key={ver}
+                role="option"
+                aria-selected={ver === currentNumericVersion}
+                className={classNames(styles.DropdownItem, {
+                  [styles.DropdownItemSelected]: ver === currentNumericVersion,
+                })}
+                onClick={() => handleSelectVersion(ver)}
+              >
+                <span>Version {ver}</span>
+                {ver === currentNumericVersion && (
+                  <i
+                    className={classNames(
+                      "material-icons-sharp",
+                      styles.CheckIcon,
+                    )}
+                  >
+                    check
+                  </i>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VersionSelector;
diff --git a/components/utilities/versionSelector.module.css b/components/utilities/versionSelector.module.css
new file mode 100644
index 000000000..1a6b1d114
--- /dev/null
+++ b/components/utilities/versionSelector.module.css
@@ -0,0 +1,156 @@
+.Container {
+  @apply flex items-center gap-2 mb-4;
+  /* Sticky positioning - stays in place as you scroll */
+  position: sticky;
+  top: 0.5rem;
+  z-index: 50; /* Above header (z-30) */
+  width: fit-content;
+  align-self: flex-start;
+}
+
+/* On mobile, hide this - we'll show a separate one in header */
+@media (max-width: 1023px) {
+  .Container {
+    @apply hidden;
+  }
+}
+
+.Prefix {
+  @apply text-sm text-gray-70 tracking-tight;
+}
+
+/* Dropdown wrapper */
+.DropdownWrapper {
+  @apply relative;
+}
+
+/* The button that shows selected value */
+.DropdownButton {
+  @apply relative flex items-center gap-1.5 bg-gray-20 rounded-md cursor-pointer border-none text-left h-8 px-3;
+}
+
+:global(.dark) .DropdownButton {
+  @apply bg-gray-90;
+}
+
+.SelectedValue {
+  @apply text-sm font-medium text-gray-90 leading-none whitespace-nowrap;
+}
+
+:global(.dark) .SelectedValue {
+  @apply text-gray-40;
+}
+
+/* Version label - show full "Version" at xs (400px) and above, short "v" below */
+.VersionLabelFull {
+  @apply hidden xs:inline;
+}
+
+.VersionLabelShort {
+  @apply inline xs:hidden;
+}
+
+/* Arrow indicator - using material icon for consistency */
+.Arrow {
+  @apply ml-0.5 transition-transform duration-150 text-gray-70;
+  font-size: 1.125rem;
+}
+
+:global(.dark) .Arrow {
+  @apply text-gray-50;
+}
+
+.ArrowOpen {
+  transform: rotate(180deg);
+}
+
+/* Dropdown menu - solid background matching site */
+.DropdownMenu {
+  @apply absolute top-full left-0 mt-1 rounded-md list-none m-0 min-w-full z-50;
+  @apply bg-white border-none;
+  padding: 0.375rem 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+:global(.dark) .DropdownMenu {
+  @apply bg-gray-100 border border-gray-80;
+  box-shadow: none;
+}
+
+.DropdownItem {
+  @apply px-2.5 text-sm cursor-pointer text-gray-90 flex items-center justify-between gap-4 whitespace-nowrap mb-1;
+  padding-top: 0.2rem;
+}
+
+.DropdownItem:hover {
+  @apply bg-gray-20;
+}
+
+:global(.dark) .DropdownItem {
+  @apply text-gray-40;
+}
+
+:global(.dark) .DropdownItem:hover {
+  @apply bg-gray-90;
+}
+
+.DropdownItemSelected {
+  @apply font-medium;
+}
+
+.CheckIcon {
+  @apply text-base text-gray-70 leading-none;
+  font-size: 1rem;
+}
+
+:global(.dark) .CheckIcon {
+  @apply text-gray-50;
+}
+
+/* Old version styling - matches Warning block colors */
+.OldVersion .DropdownButton {
+  @apply bg-orange-10;
+}
+
+:global(.dark) .OldVersion .DropdownButton {
+  @apply bg-orange-100/30;
+}
+
+/* Text color matches Warning block header (orange-70) */
+.OldVersionText {
+  @apply text-orange-70;
+}
+
+:global(.dark) .OldVersionText {
+  @apply text-orange-70;
+}
+
+/* Warning arrow - matches orange-70 text */
+.OldVersion .Arrow {
+  @apply text-orange-70;
+}
+
+/* Warning icon - circular like the Warning block (bg-orange-70) */
+.WarningIcon {
+  @apply text-xs rounded-full bg-orange-70 flex-shrink-0 w-4 h-4 flex items-center justify-center leading-none pl-px;
+  color: white !important; /* Override header icon color rule */
+}
+
+/* Mobile version selector - shown in header */
+.MobileContainer {
+  @apply hidden items-center gap-2 mr-4;
+}
+
+@media (max-width: 1023px) {
+  .MobileContainer {
+    @apply flex;
+  }
+}
+
+.MobileContainer .Prefix {
+  @apply hidden;
+}
+
+.MobileContainer .DropdownButton {
+  @apply px-2;
+}
diff --git a/pages/[...slug].js b/pages/[...slug].js
index 37d30cb6c..2dccdf6ff 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -44,6 +44,7 @@ import Helpful from "../components/utilities/helpful";
 import { H1, H2, H3 } from "../components/blocks/headers";
 import Psa from "../components/utilities/psa";
 import FloatingNav from "../components/utilities/floatingNav";
+import VersionSelector from "../components/utilities/versionSelector";
 
 // MDX Components
 import Autofunction from "../components/blocks/autofunction";
@@ -108,11 +109,11 @@ export default function Article({
 }) {
   const router = useRouter();
 
-  let versionWarning;
   let currentLink;
 
   const { version, platform, goToLatest, goToOpenSource } = useVersionContext();
-  const isVersionedPage = currMenuItem && currMenuItem.isVersioned;
+  // Determine if page is versioned based on having docstrings (Autofunction usage)
+  const isVersionedPage = docstrings && Object.keys(docstrings).length > 0;
   const isUnversionedURL = !versionFromSlug || !platformFromSlug;
   const contextIsDefault =
     version == DEFAULT_VERSION && platform == DEFAULT_PLATFORM;
@@ -164,7 +165,6 @@ export default function Article({
         version={version}
         slug={slug}
         oldStreamlitFunction={props.oldName ?? ""}
-        goToLatest={goToLatest}
       />
     ),
     pre: (props) => <Code {...props} />,
@@ -180,21 +180,8 @@ export default function Article({
   let arrowContainer;
   let keywordsTag;
 
-  if (version != DEFAULT_VERSION && currMenuItem.isVersioned) {
-    // Slugs don't have the version number, so we just have to join them.
-    currentLink = `/${slug.join("/")}`;
-    versionWarning = (
-      <Warning>
-        <p>
-          You are reading the documentation for Streamlit version {version}, but{" "}
-          <Link href={currentLink} onClick={goToLatest}>
-            {LATEST_VERSION}
-          </Link>{" "}
-          is the latest version available.
-        </p>
-      </Warning>
-    );
-  }
+  // Version props for versioned pages (used by both inline selector and mobile header)
+  const versionProps = isVersionedPage ? { version, slug, goToLatest } : null;
 
   if (prevMenuItem) {
     previousArrow = (
@@ -236,7 +223,7 @@ export default function Article({
         img: Image,
       }}
     >
-      <Layout>
+      <Layout versionProps={versionProps}>
         <section className={styles.Container}>
           <SideBar slug={slug} menu={menu} />
           <Head>
@@ -288,19 +275,21 @@ export default function Article({
             />
           </Head>
           <section className={styles.InnerContainer} id="documentation">
-            {versionWarning}
             <BreadCrumbs slug={slug} menu={menu} />
-            <article
-              id="content-container"
-              className={classNames("leaf-page", styles.ArticleContainer)}
-            >
-              <FloatingNav slug={slug} menu={menu} />
-              <div className={classNames("content", styles.ContentContainer)}>
-                <MDXRemote {...source} components={components} />
-                {arrowContainer}
-                <Psa />
-              </div>
-            </article>
+            <div className={styles.StickyContext}>
+              {versionProps && <VersionSelector {...versionProps} />}
+              <article
+                id="content-container"
+                className={classNames("leaf-page", styles.ArticleContainer)}
+              >
+                <FloatingNav slug={slug} menu={menu} />
+                <div className={classNames("content", styles.ContentContainer)}>
+                  <MDXRemote {...source} components={components} />
+                  {arrowContainer}
+                  <Psa />
+                </div>
+              </article>
+            </div>
           </section>
           <Footer />
         </section>
diff --git a/tailwind.config.js b/tailwind.config.js
index a47b6c9fe..f1ad5e345 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
     screens: {
       // Remove largest breakpoint, while keeping everything else at Tailwind defaults.
       // https://tailwindcss.com/docs/breakpoints
+      xs: "400px",
       sm: "640px",
       md: "768px",
       lg: "1024px",