diff --git a/package-lock.json b/package-lock.json
index c4c81b7..4a9c066 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,11 +5,12 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "chatgpt-openshift",
-      "version": "0.0.0",
+      "name": "react-openshift",
+      "version": "0.0.1",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.11.1",
@@ -916,6 +917,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
@@ -3384,6 +3393,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "dependencies": {
+        "@remix-run/router": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
+      "dependencies": {
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
diff --git a/package.json b/package.json
index 1841dfb..8a7c37b 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,14 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.11.1",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
diff --git a/src/About.jsx b/src/About.jsx
new file mode 100644
index 0000000..6e314c0
--- /dev/null
+++ b/src/About.jsx
@@ -0,0 +1,15 @@
+function About() {
+
+  return (
+    <>
+      <div>
+        <h1>About</h1>
+        <div className="card">
+          <p>Welcome to the about page...</p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default About
diff --git a/src/App.css b/src/App.css
index c65ebf8..18c6564 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 body {
-    background-color: green;
+    background-color: #222;
 }
 
 #root {
@@ -15,9 +15,11 @@ body {
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #000e2f55);
 }
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -28,7 +30,7 @@ body {
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a .logo {
+  .logo {
     animation: logo-spin infinite 60s linear;
   }
 }
@@ -40,3 +42,8 @@ body {
 .read-the-docs {
   color: #888;
 }
+
+Nav li {
+  display: inline;
+  margin: 0 1em;
+}
diff --git a/src/App.jsx b/src/App.jsx
index 585772f..073a429 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,23 +1,20 @@
-import { useState } from 'react'
-import uconnOakLogo from './assets/oak-leaf-blue.png'
+import { Route, Routes } from 'react-router-dom';
 import './App.css'
+import Navbar from './Navbar'
+import Home from './Home'
+import About from './About'
+import Contact from './Contact'
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
     <>
-      <div>
-        <a href="https://uconn.edu" target="_blank">
-          <img src={uconnOakLogo} className="logo" alt="UConn Oak Logo" />
-        </a>
-      </div>
-      <h1>Hello!</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-      </div>
+      <Navbar />
+      <Routes>
+         <Route path='/' element={<Home/>} />
+         <Route path='/about' element={<About/>} />
+         <Route path='/contact' element={<Contact/>} />
+       </Routes>
     </>
   )
 }
diff --git a/src/Contact.jsx b/src/Contact.jsx
new file mode 100644
index 0000000..3ff7e18
--- /dev/null
+++ b/src/Contact.jsx
@@ -0,0 +1,15 @@
+function Contact() {
+
+  return (
+    <>
+      <div>
+        <h1>Contact</h1>
+        <div className="card">
+          <p>Contact us...</p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Contact
diff --git a/src/Home.jsx b/src/Home.jsx
new file mode 100644
index 0000000..0072f34
--- /dev/null
+++ b/src/Home.jsx
@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import uconnOakLogo from './assets/oak-leaf-blue.png'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <img src={uconnOakLogo} className="logo" alt="UConn Oak Logo" />
+      </div>
+      <h1>Hello!</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default App
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
new file mode 100644
index 0000000..ccd82b6
--- /dev/null
+++ b/src/Navbar.jsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+        <li>
+          <Link to="/contact">Contact</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Navbar
diff --git a/src/index.css b/src/index.css
index d6b7d68..4db05ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,7 +25,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: top;
   min-width: 320px;
   min-height: 100vh;
 }
diff --git a/src/main.jsx b/src/main.jsx
index 89f91e5..d5ce027 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )