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/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/pages/bootcamps/BootcampsPage.jsx b/ui/src/pages/bootcamps/BootcampsPage.jsx
index d3ac1bb..7b2cf0d 100644
--- a/ui/src/pages/bootcamps/BootcampsPage.jsx
+++ b/ui/src/pages/bootcamps/BootcampsPage.jsx
@@ -1,3 +1,25 @@
+import Bootcamp from '../../components/Bootcamp';
+
+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">
@@ -74,87 +96,12 @@ const BootcampsPage = () => {
               <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>
+            {bootcamps.map((bootcamp) => (
+              <Bootcamp key={bootcamp.id} bootcamp={bootcamp} />
+            ))}
 
             {/* <!-- Pagination --> */}
             <nav aria-label="Page navigation example">