diff --git a/app/components/home/colle-card.tsx b/app/components/home/colle-card.tsx
index a7846eb..27d552e 100644
--- a/app/components/home/colle-card.tsx
+++ b/app/components/home/colle-card.tsx
@@ -1,17 +1,11 @@
-import type React from "react";
 import type { Colle } from "~/lib/api";
 
 import { Link } from "react-router";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardFooter,
-} from "~/components/ui/card";
-import { User, UserCheck, Paperclip, Star, MapPinHouse } from "lucide-react";
+import { Card } from "~/components/ui/card";
+import { User, Star, CalendarDays, MapPin } from "lucide-react";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
-import { formatDate, formatGrade, formatTime } from "~/lib/utils";
+import { cn, formatDate, formatGrade, formatTime } from "~/lib/utils";
 
 // TODO: Preferences for subject colors
 const getSubjectColor = (_: string) => {
@@ -35,12 +29,12 @@ export default function ColleCard({
   isFavorite,
 }: ColleCardProps) {
   // TODO: Favorites
-  const handleToggleFavorite = (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent card click
-    e.preventDefault();
-    const newValue = !isFavorite;
-    onToggleFavorite(colle.id, newValue);
-  };
+  // const handleToggleFavorite = (e: React.MouseEvent) => {
+  //   e.stopPropagation(); // Prevent card click
+  //   e.preventDefault();
+  //   const newValue = !isFavorite;
+  //   onToggleFavorite(colle.id, newValue);
+  // };
 
   const subjectColor = getSubjectColor(colle.subject.name);
   const subjectEmoji = getSubjectEmoji(colle.subject.name);
@@ -49,84 +43,88 @@ export default function ColleCard({
     <Link to={`/colles/${colle.id}`}>
       <Card
         id={`colle-${colle.id}`}
-        className="h-full cursor-pointer hover:shadow-md transition-shadow border-primary"
+        className="p-0 overflow-hidden hover:shadow-lg transition-shadow max-w-sm"
       >
-        <CardHeader className="pb-0 pt-3 px-4 flex flex-row items-center justify-between">
-          <div>
-            <div className="font-medium">{formatDate(colle.date)}</div>
-            <div className="font-normal text-sm text-muted-foreground">
-              {formatTime(colle.date)}
-            </div>
-          </div>
-          {colle.grade && (
-            <div className="flex items-center gap-2 h-full mb-3">
-              <Button
-                variant="ghost"
-                size="icon"
-                className={`h-8 w-8 ${
-                  isFavorite ? "text-yellow-500" : "text-muted-foreground"
-                }`}
-                onClick={handleToggleFavorite}
-              >
-                <Star
-                  className={`h-5 w-5 ${isFavorite ? "fill-yellow-500" : ""}`}
-                />
-                <span className="sr-only">Ajouter aux favoris</span>
-              </Button>
-              <div
-                className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
-              >
-                {formatGrade(colle.grade)}/20
+        <div className="flex min-h-40">
+          <div
+            className={cn(
+              "p-2 flex flex-col justify-center items-center min-w-[4px]",
+              subjectColor
+            )}
+          ></div>
+
+          <div className="flex-1 p-3 flex flex-col justify-between">
+            <div>
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-bold text-foreground">
+                  {colle.student.fullName}
+                </h3>
+                {colle.grade && (
+                  <div className="flex items-center gap-2 h-full">
+                    {/* <Button
+                      variant="ghost"
+                      size="icon"
+                      className={`h-8 w-8 ${
+                        isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                      }`}
+                      onClick={handleToggleFavorite}
+                    >
+                      <Star
+                        className={`h-5 w-5 ${
+                          isFavorite ? "fill-yellow-500" : ""
+                        }`}
+                      />
+                      <span className="sr-only">Ajouter aux favoris</span>
+                    </Button> */}
+                    <div
+                      className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
+                    >
+                      {formatGrade(colle.grade)}/20
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
-          )}
-        </CardHeader>
 
-        <CardContent className="pb-0 pt-0 px-4">
-          <div className="flex items-center justify-between">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2">
-                <User className="h-4 w-4 text-muted-foreground" />
-                <span className="font-medium">{colle.student.fullName}</span>
+            <div className="text-sm text-primary grid gap-1">
+              <div className="flex items-center gap-1">
+                <CalendarDays className="h-3 w-3" />
+                <span>
+                  {formatDate(colle.date)} à {formatTime(colle.date)}
+                </span>
               </div>
-
-              <div className="flex items-center gap-2">
-                <UserCheck className="h-4 w-4 text-muted-foreground" />
-                <span>{colle.examiner.name}</span>
+              <div className="flex items-center gap-1">
+                <MapPin className="h-3 w-3" />
+                <span>{colle.room?.name}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <User className="h-3 w-3" />
+                <span>{colle.examiner?.name}</span>
               </div>
-
-              {colle.room && (
-                <div className="flex items-center gap-2">
-                  <MapPinHouse className="h-4 w-4 text-muted-foreground" />
-                  <span>{colle.room.name}</span>
-                </div>
-              )}
             </div>
-          </div>
-        </CardContent>
 
-        <CardFooter className="pt-1 pb-3 px-4 flex flex-col items-start">
-          <div className="w-full flex justify-between items-center">
-            <div className="flex items-center gap-1">
-              <Badge className={subjectColor}>
-                {colle.subject.name + " " + subjectEmoji}
-              </Badge>
-              {isFavorite && (
-                <Badge variant="secondary">
-                  <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
-                  Favori
+            <div className="w-full flex justify-between items-center">
+              <div className="flex items-center gap-1">
+                <Badge className={subjectColor}>
+                  {colle.subject.name + " " + subjectEmoji}
                 </Badge>
-              )}
-            </div>
-            {/* TODO: Attachments */}
-            {/* {colle.attachmentsCount > 0 && (
+                {isFavorite && (
+                  <Badge variant="secondary">
+                    <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
+                    Favori
+                  </Badge>
+                )}
+              </div>
+              {/* TODO: Attachments */}
+              {/* {colle.attachmentsCount > 0 && (
               <div className="flex items-center gap-1 text-muted-foreground">
                 <Paperclip className="h-3.5 w-3.5" />
                 <span className="text-xs">{colle.attachmentsCount}</span>
               </div>
             )} */}
+            </div>
           </div>
-        </CardFooter>
+        </div>
       </Card>
     </Link>
   );
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 3db2c85..15fe984 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -63,7 +63,7 @@ export const formatTime = (date: string) => {
   return dt.toLocaleString({
     hour: "2-digit",
     minute: "2-digit",
-  });
+  })?.replace(":", "h") || "N/A";
 };
 
 export const formatGrade = (grade?: number) => {