diff --git a/package-lock.json b/package-lock.json
index eadb7c4..14a72cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.27.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.37",
@@ -911,6 +912,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3555,6 +3565,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
@@ -5017,6 +5059,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg=="
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6960,6 +7007,23 @@
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true
     },
+    "react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "requires": {
+        "@remix-run/router": "1.20.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "requires": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      }
+    },
     "regexp.prototype.flags": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
diff --git a/package.json b/package.json
index 727f1c1..f4ee931 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.jsx b/src/App.jsx
index 1b51d87..bf8bdfc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,24 @@
-import "./App.css";
+import { Link, Route, Routes, useParams } from "react-router-dom";
+import { useState } from "react";
+import companiesJson from "./companies.json";
+import techJson from "./technologies.json";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
 
 function App() {
+  const [companies, setCompanies] = useState(companiesJson);
+  const [tech, setTech] = useState(techJson);
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies} />} />
+        <Route
+          path="/company/:companySlug"
+          element={<CompanyPage techs={tech} companies={companies} />}
+        />
+        <Route path="/tech/:slug" element={<TechnologyPage />} />
+      </Routes>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index b121ef9..fb06263 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
@@ -50,15 +49,34 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.home{
+  display: flex;
+  flex-wrap: wrap;
+  
+}
+li{
+  list-style: none;
+  margin: 2em;
+  width: 15em;
+}
+img{
+  width: 7em;
+}
+.company{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+p{
+  width: 20em;
+}
+
+.tech{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tech div{
+  width:10em;
 }
+
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..977d4cb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx
index cc5903c..e608bda 100644
--- a/src/pages/CompanyPage.jsx
+++ b/src/pages/CompanyPage.jsx
@@ -1,7 +1,32 @@
-function CompanyPage() {
+import { useParams } from "react-router-dom";
+
+function CompanyPage(props) {
+  const { companySlug } = useParams();
+  const [company] = props.companies.filter((company) => {
+    return company.slug === companySlug;
+  });
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="company">
+      <img src={company.logo} />
+
+      <div>
+        <h2>{company.name}</h2>
+        <h3>about</h3>
+        <p>{company.description}</p>
+      </div>
+      <div>
+        <span className="tech">
+          {company.techStack.map((tech) => {
+            return (
+              <div>
+                <img src={tech.image} />
+                <p>{tech.name}</p>
+              </div>
+            );
+          })}
+        </span>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index e97e7de..8b3c63d 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,7 +1,17 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+function HomePage(props) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div className="home">
+      {props.companies.map((company) => {
+        return (
+          <Link key={company.id} to={`company/${company.slug}`}>
+            <li>{company.name}</li>
+            <li>
+              <img src={company.logo} />
+            </li>
+          </Link>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx
index 30f9414..c4c7879 100644
--- a/src/pages/TechnologyPage.jsx
+++ b/src/pages/TechnologyPage.jsx
@@ -1,7 +1,7 @@
-function TechnologyPage() {
+function TechnologyPage(props) {
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
     </div>
   );
 }