diff --git a/package-lock.json b/package-lock.json
index eadb7c4..810b707 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": "^7.4.1"
       },
       "devDependencies": {
         "@types/react": "^18.0.37",
@@ -935,6 +936,12 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.2.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
@@ -1505,6 +1512,15 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3555,6 +3571,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz",
+      "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.1.tgz",
+      "integrity": "sha512-L3/4tig0Lvs6m6THK0HRV4eHUdpx0dlJasgCxXKnavwhh4tKYgpuZk75HRYNoRKDyDWi9QgzGXsQ1oQSBlWpAA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.4.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
@@ -3723,6 +3779,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3990,6 +4052,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5038,6 +5106,11 @@
         "@types/chai": "*"
       }
     },
+    "@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "@types/node": {
       "version": "20.2.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
@@ -5464,6 +5537,11 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6960,6 +7038,25 @@
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true
     },
+    "react-router": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz",
+      "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==",
+      "requires": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.1.tgz",
+      "integrity": "sha512-L3/4tig0Lvs6m6THK0HRV4eHUdpx0dlJasgCxXKnavwhh4tKYgpuZk75HRYNoRKDyDWi9QgzGXsQ1oQSBlWpAA==",
+      "requires": {
+        "react-router": "7.4.1"
+      }
+    },
     "regexp.prototype.flags": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
@@ -7073,6 +7170,11 @@
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true
     },
+    "set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -7274,6 +7376,11 @@
         "punycode": "^2.3.0"
       }
     },
+    "turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 727f1c1..b5aa2bd 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": "^7.4.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
diff --git a/src/App.jsx b/src/App.jsx
index 1b51d87..6565e7f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,33 @@
 import "./App.css";
+import { useState, useEffect } from "react";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+import { Routes, Route } from "react-router-dom";
+
+import companiesData from "../src/technologies.json";
+import technologiesData from "../src/companies.json";
+
 
 function App() {
+  const [companies, setCompanies] = useState([]);
+  const [technologies, setTechnologies] = useState([]);
+
+  useEffect(() => {
+    setCompanies(companiesData);
+    setTechnologies(technologiesData);
+  }, []);
+
   return (
-    <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
-    </div>
+    <>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies} />} />
+        <Route path="/company/:companySlug" element={<CompanyPage companies={companies} />} />
+        <Route path="/tech/:slug" element={<TechnologyPage technologies={technologies} />} />
+      </Routes>
+    </>
   );
 }
 
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..6288365 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter as Router } from "react-router-dom";
 import App from './App.jsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    <Router>
     <App />
+    </Router>
   </React.StrictMode>,
 )
diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx
index cc5903c..48b784b 100644
--- a/src/pages/CompanyPage.jsx
+++ b/src/pages/CompanyPage.jsx
@@ -1,9 +1,28 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+export default function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+  const company = companies.find((c) => c.slug === companySlug);
+
+  if (!company) return <p>Company not found</p>;
+
   return (
     <div>
-      <h1>CompanyPage</h1>
+      <h2>{company.name}</h2>
+      <img src={company.logo} alt={company.name} width="100" />
+      <p>{company.description}</p>
+      <a href={company.website} target="_blank" rel="noreferrer">Visit Website</a>
+
+      <h3>Tech Stack:</h3>
+      <ul>
+        {company.techStack.map((tech) => (
+          <li key={tech.slug}>
+            <Link to={`/tech/${tech.slug}?company=${company.slug}`}>
+              <img src={tech.image} alt={tech.name} width="30" />
+              {tech.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
-}
-
-export default CompanyPage;
+};
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index e97e7de..241077d 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,9 +1,19 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+export default function HomePage({ companies }) {
   return (
     <div>
-      <h1>HomePage</h1>
+      <h2>StackTracker: Discover Tech Stacks Used by Top Companies</h2>
+      <ul>
+        {companies.map((company) => (
+          <li key={company.slug}>
+            <Link to={`/company/${company.slug}`}>
+              <img src={company.logo} alt={company.name} width="50" />
+              {company.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
-}
-
-export default HomePage;
+};
\ No newline at end of file
diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx
index 30f9414..0f10c76 100644
--- a/src/pages/TechnologyPage.jsx
+++ b/src/pages/TechnologyPage.jsx
@@ -1,9 +1,22 @@
-function TechnologyPage() {
+import { useParams, useSearchParams, Link } from "react-router-dom";
+export default function TechnologyPage({ technologies }) {
+  const { slug } = useParams();
+  const [searchParams] = useSearchParams();
+  const companySlug = searchParams.get("company");
+
+  const technology = technologies.find((t) => t.slug === slug);
+
+  if (!technology) return <p>Technology not found</p>;
+
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h2>{technology.name}</h2>
+      <img src={technology.image} alt={technology.name} width="100" />
+      <p>{technology.description}</p>
+
+      {companySlug && (
+        <Link to={`/company/${companySlug}`}>← Back to Company</Link>
+      )}
     </div>
   );
-}
-
-export default TechnologyPage;
+};
\ No newline at end of file