diff --git a/front/components/calendar-widget.tsx b/front/components/calendar-widget.tsx
index 61fcace..9295a41 100644
--- a/front/components/calendar-widget.tsx
+++ b/front/components/calendar-widget.tsx
@@ -1,19 +1,18 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 export function CalendarWidget() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
-        <div className="text-sm font-medium">JEUDI</div>
-        <div className="text-4xl font-bold">24</div>
+        <div className='text-sm font-medium'>JEUDI</div>
+        <div className='text-4xl font-bold'>24</div>
       </CardHeader>
       <CardContent>
-        <div className="space-y-2">
-          <h3 className="font-medium">Classe UX Design en visio conférence</h3>
-          <p className="text-sm text-gray-500">Rappel : Examen dans 2 jours</p>
+        <div className='space-y-2'>
+          <h3 className='font-medium'>Classe UX Design en visio conférence</h3>
+          <p className='text-sm text-gray-500'>Rappel : Examen dans 2 jours</p>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-
diff --git a/front/components/messages.tsx b/front/components/messages.tsx
index 35c2552..52b68d5 100644
--- a/front/components/messages.tsx
+++ b/front/components/messages.tsx
@@ -1,15 +1,14 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export function Messages() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>Messages - Non Lu</CardTitle>
       </CardHeader>
-      <CardContent className="p-6 text-center text-gray-500">
+      <CardContent className='p-6 text-center text-gray-500'>
         Aucun nouveau messages
       </CardContent>
     </Card>
-  )
+  );
 }
-
diff --git a/front/components/news.tsx b/front/components/news.tsx
index ac230de..83cebb2 100644
--- a/front/components/news.tsx
+++ b/front/components/news.tsx
@@ -1,37 +1,38 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export function News() {
   const newsItems = [
     {
-      title: "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
+      title:
+        "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
       source: "CNN",
     },
     {
-      title: "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
+      title:
+        "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
       source: "CBS Sports",
     },
     {
       title: "China's Baidu reports 15% revenue growth, beating expectations",
       source: "CNBC",
     },
-  ]
+  ];
 
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>News</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className='space-y-4'>
           {newsItems.map((item, i) => (
-            <div key={i} className="space-y-1">
-              <h3 className="font-medium">{item.title}</h3>
-              <p className="text-sm text-gray-500">{item.source}</p>
+            <div key={i} className='space-y-1'>
+              <h3 className='font-medium'>{item.title}</h3>
+              <p className='text-sm text-gray-500'>{item.source}</p>
             </div>
           ))}
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-
diff --git a/front/components/podcast.tsx b/front/components/podcast.tsx
index 2592dfd..86e3173 100644
--- a/front/components/podcast.tsx
+++ b/front/components/podcast.tsx
@@ -1,30 +1,33 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import Image from "next/image"
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
 
 export function Podcast() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
-        <div className="text-sm font-medium text-red-500">PODCAST</div>
-        <div className="text-lg font-bold">DU JOUR</div>
+        <div className='text-sm font-medium text-red-500'>PODCAST</div>
+        <div className='text-lg font-bold'>DU JOUR</div>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex space-x-4">
+      <CardContent className='space-y-4'>
+        <div className='flex space-x-4'>
           <Image
-            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png"
-            alt="Podcast cover"
+            src='https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png'
+            alt='Podcast cover'
             width={80}
             height={80}
-            className="rounded-lg"
+            className='rounded-lg'
           />
-          <div className="space-y-1">
-            <h3 className="font-medium">Raphaël Glucksmann, Député Européen et Essayiste</h3>
-            <p className="text-sm text-gray-500">Une vie au service de l'engagement</p>
-            <p className="text-xs text-gray-400">InPower par Louise Aubery</p>
+          <div className='space-y-1'>
+            <h3 className='font-medium'>
+              Raphaël Glucksmann, Député Européen et Essayiste
+            </h3>
+            <p className='text-sm text-gray-500'>
+              Une vie au service de l'engagement
+            </p>
+            <p className='text-xs text-gray-400'>InPower par Louise Aubery</p>
           </div>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-
diff --git a/front/components/quote-card.tsx b/front/components/quote-card.tsx
index c3e244b..9d9df84 100644
--- a/front/components/quote-card.tsx
+++ b/front/components/quote-card.tsx
@@ -30,7 +30,7 @@ export function QuoteCard() {
   };
 
   return (
-    <Card className='relative'>
+    <Card className='relative transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardContent className='p-6'>
         <blockquote className='space-y-2'>
           <p className='text-lg'>{quote ? quote.quote : "Loading..."}</p>
diff --git a/front/components/todo.tsx b/front/components/todo.tsx
index dc5b2ee..2a3a08e 100644
--- a/front/components/todo.tsx
+++ b/front/components/todo.tsx
@@ -1,35 +1,37 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 
 export function Todo() {
   const todos = [
     { text: "send e-mails", done: false },
     { text: "do the visuals", done: false },
     { text: "write the contract", done: false },
-  ]
+  ];
 
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>Todo</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className='space-y-4'>
           {todos.map((todo, i) => (
-            <div key={i} className="flex items-center space-x-2">
+            <div key={i} className='flex items-center space-x-2'>
               <Checkbox id={`todo-${i}`} />
-              <label htmlFor={`todo-${i}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              <label
+                htmlFor={`todo-${i}`}
+                className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+              >
                 {todo.text}
               </label>
             </div>
           ))}
-          <Button className="w-full mt-4" variant="secondary">
+          <Button className='w-full mt-4' variant='secondary'>
             Add Todo
           </Button>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-