diff --git a/apps/web/app/modules/Dashboard/Courses/CardCourseList.tsx b/apps/web/app/modules/Dashboard/Courses/CardCourseList.tsx
index 39881440..7711ab52 100644
--- a/apps/web/app/modules/Dashboard/Courses/CardCourseList.tsx
+++ b/apps/web/app/modules/Dashboard/Courses/CardCourseList.tsx
@@ -8,7 +8,7 @@ type CardCourseListProps = {
 
 export const CardCourseList = ({ availableCourses }: CardCourseListProps) => {
   return (
-    <>
+    <div className="flex gap-6 flex-wrap *:h-auto">
       {availableCourses &&
         availableCourses.map(
           ({
@@ -42,6 +42,6 @@ export const CardCourseList = ({ availableCourses }: CardCourseListProps) => {
             return null;
           },
         )}
-    </>
+    </div>
   );
 };
diff --git a/apps/web/app/modules/Dashboard/Dashboard.page.tsx b/apps/web/app/modules/Dashboard/Dashboard.page.tsx
index d09a7590..1c9595e0 100644
--- a/apps/web/app/modules/Dashboard/Dashboard.page.tsx
+++ b/apps/web/app/modules/Dashboard/Dashboard.page.tsx
@@ -175,7 +175,7 @@ export default function DashboardPage() {
           <StudentCoursesCarousel studentCourses={studentCourses} />
         </div>
       </div>
-      <div className="flex flex-col px-6">
+      <div className="flex flex-col px-6 lg:px-0">
         <div className="flex flex-col lg:p-0">
           <h4 className="text-neutral-950 text-2xl font-bold leading-10 pb-1">Available Courses</h4>
           <p className="text-lg leading-7 text-neutral-800">