diff --git a/ui/public/images/image_1.jpg b/ui/public/images/image_1.jpg
new file mode 100644
index 0000000..ab8e9d2
Binary files /dev/null and b/ui/public/images/image_1.jpg differ
diff --git a/ui/public/images/image_2.jpg b/ui/public/images/image_2.jpg
new file mode 100644
index 0000000..65a7cba
Binary files /dev/null and b/ui/public/images/image_2.jpg differ
diff --git a/ui/public/images/image_3.jpg b/ui/public/images/image_3.jpg
new file mode 100644
index 0000000..59778f7
Binary files /dev/null and b/ui/public/images/image_3.jpg differ
diff --git a/ui/public/images/image_4.jpg b/ui/public/images/image_4.jpg
new file mode 100644
index 0000000..789c7ba
Binary files /dev/null and b/ui/public/images/image_4.jpg differ
diff --git a/ui/public/images/showcase.jpg b/ui/public/images/showcase.jpg
new file mode 100644
index 0000000..f23d4fc
Binary files /dev/null and b/ui/public/images/showcase.jpg differ
diff --git a/ui/src/App.js b/ui/src/App.js
index a21dbfe..712c517 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -1,12 +1,26 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Layout from './components/Layout';
+
 import HomePage from './pages/HomePage';
-import LoginPage from './pages/LoginPage';
-import RegisterPage from './pages/RegisterPage';
 import AboutPage from './pages/AboutPage';
