diff --git a/apps/api/src/seeders/complex.seeder.ts b/apps/api/src/seeders/complex.seeder.ts
index 2ec4161..ee02c63 100644
--- a/apps/api/src/seeders/complex.seeder.ts
+++ b/apps/api/src/seeders/complex.seeder.ts
@@ -12,20 +12,16 @@ export async function seedComplexes(
 
   const complexCategories = [
     {
-      name: 'EMOM',
-      description: 'Exercices à exécuter toutes les minutes',
-    },
-    {
-      name: 'Technique Arraché',
+      name: 'Arraché',
       description: "Exercices focalisés sur la technique de l'arraché",
     },
     {
-      name: 'Technique Épaulé-Jeté',
+      name: 'Épaulé',
       description: "Exercices focalisés sur la technique de l'épaulé-jeté",
     },
     {
-      name: 'TABATA',
-      description: 'Exercices en intervalles courts (20s effort / 10s repos)',
+      name: 'Renforcement',
+      description: 'Exercices de musculation spécifiques',
     },
   ];
 
@@ -39,9 +35,13 @@ export async function seedComplexes(
     console.log('Complex category created:', categoryToCreate);
   }
 
+  const ARRACHE_CATEGORY_INDEX = 0;
+  const EPAULE_CATEGORY_INDEX = 1;
+  const RENFORCEMENT_CATEGORY_INDEX = 2;
+
   const complexesToCreate = [
     {
-      category: 'EMOM',
+      category: complexCategories[ARRACHE_CATEGORY_INDEX].name,
       description: "Focus sur la technique de l'arraché",
       exercises: [
         {
@@ -59,8 +59,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'Technique Épaulé-Jeté',
-      description: "Focus sur la technique de l'épaulé-jeté",
+      category: complexCategories[EPAULE_CATEGORY_INDEX].name,
+      description: "EMOM",
       exercises: [
         {
           name: 'Épaulé Debout',
@@ -81,8 +81,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'TABATA',
-      description: 'Focus sur la force',
+      category: complexCategories[RENFORCEMENT_CATEGORY_INDEX].name,
+      description: 'On le fait en TABATA',
       exercises: [
         {
           name: 'Squat Nuque',
@@ -99,8 +99,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'Technique Arraché',
-      description: "Focus sur la technique de l'arraché",
+      category: complexCategories[ARRACHE_CATEGORY_INDEX].name,
+      description: "Focus sur la technique de l'arraché, EMOM",
       exercises: [
         {
           name: 'Arraché Debout',
@@ -117,8 +117,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'EMOM',
-      description: "Focus sur l'épaulé",
+      category: complexCategories[EPAULE_CATEGORY_INDEX].name,
+      description: "On se concentre sur la technique",
       exercises: [
         {
           name: 'Épaulé Debout',
diff --git a/apps/api/src/seeders/exercise.seeder.ts b/apps/api/src/seeders/exercise.seeder.ts
index 531a880..a308ade 100644
--- a/apps/api/src/seeders/exercise.seeder.ts
+++ b/apps/api/src/seeders/exercise.seeder.ts
@@ -36,7 +36,7 @@ export async function seedExerciseCategories(
 export async function seedExercises(
   em: EntityManager
 ): Promise<Record<string, Exercise>> {
-  const types = ['Haltérophilie', 'Endurance', 'Cardio', 'Musculation'];
+  const types = ['Technique', 'Endurance', 'Cardio', 'Renforcement'];
   const categories: Record<string, ExerciseCategory> = {};
 
   for (const exerciseCategory of types) {
@@ -52,79 +52,79 @@ export async function seedExercises(
   const exercises = [
     {
       name: 'Squat Clavicule',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Front Squat',
       shortName: 'Squat Clav',
     },
     {
       name: 'Épaulé Debout',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Power Clean',
       shortName: 'PC',
     },
     {
       name: 'Arraché Debout',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Power Snatch',
       shortName: 'PS',
     },
     {
       name: 'Jeté Fente',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Split Jerk',
       shortName: 'SJ',
     },
     {
       name: 'Arraché',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'snatch',
       shortName: 'SN',
     },
     {
       name: 'Squat Nuque',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Back Squat',
       shortName: 'BS',
     },
     {
       name: 'Tirage Nuque',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Snatch Pull',
       shortName: 'SP',
     },
     {
       name: 'Développé Militaire',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Military Press',
       shortName: 'MP',
     },
     {
       name: 'Soulevé de Terre',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Deadlift',
       shortName: 'DL',
     },
     {
       name: 'Tirage Menton',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Upright Row',
       shortName: 'UR',
     },
     {
       name: 'Développé Couché',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Bench Press',
       shortName: 'BP',
     },
     {
       name: 'Épaulé-Jeté',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'cleanAndJerk',
       shortName: 'C&J',
     },
     {
       name: 'Tirage Planche',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Bent Over Row',
       shortName: 'BOR',
     },
diff --git a/apps/web/src/features/athletes/athlete-detail.tsx b/apps/web/src/features/athletes/athlete-detail.tsx
index dfe9d49..6ece2ae 100644
--- a/apps/web/src/features/athletes/athlete-detail.tsx
+++ b/apps/web/src/features/athletes/athlete-detail.tsx
@@ -86,7 +86,7 @@ export function AthleteDetail({
     <div className="space-y-6 w-full">
       {/* Profile Header with Avatar */}
       <div className="w-full flex flex-col md:flex-row items-center md:items-start gap-6 mb-8">
-        <Avatar className="h-28 w-28 border-2 border-primary">
+        <Avatar className="h-16 w-16 border border-border">
           <AvatarImage
             src={athlete.image}
             alt={`${athlete.firstName} ${athlete.lastName}`}
diff --git a/apps/web/src/features/athletes/columns.tsx b/apps/web/src/features/athletes/columns.tsx
index 36f0b73..716527d 100644
--- a/apps/web/src/features/athletes/columns.tsx
+++ b/apps/web/src/features/athletes/columns.tsx
@@ -12,6 +12,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
   {
     id: 'select',
     header: ({ table }) => (
+      <div className="flex items-center justify-start">
       <Checkbox
         checked={
           table.getIsAllPageRowsSelected() ||
@@ -20,13 +21,16 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
       />
+      </div>
     ),
     cell: ({ row }) => (
+      <div className="flex items-center justify-start">
       <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
         aria-label="Select row"
       />
+      </div>
     ),
     enableSorting: false,
     enableHiding: false,
@@ -35,7 +39,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
     id: 'name',
     header: () => {
       const { t } = useTranslation(['athletes']);
-      return t('athletes.columns.name');
+      return t('columns.name');
     },
     cell: ({ row }) => {
       const firstName = row.original.firstName;
@@ -45,7 +49,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
 
       return (
         <div className="flex items-center gap-3">
-          <Avatar>
+          <Avatar className="bg-sidebar text-sidebar-foreground border border-color-border">
             <AvatarImage src={image} />
             <AvatarFallback>{`${firstName[0]}${lastName[0]}`}</AvatarFallback>
           </Avatar>
diff --git a/apps/web/src/features/athletes/data-table.tsx b/apps/web/src/features/athletes/data-table.tsx
index ce25d88..512a66b 100644
--- a/apps/web/src/features/athletes/data-table.tsx
+++ b/apps/web/src/features/athletes/data-table.tsx
@@ -36,7 +36,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
 import { useState } from 'react';
 
 interface DataTableProps<TValue> {
@@ -104,53 +104,58 @@ export function DataTable<TValue>({
 
   return (
     <div>
+      {/* Filters */}
       <div className="flex justify-between items-center">
-        <div className="flex items-center py-4">
-          <Input
-            placeholder={t('athletes:filters.search_placeholder')}
-            value={globalFilter ?? ''}
-            onChange={(event) => setGlobalFilter(event.target.value)}
-            className="max-w-sm"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto bg-card">
-                {t('common:table.columns')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  );
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Separator orientation="vertical" className="h-6" />
-          <Button onClick={() => onDialogCreation(true)}>
-            {t('athletes:filters.create_athlete')}
-          </Button>
+        <div className="flex items-center w-full justify-between pb-6">
+          <div className="relative w-full">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t('athletes:filters.search_placeholder')}
+                value={globalFilter ?? ''}
+                onChange={(event) => setGlobalFilter(event.target.value)}
+                className="pl-8 bg-sidebar max-w-lg"
+              />
+          </div>
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto bg-card">
+                  {t('common:table.columns')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Separator orientation="vertical" className="h-6" />
+            <Button onClick={() => onDialogCreation(true)}>
+              {t('athletes:filters.create_athlete')}
+            </Button>
+          </div>
         </div>
       </div>
+      {/* Table */}
       <div className="rounded-md border bg-card">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="bg-sidebar">
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>
@@ -198,6 +203,7 @@ export function DataTable<TValue>({
           </TableBody>
         </Table>
       </div>
+      {/* Pagination */}
       <div className="flex justify-between items-center py-4">
         <div className="flex items-center gap-4 text-sm text-muted-foreground">
           <div>
diff --git a/apps/web/src/features/complex/complex-card.tsx b/apps/web/src/features/complex/complex-card.tsx
index 3377fa7..3183450 100644
--- a/apps/web/src/features/complex/complex-card.tsx
+++ b/apps/web/src/features/complex/complex-card.tsx
@@ -15,21 +15,23 @@ import {
 } from '@/shared/components/ui/dropdown-menu';
 import { ComplexDto } from '@dropit/schemas';
 import { MoreHorizontal } from 'lucide-react';
+import { getCategoryBadgeVariant } from '@/shared/utils';
 
 interface ComplexCardProps {
   complex: ComplexDto;
   onClick?: () => void;
 }
 
+
 export function ComplexCard({ complex, onClick }: ComplexCardProps) {
   return (
     <Card
-      className="cursor-pointer hover:shadow-lg transition-shadow"
+      className="cursor-pointer shadow-none hover:shadow-md transition-shadow rounded-md"
       onClick={onClick}
     >
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
-          {complex.complexCategory?.name || 'Sans catégorie'}
+          {complex.exercises?.map(ex => ex.name).join(', ') || 'Aucun exercice'}
         </CardTitle>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -51,7 +53,9 @@ export function ComplexCard({ complex, onClick }: ComplexCardProps) {
           {complex.description || 'Pas de description'}
         </div>
         <div className="mt-4 flex items-center justify-between">
-          <Badge variant="secondary" className="text-xs">
+          <Badge 
+            className={`text-xs border-0 ${getCategoryBadgeVariant(complex.complexCategory?.name || '')}`}
+          >
             {complex.complexCategory?.name || 'Sans catégorie'}
           </Badge>
           <span className="text-xs text-muted-foreground">
diff --git a/apps/web/src/features/complex/complex-detail.tsx b/apps/web/src/features/complex/complex-detail.tsx
index 3704e6e..02f0bc8 100644
--- a/apps/web/src/features/complex/complex-detail.tsx
+++ b/apps/web/src/features/complex/complex-detail.tsx
@@ -45,13 +45,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { fr } from 'date-fns/locale';
-import { GripVertical, PlusCircle, Trash2, Edit } from 'lucide-react';
+import { GripVertical, PlusCircle, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { UseFormReturn, useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { DialogCreation } from '../exercises/dialog-creation';
 import { ExerciseCreationForm } from '../exercises/exercise-creation-form';
 import { ComplexCategoryCreationForm } from './complex-category-creation-form';
+import { getCategoryBadgeVariant } from '@/shared/utils';
 
 interface ComplexDetailProps {
   complex: ComplexDto;
@@ -511,28 +512,11 @@ export function ComplexDetail({ complex }: ComplexDetailProps) {
       {/* Informations principales */}
       <Card className="bg-background rounded-md shadow-none">
         <CardContent className="space-y-4 pt-6">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-2xl font-bold tracking-tight">
-                  Complex
-                </h2>
-                <p className="text-muted-foreground">
-                  {complex.complexCategory?.name || 'Sans catégorie'}
-                </p>
-              </div>
-              <Button onClick={() => setIsEditing(true)}>
-                <Edit className="h-4 w-4 mr-2" />
-                Modifier
-              </Button>
-            </div>
-
-            <div className="space-y-2">
+          <div className="space-y-2">
               <Label>Description</Label>
               <p className="text-sm text-muted-foreground">
                 {complex.description || 'Pas de description'}
               </p>
-            </div>
           </div>
         </CardContent>
       </Card>
@@ -540,9 +524,13 @@ export function ComplexDetail({ complex }: ComplexDetailProps) {
       {/* Catégorie dans une Card séparée */}
       <Card className="bg-background rounded-md shadow-none">
         <CardContent className="pt-6">
-          <div className="space-y-2">
+          <div className="space-y-2 space-x-2">
             <Label>Catégorie</Label>
-            <Badge variant="secondary">{complex.complexCategory.name}</Badge>
+            <Badge 
+              className={`border-0 ${getCategoryBadgeVariant(complex.complexCategory.name)}`}
+            >
+              {complex.complexCategory.name}
+            </Badge>
           </div>
         </CardContent>
       </Card>
diff --git a/apps/web/src/features/complex/complex-filters.tsx b/apps/web/src/features/complex/complex-filters.tsx
index 3fef10e..f912589 100644
--- a/apps/web/src/features/complex/complex-filters.tsx
+++ b/apps/web/src/features/complex/complex-filters.tsx
@@ -10,6 +10,7 @@ import {
 import { Separator } from '@/shared/components/ui/separator';
 import { ComplexCategoryDto } from '@dropit/schemas';
 import { useTranslation } from '@dropit/i18n';
+import { Search } from 'lucide-react';
 
 interface ComplexFiltersProps {
   onFilterChange: (value: string) => void;
@@ -30,30 +31,35 @@ export function ComplexFilters({
 
   return (
     <div className="flex justify-between items-center">
-      <div className="flex items-center gap-4 py-4">
-        <Input
-          placeholder={t('complex.filters.search_placeholder')}
-          onChange={(e) => onFilterChange(e.target.value)}
-          className="max-w-sm"
-          disabled={disabled}
-        />
-      </div>
-      <div className="flex items-center gap-2">
-        <Select onValueChange={onCategoryChange} defaultValue="all">
-          <SelectTrigger className="w-fit bg-card font-medium">
-            <SelectValue placeholder={t('complex.filters.all_categories')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('complex.filters.all_categories')}</SelectItem>
-            {categories.map((category) => (
-              <SelectItem key={category.id} value={category.id}>
-                {category.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Separator orientation="vertical" className="h-6" />
-        <Button onClick={onCreateClick}>{t('complex.filters.create_complex')}</Button>
+      <div className="flex items-center w-full justify-between pb-6">
+        {/* Search */}
+        <div className="relative w-full">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={t('complex.filters.search_placeholder')}
+            onChange={(e) => onFilterChange(e.target.value)}
+            disabled={disabled}
+            className="pl-8 bg-sidebar max-w-lg"
+          />
+        </div>
+        {/* Filters */}
+        <div className="flex items-center gap-2">
+          <Select onValueChange={onCategoryChange} defaultValue="all">
+            <SelectTrigger className="w-fit bg-card font-medium">
+              <SelectValue placeholder={t('complex.filters.all_categories')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('complex.filters.all_categories')}</SelectItem>
+              {categories.map((category) => (
+                <SelectItem key={category.id} value={category.id}>
+                  {category.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Separator orientation="vertical" className="h-6" />
+          <Button onClick={onCreateClick}>{t('complex.filters.create_complex')}</Button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/features/exercises/columns.tsx b/apps/web/src/features/exercises/columns.tsx
index b47c5a0..3d760e0 100644
--- a/apps/web/src/features/exercises/columns.tsx
+++ b/apps/web/src/features/exercises/columns.tsx
@@ -7,10 +7,12 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@/shared/components/ui/dropdown-menu';
+import { Badge } from '@/shared/components/ui/badge';
 import { ExerciseDto } from '@dropit/schemas';
 import { ColumnDef } from '@tanstack/react-table';
 import { MoreHorizontal } from 'lucide-react';
 import { ArrowUpDown } from 'lucide-react';
+import { getCategoryBadgeVariant } from '@/shared/utils';
 
 type Exercise = ExerciseDto;
 
@@ -18,21 +20,25 @@ export const columns: ColumnDef<Exercise>[] = [
   {
     id: 'select',
     header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && 'indeterminate')
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
+      <div className="flex items-center justify-start">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
     ),
     cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
+      <div className="flex items-center justify-start">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
     ),
     enableSorting: false,
     enableHiding: false,
@@ -44,6 +50,7 @@ export const columns: ColumnDef<Exercise>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="justify-start p-0 h-auto font-medium"
         >
           Nom
           <ArrowUpDown className="ml-2 h-4 w-4" />
@@ -52,54 +59,66 @@ export const columns: ColumnDef<Exercise>[] = [
     },
   },
   {
-    accessorKey: 'exerciseCategory.name',
+    accessorKey: 'englishName',
+    header: () => (
+      <div className="text-left font-medium">Nom Anglais</div>
+    ),
+    cell: ({ row }) => row.getValue('englishName') || '—',
+  },
+  {
+    accessorKey: 'shortName',
+    header: () => (
+      <div className="text-left font-medium">Abréviation</div>
+    ),
+    cell: ({ row }) => row.getValue('shortName') || '—',
+  },
+  {
+    accessorKey: 'exerciseCategory.id',
     header: ({ column }) => {
       return (
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="justify-start p-0 h-auto font-medium"
         >
           Catégorie
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       );
     },
-  },
-  {
-    accessorKey: 'shortName',
-    header: 'Abréviation',
-    cell: ({ row }) => row.getValue('shortName') || '—',
-  },
-  {
-    accessorKey: 'englishName',
-    header: 'Nom Anglais',
-    cell: ({ row }) => row.getValue('englishName') || '—',
+    cell: ({ row }) => {
+      const categoryName = row.original.exerciseCategory?.name || '—';
+      
+      const badgeVariant = getCategoryBadgeVariant(categoryName);
+      
+      return (
+        <Badge className={badgeVariant}>
+          {categoryName}
+        </Badge>
+      );
+    },
   },
   {
     id: 'actions',
-    cell: ({ row }) => {
-      const exercise = row.original;
+    cell: () => {
 
       return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(exercise.id)}
-            >
-              Copier l'ID
-            </DropdownMenuItem>
-            <DropdownMenuItem>Voir les détails</DropdownMenuItem>
-            <DropdownMenuItem>Modifier</DropdownMenuItem>
-            <DropdownMenuItem>Supprimer</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex justify-center">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem>Voir les détails</DropdownMenuItem>
+              <DropdownMenuItem>Modifier</DropdownMenuItem>
+              <DropdownMenuItem>Supprimer</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       );
     },
   },
diff --git a/apps/web/src/features/exercises/data-table.tsx b/apps/web/src/features/exercises/data-table.tsx
index 8684b86..304a119 100644
--- a/apps/web/src/features/exercises/data-table.tsx
+++ b/apps/web/src/features/exercises/data-table.tsx
@@ -28,7 +28,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
 import { useState } from 'react';
 
 interface DataTableProps<TData extends { id: string }, TValue> {
@@ -70,55 +70,60 @@ export function DataTable<TData extends { id: string }, TValue>({
 
   return (
     <div>
+      {/* Filters */}
       <div className="flex justify-between items-center">
-        <div className="flex items-center py-4">
-          <Input
-            placeholder={t('exercise.filters.search_placeholder')}
-            value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-            onChange={(event) =>
-              table.getColumn('name')?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto bg-card">
-                {t('exercise.table.columns')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  );
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Separator orientation="vertical" className="h-6" />
-          <Button onClick={() => onDialogCreation(true)}>
-            {t('exercise.filters.create_exercise')}
-          </Button>
+        <div className="flex items-center w-full justify-between pb-6">
+          <div className="relative w-full">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder={t('exercise.filters.search_placeholder')}
+              value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+              onChange={(event) =>
+                table.getColumn('name')?.setFilterValue(event.target.value)
+              }
+              className="pl-8 bg-sidebar max-w-lg"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto bg-card">
+                  {t('exercise.table.columns')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Separator orientation="vertical" className="h-6" />
+            <Button onClick={() => onDialogCreation(true)}>
+              {t('exercise.filters.create_exercise')}
+            </Button>
+          </div>
         </div>
       </div>
+      {/* Table */}
       <div className="rounded-md border bg-card">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="bg-sidebar">
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>
@@ -166,6 +171,7 @@ export function DataTable<TData extends { id: string }, TValue>({
           </TableBody>
         </Table>
       </div>
+      {/* Pagination */}
       <div className="flex justify-between items-center">
         <div className="flex-1 text-sm text-muted-foreground">
           {t('exercise.table.selected_rows', {
diff --git a/apps/web/src/features/exercises/exercise-detail.tsx b/apps/web/src/features/exercises/exercise-detail.tsx
index e49c0f7..a20d766 100644
--- a/apps/web/src/features/exercises/exercise-detail.tsx
+++ b/apps/web/src/features/exercises/exercise-detail.tsx
@@ -29,6 +29,8 @@ import { fr } from 'date-fns/locale';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { Badge } from '@/shared/components/ui/badge';
+import { getCategoryBadgeVariant } from '@/shared/utils';
 
 interface ExerciseDetailProps {
   exercise: {
@@ -308,9 +310,13 @@ export function ExerciseDetail({ exercise }: ExerciseDetailProps) {
       <Card className="bg-background rounded-md shadow-none">
         <CardContent className="pt-6">
           <div className="space-y-4">
-            <div className="space-y-2">
+            <div className="space-y-2 space-x-2">
               <Label>Catégorie</Label>
-              <p className="text-sm">{exercise.exerciseCategory.name}</p>
+              <Badge 
+                className={`text-xs border-0 ${getCategoryBadgeVariant(exercise.exerciseCategory.name)}`}
+              >
+                {exercise.exerciseCategory.name}
+              </Badge>
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
diff --git a/apps/web/src/features/planning/planning-calendar.tsx b/apps/web/src/features/planning/planning-calendar.tsx
index 463ca61..08fb792 100644
--- a/apps/web/src/features/planning/planning-calendar.tsx
+++ b/apps/web/src/features/planning/planning-calendar.tsx
@@ -1,4 +1,6 @@
 import { cn } from '@/lib/utils';
+import { Button } from '@/shared/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { useToast } from '@/shared/hooks/use-toast';
 import { useTranslation } from '@dropit/i18n';
 import { TrainingSessionDto } from '@dropit/schemas';
@@ -9,7 +11,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin, { DateClickArg } from '@fullcalendar/interaction';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import FullCalendar from '@fullcalendar/react';
-import { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useRef, useState } from 'react';
 
 interface EventDropInfo {
   event: EventApi;
@@ -36,6 +39,8 @@ export function PlanningCalendar({
   const { t, i18n } = useTranslation('planning');
   const { toast } = useToast();
   const [events, setEvents] = useState<TrainingSessionDto[]>(initialEvents);
+  const [currentView, setCurrentView] = useState('dayGridMonth');
+  const calendarRef = useRef<FullCalendar>(null);
   const currentLocale = i18n.language === 'fr' ? frLocale : enLocale;
 
   const handleEventClick = (info: EventClickArg) => {
@@ -75,33 +80,131 @@ export function PlanningCalendar({
     }
   };
 
+  const handlePrev = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      calendarApi.prev();
+    }
+  };
+
+  const handleNext = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      calendarApi.next();
+    }
+  };
+
+  const handleToday = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      calendarApi.today();
+    }
+  };
+
+  const handleViewChange = (newView: string) => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      calendarApi.changeView(newView);
+      setCurrentView(newView);
+    }
+  };
+
+  const getViewLabel = (view: string) => {
+    switch (view) {
+      case 'dayGridMonth':
+        return t('month');
+      case 'dayGridWeek':
+        return t('week');
+      case 'multiMonthYear':
+        return t('year');
+      default:
+        return t('month');
+    }
+  };
+
   return (
-    <div className={cn('planning-calendar bg-white', className)}>
-      <FullCalendar
-        plugins={[dayGridPlugin, interactionPlugin, multiMonthPlugin]}
-        initialView="dayGridMonth"
-        headerToolbar={{
-          left: 'prev,next today',
-          center: 'title',
-          right: 'dayGridMonth,dayGridWeek,multiMonthYear',
-        }}
-        locale={currentLocale}
-        editable={true}
-        selectable={true}
-        selectMirror={true}
-        dayMaxEvents={true}
-        weekends={true}
-        events={events.map((event) => ({
-          id: event.id,
-          title: event.workout.title,
-          start: event.scheduledDate,
-          end: event.scheduledDate,
-        }))}
-        eventClick={handleEventClick}
-        dateClick={handleDateClick}
-        eventDrop={handleEventDrop}
-        height="75vh"
-      />
+    <div className={cn('planning-calendar', className)}>
+      {/* Custom Toolbar */}
+      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        {/* Navigation Controls */}
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handlePrev}
+            className="h-9 w-9"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            <span className="sr-only">{t('common:previous')}</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleNext}
+            className="h-9 w-9"
+          >
+            <ChevronRight className="h-4 w-4" />
+            <span className="sr-only">{t('common:next')}</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            onClick={handleToday}
+            className="ml-2"
+          >
+            {t('today')}
+          </Button>
+        </div>
+
+        {/* View Selector */}
+        <div className="flex items-center gap-2">
+          <Select value={currentView} onValueChange={handleViewChange}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue>
+                {getViewLabel(currentView)}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="dayGridMonth">
+                {t('month')}
+              </SelectItem>
+              <SelectItem value="dayGridWeek">
+                {t('week')}
+              </SelectItem>
+              <SelectItem value="multiMonthYear">
+                {t('year')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Calendar */}
+      <div className="rounded-lg border bg-card">
+        <FullCalendar
+          ref={calendarRef}
+          plugins={[dayGridPlugin, interactionPlugin, multiMonthPlugin]}
+          initialView="dayGridMonth"
+          headerToolbar={false} // Disable default toolbar
+          locale={currentLocale}
+          editable={true}
+          selectable={true}
+          selectMirror={true}
+          dayMaxEvents={true}
+          weekends={true}
+          events={events.map((event) => ({
+            id: event.id,
+            title: event.workout.title,
+            start: event.scheduledDate,
+            end: event.scheduledDate,
+          }))}
+          eventClick={handleEventClick}
+          dateClick={handleDateClick}
+          eventDrop={handleEventDrop}
+          height="75vh"
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/features/workout/steps/workout-elements-step.tsx b/apps/web/src/features/workout/steps/workout-elements-step.tsx
index c5dc7ce..7aa2fa9 100644
--- a/apps/web/src/features/workout/steps/workout-elements-step.tsx
+++ b/apps/web/src/features/workout/steps/workout-elements-step.tsx
@@ -184,7 +184,7 @@ export function WorkoutElementsStep({
                 <div className="flex-1 flex flex-col min-h-0">
                   {activeTab === 'exercise' && (
                     <div className="flex-1 flex flex-col min-h-0">
-                      <div className="relative mb-3 flex-shrink-0">
+                      <div className="relative mb-3 flex-shrink-0 bg-sidebar">
                         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <Input
                           placeholder="Rechercher un exercice..."
@@ -204,7 +204,7 @@ export function WorkoutElementsStep({
                             e.stopPropagation();
                             setCreateExerciseModalOpen(true);
                           }}
-                          className="w-full"
+                          className="w-full bg-orange-100"
                         >
                           <Plus className="h-4 w-4 mr-2" />
                           Créer un nouvel exercice
@@ -241,7 +241,7 @@ export function WorkoutElementsStep({
                   
                   {activeTab === 'complex' && (
                     <div className="flex-1 flex flex-col min-h-0">
-                      <div className="relative mb-3 flex-shrink-0">
+                      <div className="relative mb-3 flex-shrink-0 bg-sidebar">
                         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <Input
                           placeholder="Rechercher un complexe..."
@@ -261,7 +261,7 @@ export function WorkoutElementsStep({
                             e.stopPropagation();
                             setCreateComplexModalOpen(true);
                           }}
-                          className="w-full"
+                          className="w-full bg-orange-100"
                         >
                           <Plus className="h-4 w-4 mr-2" />
                           Créer un nouveau complexe
@@ -311,9 +311,6 @@ export function WorkoutElementsStep({
           </div>
           
           <Card className="flex-1 flex flex-col min-h-0 relative">
-            {fields.length > 0 && (
-              <div className="absolute left-1/2 top-4 bottom-4 w-0.5 bg-gray-200 transform -translate-x-1/2 z-10" />
-            )}
             <CardContent className="p-4 flex-1 flex flex-col min-h-0">
               {fields.length === 0 ? (
                 <div className="flex items-center justify-center h-32 border-2 border-dashed rounded-lg">
@@ -323,7 +320,7 @@ export function WorkoutElementsStep({
                   </div>
                 </div>
               ) : (
-                <div className="flex-1 overflow-y-auto min-h-0">
+                <div className="flex-1 overflow-x-auto min-h-0">
                   <DndContext
                     sensors={sensors}
                     collisionDetection={closestCenter}
@@ -334,18 +331,13 @@ export function WorkoutElementsStep({
                       strategy={verticalListSortingStrategy}
                     >
                       <div
-                        className="grid grid-cols-2 gap-4"
-                        style={{ gridAutoFlow: 'dense' }}
+                        className="flex flex-col flex-wrap gap-4 h-full"
                       >
                         {fields.map((field, index) => (
                           <div
-                            key={field.id}
-                            style={{
-                              gridRow: `span ${
-                                field.type === WORKOUT_ELEMENT_TYPES.COMPLEX ? 2 : 1
-                              }`,
-                            }}
-                          >
+                          key={field.id}
+                          className="w-[49%]"
+                        >
                             <SortableWorkoutElement
                               id={field.id}
                               index={index}
diff --git a/apps/web/src/features/workout/steps/workout-info-step.tsx b/apps/web/src/features/workout/steps/workout-info-step.tsx
index 6745d01..083038b 100644
--- a/apps/web/src/features/workout/steps/workout-info-step.tsx
+++ b/apps/web/src/features/workout/steps/workout-info-step.tsx
@@ -1,5 +1,6 @@
 import { api } from '@/lib/api';
 import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent } from '@/shared/components/ui/card';
 import {
   FormControl,
   FormField,
@@ -16,10 +17,13 @@ import {
   SelectValue,
 } from '@/shared/components/ui/select';
 import { Textarea } from '@/shared/components/ui/textarea';
-import { createWorkoutSchema } from '@dropit/schemas';
+import { createWorkoutSchema, WorkoutDto } from '@dropit/schemas';
 import { useQuery } from '@tanstack/react-query';
 import { UseFormReturn } from 'react-hook-form';
+import { Copy, Search } from 'lucide-react';
+import { Switch } from '@/shared/components/ui/switch';
 import { z } from 'zod';
+import { useState } from 'react';
 
 // Importer le schéma étendu depuis le stepper parent
 const extendedWorkoutSchema = createWorkoutSchema.extend({
@@ -44,6 +48,9 @@ export function WorkoutInfoStep({
   onNext,
   onCancel,
 }: WorkoutInfoStepProps) {
+  const [templateSearch, setTemplateSearch] = useState('');
+  const [useTemplate, setUseTemplate] = useState(false);
+  
   const { data: categories } = useQuery({
     queryKey: ['workoutCategories'],
     queryFn: async () => {
@@ -53,71 +60,184 @@ export function WorkoutInfoStep({
     },
   });
 
+  const { data: workouts } = useQuery({
+    queryKey: ['workouts'],
+    queryFn: async () => {
+      const response = await api.workout.getWorkouts();
+      if (response.status !== 200) throw new Error('Failed to load workouts');
+      return response.body;
+    },
+  });
+
+  const handleUseTemplate = (templateWorkout: WorkoutDto) => {
+    form.setValue('title', `${templateWorkout.title} (copie)`);
+    form.setValue('description', templateWorkout.description || '');
+    
+    // Trouver la catégorie correspondante par son nom pour obtenir l'ID
+    const category = categories?.find(cat => cat.name === templateWorkout.workoutCategory);
+    if (category) {
+      form.setValue('workoutCategory', category.id);
+    }
+    
+    if (templateWorkout.elements) {
+      form.setValue('elements', templateWorkout.elements);
+    }
+  };
+
+  const filteredWorkouts = workouts?.filter(workout =>
+    workout.title.toLowerCase().includes(templateSearch.toLowerCase())
+  ) || [];
+
   return (
-    <div className="space-y-6">
-      <div className="grid gap-4">
-        <h3 className="text-lg font-semibold">Informations générales</h3>
-        <div className="bg-white rounded-lg border shadow-sm flex flex-col gap-6 p-6">
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Nom</FormLabel>
-              <FormControl className="bg-background">
-                <Input placeholder="Nom de l'entraînement" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <div className="h-full flex flex-col">
+      {/* Layout principal : 2 colonnes */}
+      <div className="flex-1 grid grid-cols-3 gap-6 min-h-0 mt-6">
+        
+        {/* Colonne gauche : Formulaire d'informations */}
+        <div className="col-span-2 flex flex-col min-h-0">
+          <div className="mb-4">
+            <h4 className="text-md font-medium">Informations générales</h4>
+            <p className="text-sm text-muted-foreground">
+              Renseignez les détails de votre entraînement
+            </p>
+          </div>
 
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Description</FormLabel>
-              <FormControl className="bg-background">
-                <Textarea
-                  placeholder="Description, commentaires de l'entraînement"
-                  className="min-h-[120px]"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          <Card className="flex-1">
+            <CardContent className="p-6 space-y-6">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nom</FormLabel>
+                    <FormControl className="bg-sidebar">
+                      <Input placeholder="Nom de l'entraînement" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl className="bg-sidebar">
+                      <Textarea
+                        placeholder="Description, commentaires de l'entraînement"
+                        className="min-h-[120px]"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="workoutCategory"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Catégorie</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl className="bg-sidebar">
+                        <SelectTrigger>
+                          <SelectValue placeholder="Sélectionner une catégorie" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {categories?.map((category) => (
+                          <SelectItem key={category.id} value={category.id}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Colonne droite : Templates disponibles */}
+        <div className="col-span-1 flex flex-col min-h-0">
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="text-md font-medium">Utiliser un template</h4>
+                <p className="text-sm text-muted-foreground">
+                  Partir d'un entraînement existant
+                </p>
+              </div>
+              <Switch 
+                checked={useTemplate}
+                onCheckedChange={setUseTemplate}
+              />
+            </div>
+          </div>
 
-        <FormField
-          control={form.control}
-          name="workoutCategory"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Catégorie</FormLabel>
-              <Select onValueChange={field.onChange} value={field.value}>
-                <FormControl className="bg-background">
-                  <SelectTrigger>
-                    <SelectValue placeholder="Sélectionner une catégorie" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {categories?.map((category) => (
-                    <SelectItem key={category.id} value={category.id}>
-                      {category.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-            )}
-          />
+          <Card className={`flex-1 flex flex-col min-h-0 ${!useTemplate ? 'opacity-50 pointer-events-none' : ''}`}>
+            <CardContent className="p-4 flex-1 flex flex-col min-h-0">
+              <div className="relative mb-3 flex-shrink-0 bg-sidebar">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Rechercher un entraînement..."
+                  value={templateSearch}
+                  onChange={(e) => setTemplateSearch(e.target.value)}
+                  className="pl-10"
+                  disabled={!useTemplate}
+                />
+              </div>
+              
+              <div className="flex-1 overflow-y-auto space-y-2 min-h-0">
+                {!useTemplate ? (
+                  <div className="flex items-center justify-center h-32 text-center text-muted-foreground">
+                    <p className="text-sm">Activez le switch pour utiliser un template</p>
+                  </div>
+                ) : filteredWorkouts.length === 0 ? (
+                  <div className="flex items-center justify-center h-32 text-center text-muted-foreground">
+                    <p className="text-sm">Aucun entraînement trouvé</p>
+                  </div>
+                ) : (
+                  filteredWorkouts.map((workout) => (
+                    <div 
+                      key={workout.id} 
+                      className="border rounded-lg p-3 cursor-pointer hover:bg-muted/50 transition-colors bg-background"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1 min-w-0">
+                          <h5 className="font-medium text-sm truncate">{workout.title}</h5>
+                          <p className="text-xs text-muted-foreground truncate">
+                            {typeof workout.workoutCategory === 'string' ? workout.workoutCategory : '-'}
+                          </p>
+                        </div>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleUseTemplate(workout)}
+                          className="flex-shrink-0 ml-2"
+                          disabled={!useTemplate}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
 
-      <div className="bg-white rounded-lg border shadow-sm flex justify-between px-6 py-4">
+      {/* Boutons de navigation */}
+      <div className="flex justify-between mt-6 flex-shrink-0">
         <Button variant="outline" onClick={onCancel}>
           Annuler
         </Button>
diff --git a/apps/web/src/features/workout/steps/workout-planning-step.tsx b/apps/web/src/features/workout/steps/workout-planning-step.tsx
index f5bc744..5852add 100644
--- a/apps/web/src/features/workout/steps/workout-planning-step.tsx
+++ b/apps/web/src/features/workout/steps/workout-planning-step.tsx
@@ -1,6 +1,7 @@
 import { api } from '@/lib/api';
 import { Badge } from '@/shared/components/ui/badge';
 import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent } from '@/shared/components/ui/card';
 import { Checkbox } from '@/shared/components/ui/checkbox';
 import {
   FormControl,
@@ -46,7 +47,7 @@ export function WorkoutPlanningStep({
   onSubmit,
   onCancel,
 }: WorkoutPlanningStepProps) {
-  const [isScheduled, setIsScheduled] = useState(false);
+  const [isScheduled, setIsScheduled] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedAthletes, setSelectedAthletes] = useState<string[]>([]);
   const [selectAll, setSelectAll] = useState(false);
@@ -92,6 +93,13 @@ export function WorkoutPlanningStep({
     }
   };
 
+  // Initialize planning on mount
+  useEffect(() => {
+    if (isScheduled && !form.watch('trainingSession')) {
+      form.setValue('trainingSession', { athleteIds: [], scheduledDate: '' });
+    }
+  }, [isScheduled, form]);
+
   // Toggle select all athletes
   const toggleSelectAll = () => {
     if (selectAll) {
@@ -126,127 +134,148 @@ export function WorkoutPlanningStep({
   }, [selectedAthletes, form, isScheduled]);
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center space-x-2 mb-6">
-        <Switch
-          checked={isScheduled}
-          onCheckedChange={toggleScheduling}
-          id="schedule-workout"
-        />
-        <FormLabel htmlFor="schedule-workout" className="cursor-pointer">
-          Planifier cet entraînement
-        </FormLabel>
-      </div>
-
-      {isScheduled && (
-        <div className="border rounded-md p-4 space-y-4">
-          <FormField
-            control={form.control}
-            name="trainingSession.scheduledDate"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Date de programmation</FormLabel>
-                <FormControl>
-                  <Input
-                    type="date"
-                    placeholder="Sélectionner une date"
-                    {...field}
-                    onChange={(e) => {
-                      field.onChange(e.target.value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormItem>
-            <div className="flex justify-between items-center mb-2">
-              <FormLabel>Athlètes</FormLabel>
-              <Badge variant="outline" className="ml-2">
-                {selectedAthletes.length} sélectionné
-                {selectedAthletes.length !== 1 ? 's' : ''}
-              </Badge>
-            </div>
-
-            <div className="flex items-center space-x-2 mb-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="Rechercher un athlète..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-8"
-                />
+    <div className="h-full flex flex-col">
+      {/* Layout principal : une seule colonne centrée */}
+      <div className="flex-1 flex justify-center min-h-0 mt-6">
+        <div className="w-full max-w-2xl flex flex-col min-h-0">
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="text-md font-medium">Planifier l'entraînement</h4>
+                <p className="text-sm text-muted-foreground">
+                  Programmer une session avec vos athlètes
+                </p>
               </div>
+              <Switch
+                checked={isScheduled}
+                onCheckedChange={toggleScheduling}
+                id="schedule-workout"
+              />
             </div>
+          </div>
 
-            <div className="border rounded-md">
-              <div className="border-b px-3 py-2">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="select-all"
-                    checked={selectAll}
-                    onCheckedChange={() => toggleSelectAll()}
-                  />
-                  <label
-                    htmlFor="select-all"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    Tous les athlètes
-                  </label>
+          <Card className={`flex-1 flex flex-col min-h-0 ${!isScheduled ? 'opacity-50 pointer-events-none' : ''}`}>
+            <CardContent className="p-6 flex-1 flex flex-col min-h-0">
+              {!isScheduled ? (
+                <div className="flex items-center justify-center h-32 text-center text-muted-foreground">
+                  <p className="text-sm">Activez le switch pour planifier l'entraînement</p>
                 </div>
-              </div>
+              ) : (
+                <div className="space-y-6 flex-1 flex flex-col">
+                  <FormField
+                    control={form.control}
+                    name="trainingSession.scheduledDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Date de programmation</FormLabel>
+                        <FormControl className="bg-sidebar">
+                          <Input
+                            type="date"
+                            placeholder="Sélectionner une date"
+                            {...field}
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                            }}
+                            disabled={!isScheduled}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-              <ScrollArea className="h-60">
-                <div className="p-2 space-y-1">
-                  {isLoading ? (
-                    <div className="flex items-center justify-center h-full py-4">
-                      Chargement des athlètes...
+                  <FormItem className="flex-1 flex flex-col min-h-0">
+                    <div className="flex justify-between items-center mb-2">
+                      <FormLabel>Athlètes</FormLabel>
+                      <Badge variant="outline" className="ml-2">
+                        {selectedAthletes.length} sélectionné
+                        {selectedAthletes.length !== 1 ? 's' : ''}
+                      </Badge>
                     </div>
-                  ) : filteredAthletes.length === 0 ? (
-                    <div className="text-center py-4 text-muted-foreground">
-                      {searchQuery
-                        ? 'Aucun athlète trouvé'
-                        : 'Aucun athlète disponible'}
+
+                    <div className="relative mb-3 flex-shrink-0 bg-sidebar">
+                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        placeholder="Rechercher un athlète..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="pl-10"
+                        disabled={!isScheduled}
+                      />
                     </div>
-                  ) : (
-                    filteredAthletes.map((athlete) => (
-                      <div
-                        key={athlete.id}
-                        className="flex items-center space-x-2 px-2 py-1.5 rounded-md hover:bg-muted/50"
-                      >
-                        <Checkbox
-                          id={`athlete-${athlete.id}`}
-                          checked={selectedAthletes.includes(athlete.id)}
-                          onCheckedChange={() =>
-                            handleAthleteToggle(athlete.id)
-                          }
-                        />
-                        <label
-                          htmlFor={`athlete-${athlete.id}`}
-                          className="flex-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                        >
-                          {athlete.firstName} {athlete.lastName}
-                        </label>
+
+                    <div className="border rounded-md">
+                      <div className="border-b px-3 py-2">
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="select-all"
+                            checked={selectAll}
+                            onCheckedChange={() => toggleSelectAll()}
+                            disabled={!isScheduled}
+                          />
+                          <label
+                            htmlFor="select-all"
+                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          >
+                            Tous les athlètes
+                          </label>
+                        </div>
                       </div>
-                    ))
-                  )}
-                </div>
-              </ScrollArea>
 
-              {form.formState.errors.trainingSession?.athleteIds && (
-                <div className="px-3 py-2 text-sm text-destructive">
-                  {form.formState.errors.trainingSession.athleteIds.message}
+                      <ScrollArea className="h-80">
+                        <div className="p-2 space-y-1">
+                          {isLoading ? (
+                            <div className="flex items-center justify-center h-full py-4">
+                              Chargement des athlètes...
+                            </div>
+                          ) : filteredAthletes.length === 0 ? (
+                            <div className="text-center py-4 text-muted-foreground">
+                              {searchQuery
+                                ? 'Aucun athlète trouvé'
+                                : 'Aucun athlète disponible'}
+                            </div>
+                          ) : (
+                            filteredAthletes.map((athlete) => (
+                              <div
+                                key={athlete.id}
+                                className="flex items-center space-x-2 px-2 py-1.5 rounded-md hover:bg-muted/50"
+                              >
+                                <Checkbox
+                                  id={`athlete-${athlete.id}`}
+                                  checked={selectedAthletes.includes(athlete.id)}
+                                  onCheckedChange={() =>
+                                    handleAthleteToggle(athlete.id)
+                                  }
+                                  disabled={!isScheduled}
+                                />
+                                <label
+                                  htmlFor={`athlete-${athlete.id}`}
+                                  className="flex-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  {athlete.firstName} {athlete.lastName}
+                                </label>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      </ScrollArea>
+
+                      {form.formState.errors.trainingSession?.athleteIds && (
+                        <div className="px-3 py-2 text-sm text-destructive">
+                          {form.formState.errors.trainingSession.athleteIds.message}
+                        </div>
+                      )}
+                    </div>
+                  </FormItem>
                 </div>
               )}
-            </div>
-          </FormItem>
+            </CardContent>
+          </Card>
         </div>
-      )}
+      </div>
 
-      <div className="flex justify-between">
+      {/* Boutons de navigation */}
+      <div className="flex justify-between mt-6 flex-shrink-0">
         <Button variant="outline" onClick={onCancel}>
           Annuler
         </Button>
diff --git a/apps/web/src/features/workout/workout-card.tsx b/apps/web/src/features/workout/workout-card.tsx
index c8def7a..c9a5dd8 100644
--- a/apps/web/src/features/workout/workout-card.tsx
+++ b/apps/web/src/features/workout/workout-card.tsx
@@ -3,111 +3,94 @@ import { Button } from '@/shared/components/ui/button';
 import {
   Card,
   CardContent,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/shared/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@/shared/components/ui/dropdown-menu';
-import { WORKOUT_ELEMENT_TYPES, WorkoutDto } from '@dropit/schemas';
-import { MoreHorizontal } from 'lucide-react';
+import { WORKOUT_ELEMENT_TYPES, WorkoutDto, TrainingSessionDto } from '@dropit/schemas';
+import { getCategoryBadgeVariant } from '@/shared/utils';
+import { Separator } from '@/shared/components/ui/separator';
 
 interface WorkoutCardProps {
   workout: WorkoutDto;
+  trainingSessions: TrainingSessionDto[];
   onWorkoutClick: (id: string) => void;
 }
 
-export function WorkoutCard({ workout, onWorkoutClick }: WorkoutCardProps) {
+export function WorkoutCard({ workout, trainingSessions, onWorkoutClick }: WorkoutCardProps) {
   return (
     <Card
-      key={workout.id}
-      className="cursor-pointer hover:shadow-lg transition-shadow"
+      className="cursor-pointer shadow-none hover:shadow-md transition-shadow rounded-md flex flex-col" 
       onClick={() => onWorkoutClick(workout.id)}
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <div className="flex items-center gap-2">
-          <CardTitle className="text-sm font-medium">{workout.title}</CardTitle>
-          <Badge variant="outline" className="h-6">
-            {workout.workoutCategory}
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
+        <CardTitle className="text-sm font-bold">{workout.title}</CardTitle>
+        <Badge 
+            variant="outline"
+            className={`text-xs font-medium ${getCategoryBadgeVariant(workout.workoutCategory || '')}`}
+          >
+            {workout.workoutCategory || 'Sans catégorie'}
           </Badge>
-        </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem>Voir les détails</DropdownMenuItem>
-            <DropdownMenuItem>Modifier</DropdownMenuItem>
-            <DropdownMenuItem>Supprimer</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          {workout.elements.map((element) => (
-            <div
-              key={element.id}
-              className="flex items-start gap-2 text-sm bg-muted/30 rounded-lg p-3"
-            >
-              {element.type === WORKOUT_ELEMENT_TYPES.EXERCISE ? (
-                <div className="flex flex-col gap-1 w-full">
+      <CardContent className="space-y-4">
+        {workout.elements.map((element) => {
+          const isExercise = element.type === WORKOUT_ELEMENT_TYPES.EXERCISE;
+          const categoryName = isExercise
+            ? element.exercise.exerciseCategory?.name
+            : element.complex.complexCategory?.name;
+
+          return (
+            <div key={element.id} className="space-y-1">
+              <div className="flex items-baseline gap-2">
+                <span className="text-xs text-foreground">
+                  {element.type.toUpperCase()}
+                </span>
+                {categoryName && (
                   <div className="flex items-center gap-2">
-                    <Badge
-                      variant="secondary"
-                      className="h-6 min-w-[24px] flex items-center justify-center"
-                    >
-                      {element.sets}
-                    </Badge>
-                    <span className="font-medium">{element.exercise.name}</span>
+                    <span className="text-muted-foreground">•</span>
+                    <span className="text-xs text-foreground">
+                      {categoryName}
+                    </span>
                   </div>
-                  <p className="text-xs text-muted-foreground ml-9">
-                    {element.sets} séries à {element.startWeight_percent}%
-                  </p>
-                </div>
+                )}
+              </div>
+              {/* Contenu */}
+              {isExercise ? (
+                <Badge variant="secondary" className="text-xs font-normal">
+                  {element.exercise.name}
+                </Badge>
               ) : (
-                <div className="flex flex-col gap-2 w-full">
-                  <div className="flex items-center gap-2">
-                    <Badge
-                      variant="secondary"
-                      className="h-6 min-w-[24px] flex items-center justify-center"
-                    >
-                      {element.sets}
+                <div className="flex flex-wrap gap-1">
+                  {element.complex.exercises?.map((ex) => (
+                    <Badge key={ex.name} variant="secondary" className="text-xs font-normal">
+                      {ex.name}
                     </Badge>
-                    <span className="font-medium">{element.complex.complexCategory?.name || 'Complex'}</span>
-                  </div>
-                  <p className="text-xs text-muted-foreground ml-9">
-                    {element.sets} séries à {element.startWeight_percent}%
-                  </p>
-                  <div className="ml-9 space-y-2">
-                    {element.complex.exercises.map((ex) => (
-                      <div
-                        key={ex.id}
-                        className="flex items-center gap-2 bg-muted/50 rounded-md p-2"
-                      >
-                        <Badge
-                          variant="outline"
-                          className="h-5 min-w-[20px] flex items-center justify-center bg-background"
-                        >
-                          {ex.reps}
-                        </Badge>
-                        <div className="text-xs">{ex.name}</div>
-                      </div>
-                    ))}
-                  </div>
+                  ))}
                 </div>
               )}
             </div>
-          ))}
-        </div>
+          );
+        })}
       </CardContent>
+      <CardFooter className="gap-2 flex flex-col justify-end h-full">
+        <div className="flex items-center justify-end w-full">
+          <span className="text-xs text-muted-foreground">
+            {trainingSessions.length > 0 
+              ? `${trainingSessions.length} session${trainingSessions.length > 1 ? 's' : ''} planifiée${trainingSessions.length > 1 ? 's' : ''}`
+              : 'Non planifié'
+            }
+          </span>
+        </div>
+        <Separator className="my-2" />
+        <div className='flex gap-2 w-full'>
+          <Button variant="outline" size="sm" className="flex-1">
+            Voir les détails
+          </Button>
+          <Button variant="default" size="sm" className="flex-1">
+            Planifier
+          </Button>
+        </div>
+      </CardFooter>
     </Card>
   );
 }
diff --git a/apps/web/src/features/workout/workout-filters.tsx b/apps/web/src/features/workout/workout-filters.tsx
index 9405961..b0ac1bd 100644
--- a/apps/web/src/features/workout/workout-filters.tsx
+++ b/apps/web/src/features/workout/workout-filters.tsx
@@ -10,6 +10,7 @@ import {
 import { Separator } from '@/shared/components/ui/separator';
 import { WorkoutCategoryDto } from '@dropit/schemas';
 import { useTranslation } from '@dropit/i18n';
+import { Search } from 'lucide-react';
 
 interface WorkoutFiltersProps {
   onFilterChange: (value: string) => void;
@@ -29,31 +30,37 @@ export function WorkoutFilters({
   const { t } = useTranslation();
 
   return (
-    <div className="flex justify-between items-center py-4">
-      <Input
-        placeholder={t('workout.filters.search_placeholder')}
-        onChange={(e) => onFilterChange(e.target.value)}
-        className="max-w-xs"
-        disabled={disabled}
-      />
-      <div className="flex items-center gap-2">
-        <Select onValueChange={onCategoryChange} defaultValue="all">
-          <SelectTrigger className="w-fit bg-card font-medium">
-            <SelectValue placeholder={t('workout.filters.all_categories')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('workout.filters.all_categories')}</SelectItem>
-            {categories?.map((category) => (
-              <SelectItem key={category.id} value={category.id}>
-                {category.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Separator orientation="vertical" className="h-6" />
-        <Button onClick={onCreateClick} disabled={disabled}>
-          {t('workout.filters.create_workout')}
-        </Button>
+    <div className="flex justify-between items-center">
+      <div className="flex items-center w-full justify-between pb-6">
+        {/* Search */}
+        <div className="relative w-full">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={t('workout.filters.search_placeholder')}
+            onChange={(e) => onFilterChange(e.target.value)}
+            className="pl-8 bg-sidebar max-w-lg"
+            disabled={disabled}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select onValueChange={onCategoryChange} defaultValue="all">
+            <SelectTrigger className="w-fit bg-card font-medium">
+              <SelectValue placeholder={t('workout.filters.all_categories')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('workout.filters.all_categories')}</SelectItem>
+              {categories?.map((category) => (
+                <SelectItem key={category.id} value={category.id}>
+                  {category.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Separator orientation="vertical" className="h-6" />
+          <Button onClick={onCreateClick} disabled={disabled}>
+            {t('workout.filters.create_workout')}
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/features/workout/workout-grid.tsx b/apps/web/src/features/workout/workout-grid.tsx
index 745982d..dd6c84b 100644
--- a/apps/web/src/features/workout/workout-grid.tsx
+++ b/apps/web/src/features/workout/workout-grid.tsx
@@ -1,21 +1,29 @@
-import { WorkoutDto } from '@dropit/schemas';
+import { WorkoutDto, TrainingSessionDto } from '@dropit/schemas';
 import { WorkoutCard } from './workout-card';
 
 interface WorkoutGridProps {
   workouts: WorkoutDto[];
+  trainingSessions: TrainingSessionDto[];
   onWorkoutClick: (id: string) => void;
 }
 
-export function WorkoutGrid({ workouts, onWorkoutClick }: WorkoutGridProps) {
+export function WorkoutGrid({ workouts, trainingSessions, onWorkoutClick }: WorkoutGridProps) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {workouts.map((workout) => (
-        <WorkoutCard
-          key={workout.id}
-          workout={workout}
-          onWorkoutClick={() => onWorkoutClick(workout.id)}
-        />
-      ))}
+      {workouts.map((workout) => {
+        const workoutSessions = trainingSessions.filter(
+          session => session.workout.id === workout.id
+        );
+        
+        return (
+          <WorkoutCard
+            key={workout.id}
+            workout={workout}
+            trainingSessions={workoutSessions}
+            onWorkoutClick={() => onWorkoutClick(workout.id)}
+          />
+        );
+      })}
     </div>
   );
 }
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index a825724..2769e61 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 @layer base {
   :root {
-    --background: 0 0% 98%;
+    --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
@@ -29,7 +29,7 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem
   ;
-    --sidebar-background: 0 0% 100%;
+    --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
diff --git a/apps/web/src/routes/__home.dashboard.tsx b/apps/web/src/routes/__home.dashboard.tsx
index bf2d815..ee91292 100644
--- a/apps/web/src/routes/__home.dashboard.tsx
+++ b/apps/web/src/routes/__home.dashboard.tsx
@@ -1,9 +1,139 @@
 import { createFileRoute } from '@tanstack/react-router';
+import { useTranslation } from '@dropit/i18n';
+import { HeaderPage } from '../shared/components/layout/header-page';
+import { Card, CardContent, CardHeader, CardTitle } from '../shared/components/ui/card';
+import { Button } from '../shared/components/ui/button';
+import { Badge } from '../shared/components/ui/badge';
+import { Users, Calendar, Dumbbell, TrendingUp, Plus, UserPlus, CalendarPlus, ChevronRight } from 'lucide-react';
 
 export const Route = createFileRoute('/__home/dashboard')({
   component: Dashboard,
 });
 
 function Dashboard() {
-  return <div>Hello "/dashboard"!</div>;
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative flex-1">
+      <HeaderPage
+        title={t('dashboard.title')}
+        description={t('dashboard.description')}
+      />
+
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Athlètes actifs
+              </CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">24</div>
+              <p className="text-xs text-green-600 flex items-center gap-1">
+                +2 ce mois
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Séances prévues
+              </CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">156</div>
+              <p className="text-xs text-blue-600 flex items-center gap-1">
+                12 aujourd'hui
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Exercices disponibles
+              </CardTitle>
+              <Dumbbell className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">89</div>
+              <p className="text-xs text-green-600 flex items-center gap-1">
+                +5 récents
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Taux de participation
+              </CardTitle>
+              <TrendingUp className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">94%</div>
+              <p className="text-xs text-green-600 flex items-center gap-1">
+                +3% ce mois
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Actions rapides</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Button className="w-full justify-start" variant="outline">
+                <Plus className="h-4 w-4 mr-2" />
+                Créer une nouvelle séance
+                <ChevronRight className="h-4 w-4 ml-auto" />
+              </Button>
+              <Button className="w-full justify-start" variant="outline">
+                <UserPlus className="h-4 w-4 mr-2" />
+                Ajouter un athlète
+                <ChevronRight className="h-4 w-4 ml-auto" />
+              </Button>
+              <Button className="w-full justify-start" variant="outline">
+                <CalendarPlus className="h-4 w-4 mr-2" />
+                Planifier un entrainement
+                <ChevronRight className="h-4 w-4 ml-auto" />
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Séances d'aujourd'hui</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <p className="font-medium">Groupe Elite - Force</p>
+                  <p className="text-sm text-muted-foreground">9:00 - 10:30</p>
+                </div>
+                <Badge variant="default" className="bg-green-100 text-green-800 hover:bg-green-100">
+                  En cours
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <p className="font-medium">Formation junior</p>
+                  <p className="text-sm text-muted-foreground">14:00 - 15:30</p>
+                </div>
+                <Badge variant="secondary">
+                  Planifiée
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/apps/web/src/routes/__home.planning.tsx b/apps/web/src/routes/__home.planning.tsx
index 2f49fb5..bf710cd 100644
--- a/apps/web/src/routes/__home.planning.tsx
+++ b/apps/web/src/routes/__home.planning.tsx
@@ -153,13 +153,11 @@ function PlanningPage() {
     <div className="relative flex-1">
       <HeaderPage title={t('title')} description={t('description')} />
 
-      <div className="bg-white rounded-lg shadow p-4">
-        <PlanningCalendar
-          initialEvents={calendarEvents}
-          onDateClick={handleDateClick}
-          onEventClick={handleEventClick}
-        />
-      </div>
+      <PlanningCalendar
+        initialEvents={calendarEvents}
+        onDateClick={handleDateClick}
+        onEventClick={handleEventClick}
+      />
 
 
       <TrainingSessionDetailPopover
diff --git a/apps/web/src/routes/__home.programs.complex.tsx b/apps/web/src/routes/__home.programs.complex.tsx
index ecc0140..338bb25 100644
--- a/apps/web/src/routes/__home.programs.complex.tsx
+++ b/apps/web/src/routes/__home.programs.complex.tsx
@@ -72,7 +72,7 @@ function ComplexPage() {
     <div className="relative flex-1">
       <div
         className={`transition-all duration-200 ${
-          selectedComplex ? 'mr-[400px]' : ''
+          selectedComplex ? 'lg:mr-[430px]' : ''
         }`}
       >
         <ComplexFilters
diff --git a/apps/web/src/routes/__home.programs.exercises.tsx b/apps/web/src/routes/__home.programs.exercises.tsx
index 0d1db37..ad2cb69 100644
--- a/apps/web/src/routes/__home.programs.exercises.tsx
+++ b/apps/web/src/routes/__home.programs.exercises.tsx
@@ -56,7 +56,7 @@ function ExercisesPage() {
     <div className="relative flex-1">
       <div
         className={`transition-all duration-200 ${
-          selectedExercise ? 'mr-[400px]' : ''
+          selectedExercise ? 'lg:mr-[430px]' : ''
         }`}
       >
         {exercisesLoading ? (
diff --git a/apps/web/src/routes/__home.programs.workouts.tsx b/apps/web/src/routes/__home.programs.workouts.tsx
index 187682d..a9a3d90 100644
--- a/apps/web/src/routes/__home.programs.workouts.tsx
+++ b/apps/web/src/routes/__home.programs.workouts.tsx
@@ -39,6 +39,15 @@ function WorkoutPage() {
     },
   });
 
+  const { data: trainingSessions } = useQuery({
+    queryKey: ['trainingSessions'],
+    queryFn: async () => {
+      const response = await api.trainingSession.getTrainingSessions();
+      if (response.status !== 200) throw new Error('Failed to load training sessions');
+      return response.body;
+    },
+  });
+
   const filteredWorkouts = workouts?.filter((workout) => {
     const matchesSearch = workout.title
       .toLowerCase()
@@ -74,7 +83,7 @@ function WorkoutPage() {
         />
       </div>
 
-      <div className="flex-1 h-full">
+      <div className="flex-1 flex flex-col min-h-0">
         {isLoading ? (
           <div className="flex items-center justify-center h-32">
             {t('common.loading')}
@@ -85,11 +94,14 @@ function WorkoutPage() {
             <p className="text-sm">{t('common.start_create')}</p>
           </div>
         ) : (
-          <div className="flex-1 overflow-auto h-full">
-            <WorkoutGrid
-              workouts={filteredWorkouts || []}
-              onWorkoutClick={handleWorkoutClick}
-            />
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="pb-8">
+              <WorkoutGrid
+                workouts={filteredWorkouts || []}
+                trainingSessions={trainingSessions || []}
+                onWorkoutClick={handleWorkoutClick}
+              />
+            </div>
           </div>
         )}
       </div>
diff --git a/apps/web/src/routes/__home.tsx b/apps/web/src/routes/__home.tsx
index edbdfa3..2d226d6 100644
--- a/apps/web/src/routes/__home.tsx
+++ b/apps/web/src/routes/__home.tsx
@@ -54,7 +54,7 @@ function HomeLayout() {
               <Separator orientation="vertical" className="h-6" />
               <Breadcrumbs />
             </div>
-            <div className="px-4 pt-10 pb-4 flex-1 min-h-0 overflow-hidden">
+            <div className="px-4 pt-6 pb-4 flex-1 min-h-0 overflow-hidden">
               <Outlet />
             </div>
           </div>
diff --git a/apps/web/src/shared/components/layout/app-sidebar.tsx b/apps/web/src/shared/components/layout/app-sidebar.tsx
index aaca593..ddcf949 100644
--- a/apps/web/src/shared/components/layout/app-sidebar.tsx
+++ b/apps/web/src/shared/components/layout/app-sidebar.tsx
@@ -6,6 +6,7 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/components/ui/dropdown-menu';
 import { Separator } from '@/shared/components/ui/separator';
+import { Avatar, AvatarFallback } from '@/shared/components/ui/avatar';
 import {
   Sidebar,
   SidebarContent,
@@ -30,21 +31,23 @@ import {
   Home,
   LayoutDashboard,
   LifeBuoy,
-  User,
 } from 'lucide-react';
-import { useEffect, useState } from 'react';
 
 export function AppSidebar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const matches = useMatches();
-  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const { data: session } = authClient.useSession();
 
-  useEffect(() => {
-    // Récupérer l'email de l'utilisateur depuis le localStorage
-    const email = localStorage.getItem('user_email');
-    setUserEmail(email);
-  }, []);
+  // Function to get user initials from name
+  const getUserInitials = (name?: string) => {
+    if (!name) return 'U';
+    const names = name.trim().split(' ');
+    if (names.length === 1) {
+      return names[0].charAt(0).toUpperCase();
+    }
+    return names[0].charAt(0).toUpperCase() + names[names.length - 1].charAt(0).toUpperCase();
+  };
 
   const handleLogout = async () => {
     try {
@@ -148,11 +151,11 @@ export function AppSidebar() {
                   <SidebarMenuItem key={item.title}>
                     <SidebarMenuButton 
                       asChild
-                      className={isActive ? 'bg-blue-50 text-blue-600 hover:bg-blue-100' : ''}
+                      className={isActive ? 'bg-white text-gray-900 hover:bg-gray-50 rounded-lg shadow-sm border border-gray-200' : 'hover:bg-gray-100'}
                     >
                       <Link to={item.url} className="flex items-center gap-2">
-                        <item.icon className={`h-4 w-4 ${isActive ? 'text-blue-600' : ''}`} />
-                        <span className={isActive ? 'text-blue-600 font-medium' : ''}>
+                        <item.icon className={`h-4 w-4 ${isActive ? 'text-gray-700' : ''}`} />
+                        <span className={isActive ? 'text-gray-900 font-medium' : ''}>
                           {item.title}
                         </span>
                       </Link>
@@ -170,9 +173,21 @@ export function AppSidebar() {
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <SidebarMenuButton>
-                  <User /> {userEmail || 'User'}
-                  <ChevronUp className="ml-auto" />
+                <SidebarMenuButton className="h-12 px-2">
+                  <Avatar className="h-8 w-8">
+                    <AvatarFallback className="bg-white text-sm font-medium flex items-center justify-center">
+                      {getUserInitials(session?.user?.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col items-start min-w-0 flex-1">
+                    <span className="text-sm font-medium truncate">
+                      {session?.user?.name || 'User'}
+                    </span>
+                    <span className="text-xs text-muted-foreground truncate">
+                      {session?.user?.email || 'user@example.com'}
+                    </span>
+                  </div>
+                  <ChevronUp className="h-4 w-4 shrink-0" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
diff --git a/apps/web/src/shared/components/ui/details-panel.tsx b/apps/web/src/shared/components/ui/details-panel.tsx
index dce7bf0..d13d5fb 100644
--- a/apps/web/src/shared/components/ui/details-panel.tsx
+++ b/apps/web/src/shared/components/ui/details-panel.tsx
@@ -18,13 +18,37 @@ export function DetailsPanel({
   className,
 }: DetailsPanelProps) {
   return (
-    <div
-      className={cn(
-        'fixed inset-y-0 right-0 z-20 flex bg-card border-l w-[430px] transform transition-transform duration-200 ease-in-out',
-        !open && 'translate-x-full',
-        className
+    <>
+      {/* Mobile overlay */}
+      {open && (
+        <div
+          className="fixed inset-0 bg-black/50 z-10 lg:hidden"
+          onClick={onClose}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onClose?.();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          aria-label="Fermer le panneau"
+        />
       )}
-    >
+      
+      {/* Panel */}
+      <div
+        className={cn(
+          // Desktop: side panel
+          'fixed inset-y-0 right-0 z-20 flex bg-sidebar border-l transform transition-transform duration-200 ease-in-out',
+          'lg:w-[430px]',
+          !open && 'translate-x-full',
+          // Mobile: full width drawer from bottom
+          'lg:translate-y-0 w-full lg:inset-y-0 lg:right-0',
+          'max-lg:inset-x-0 max-lg:bottom-0 max-lg:top-16 max-lg:rounded-t-xl max-lg:border-t max-lg:border-l-0',
+          className
+        )}
+      >
       <div className="flex flex-col w-full h-full px-8 py-2">
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">{title}</h2>
@@ -36,5 +60,6 @@ export function DetailsPanel({
         <div className="flex-1 overflow-auto pt-4">{children}</div>
       </div>
     </div>
+    </>
   );
 }
diff --git a/apps/web/src/shared/components/ui/steps.tsx b/apps/web/src/shared/components/ui/steps.tsx
index 1746baf..4599d9d 100644
--- a/apps/web/src/shared/components/ui/steps.tsx
+++ b/apps/web/src/shared/components/ui/steps.tsx
@@ -15,7 +15,7 @@ interface StepsProps {
 
 export function Steps({ steps, currentStep, onStepClick }: StepsProps) {
   return (
-    <div className="bg-white rounded-lg border shadow-sm">
+    <div className="bg-sidebar rounded-lg border shadow-sm">
       <nav aria-label="Progress" className="w-full p-6">
         <div className="flex items-center justify-between">
           {steps.map((step, index) => (
diff --git a/apps/web/src/shared/utils.ts b/apps/web/src/shared/utils.ts
new file mode 100644
index 0000000..12abfde
--- /dev/null
+++ b/apps/web/src/shared/utils.ts
@@ -0,0 +1,20 @@
+export const getCategoryBadgeVariant = (categoryName: string) => {
+
+    const colorVariants = [
+      'bg-yellow-100 text-yellow-800 hover:bg-yellow-100 rounded-sm shadow-none',
+      'bg-green-100 text-green-800 hover:bg-green-100 rounded-sm shadow-none', 
+      'bg-red-100 text-red-800 hover:bg-red-100 rounded-sm shadow-none',
+      'bg-blue-100 text-blue-800 hover:bg-blue-100 rounded-sm shadow-none',
+      'bg-orange-100 text-orange-800 hover:bg-orange-100 rounded-sm shadow-none',
+      'bg-purple-100 text-purple-800 hover:bg-purple-100 rounded-sm shadow-none',
+      'bg-pink-100 text-pink-800 hover:bg-pink-100 rounded-sm shadow-none',
+    ];
+  
+     // Hash simple basé sur les caractères du nom
+     let hash = 0;
+     for (let i = 0; i < categoryName.length; i++) {
+       hash = ((hash << 5) - hash + categoryName.charCodeAt(i)) & 0xffffffff;
+     }
+     
+     return colorVariants[Math.abs(hash) % colorVariants.length];
+  };
\ No newline at end of file
diff --git a/packages/i18n/src/locales/en/common.json b/packages/i18n/src/locales/en/common.json
index ff24fdf..26110b0 100644
--- a/packages/i18n/src/locales/en/common.json
+++ b/packages/i18n/src/locales/en/common.json
@@ -101,6 +101,10 @@
       "selected_rows": "{{count}} of {{total}} column(s) selected."
     }
   },
+  "dashboard": {
+    "title": "Dashboard",
+    "description": "Overview of your coaching activity"
+  },
   "organization": {
     "setup": {
       "title": "Create Your Organization",
diff --git a/packages/i18n/src/locales/en/planning.json b/packages/i18n/src/locales/en/planning.json
index 2bf2f89..cf24edd 100644
--- a/packages/i18n/src/locales/en/planning.json
+++ b/packages/i18n/src/locales/en/planning.json
@@ -4,6 +4,10 @@
   "eventMoved": "Workout moved",
   "eventMovedDescription": "The workout has been rescheduled",
   "createWorkout": "Create Workout",
+  "today": "Today",
+  "month": "Month",
+  "week": "Week",
+  "year": "Year",
   "calendar": {
     "no_events": "No workouts planned",
     "drag_info": "Drag workouts to reschedule",
diff --git a/packages/i18n/src/locales/fr/common.json b/packages/i18n/src/locales/fr/common.json
index 45ea51d..d4ea77c 100644
--- a/packages/i18n/src/locales/fr/common.json
+++ b/packages/i18n/src/locales/fr/common.json
@@ -100,5 +100,9 @@
       "columns": "Colonnes",
       "selected_rows": "{{count}} sur {{total}} ligne(s) sélectionnée(s)"
     }
+  },
+  "dashboard": {
+    "title": "Tableau de bord",
+    "description": "Vue d'ensemble de votre activité coaching"
   }
 }
diff --git a/packages/i18n/src/locales/fr/planning.json b/packages/i18n/src/locales/fr/planning.json
index b1d82fb..418a6df 100644
--- a/packages/i18n/src/locales/fr/planning.json
+++ b/packages/i18n/src/locales/fr/planning.json
@@ -4,6 +4,10 @@
   "eventMoved": "Entraînement déplacé",
   "eventMovedDescription": "L'entraînement a été replanifié",
   "createWorkout": "Créer un entraînement",
+  "today": "Aujourd'hui",
+  "month": "Mois",
+  "week": "Semaine",
+  "year": "Année",
   "calendar": {
     "no_events": "Aucun entraînement planifié",
     "drag_info": "Déplacez les entraînements pour les replanifier",