diff --git a/front/app/_orgs/[orgslug]/courses/page.tsx b/front/app/_orgs/[orgslug]/courses/page.tsx
index 29cf16ea..6e0e647a 100644
--- a/front/app/_orgs/[orgslug]/courses/page.tsx
+++ b/front/app/_orgs/[orgslug]/courses/page.tsx
@@ -8,6 +8,7 @@ import { getAPIUrl, getBackendUrl } from "../../../../services/config";
 import { deleteCourseFromBackend } from "../../../../services/courses/courses";
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/requests";
+import { Edit2, Trash } from "lucide-react";
 
 const CoursesIndexPage = (params: any) => {
   const router = useRouter();
@@ -28,35 +29,33 @@ const CoursesIndexPage = (params: any) => {
   return (
     <>
       <Title>
-        {orgslug} Courses :{" "}
+        Courses :{" "}
         <Link href={"/courses/new"}>
           <button>+</button>
         </Link>{" "}
       </Title>
-
-      <hr />
       {error && <p>Failed to load</p>}
       {!courses ? (
         <div>Loading...</div>
       ) : (
-        <div>
+        <CourseWrapper>
           {courses.map((course: any) => (
             <div key={course.course_id}>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
-                <h2>{course.name}</h2>
-                <CourseWrapper>
+                <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
+                 Delete <Trash size={10}></Trash>
+                </button>
+                <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
+                  <button>Edit <Edit2 size={10} ></Edit2></button>
+                </Link>
+                <CourseThumbnail>
                   <img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
-                </CourseWrapper>
-              </Link>
-              <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
-                Delete
-              </button>
-              <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
-                <button>Edit Chapters</button>
+                </CourseThumbnail>
+                <h2>{course.name}</h2>
               </Link>
             </div>
           ))}
-        </div>
+        </CourseWrapper>
       )}
     </>
   );
@@ -64,11 +63,11 @@ const CoursesIndexPage = (params: any) => {
 
 export default CoursesIndexPage;
 
-const CourseWrapper = styled.div`
+const CourseThumbnail = styled.div`
   display: flex;
   img {
-    width: 269px;
-    height: 151px;
+    width: 249px;
+    height: 131px;
 
     background: url(), #d9d9d9;
     border: 1px solid rgba(255, 255, 255, 0.19);
@@ -76,3 +75,35 @@ const CourseWrapper = styled.div`
     border-radius: 7px;
   }
 `;
+
+const CourseWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 1500px;
+  div {
+    h2 {
+      margin: 0;
+      padding: 0;
+      margin-top: 10px;
+      font-size: 18px;
+      font-weight: 600;
+      width: 250px;
+      height: 50px;
+      color: #424242;
+    }
+    button {
+      margin: 4px 0;
+      border: none;
+      border-radius: 7px;
+      background: #000000;
+      opacity: 0.4;
+
+      color: #ffffff;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+  }
+`;