-import BootcampsPage from './pages/BootcampsPage';
-import AddBootcampPage from './pages/AddBootcampPage';
-import AddReviewPage from './pages/AddReviewPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+import LoginPage from './pages/user/LoginPage';
+import RegisterPage from './pages/user/RegisterPage';
+import UserDetailsPage from './pages/user/UserDetailsPage';
+
+import BootcampsPage from './pages/bootcamps/BootcampsPage';
+import BootcampDetailsPage from './pages/bootcamps/BootcampDetailsPage';
+
+import ManageBootcampPage from './pages/bootcamps/ManageBootcampPage';
+import AddBootcampPage from './pages/bootcamps/AddBootcampPage';
+
+import ManageCoursesPage from './pages/bootcamps/ManageCoursesPage';
+import AddCoursePage from './pages/bootcamps/AddCoursePage';
+
+import BootcampReviewsPage from './pages/bootcamps/BootcampReviewsPage';
+import ManageReviewsPage from './pages/bootcamps/ManageReviewsPage';
+import AddReviewPage from './pages/bootcamps/AddReviewPage';
 
 function App() {
   return (
@@ -14,13 +28,21 @@ function App() {
       <Layout />
       <div>
         <Routes>
-          <Route exact path="/" element={<HomePage />} />
-          <Route exact path="/login" element={<LoginPage />} />
-          <Route exact path="/register" element={<RegisterPage />} />
+          <Route path="/" element={<HomePage />} />
           <Route path="/about" element={<AboutPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/user/:userId" element={<UserDetailsPage />} />
           <Route path="/bootcamps" element={<BootcampsPage />} />
+          <Route path="/bootcamps/:bootcampId" element={<BootcampDetailsPage />} />
           <Route path="/bootcamps/add" element={<AddBootcampPage />} />
+          <Route path="/bootcamps/:bootcampId/manage" element={<ManageBootcampPage />} />
+          <Route path="/bootcamps/:bootcampId/courses/add" element={<AddCoursePage />} />
+          <Route path="/bootcamps/:bootcampId/courses/manage" element={<ManageCoursesPage />} />
+          <Route path="/bootcamps/:bootcampId/reviews" element={<BootcampReviewsPage />} />
+          <Route path="/bootcamps/:bootcampId/reviews/manage" element={<ManageReviewsPage />} />{' '}
           <Route path="/bootcamps/:bootcampId/reviews/add" element={<AddReviewPage />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </div>
     </Router>
diff --git a/ui/src/components/Bootcamp.jsx b/ui/src/components/Bootcamp.jsx
new file mode 100644
index 0000000..f35fbec
--- /dev/null
+++ b/ui/src/components/Bootcamp.jsx
@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import { Image } from 'react-bootstrap';
+
+const Bootcamp = (props) => {
+  const { image, name, rating, location, careers, id } = props.bootcamp;
+
+  return (
+    <div className="card mb-3">
+      <div className="row no-gutters">
+        <div className="col-md-4">
+          <Image src={image} className="card-img" alt={name} />
+        </div>
+        <div className="col-md-8">
+          <div className="card-body">
+            <h5 className="card-title">
+              <Link to={`/bootcamps/${id}`}>
+                {name}
+                <span className="float-right badge badge-success">{rating}</span>
+              </Link>
+            </h5>
+            <span className="badge badge-dark mb-2">{location}</span>
+            <p className="card-text">{careers.join(', ')}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Bootcamp;
diff --git a/ui/src/components/Pagination.jsx b/ui/src/components/Pagination.jsx
new file mode 100644
index 0000000..811b1a1
--- /dev/null
+++ b/ui/src/components/Pagination.jsx
@@ -0,0 +1,35 @@
+const Pagination = () => {
+  return (
+    <nav aria-label="Page navigation example">
+      <ul className="pagination">
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Previous
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            1
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            2
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            3
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Next
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;
diff --git a/ui/src/pages/BootcampsPage.jsx b/ui/src/pages/BootcampsPage.jsx
deleted file mode 100644
index 905103d..0000000
--- a/ui/src/pages/BootcampsPage.jsx
+++ /dev/null
@@ -1,196 +0,0 @@
-const BrowseBootcampsPage = () => {
-  return (
-    <section className="browse my-5">
-      <div className="container">
-        <div className="row">
-          {/* <!-- Sidebar --> */}
-          <div className="col-md-4">
-            <div className="card card-body mb-4">
-              <h4 className="mb-3">By Location</h4>
-              <form>
-                <div className="row">
-                  <div className="col-md-6">
-                    <div className="form-group">
-                      <input type="text" className="form-control" name="miles" placeholder="Miles From" />
-                    </div>
-                  </div>
-                  <div className="col-md-6">
-                    <div className="form-group">
-                      <input type="text" className="form-control" name="zipcode" placeholder="Enter Zipcode" />
-                    </div>
-                  </div>
-                </div>
-                <input type="submit" value="Find Bootcamps" className="btn btn-primary btn-block" />
-              </form>
-            </div>
-
-            <h4>Filter</h4>
-            <form>
-              {/* <!-- <div className="form-group">
-              <label> Career</label>
-              <select className="custom-select mb-2">
-                <option value="any" selected>Any</option>
-                <option value="Web Development">Web Development</option>
-                <option value="Mobile Development">Mobile Development</option>
-                <option value="UI/UX">UI/UX</option>
-                <option value="Data Science">Data Science</option>
-                <option value="Business">Business</option>
-                <option value="Other">Other</option>
-              </select>
-            </div> --> */}
-
-              <div className="form-group">
-                <label> Rating</label>
-                <select className="custom-select mb-2">
-                  <option value="any" selected>
-                    Any
-                  </option>
-                  <option value="9">9+</option>
-                  <option value="8">8+</option>
-                  <option value="7">7+</option>
-                  <option value="6">6+</option>
-                  <option value="5">5+</option>
-                  <option value="4">4+</option>
-                  <option value="3">3+</option>
-                  <option value="2">2+</option>
-                </select>
-              </div>
-
-              <div className="form-group">
-                <label> Budget</label>
-                <select className="custom-select mb-2">
-                  <option value="any" selected>
-                    Any
-                  </option>
-                  <option value="20000">$20,000</option>
-                  <option value="15000">$15,000</option>
-                  <option value="10000">$10,000</option>
-                  <option value="8000">$8,000</option>
-                  <option value="6000">$6,000</option>
-                  <option value="4000">$4,000</option>
-                  <option value="2000">$2,000</option>
-                </select>
-              </div>
-              <input type="submit" value="Find Bootcamps" className="btn btn-primary btn-block" />
-            </form>
-          </div>
-          {/* <!-- Main col --> */}
-          <div className="col-md-8">
-            {/* <!-- Bootcamps --> */}
-            <div className="card mb-3">
-              <div className="row no-gutters">
-                <div className="col-md-4">
-                  <img src="/img/image_1.jpg" className="card-img" alt="..." />
-                </div>
-                <div className="col-md-8">
-                  <div className="card-body">
-                    <h5 className="card-title">
-                      <a href="/">
-                        Devworks Bootcamp
-                        <span className="float-right badge badge-success">8.8</span>
-                      </a>
-                    </h5>
-                    <span className="badge badge-dark mb-2">Boston, MA</span>
-                    <p className="card-text">Web Development, UI/UX, Mobile Development</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="card mb-3">
-              <div className="row no-gutters">
-                <div className="col-md-4">
-                  <img src="../img/image_2.jpg" className="card-img" alt="..." />
-                </div>
-                <div className="col-md-8">
-                  <div className="card-body">
-                    <h5 className="card-title">
-                      <a href="/">
-                        ModernTech Bootcamp
-                        <span className="float-right badge badge-success">7.5</span>
-                      </a>
-                    </h5>
-                    <span className="badge badge-dark mb-2">Boston, MA</span>
-                    <p className="card-text">Web Development, UI/UX, Mobile Development</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="card mb-3">
-              <div className="row no-gutters">
-                <div className="col-md-4">
-                  <img src="../img/image_3.jpg" className="card-img" alt="..." />
-                </div>
-                <div className="col-md-8">
-                  <div className="card-body">
-                    <h5 className="card-title">
-                      <a href="/">
-                        Codemasters
-                        <span className="float-right badge badge-success">9.2</span>
-                      </a>
-                    </h5>
-                    <span className="badge badge-dark mb-2">Burlington, VT</span>
-                    <p className="card-text">Web Development, Data Science, Marketing</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="card mb-3">
-              <div className="row no-gutters">
-                <div className="col-md-4">
-                  <img src="../img/image_4.jpg" className="card-img" alt="..." />
-                </div>
-                <div className="col-md-8">
-                  <div className="card-body">
-                    <h5 className="card-title">
-                      <a href="/">
-                        DevCentral Bootcamp
-                        <span className="float-right badge badge-success">6.4</span>
-                      </a>
-                    </h5>
-                    <span className="badge badge-dark mb-2">Kingston, RI</span>
-                    <p className="card-text">Web Development, UI/UX, Mobile Development, Marketing</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* <!-- Pagination --> */}
-            <nav aria-label="Page navigation example">
-              <ul className="pagination">
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    Previous
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    1
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    2
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    3
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    Next
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default BrowseBootcampsPage;
diff --git a/ui/src/pages/NotFoundPage.jsx b/ui/src/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..2a396ef
--- /dev/null
+++ b/ui/src/pages/NotFoundPage.jsx
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+  return <div>Not Found Page</div>;
+};
+
+export default NotFoundPage;
diff --git a/ui/src/pages/AddBootcampPage.jsx b/ui/src/pages/bootcamps/AddBootcampPage.jsx
similarity index 100%
rename from ui/src/pages/AddBootcampPage.jsx
rename to ui/src/pages/bootcamps/AddBootcampPage.jsx
diff --git a/ui/src/pages/bootcamps/AddCoursePage.jsx b/ui/src/pages/bootcamps/AddCoursePage.jsx
new file mode 100644
index 0000000..9d69b10
--- /dev/null
+++ b/ui/src/pages/bootcamps/AddCoursePage.jsx
@@ -0,0 +1,5 @@
+const AddCoursePage = () => {
+  return <div>Add Course Page</div>;
+};
+
+export default AddCoursePage;
diff --git a/ui/src/pages/AddReviewPage.jsx b/ui/src/pages/bootcamps/AddReviewPage.jsx
similarity index 100%
rename from ui/src/pages/AddReviewPage.jsx
rename to ui/src/pages/bootcamps/AddReviewPage.jsx
diff --git a/ui/src/pages/bootcamps/BootcampDetailsPage.jsx b/ui/src/pages/bootcamps/BootcampDetailsPage.jsx
new file mode 100644
index 0000000..828e554
--- /dev/null
+++ b/ui/src/pages/bootcamps/BootcampDetailsPage.jsx
@@ -0,0 +1,5 @@
+const BootcampDetailsPage = () => {
+  return <div>Bootcamp Details Page</div>;
+};
+
+export default BootcampDetailsPage;
diff --git a/ui/src/pages/bootcamps/BootcampReviewsPage.jsx b/ui/src/pages/bootcamps/BootcampReviewsPage.jsx
new file mode 100644
index 0000000..625332a
--- /dev/null
+++ b/ui/src/pages/bootcamps/BootcampReviewsPage.jsx
@@ -0,0 +1,5 @@
+const BootcampReviewsPage = () => {
+  return <div>Bootcamp Reviews Page</div>;
+};
+
+export default BootcampReviewsPage;
diff --git a/ui/src/pages/bootcamps/BootcampsPage.jsx b/ui/src/pages/bootcamps/BootcampsPage.jsx
new file mode 100644
index 0000000..738b333
--- /dev/null
+++ b/ui/src/pages/bootcamps/BootcampsPage.jsx
@@ -0,0 +1,116 @@
+import Bootcamp from '../../components/Bootcamp';
+import Pagination from '../../components/Pagination';
+
+const bootcamps = [
+  {
+    id: 1,
+    image: '/images/image_1.jpg',
+    name: 'Bootcamp 1',
+    rating: 4.5,
+    location: 'Location 1',
+    careers: ['Web Development', 'Data Science'],
+  },
+  {
+    id: 2,
+    image: '/images/image_2.jpg',
+    name: 'Bootcamp 2',
+    rating: 4.0,
+    location: 'Location 2',
+    careers: ['Web Development', 'UI/UX'],
+  },
+  // Add more bootcamp data as needed
+];
+
+const BootcampsPage = () => {
+  return (
+    <section className="browse my-5">
+      <div className="container">
+        <div className="row">
+          {/* <!-- Sidebar --> */}
+          <div className="col-md-4">
+            <div className="card card-body mb-4">
+              <h4 className="mb-3">By Location</h4>
+              <form>
+                <div className="row">
+                  <div className="col-md-6">
+                    <div className="form-group">
+                      <input type="text" className="form-control" name="miles" placeholder="Miles From" />
+                    </div>
+                  </div>
+                  <div className="col-md-6">
+                    <div className="form-group">
+                      <input type="text" className="form-control" name="zipcode" placeholder="Enter Zipcode" />
+                    </div>
+                  </div>
+                </div>
+                <input type="submit" value="Find Bootcamps" className="btn btn-primary btn-block" />
+              </form>
+            </div>
+
+            <h4>Filter</h4>
+            <form>
+              {/* <!-- <div className="form-group">
+              <label> Career</label>
+              <select className="custom-select mb-2">
+                <option value="any" selected>Any</option>
+                <option value="Web Development">Web Development</option>
+                <option value="Mobile Development">Mobile Development</option>
+                <option value="UI/UX">UI/UX</option>
+                <option value="Data Science">Data Science</option>
+                <option value="Business">Business</option>
+                <option value="Other">Other</option>
+              </select>
+            </div> --> */}
+
+              <div className="form-group">
+                <label> Rating</label>
+                <select className="custom-select mb-2">
+                  <option value="any" selected>
+                    Any
+                  </option>
+                  <option value="9">9+</option>
+                  <option value="8">8+</option>
+                  <option value="7">7+</option>
+                  <option value="6">6+</option>
+                  <option value="5">5+</option>
+                  <option value="4">4+</option>
+                  <option value="3">3+</option>
+                  <option value="2">2+</option>
+                </select>
+              </div>
+
+              <div className="form-group">
+                <label> Budget</label>
+                <select className="custom-select mb-2">
+                  <option value="any" selected>
+                    Any
+                  </option>
+                  <option value="20000">$20,000</option>
+                  <option value="15000">$15,000</option>
+                  <option value="10000">$10,000</option>
+                  <option value="8000">$8,000</option>
+                  <option value="6000">$6,000</option>
+                  <option value="4000">$4,000</option>
+                  <option value="2000">$2,000</option>
+                </select>
+              </div>
+              <input type="submit" value="Find Bootcamps" className="btn btn-primary btn-block" />
+            </form>
+          </div>
+
+          {/* <!-- Main col --> */}
+          <div className="col-md-8">
+            {bootcamps.map((bootcamp) => (
+              <Bootcamp key={bootcamp.id} bootcamp={bootcamp} />
+            ))}
+
+            {/* <!-- Pagination --> */}
+            <Pagination />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BootcampsPage;
diff --git a/ui/src/pages/bootcamps/ManageBootcampPage.jsx b/ui/src/pages/bootcamps/ManageBootcampPage.jsx
new file mode 100644
index 0000000..3d0f7b1
--- /dev/null
+++ b/ui/src/pages/bootcamps/ManageBootcampPage.jsx
@@ -0,0 +1,5 @@
+const ManageBootcampPage = () => {
+  return <div>Manage Bootcamp Page</div>;
+};
+
+export default ManageBootcampPage;
diff --git a/ui/src/pages/bootcamps/ManageCoursesPage.jsx b/ui/src/pages/bootcamps/ManageCoursesPage.jsx
new file mode 100644
index 0000000..9f0ef61
--- /dev/null
+++ b/ui/src/pages/bootcamps/ManageCoursesPage.jsx
@@ -0,0 +1,5 @@
+const ManageCoursesPage = () => {
+  return <div>Manage Courses Page</div>;
+};
+
+export default ManageCoursesPage;
diff --git a/ui/src/pages/bootcamps/ManageReviewsPage.jsx b/ui/src/pages/bootcamps/ManageReviewsPage.jsx
new file mode 100644
index 0000000..90e9340
--- /dev/null
+++ b/ui/src/pages/bootcamps/ManageReviewsPage.jsx
@@ -0,0 +1,5 @@
+const ManageReviewsPage = () => {
+  return <div>Manage Reviews Page</div>;
+};
+
+export default ManageReviewsPage;
diff --git a/ui/src/pages/LoginPage.jsx b/ui/src/pages/user/LoginPage.jsx
similarity index 100%
rename from ui/src/pages/LoginPage.jsx
rename to ui/src/pages/user/LoginPage.jsx
diff --git a/ui/src/pages/RegisterPage.jsx b/ui/src/pages/user/RegisterPage.jsx
similarity index 100%
rename from ui/src/pages/RegisterPage.jsx
rename to ui/src/pages/user/RegisterPage.jsx
diff --git a/ui/src/pages/user/UserDetailsPage.jsx b/ui/src/pages/user/UserDetailsPage.jsx
new file mode 100644
index 0000000..19c76a4
--- /dev/null
+++ b/ui/src/pages/user/UserDetailsPage.jsx
@@ -0,0 +1,10 @@
+const UserDetailsPage = () => {
+  return (
+    <div>
+      <p>User Details Page</p>
+      <p>Add Update password functionality here</p>
+    </div>
+  );
+};
+
+export default UserDetailsPage;