diff --git a/.vscode b/.vscode
new file mode 100644
index 0000000..2a8463f
--- /dev/null
+++ b/.vscode
@@ -0,0 +1,13 @@
+{
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 3427e73..0d49be8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-icons": "^5.2.1"
+        "react-icons": "^5.2.1",
+        "react-router-dom": "^6.26.0"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -1058,6 +1059,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -3447,6 +3456,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "dependencies": {
+        "@remix-run/router": "1.19.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 35ffd48..5c07b49 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/App.tsx b/src/App.tsx
index 5d01a74..37920d0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,19 +1,16 @@
-import Navbar from "./components/Navbar";
-import Hero from "./components/Hero";
-import HomeCards from "./components/HomeCards";
-import JobListings from "./components/JobListings";
-import ViewAllJobs from "./components/ViewAllJobs";
+import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import MainLayout from "./layouts/MainLayout"
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<MainLayout />}>
+      <Route index element={<HomePage />} />
+    </Route>
+  ));
 
 const App = () => {
-  return (
-    <>
-      <Navbar />
-      <Hero title='Become a React Dev' subtitle='Find the React job that fits your skills and needs!'/>
-      <HomeCards />
-      <JobListings />
-      <ViewAllJobs />  
-    </>
-  )
+  return <RouterProvider router={router} />
 };
 
 export default App;
@@ -21,4 +18,7 @@ export default App;
 
 
 // Next Lesson Use State 
-// https://www.youtube.com/watch?v=LDB4uaJ87e0&t=1644s
\ No newline at end of file
+// https://www.youtube.com/watch?v=LDB4uaJ87e0&t=1644s
+
+// React Router
+// https://youtu.be/LDB4uaJ87e0?t=4757
\ No newline at end of file
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
new file mode 100644
index 0000000..bd252b7
--- /dev/null
+++ b/src/layouts/MainLayout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "../components/Navbar"
+
+const MainLayout = () => {
+    return (
+        <>
+        <Navbar />
+        <Outlet/>
+        </>
+    )
+}
+
+export default MainLayout
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..ba6d684
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,18 @@
+import Hero from "../components/Hero";
+import HomeCards from "../components/HomeCards";
+import JobListings from "../components/JobListings";
+import ViewAllJobs from "../components/ViewAllJobs";
+
+const HomePage = () => {
+    return (
+        <>
+            <Hero title='Become a React Dev' subtitle='Find the React job that fits your skills and needs!' />
+            <HomeCards />
+            <JobListings />
+            <ViewAllJobs/>
+        </>
+    )
+}
+
+export default HomePage
+