diff --git a/frontend/src/app/courses/[slug]/EnrollButton.tsx b/frontend/src/app/courses/[slug]/EnrollButton.tsx
index 665cc5a..f55cd1e 100644
--- a/frontend/src/app/courses/[slug]/EnrollButton.tsx
+++ b/frontend/src/app/courses/[slug]/EnrollButton.tsx
@@ -8,8 +8,12 @@ import Link from "next/link";
 import { Check, KeyboardArrowRight } from "@mui/icons-material";
 import { EnrollmentStatus } from "@prisma/client";
 import { AssignmentIcon } from "./AssignmentIcon";
-
-export default function EnrollButton() {
+function truncateString(str, lim) {
+    return str.length > lim
+        ? str.slice(0, lim > 3 ? lim - 3 : lim) + "..."
+        : str;
+}
+export default function EnrollButton({ compact }: { compact?: boolean }) {
     const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState<string>("Start learning!");
     const { data: session } = useSession();
@@ -127,8 +131,15 @@ export default function EnrollButton() {
                             <AssignmentIcon
                                 type={actualNextAssignment?.type || "READING"}
                             />
-                            <p className="pl-2 text-lg font-bold">
-                                {actualNextAssignment?.title}
+                            <p
+                                className={`pl-2 font-bold ${compact ? "text-sm ellipsis" : "text-lg"}`}
+                            >
+                                {compact
+                                    ? truncateString(
+                                          actualNextAssignment?.title,
+                                          16,
+                                      )
+                                    : actualNextAssignment?.title}
                             </p>
                         </div>
                     </div>
diff --git a/frontend/src/components/Course/HorizontalCourseCard.tsx b/frontend/src/components/Course/HorizontalCourseCard.tsx
index 1303eb7..ad98fd9 100644
--- a/frontend/src/components/Course/HorizontalCourseCard.tsx
+++ b/frontend/src/components/Course/HorizontalCourseCard.tsx
@@ -17,8 +17,8 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
         <CoursePageContext.Provider
             value={{ course, enrolled: enrollment, setEnrolled }}
         >
-            <article className="flex flex-col md:flex-row lg:w-4/5 lg:h-56 border-2 rounded-lg bg-white overflow-hidden">
-                <figure className="relative w-full h-72 lg:h-full md:w-1/4 md:min-w-64 mb-2 md:mb-0 overflow-hidden">
+            <article className="flex flex-col md:flex-row border-2 rounded-lg bg-white overflow-hidden">
+                <figure className="relative w-full min-h-32 md:w-1/4 md:min-w-64 mb-2 md:mb-0 overflow-hidden">
                     <img
                         src={course.thumbnail}
                         alt={course.title}
@@ -37,24 +37,30 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
                     </div>
 
                     <div className="w-full mb-4 md:flex justify-between gap-4 lg:items-center">
-                        <div className="flex-1 md:pr-4">
+                        <div className="w-2/3 md:pr-4 clip max-h-24">
                             {course.shortDescription}
                         </div>
-                        {completed ? (
-                            <Link
-                                className="max-w-fit lg:w-full p-6 text-center rounded-md font-semibold text-lg text-slate-100 dark:text-slate-800 bg-slate-700 dark:bg-slate-400"
-                                href={
-                                    "/certificates/" +
-                                    enrollment.certificate?.id
-                                }
-                            >
-                                View certificate
-                            </Link>
-                        ) : (
-                            <Link className="" href={`/courses/${course.slug}`}>
-                                <EnrollButton />
-                            </Link>
-                        )}
+
+                        <div className="w-1/3">
+                            {completed ? (
+                                <Link
+                                    className="max-w-fit lg:w-full button"
+                                    href={
+                                        "/certificates/" +
+                                        enrollment.certificate?.id
+                                    }
+                                >
+                                    View certificate
+                                </Link>
+                            ) : (
+                                <Link
+                                    className=""
+                                    href={`/courses/${course.slug}`}
+                                >
+                                    <EnrollButton compact={true} />
+                                </Link>
+                            )}
+                        </div>
                     </div>
 
                     {completed ? (
@@ -66,7 +72,7 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
                             </span>
                         </div>
                     ) : (
-                        <div className="">
+                        <div className="mt-2">
                             <ProgressBar />
                         </div>
                     )}