diff --git a/package-lock.json b/package-lock.json
index d08cc6f..1b0027d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "6"
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
@@ -1018,6 +1019,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.0.tgz",
@@ -3799,6 +3809,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz",
+      "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz",
+      "integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
diff --git a/package.json b/package.json
index 16343f4..0fa7f6a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "6"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -24,5 +25,6 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "vite": "^6.0.5"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/App.css b/src/App.css
index b9d355d..b745dde 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,6 +18,14 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+h4 {
+  text-align: left;
+}
+
+form {
+  text-align: left;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/App.jsx b/src/App.jsx
index b384095..fa8f8fc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,28 @@
-import { useState } from 'react'
+import { Routes, Route, Link } from 'react-router-dom';
+import Home from '../src/pages/Home';
 import './App.css'
 
-function App() {
-  // const [count, setCount] = useState(0)
+function About() {
+  return <h2>About</h2>;
+}
 
+function Proxied_Apps() {
+  return <h2>Proxied apps</h2>;
+}
+function App() {
   return (
-    <div className='App'>
-    <p>yatta, yatta, yatta</p>
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/Proxied_Apps">Proxied Apps</Link>
+      </nav>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/Proxied_Apps" element={<Proxied_Apps />} />
+      </Routes>
     </div>
   )
 }
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..6e8116b 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom';
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <BrowserRouter>
+  <App />
+  </BrowserRouter>
 )
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..c180e68
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+function MyForm() {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+    setInputs(values => ({ ...values, [name]: value }))
+  }
+
+  return (
+    <>
+
+    <h4>DNS</h4>
+
+      <form>
+
+        <label>FQDN
+          <input type="text" name="fqdn" value={inputs.fqdn || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>CNAME target
+          <input type="text" name="cname_target" value={inputs.cname_target || "cygnus.int.jonb.io"} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+    <h4>Reverse Proxy</h4>
+
+        <label>FQDN
+          <input type="text" value={inputs.fqdn} onChange={handleChange} disabled/>
+        </label>
+
+        <br />
+
+        <label>Target Host
+          <input type="text" name="target_host" value={inputs.target_host || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>Upstream Port
+          <input type="number" name="upstream_port" value={inputs.upstream_port || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>Protocol
+          <select name="protocol" value={inputs.protocol || ""} onChange={handleChange}>
+            <option value="http" selected>http</option>
+            <option value="https">https</option>
+          </select>
+        </label>
+
+        <br />
+
+        <button type="submit">Submit</button>
+
+      </form>
+    </>
+  )
+}
+
+
+function Home() {
+  return (<><h2>Home Page</h2>
+    <MyForm />
+  </>
+  )
+}
+
+export default Home;
\ No newline at end of file