diff --git a/app/lib/api.ts b/app/lib/api.ts
index 082b643..220d076 100644
--- a/app/lib/api.ts
+++ b/app/lib/api.ts
@@ -160,6 +160,7 @@ export const getColles = async (startDate: DateTime) => {
 };
 
 export interface Colle {
+  relatives: Colle[];
   id: number;
   date: string; // ISO date string
   subject: {
diff --git a/app/routes/colles.tsx b/app/routes/colles.tsx
index df73bee..c16a6dd 100644
--- a/app/routes/colles.tsx
+++ b/app/routes/colles.tsx
@@ -2,7 +2,7 @@ import "katex/dist/katex.min.css";
 import { DomUtils, parseDocument } from "htmlparser2";
 import Latex from "react-latex-next";
 import { useState } from "react";
-import { Navigate, useNavigate, useParams } from "react-router";
+import { Link, Navigate, useNavigate, useParams } from "react-router";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import {
@@ -19,6 +19,7 @@ import {
   RefreshCw,
   Share2,
   ExternalLink,
+  Users,
 } from "lucide-react";
 import { Separator } from "~/components/ui/separator";
 import ColleDetailsSkeleton from "~/components/details/skeleton-details";
@@ -27,19 +28,17 @@ import Error from "~/components/error";
 import { Badge } from "~/components/ui/badge";
 import { AUTH_ERROR, refreshColle, useColle, useUser } from "~/lib/api";
 import { toast } from "sonner";
-import { formatDate, formatGrade, formatTime, goBack } from "~/lib/utils";
+import {
+  formatDate,
+  formatGrade,
+  formatTime,
+  getColorClass,
+  getSubjectColor,
+  getSubjectEmoji,
+  goBack,
+} from "~/lib/utils";
 import { useQueryClient } from "@tanstack/react-query";
 
-// TODO: Preferences for subject colors
-const getSubjectColor = (_: string) => {
-  // Mock placeholder function
-  return "bg-blue-100 text-blue-800"; // Default color
-};
-const getSubjectEmoji = (_: string) => {
-  // Mock placeholder function
-  return "📚"; // Default emoji
-};
-
 // TODO: Move all code to components
 export default function ColleDetailPage() {
   const { user, isLoading: isUserLoading, error: userError } = useUser();
@@ -143,8 +142,10 @@ export default function ColleDetailPage() {
     });
   };
 
-  const subjectColor = getSubjectColor(colle.subject.name);
-  const subjectEmoji = getSubjectEmoji(colle.subject.name);
+  const subjectColor = getColorClass(
+    getSubjectColor(colle.subject.name, user.preferences)
+  );
+  const subjectEmoji = getSubjectEmoji(colle.subject.name, user.preferences);
 
   return (
     <div className="container mx-auto py-6 px-4 pb-20 md:pb-6 md:py-8">
@@ -154,18 +155,28 @@ export default function ColleDetailPage() {
           Retour
         </Button>
         <div className="flex md:hidden items-center gap-2">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-10 w-10"
-            onClick={handleReload}
-            disabled={isReloading}
-          >
-            <RefreshCw
-              className={`h-5 w-5 ${isReloading ? "animate-spin" : ""}`}
-            />
-            <span className="sr-only">Recharger</span>
-          </Button>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-10 w-10"
+              onClick={handleReload}
+              disabled={isReloading}
+            >
+              <RefreshCw
+                className={`h-5 w-5 ${isReloading ? "animate-spin" : ""}`}
+              />
+              <span className="sr-only">Recharger</span>
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-10 w-10"
+              onClick={handleShare}
+            >
+              <Share2 className="h-5 w-5" />
+            </Button>
+          </div>
         </div>
       </div>
 
@@ -174,7 +185,9 @@ export default function ColleDetailPage() {
           <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
             <div className="flex flex-col">
               <div className="flex items-center justify-between">
-                <CardTitle className="text-2xl">Résumé de Colle</CardTitle>
+                <CardTitle className="text-xl">
+                  Colle de {colle.subject.name}
+                </CardTitle>
                 {colle.grade && (
                   <div
                     className={`md:hidden px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
@@ -217,7 +230,7 @@ export default function ColleDetailPage() {
                 <span className="sr-only">Recharger</span>
               </Button>
 
-              <Button
+              {/* <Button
                 variant="ghost"
                 size="sm"
                 className={`h-9 w-9 ${
@@ -233,7 +246,7 @@ export default function ColleDetailPage() {
                   }`}
                 />
                 <span className="sr-only">Ajouter aux favoris</span>
-              </Button>
+              </Button> */}
 
               {colle.grade && (
                 <div
@@ -246,9 +259,9 @@ export default function ColleDetailPage() {
           </div>
         </CardHeader>
 
-        <CardContent className="space-y-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-4">
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <div className="space-y-2">
               <div>
                 <h3 className="text-sm font-medium text-muted-foreground mb-1">
                   Date
@@ -272,10 +285,10 @@ export default function ColleDetailPage() {
               </div>
             </div>
 
-            <div className="space-y-4">
+            <div className="space-y-2">
               <div>
                 <h3 className="text-sm font-medium text-muted-foreground mb-1">
-                  Étudiant
+                  Élève
                 </h3>
                 <div className="flex items-center gap-2">
                   <User className="h-4 w-4" />
@@ -283,29 +296,28 @@ export default function ColleDetailPage() {
                 </div>
               </div>
 
-              {/* TODO: Colles groups - others students */}
-              {/* {colle.group?.length > 0 && (
+              {colle.relatives?.length > 0 && (
                 <div>
                   <h3 className="text-sm font-medium text-muted-foreground mb-1">
                     Autres élèves
                   </h3>
-                  {colle.group.map((linkedColle) => (
+                  {colle.relatives.map((linkedColle) => (
                     <div className="flex items-center gap-2">
                       <Users className="h-4 w-4" />
                       <Link
                         to={`/colles/${linkedColle.id}`}
                         key={linkedColle.id}
                       >
-                        {linkedColle.student}
+                        {linkedColle.student.fullName}
                       </Link>
                     </div>
                   ))}
                 </div>
-              )} */}
+              )}
             </div>
 
             {colle.room && (
-              <div className="space-y-4">
+              <div className="space-y-2">
                 <div>
                   <h3 className="text-sm font-medium text-muted-foreground mb-1">
                     Salle
@@ -377,42 +389,6 @@ export default function ColleDetailPage() {
           </div>
         </CardContent>
       </Card>
-
-      {/* Mobile Action Bar - Fixed at Bottom */}
-      <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
-        <div className="container mx-auto px-4 py-2 flex items-center justify-around">
-          <Button
-            variant="ghost"
-            size="lg"
-            className={`flex-1 h-12 ${
-              // TODO: Use a proper favorite state
-              false ? "text-yellow-500" : "text-muted-foreground"
-            }`}
-            onClick={handleToggleFavorite}
-          >
-            <Star
-              className={`h-5 w-5 mr-2 ${
-                // TODO: Use a proper favorite state
-                false ? "fill-yellow-500" : ""
-              }`}
-            />
-            {/* TODO: */}
-            {false ? "Favori" : "Ajouter"}
-          </Button>
-
-          <Separator orientation="vertical" className="h-8" />
-
-          <Button
-            variant="ghost"
-            size="lg"
-            className="flex-1 h-12"
-            onClick={handleShare}
-          >
-            <Share2 className="h-5 w-5 mr-2" />
-            Partager
-          </Button>
-        </div>
-      </div>
     </div>
   );
 }