diff --git a/package-lock.json b/package-lock.json
index cd55699..3ae10a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2068,6 +2068,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -2555,6 +2560,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -2666,6 +2677,27 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.19",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
+      "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -9912,6 +9944,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "requires": {
+        "@remix-run/router": "1.0.3"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "requires": {
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index c3fa631..20a0e2b 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,12 @@
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "autoprefixer": "^10.4.13",
diff --git a/src/App.tsx b/src/App.tsx
index 2e289fa..9f3781c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,24 @@
-// import React from "react"
-import logo from "./common/assets/logo.svg"
+import { Routes, Route } from "react-router-dom"
+
+import { TopBar } from "common/components/ui/TopBar"
+import { NotFound404 } from "common/pages/404NotFound"
+import { Home } from "features/home"
+
 import "./common/assets/styles/App.css"
 
 export function App(): JSX.Element {
   return (
-    <div className="App bg-green-500">
-      <header className="App-header">
-        <h1 className="text-amber-300">Hiiiii</h1>
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="app">
+      {/* Any Pop-up modals */}
+      <div className="viewport">
+        <TopBar />
+        <div className="canvas">
+          <Routes>
+            <Route path="/" element={<Home />}></Route>
+            <Route path="*" element={<NotFound404 />}></Route>
+          </Routes>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/common/components/ui/TopBar.tsx b/src/common/components/ui/TopBar.tsx
new file mode 100644
index 0000000..cd37816
--- /dev/null
+++ b/src/common/components/ui/TopBar.tsx
@@ -0,0 +1,22 @@
+import { NavLink } from "react-router-dom"
+
+import { FEATURES } from "common/constants/features"
+
+const NAV_FEATURES = [FEATURES.home, FEATURES.feedback]
+
+export function TopBar(): JSX.Element {
+  return (
+    <div className="w-full p-6 sticky top-0 z-50 bg-amber-300">
+      <nav className="flex gap-8">
+        <img src="" alt="Logo" />
+        <ul className="flex gap-8">
+          {NAV_FEATURES.map(({ title, url }) => (
+            <li>
+              <NavLink to={url}>{title}</NavLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  )
+}
diff --git a/src/common/constants/features.tsx b/src/common/constants/features.tsx
new file mode 100644
index 0000000..b95afe8
--- /dev/null
+++ b/src/common/constants/features.tsx
@@ -0,0 +1,4 @@
+export const FEATURES = {
+  home: { title: "Home", url: "/" },
+  feedback: { title: "Feedback", url: "feedback" },
+}
diff --git a/src/common/pages/404NotFound.tsx b/src/common/pages/404NotFound.tsx
new file mode 100644
index 0000000..29a84b6
--- /dev/null
+++ b/src/common/pages/404NotFound.tsx
@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom"
+
+export function NotFound404(): JSX.Element {
+  return (
+    <main>
+      <h1>Sorry, this page could not be found!</h1>
+      <Link to={"/"}>Return Home</Link>
+      {/* Report a bug */}
+    </main>
+  )
+}
diff --git a/src/common/components/ui/.gitignore b/src/features/home/components/.gitignore
similarity index 100%
rename from src/common/components/ui/.gitignore
rename to src/features/home/components/.gitignore
diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx
new file mode 100644
index 0000000..8bc4479
--- /dev/null
+++ b/src/features/home/index.tsx
@@ -0,0 +1,7 @@
+export function Home(): JSX.Element {
+  return (
+    <main>
+      <h1>Welcome</h1>
+    </main>
+  )
+}
diff --git a/src/index.css b/src/index.css
index 9e4b1f1..2c7ca6b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,3 +15,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+@layer base {
+  .app {@apply relative min-h-screen h-full flex flex-col ;}
+  .viewport {@apply min-h-screen flex flex-col items-center bg-amber-200;}
+  .canvas {@apply w-full grow flex flex-col items-center justify-center bg-slate-400;} 
+
+  /* nav {@apply bg-slate-500} */
+  main, .main { @apply flex flex-col items-center; }
+
+  a, .a { @apply text-blue-900 underline;}
+}
+
+
+
+@layer components {}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 67c2a69..1bf8877 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
 
 import { App } from "./App"
 import { reportWebVitals } from "./reportWebVitals"
@@ -8,7 +9,10 @@ import "./index.css"
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      {/* BrowserRouter keeps UI in sync with the URL */}
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 )