frontend/src/components/CoursesWidget.jsx

@@ -22,19 +22,29 @@ 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`}
-    >
+    <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}`}>
+            <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>
@@ -45,6 +55,7 @@ const CoursesWidget = ({ className = "" }) => {
             </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>