frontend/src/components/CoursesWidget.jsx

@@ -22,29 +22,40 @@ const CoursesWidget = ({ className = "" }) => {
       instructor: "Serif Saad",
     },
     {
-      course_id: 1,
-      course_title: "Advanced Website Design",
-      couse_code: "COMP 2707",
-      instructor: "Saja Al Mamoori",
+      course_id: 4,
+      course_title: "Selected Topics in Software Engineering",
+      couse_code: "COMP 4800",
+      instructor: "Jessica Chen",
+    },
+    {
+      course_id: 5,
+      course_title: "Project Management: Techniques and Tools",
+      couse_code: "COMP 4990",
+      instructor: "Arunita Jaekel",
     },
   ];
   return (
-    <Container
-      className={`${className} py-3 d-flex flex-wrap justify-content-around`}
-    >
-      {dummyData.map((course, i) => {
-        return (
-          <Link is="a" key={i} href={`/course/${course.course_id}`}>
-            <Card role="button" className="m-2" style={{ width: "300px" }}>
-              <h2 className="text-center py-5 border">{course.couse_code}</h2>
-              <Card.Body>
-                <Card.Title>{course.course_title}</Card.Title>
-                <Card.Text>{course.instructor}</Card.Text>
-              </Card.Body>
-            </Card>
-          </Link>
-        );
-      })}
+    <Container className={`${className} py-3 grid`}>
+      <div className="row justify-content-center">
+        {dummyData.map((course, i) => {
+          return (
+            <Link
+              is="a"
+              key={i}
+              href={`/course/${course.course_id}`}
+              className="col col-lg-2"
+            >
+              <Card role="button" className="m-2" style={{ width: "300px" }}>
+                <h2 className="text-center py-5 border">{course.couse_code}</h2>
+                <Card.Body>
+                  <Card.Title>{course.course_title}</Card.Title>
+                  <Card.Text>{course.instructor}</Card.Text>
+                </Card.Body>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
     </Container>
   );
 };

frontend/src/pages/HomePage.jsx

@@ -19,7 +19,7 @@ const HomePage = () => {
         <br />
         <div>
           <h2>Courses</h2>
-          <CoursesWidget className="ms-0 w-75 border" />
+          <CoursesWidget className="ms-0 border" />
         </div>
       </Container>
     </div>