diff --git a/web/features/package-lock.json b/web/features/package-lock.json
index b609f6a3c7..5676697f8c 100644
--- a/web/features/package-lock.json
+++ b/web/features/package-lock.json
@@ -21,6 +21,7 @@
                 "gh-pages": "^6.1.1",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
+                "react-router-dom": "^6.22.1",
                 "react-scripts": "^5.0.1",
                 "typescript": "^4.9.5"
             },
@@ -4665,6 +4666,14 @@
                 }
             }
         },
+        "node_modules/@remix-run/router": {
+            "version": "1.15.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
+            "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@rollup/plugin-babel": {
             "version": "5.3.1",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16639,6 +16648,36 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-router": {
+            "version": "6.22.1",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
+            "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+            "dependencies": {
+                "@remix-run/router": "1.15.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.22.1",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
+            "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+            "dependencies": {
+                "@remix-run/router": "1.15.1",
+                "react-router": "6.22.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/react-scripts": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/web/features/package.json b/web/features/package.json
index ade3a0cd3e..851be154e3 100644
--- a/web/features/package.json
+++ b/web/features/package.json
@@ -17,6 +17,7 @@
         "gh-pages": "^6.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.1",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5"
     },
diff --git a/web/features/src/app.tsx b/web/features/src/app.tsx
index cc5a9b4aaf..152c339395 100644
--- a/web/features/src/app.tsx
+++ b/web/features/src/app.tsx
@@ -24,6 +24,7 @@ import {
 import Path from './components/path';
 import FeatureList from './components/featurelist';
 import { IWorkerMessage, IInitializeMessage, IInitializeResultMessage, ISearchMessage, ISearchResultMessage } from './worker/worker';
+import { useNavigate, useParams } from 'react-router-dom';
 
 const useStyles = makeStyles({
     root: {
@@ -57,7 +58,9 @@ const useStyles = makeStyles({
     },
     searchContainer: {
         display: 'flex',
-        width: '100%'
+        flexWrap: 'wrap',
+        width: '100%',
+        ...shorthands.gap('1em')
     },
     searchInput: {
         flexGrow: 5
@@ -121,8 +124,9 @@ function App() {
     const [worker, setWorker] = React.useState<Worker | null>(null);
     const [query, setQuery] = React.useState('');
 
+    const params = useParams();
     const branches = process.env.REACT_APP_BRANCHES!.split(',');
-    const defaultBranch = branches[0];
+    const defaultBranch = branches.includes(params.branch!) ? params.branch : branches[0];
     const [branch, setBranch] = React.useState(defaultBranch);
 
     const styles = useStyles();
@@ -189,11 +193,14 @@ function App() {
         setResultsTruncated(false);
     };
 
+    const navigate = useNavigate();
     const onBranchSelected = (
         ev: SelectionEvents,
         data: OptionOnSelectData
     ) => {
-        setBranch(data.optionValue ?? defaultBranch);
+        const branch = data.optionValue ?? defaultBranch;
+        setBranch(branch);
+        navigate(`/${branch}`, { replace: true });
     };
 
     return (
@@ -233,7 +240,7 @@ function App() {
                             )
                         }
                     />
-                    <Dropdown className={styles.searchBranch} value={branch} onOptionSelect={onBranchSelected}>
+                    <Dropdown size='large' className={styles.searchBranch} value={branch} onOptionSelect={onBranchSelected}>
                         {
                             branches.map((branch) => (
                                 <Option key={branch}>
diff --git a/web/features/src/index.tsx b/web/features/src/index.tsx
index 24e8303de1..412afd2b1e 100644
--- a/web/features/src/index.tsx
+++ b/web/features/src/index.tsx
@@ -1,4 +1,5 @@
 import * as ReactDOM from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { FluentProvider, createLightTheme } from '@fluentui/react-components';
 import '@fontsource/fira-sans';
 import App from './app';
@@ -32,6 +33,12 @@ const lightTheme = {
     ...coreTheme,
 };
 
+const router = createHashRouter([
+    {
+        path: '/:branch?',
+        element: <App />
+    }
+]);
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
@@ -39,7 +46,7 @@ root.render(
     // https://github.com/microsoft/fluentui/issues/30450
     //<StrictMode>
     <FluentProvider theme={lightTheme}>
-        <App />
+        <RouterProvider router={router} />
     </FluentProvider>
     //</StrictMode>
 );