diff --git a/apps/api/src/modules/training/application/use-cases/complex.use-cases.ts b/apps/api/src/modules/training/application/use-cases/complex.use-cases.ts
index 4b8abec..374c265 100644
--- a/apps/api/src/modules/training/application/use-cases/complex.use-cases.ts
+++ b/apps/api/src/modules/training/application/use-cases/complex.use-cases.ts
@@ -94,9 +94,6 @@ export class ComplexUseCase {
       }
 
       // 2. Validate the data
-      if (!data.name) {
-        throw new BadRequestException('Complex name is required');
-      }
       if (!data.exercises) {
         throw new BadRequestException('Exercises are required');
       }
@@ -114,7 +111,6 @@ export class ComplexUseCase {
 
       // 5. Create the complex
       const complex = new Complex();
-      complex.name = data.name;
       complex.complexCategory = complexCategory;
       complex.description = data.description || '';
 
@@ -144,16 +140,16 @@ export class ComplexUseCase {
       await this.complexRepository.save(complex);
 
       // 9. Get the created complex
-      const created = await this.complexRepository.getOne(complex.id, coachFilterConditions);
-      if (!created) {
+      const complexCreated = await this.complexRepository.getOne(complex.id, coachFilterConditions);
+      if (!complexCreated) {
         throw new NotFoundException('Complex not found');
       }
 
       // 10. Map the complex
-      const dto = ComplexMapper.toDto(created);
+      const complexDto = ComplexMapper.toDto(complexCreated);
 
       // 11. Present the complex
-      return ComplexPresenter.presentOne(dto);
+      return ComplexPresenter.presentCreationSuccess(complexDto);
     } catch (error) {
       return ComplexPresenter.presentCreationError(error as Error);
     }
@@ -177,10 +173,6 @@ export class ComplexUseCase {
       }
 
       // 4. Update the complex properties
-      if (data.name) {
-        complexToUpdate.name = data.name;
-      }
-
       if (data.description !== undefined) {
         complexToUpdate.description = data.description;
       }
diff --git a/apps/api/src/modules/training/application/use-cases/exercise.use-cases.ts b/apps/api/src/modules/training/application/use-cases/exercise.use-cases.ts
index 8f8aae2..4773852 100644
--- a/apps/api/src/modules/training/application/use-cases/exercise.use-cases.ts
+++ b/apps/api/src/modules/training/application/use-cases/exercise.use-cases.ts
@@ -169,7 +169,7 @@ export class ExerciseUseCase {
       const exerciseDto = ExerciseMapper.toDto(createdExercise);
 
       //7. Return exercise
-      return ExercisePresenter.presentOne(exerciseDto);
+      return ExercisePresenter.presentCreationSuccess(exerciseDto);
     } catch (error) {
       return ExercisePresenter.presentCreationError(error as Error);
     }
diff --git a/apps/api/src/modules/training/domain/complex.entity.ts b/apps/api/src/modules/training/domain/complex.entity.ts
index ca79b84..086bc9e 100644
--- a/apps/api/src/modules/training/domain/complex.entity.ts
+++ b/apps/api/src/modules/training/domain/complex.entity.ts
@@ -24,9 +24,6 @@ export class Complex {
   )
   exercises = new Collection<ExerciseComplex>(this);
 
-  @Property()
-  name!: string;
-
   @Property({ nullable: true })
   description?: string;
 
diff --git a/apps/api/src/modules/training/interface/mappers/complex.mapper.ts b/apps/api/src/modules/training/interface/mappers/complex.mapper.ts
index d4fbce9..7ea90c7 100644
--- a/apps/api/src/modules/training/interface/mappers/complex.mapper.ts
+++ b/apps/api/src/modules/training/interface/mappers/complex.mapper.ts
@@ -5,7 +5,6 @@ export const ComplexMapper = {
   toDto(complex: Complex): ComplexDto {
     return {
       id: complex.id,
-      name: complex.name,
       complexCategory: {
         id: complex.complexCategory.id,
         name: complex.complexCategory.name,
diff --git a/apps/api/src/modules/training/interface/mappers/workout.mapper.ts b/apps/api/src/modules/training/interface/mappers/workout.mapper.ts
index 4143623..cb45f7d 100644
--- a/apps/api/src/modules/training/interface/mappers/workout.mapper.ts
+++ b/apps/api/src/modules/training/interface/mappers/workout.mapper.ts
@@ -51,7 +51,6 @@ export const WorkoutMapper = {
           type: 'complex' as const,
           complex: {
             id: element.complex.id,
-            name: element.complex.name,
             description: element.complex.description,
             complexCategory: {
               id: element.complex.complexCategory.id,
diff --git a/apps/api/src/modules/training/interface/presenters/complex.presenter.ts b/apps/api/src/modules/training/interface/presenters/complex.presenter.ts
index 985a549..3a59882 100644
--- a/apps/api/src/modules/training/interface/presenters/complex.presenter.ts
+++ b/apps/api/src/modules/training/interface/presenters/complex.presenter.ts
@@ -23,10 +23,10 @@ export const ComplexPresenter = {
     };
   },
 
-  presentCreationSuccess(message: string) {
+  presentCreationSuccess(complexDto: ComplexDto) {
     return {
       status: 201 as const,
-      body: { message },
+      body: complexDto,
     };
   },
 
diff --git a/apps/api/src/modules/training/interface/presenters/exercise.presenter.ts b/apps/api/src/modules/training/interface/presenters/exercise.presenter.ts
index 9191a72..dad362d 100644
--- a/apps/api/src/modules/training/interface/presenters/exercise.presenter.ts
+++ b/apps/api/src/modules/training/interface/presenters/exercise.presenter.ts
@@ -23,10 +23,10 @@ export const ExercisePresenter = {
     };
   },
 
-  presentCreationSuccess(message: string) {
+  presentCreationSuccess(exerciseDto: ExerciseDto) {
     return {
       status: 201 as const,
-      body: { message },
+      body: exerciseDto,
     };
   },
 
diff --git a/apps/api/src/seeders/complex.seeder.ts b/apps/api/src/seeders/complex.seeder.ts
index 56c04b3..2ec4161 100644
--- a/apps/api/src/seeders/complex.seeder.ts
+++ b/apps/api/src/seeders/complex.seeder.ts
@@ -6,7 +6,7 @@ import { seedExercises } from './exercise.seeder';
 
 export async function seedComplexes(
   em: EntityManager
-): Promise<Record<string, Complex>> {
+): Promise<Complex[]> {
 
   const exercisesMap = await seedExercises(em);
 
@@ -41,7 +41,6 @@ export async function seedComplexes(
 
   const complexesToCreate = [
     {
-      name: 'EMOM Technique Arraché',
       category: 'EMOM',
       description: "Focus sur la technique de l'arraché",
       exercises: [
@@ -60,7 +59,6 @@ export async function seedComplexes(
       ],
     },
     {
-      name: 'Complex Épaulé-Jeté',
       category: 'Technique Épaulé-Jeté',
       description: "Focus sur la technique de l'épaulé-jeté",
       exercises: [
@@ -83,7 +81,6 @@ export async function seedComplexes(
       ],
     },
     {
-      name: 'TABATA Force',
       category: 'TABATA',
       description: 'Focus sur la force',
       exercises: [
@@ -102,7 +99,6 @@ export async function seedComplexes(
       ],
     },
     {
-      name: 'Technique Arraché Complet',
       category: 'Technique Arraché',
       description: "Focus sur la technique de l'arraché",
       exercises: [
@@ -121,7 +117,6 @@ export async function seedComplexes(
       ],
     },
     {
-      name: 'EMOM Épaulé',
       category: 'EMOM',
       description: "Focus sur l'épaulé",
       exercises: [
@@ -141,10 +136,9 @@ export async function seedComplexes(
     },
   ];
 
-  const complexesMap: Record<string, Complex> = {};
+  const complexesCreated: Complex[] = [];
   for (const complexData of complexesToCreate) {
     const complex = new Complex();
-    complex.name = complexData.name;
     complex.description = complexData.description;
     complex.complexCategory = complexCategoriesMap[complexData.category];
     complex.createdBy = null;
@@ -163,9 +157,9 @@ export async function seedComplexes(
       await em.persistAndFlush(exerciseComplex);
     }
 
-    console.log('Complex created:', complex.name);
-    complexesMap[complex.name] = complex;
+    console.log('Complex created:', complex);
+    complexesCreated.push(complex);
   }
 
-  return complexesMap;
+  return complexesCreated;
 }
diff --git a/apps/api/src/seeders/workout.seeder.ts b/apps/api/src/seeders/workout.seeder.ts
index d7de2d5..8c001f2 100644
--- a/apps/api/src/seeders/workout.seeder.ts
+++ b/apps/api/src/seeders/workout.seeder.ts
@@ -9,7 +9,8 @@ import { seedComplexes } from './complex.seeder';
 
 export async function seedWorkouts(em: EntityManager): Promise<void> {
 
-  const complexesMap = await seedComplexes(em);
+  // Creation of complexes and their categories
+  const complexes = await seedComplexes(em);
 
   // Exercises are already created by seedComplexes
   const exercisesMap: Record<string, Exercise> = {};
@@ -53,7 +54,7 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
       elements: [
         {
           type: WORKOUT_ELEMENT_TYPES.COMPLEX,
-          id: 'EMOM Technique Arraché', // EMOM Technique Arraché
+          complexIndex: 0, // Premier complex créé (EMOM Technique Arraché)
           order: 0,
           sets: 4,
           reps: 1,
@@ -72,7 +73,7 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
         },
         {
           type: WORKOUT_ELEMENT_TYPES.COMPLEX,
-          id: 'Complex Épaulé-Jeté', // Complex Épaulé-Jeté
+          complexIndex: 1, // Deuxième complex créé (Complex Épaulé-Jeté)
           order: 2,
           sets: 3,
           reps: 1,
@@ -97,7 +98,7 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
       elements: [
         {
           type: WORKOUT_ELEMENT_TYPES.COMPLEX,
-          id: 'Technique Arraché Complet', // Technique Arraché Complet
+          complexIndex: 3, // Quatrième complex créé (Technique Arraché Complet)
           order: 0,
           sets: 3,
           reps: 2,
@@ -115,7 +116,7 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
         },
         {
           type: WORKOUT_ELEMENT_TYPES.COMPLEX,
-          id: 'EMOM Épaulé', // EMOM Épaulé
+          complexIndex: 4, // Cinquième complex créé (EMOM Épaulé)
           order: 2,
           sets: 3,
           reps: 2,
@@ -140,7 +141,7 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
       elements: [
         {
           type: WORKOUT_ELEMENT_TYPES.COMPLEX,
-          id: 'TABATA Force', // TABATA Force
+          complexIndex: 2, // Troisième complex créé (TABATA Force)
           order: 0,
           sets: 4,
           reps: 1,
@@ -194,18 +195,16 @@ export async function seedWorkouts(em: EntityManager): Promise<void> {
           continue;
         }
       } else {
-        // Trouver le complex par son nom
-        const complex = await em.findOne(Complex, {
-          name: element.id,
-        });
+        // Utiliser l'index du complex
+        const complex = complexes[element.complexIndex];
         if (!complex) {
-          console.warn(`Complex ${element.id} not found, skipping element`);
+          console.warn(`Complex at index ${element.complexIndex} not found, skipping element`);
           continue;
         }
         workoutElement.complex = complex;
       }
 
-      em.persist(workoutElement);
+      await em.persistAndFlush(workoutElement);
     }
 
     console.log('Workout created:', workout.title);
diff --git a/apps/api/src/test/complex.integration.spec.ts b/apps/api/src/test/complex.integration.spec.ts
index 1d97ae0..0bbcecb 100644
--- a/apps/api/src/test/complex.integration.spec.ts
+++ b/apps/api/src/test/complex.integration.spec.ts
@@ -85,7 +85,7 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
       exerciseCategory: exerciseCategory.id,
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise1Result.status !== 200 || exercise2Result.status !== 200 || exercise3Result.status !== 200) {
+    if (exercise1Result.status !== 201 || exercise2Result.status !== 201 || exercise3Result.status !== 201) {
       throw new Error('Failed to create exercises');
     }
 
@@ -100,7 +100,6 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
     // Test 2: Créer un complex via use case
     console.log('🧪 Testing complex creation via use case...');
     const complex1Result = await complexUseCase.create({
-      name: 'Arraché simple',
       complexCategory: complexCategory.id,
       exercises: [
         {
@@ -122,7 +121,7 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
       description: 'Pour monter en gamme tranquillement',
     }, testData.organization.id, testData.adminUser.id);
 
-    if (complex1Result.status !== 200) {
+    if (complex1Result.status !== 201) {
       throw new Error(`Failed to create complex: ${complex1Result.body.message}`);
     }
 
@@ -130,7 +129,6 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
 
     expect(complex1).toBeDefined();
     expect(complex1.id).toBeDefined();
-    expect(complex1.name).toBe('Arraché simple');
     expect(complex1.exercises).toHaveLength(3);
 
     // Test 3: Créer un autre complex
@@ -147,7 +145,7 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
       exerciseCategory: exerciseCategory.id,
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise4Result.status !== 200 || exercise5Result.status !== 200) {
+    if (exercise4Result.status !== 201 || exercise5Result.status !== 201) {
       throw new Error('Failed to create exercises for second complex');
     }
 
@@ -155,7 +153,6 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
     const exercise5 = exercise5Result.body;
 
     const complex2Result = await complexUseCase.create({
-      name: 'Complex Push-Pull',
       description: 'Complexe push-pull',
       complexCategory: complexCategory.id,
       exercises: [
@@ -164,14 +161,13 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
       ],
     }, testData.organization.id, testData.adminUser.id);
 
-    if (complex2Result.status !== 200) {
+    if (complex2Result.status !== 201) {
       throw new Error(`Failed to create second complex: ${complex2Result.body.message}`);
     }
 
     const complex2 = complex2Result.body;
 
     expect(complex2).toBeDefined();
-    expect(complex2.name).toBe('Complex Push-Pull');
     expect(complex2.exercises).toHaveLength(2);
 
     // Test 4: Récupérer tous les complexes via use case
@@ -195,14 +191,12 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
 
     const singleComplex = singleComplexResult.body;
     expect(singleComplex.id).toBe(complex1.id);
-    expect(singleComplex.name).toBe('Arraché simple');
 
     // Test 6: Mettre à jour un complex via use case
     console.log('🧪 Testing complex update via use case...');
     const updatedComplexResult = await complexUseCase.update(
       complex1.id,
       {
-        name: 'Arraché simple Modifié',
         description: 'Description modifiée',
       },
       testData.organization.id,
@@ -214,7 +208,6 @@ export async function runComplexTests(orm: MikroORM): Promise<void> {
     }
 
     const updatedComplex = updatedComplexResult.body;
-    expect(updatedComplex.name).toBe('Arraché simple Modifié');
     expect(updatedComplex.description).toBe('Description modifiée');
 
     // Test 7: Supprimer un complex via use case
diff --git a/apps/api/src/test/exercise.integration.spec.ts b/apps/api/src/test/exercise.integration.spec.ts
index bf3a83c..6cfa63f 100644
--- a/apps/api/src/test/exercise.integration.spec.ts
+++ b/apps/api/src/test/exercise.integration.spec.ts
@@ -55,7 +55,7 @@ export async function runExerciseTests(orm: MikroORM): Promise<void> {
       exerciseCategory: exerciseCategory.id,
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise1Result.status !== 200) {
+    if (exercise1Result.status !== 201) {
       throw new Error(`Failed to create exercise1: ${exercise1Result.body.message}`);
     }
 
@@ -71,7 +71,7 @@ export async function runExerciseTests(orm: MikroORM): Promise<void> {
       exerciseCategory: exerciseCategory.id,
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise2Result.status !== 200) {
+    if (exercise2Result.status !== 201) {
       throw new Error(`Failed to create exercise2: ${exercise2Result.body.message}`);
     }
 
@@ -87,7 +87,7 @@ export async function runExerciseTests(orm: MikroORM): Promise<void> {
       shortName: 'FS',
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise3Result.status !== 200) {
+    if (exercise3Result.status !== 201) {
       throw new Error(`Failed to create exercise3: ${exercise3Result.body.message}`);
     }
 
diff --git a/apps/api/src/test/workout.integration.spec.ts b/apps/api/src/test/workout.integration.spec.ts
index 7b63935..767ca99 100644
--- a/apps/api/src/test/workout.integration.spec.ts
+++ b/apps/api/src/test/workout.integration.spec.ts
@@ -93,7 +93,7 @@ export async function runWorkoutTests(orm: MikroORM): Promise<void> {
       exerciseCategory: exerciseCategory.id,
     }, testData.organization.id, testData.adminUser.id);
 
-    if (exercise1Result.status !== 200 || exercise2Result.status !== 200) {
+    if (exercise1Result.status !== 201 || exercise2Result.status !== 201) {
       throw new Error('Failed to create exercises');
     }
 
@@ -101,7 +101,6 @@ export async function runWorkoutTests(orm: MikroORM): Promise<void> {
     const exercise2 = exercise2Result.body;
 
     const complexResult = await complexUseCase.create({
-      name: 'Complex Test',
       complexCategory: complexCategory.id,
       exercises: [
         {
@@ -117,7 +116,7 @@ export async function runWorkoutTests(orm: MikroORM): Promise<void> {
       ],
     }, testData.organization.id, testData.adminUser.id);
 
-    if (complexResult.status !== 200) {
+    if (complexResult.status !== 201) {
       throw new Error(`Failed to create complex: ${complexResult.body.message}`);
     }
 
diff --git a/apps/web/src/features/complex/complex-card.tsx b/apps/web/src/features/complex/complex-card.tsx
index d57859f..3377fa7 100644
--- a/apps/web/src/features/complex/complex-card.tsx
+++ b/apps/web/src/features/complex/complex-card.tsx
@@ -28,7 +28,9 @@ export function ComplexCard({ complex, onClick }: ComplexCardProps) {
       onClick={onClick}
     >
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{complex.name}</CardTitle>
+        <CardTitle className="text-sm font-medium">
+          {complex.complexCategory?.name || 'Sans catégorie'}
+        </CardTitle>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="h-8 w-8 p-0">
diff --git a/apps/web/src/features/complex/complex-creation-form.tsx b/apps/web/src/features/complex/complex-creation-form.tsx
index e6bdb78..eb2d604 100644
--- a/apps/web/src/features/complex/complex-creation-form.tsx
+++ b/apps/web/src/features/complex/complex-creation-form.tsx
@@ -8,7 +8,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/shared/components/ui/form';
-import { Input } from '@/shared/components/ui/input';
 import {
   Select,
   SelectContent,
@@ -75,7 +74,7 @@ export function ComplexCreationForm({
     },
   });
 
-  const { mutate: createComplexMutation } = useMutation({
+  const { mutateAsync: createComplexMutation } = useMutation({
     mutationFn: async (data: CreateComplex) => {
       const response = await api.complex.createComplex({ body: data });
       if (response.status !== 201) {
@@ -138,10 +137,10 @@ export function ComplexCreationForm({
     setCreateCategoryModalOpen(false);
   };
 
-  const form = useForm<z.infer<typeof createComplexSchema>>({
-    resolver: zodResolver(createComplexSchema),
+  const formComplexSchema = createComplexSchema;
+  const form = useForm<z.infer<typeof formComplexSchema>>({
+    resolver: zodResolver(formComplexSchema),
     defaultValues: {
-      name: '',
       description: '',
       complexCategory: '',
       exercises: [
@@ -196,7 +195,7 @@ export function ComplexCreationForm({
     });
   };
 
-  const handleSubmit = (formValues: z.infer<typeof createComplexSchema>) => {
+  const handleSubmit = async (formValues: z.infer<typeof formComplexSchema>) => {
     if (formValues.exercises.length < 2) {
       toast({
         title: 'Erreur',
@@ -207,7 +206,7 @@ export function ComplexCreationForm({
     }
     setIsLoading(true);
     try {
-      createComplexMutation(formValues);
+      await createComplexMutation(formValues);
     } finally {
       setIsLoading(false);
     }
@@ -232,20 +231,6 @@ export function ComplexCreationForm({
         )}
         className="grid gap-4 py-4"
       >
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Nom</FormLabel>
-              <FormControl>
-                <Input placeholder="Nom du complex" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
         <FormField
           control={form.control}
           name="description"
diff --git a/apps/web/src/features/complex/complex-detail.tsx b/apps/web/src/features/complex/complex-detail.tsx
index 99a7151..3704e6e 100644
--- a/apps/web/src/features/complex/complex-detail.tsx
+++ b/apps/web/src/features/complex/complex-detail.tsx
@@ -45,7 +45,7 @@ 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 } from 'lucide-react';
+import { GripVertical, PlusCircle, Trash2, Edit } from 'lucide-react';
 import { useState } from 'react';
 import { UseFormReturn, useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -195,7 +195,6 @@ export function ComplexDetail({ complex }: ComplexDetailProps) {
   const form = useForm<z.infer<typeof updateComplexSchema>>({
     resolver: zodResolver(updateComplexSchema),
     defaultValues: {
-      name: complex.name,
       description: complex.description ?? '',
       complexCategory: complex.complexCategory.id,
       exercises: complex.exercises.map((e, index) => ({
@@ -303,20 +302,6 @@ export function ComplexDetail({ complex }: ComplexDetailProps) {
           {/* Informations principales */}
           <Card className="bg-background rounded-md shadow-none">
             <CardContent className="space-y-4 pt-6">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nom</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
               <FormField
                 control={form.control}
                 name="description"
@@ -526,16 +511,28 @@ 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-2">
-            <Label>Nom</Label>
-            <p className="text-sm">{complex.name}</p>
-          </div>
+          <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">
-            <Label>Description</Label>
-            <p className="text-sm text-muted-foreground">
-              {complex.description || 'Pas de description'}
-            </p>
+            <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>
diff --git a/apps/web/src/features/exercises/exercise-creation-form.tsx b/apps/web/src/features/exercises/exercise-creation-form.tsx
index 082e62b..c209e81 100644
--- a/apps/web/src/features/exercises/exercise-creation-form.tsx
+++ b/apps/web/src/features/exercises/exercise-creation-form.tsx
@@ -47,7 +47,7 @@ export function ExerciseCreationForm({
     },
   });
 
-  const { mutate: createExerciseMutation } = useMutation({
+  const { mutateAsync: createExerciseMutation } = useMutation({
     mutationFn: async (data: CreateExercise) => {
       const response = await api.exercise.createExercise({ body: data });
       if (response.status !== 201) {
@@ -56,6 +56,7 @@ export function ExerciseCreationForm({
       return response.body;
     },
     onSuccess: (data) => {
+      console.log('Exercice créé avec succès:', data);
       toast({
         title: 'Exercice créé avec succès',
         description: "L'exercice a été créé avec succès",
@@ -71,11 +72,11 @@ export function ExerciseCreationForm({
     },
   });
 
-  const handleSubmit = (formValues: z.infer<typeof formExerciseSchema>) => {
+  const handleSubmit = async (formValues: z.infer<typeof formExerciseSchema>) => {
     setIsLoading(true);
 
     try {
-      createExerciseMutation(formValues);
+      await createExerciseMutation(formValues);
     } finally {
       setIsLoading(false);
     }
diff --git a/apps/web/src/features/planning/training-session-detail.tsx b/apps/web/src/features/planning/training-session-detail.tsx
index 1801bcf..81209e8 100644
--- a/apps/web/src/features/planning/training-session-detail.tsx
+++ b/apps/web/src/features/planning/training-session-detail.tsx
@@ -205,7 +205,7 @@ export function TrainingSessionDetail({
                     {element.type === WORKOUT_ELEMENT_TYPES.EXERCISE ? (
                       <div className="font-medium">{element.exercise.name}</div>
                     ) : (
-                      <div className="font-medium">{element.complex.name}</div>
+                      <div className="font-medium">{element.complex.complexCategory?.name || 'Complex'}</div>
                     )}
 
                     <div className="flex flex-wrap gap-1 mt-1">
diff --git a/apps/web/src/features/workout/sortable-workout-element.tsx b/apps/web/src/features/workout/sortable-workout-element.tsx
index b276d2e..fd4f039 100644
--- a/apps/web/src/features/workout/sortable-workout-element.tsx
+++ b/apps/web/src/features/workout/sortable-workout-element.tsx
@@ -24,7 +24,7 @@ import {
   createWorkoutSchema,
 } from '@dropit/schemas';
 import { GripVertical, Trash2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Control } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -63,7 +63,8 @@ export function SortableWorkoutElement({
   const [editingReps, setEditingReps] = useState(false);
   const [editingWeight, setEditingWeight] = useState(false);
   const [editingRest, setEditingRest] = useState(false);
-  const [editingElement, setEditingElement] = useState(true);
+  const [editingElement, setEditingElement] = useState(false);
+  const selectRef = useRef<HTMLButtonElement>(null);
 
   const {
     attributes,
@@ -228,10 +229,15 @@ export function SortableWorkoutElement({
                   }
                   setEditingElement(false);
                 }}
+                onOpenChange={(open) => {
+                  if (!open) {
+                    setEditingElement(false);
+                  }
+                }}
                 value={field.value}
               >
                 <FormControl>
-                  <SelectTrigger>
+                  <SelectTrigger ref={selectRef}>
                     <SelectValue
                       placeholder={`Choisir un ${
                         type === WORKOUT_ELEMENT_TYPES.EXERCISE
@@ -250,7 +256,7 @@ export function SortableWorkoutElement({
                       ))
                     : complexes.map((complex) => (
                         <SelectItem key={complex.id} value={complex.id}>
-                          {complex.name}
+                          {complex.complexCategory?.name || 'Complex'}
                         </SelectItem>
                       ))}
                 </SelectContent>
@@ -258,12 +264,18 @@ export function SortableWorkoutElement({
             ) : (
               <button
                 type="button"
-                onClick={() => setEditingElement(true)}
+                onClick={() => {
+                  setEditingElement(true);
+                  // Forcer l'ouverture du Select après un court délai
+                  setTimeout(() => {
+                    selectRef.current?.click();
+                  }, 0);
+                }}
                 className="font-medium hover:underline text-left w-full"
               >
                 {type === WORKOUT_ELEMENT_TYPES.EXERCISE
                   ? exercises.find((e) => e.id === field.value)?.name
-                  : complexes.find((c) => c.id === field.value)?.name}
+                  : complexes.find((c) => c.id === field.value)?.complexCategory?.name || 'Complex'}
               </button>
             )}
             <FormMessage />
@@ -277,7 +289,11 @@ export function SortableWorkoutElement({
     <Card
       ref={setNodeRef}
       style={style}
-      className={`relative bg-muted/30 ${isDragging ? 'z-50' : ''}`}
+      className={`relative bg-muted/30 ${isDragging ? 'z-50' : ''} ${
+        control._formValues.elements[index].type === WORKOUT_ELEMENT_TYPES.COMPLEX
+          ? 'min-h-[200px]'
+          : 'min-h-[100px]'
+      }`}
     >
       <CardContent className="p-4 flex gap-4">
         <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 3f17d94..c5dc7ce 100644
--- a/apps/web/src/features/workout/steps/workout-elements-step.tsx
+++ b/apps/web/src/features/workout/steps/workout-elements-step.tsx
@@ -2,12 +2,6 @@ import { api } from '@/lib/api';
 import { Button } from '@/shared/components/ui/button';
 import { Card, CardContent } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/shared/components/ui/tabs';
 import {
   DndContext,
   DragEndEvent,
@@ -20,12 +14,15 @@ import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { SortableContext } from '@dnd-kit/sortable';
 import { WORKOUT_ELEMENT_TYPES } from '@dropit/schemas';
 import { createWorkoutSchema } from '@dropit/schemas';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Plus, Search } from 'lucide-react';
 import { UseFormReturn, useFieldArray } from 'react-hook-form';
 import { useState } from 'react';
 import { z } from 'zod';
 import { SortableWorkoutElement } from '../sortable-workout-element';
+import { DialogCreation } from '../../exercises/dialog-creation';
+import { ExerciseCreationForm } from '../../exercises/exercise-creation-form';
+import { ComplexCreationForm } from '../../complex/complex-creation-form';
 
 // Importer le schéma étendu depuis le stepper parent
 const extendedWorkoutSchema = createWorkoutSchema.extend({
@@ -54,6 +51,10 @@ export function WorkoutElementsStep({
 }: WorkoutElementsStepProps) {
   const [exerciseSearch, setExerciseSearch] = useState('');
   const [complexSearch, setComplexSearch] = useState('');
+  const [activeTab, setActiveTab] = useState<'exercise' | 'complex'>('exercise');
+  const [createExerciseModalOpen, setCreateExerciseModalOpen] = useState(false);
+  const [createComplexModalOpen, setCreateComplexModalOpen] = useState(false);
+  const queryClient = useQueryClient();
 
   // Queries pour récupérer les données nécessaires
   const { data: exercises } = useQuery({
@@ -114,26 +115,194 @@ export function WorkoutElementsStep({
     });
   };
 
+  const handleExerciseCreationSuccess = async () => {
+    // Rafraîchir la liste des exercices
+    await queryClient.invalidateQueries({ queryKey: ['exercises'] });
+    setCreateExerciseModalOpen(false);
+  };
+
+  const handleComplexCreationSuccess = async () => {
+    // Rafraîchir la liste des complexes
+    await queryClient.invalidateQueries({ queryKey: ['complexes'] });
+    setCreateComplexModalOpen(false);
+  };
+
   // Filtrer les exercices et complexes selon la recherche
   const filteredExercises = exercises?.filter(exercise =>
     exercise.name.toLowerCase().includes(exerciseSearch.toLowerCase())
   ) || [];
 
   const filteredComplexes = complexes?.filter(complex =>
-    complex.name.toLowerCase().includes(complexSearch.toLowerCase())
+    complex.complexCategory?.name?.toLowerCase().includes(complexSearch.toLowerCase())
   ) || [];
 
   return (
     <div className="h-full flex flex-col">
-      {/* Titre */}
-      <div className="mb-6">
-        <h3 className="text-lg font-semibold">Éléments de l'entraînement</h3>
-      </div>
 
       {/* Layout principal : 2 colonnes */}
-      <div className="flex-1 grid grid-cols-4 gap-6 min-h-0">
-        {/* Colonne gauche : Éléments sélectionnés */}
-        <div className="col-span-3 flex flex-col">
+      <div className="flex-1 grid grid-cols-4 gap-6 min-h-0 mt-6">
+
+        {/* Colonne gauche : Liste des éléments disponibles */}
+        <div className="col-span-1 flex flex-col min-h-0">
+          <div className="mb-4">
+            <h4 className="text-md font-medium">Éléments disponibles</h4>
+            <p className="text-sm text-muted-foreground">
+              Cliquez pour ajouter à votre entraînement
+            </p>
+          </div>
+
+          <Card className="flex-1 flex flex-col min-h-0">
+            <CardContent className="p-4 flex-1 flex flex-col min-h-0">
+              <div className="flex-1 flex flex-col min-h-0">
+                {/* Tabs List */}
+                <div className="grid w-full grid-cols-2 flex-shrink-0 mb-4">
+                  <button
+                    type="button"
+                    onClick={() => setActiveTab('exercise')}
+                    className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                      activeTab === 'exercise'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                    }`}
+                  >
+                    Exercices
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setActiveTab('complex')}
+                    className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                      activeTab === 'complex'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                    }`}
+                  >
+                    Complexes
+                  </button>
+                </div>
+                
+                {/* Tab Content */}
+                <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">
+                        <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..."
+                          value={exerciseSearch}
+                          onChange={(e) => setExerciseSearch(e.target.value)}
+                          className="pl-10"
+                        />
+                      </div>
+                      
+                      <div className="mb-3 flex-shrink-0">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setCreateExerciseModalOpen(true);
+                          }}
+                          className="w-full"
+                        >
+                          <Plus className="h-4 w-4 mr-2" />
+                          Créer un nouvel exercice
+                        </Button>
+                      </div>
+                      
+                      <div className="flex-1 overflow-y-auto space-y-2 min-h-0">
+                        {filteredExercises.map((exercise) => (
+                          <div 
+                            key={exercise.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>
+                                <h5 className="font-medium text-sm">{exercise.name}</h5>
+                                <p className="text-xs text-muted-foreground">
+                                  {exercise.exerciseCategory.name}
+                                </p>
+                              </div>
+                              <Button
+                                type="button"
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => handleAddElement('exercise', exercise.id)}
+                              >
+                                <Plus className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  
+                  {activeTab === 'complex' && (
+                    <div className="flex-1 flex flex-col min-h-0">
+                      <div className="relative mb-3 flex-shrink-0">
+                        <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..."
+                          value={complexSearch}
+                          onChange={(e) => setComplexSearch(e.target.value)}
+                          className="pl-10"
+                        />
+                      </div>
+                      
+                      <div className="mb-3 flex-shrink-0">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setCreateComplexModalOpen(true);
+                          }}
+                          className="w-full"
+                        >
+                          <Plus className="h-4 w-4 mr-2" />
+                          Créer un nouveau complexe
+                        </Button>
+                      </div>
+                      
+                      <div className="flex-1 overflow-y-auto space-y-2 min-h-0">
+                        {filteredComplexes.map((complex) => (
+                          <div 
+                            key={complex.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>
+                                <h5 className="font-medium text-sm">{complex.complexCategory?.name || 'Complex'}</h5>
+                                <p className="text-xs text-muted-foreground">
+                                  {complex.exercises.length} exercices
+                                </p>
+                              </div>
+                              <Button
+                                type="button"
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => handleAddElement('complex', complex.id)}
+                              >
+                                <Plus className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Colonne droite : Éléments sélectionnés */}
+        <div className="col-span-3 flex flex-col min-h-0">
           <div className="mb-4">
             <h4 className="text-md font-medium">Éléments sélectionnés</h4>
             <p className="text-sm text-muted-foreground">
@@ -141,17 +310,20 @@ export function WorkoutElementsStep({
             </p>
           </div>
           
-          <Card className="flex-1 flex flex-col">
-            <CardContent className="p-4 flex-1 flex flex-col">
+          <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">
                   <div className="text-center text-muted-foreground">
                     <p>Aucun élément sélectionné</p>
-                    <p className="text-sm">Ajoutez des exercices ou complexes depuis le panneau de droite</p>
+                    <p className="text-sm">Ajoutez des exercices ou complexes depuis le panneau de gauche</p>
                   </div>
                 </div>
               ) : (
-                <div className="flex-1 overflow-y-auto">
+                <div className="flex-1 overflow-y-auto min-h-0">
                   <DndContext
                     sensors={sensors}
                     collisionDetection={closestCenter}
@@ -161,17 +333,28 @@ export function WorkoutElementsStep({
                       items={fields.map((field) => field.id)}
                       strategy={verticalListSortingStrategy}
                     >
-                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                      <div
+                        className="grid grid-cols-2 gap-4"
+                        style={{ gridAutoFlow: 'dense' }}
+                      >
                         {fields.map((field, index) => (
-                          <SortableWorkoutElement
+                          <div
                             key={field.id}
-                            id={field.id}
-                            index={index}
-                            control={form.control}
-                            onRemove={remove}
-                            exercises={exercises}
-                            complexes={complexes}
-                          />
+                            style={{
+                              gridRow: `span ${
+                                field.type === WORKOUT_ELEMENT_TYPES.COMPLEX ? 2 : 1
+                              }`,
+                            }}
+                          >
+                            <SortableWorkoutElement
+                              id={field.id}
+                              index={index}
+                              control={form.control}
+                              onRemove={remove}
+                              exercises={exercises}
+                              complexes={complexes}
+                            />
+                          </div>
                         ))}
                       </div>
                     </SortableContext>
@@ -181,105 +364,10 @@ export function WorkoutElementsStep({
             </CardContent>
           </Card>
         </div>
-
-        {/* Colonne droite : Liste des éléments disponibles */}
-        <div className="col-span-1 flex flex-col">
-          <div className="mb-4">
-            <h4 className="text-md font-medium">Éléments disponibles</h4>
-            <p className="text-sm text-muted-foreground">
-              Cliquez pour ajouter à votre entraînement
-            </p>
-          </div>
-
-          <Card className="flex-1 flex flex-col">
-            <CardContent className="p-4 flex-1 flex flex-col">
-              <Tabs defaultValue="exercise" className="flex-1 flex flex-col">
-                <TabsList className="grid w-full grid-cols-2">
-                  <TabsTrigger value="exercise">Exercices</TabsTrigger>
-                  <TabsTrigger value="complex">Complexes</TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="exercise" className="flex-1 flex flex-col mt-4">
-                  <div className="relative mb-3">
-                    <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..."
-                      value={exerciseSearch}
-                      onChange={(e) => setExerciseSearch(e.target.value)}
-                      className="pl-10"
-                    />
-                  </div>
-                  
-                  <div className="flex-1 overflow-y-auto space-y-2 flex flex-col justify-start">
-                    {filteredExercises.map((exercise) => (
-                      <div 
-                        key={exercise.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>
-                            <h5 className="font-medium text-sm">{exercise.name}</h5>
-                            <p className="text-xs text-muted-foreground">
-                              {exercise.exerciseCategory.name}
-                            </p>
-                          </div>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => handleAddElement('exercise', exercise.id)}
-                          >
-                            <Plus className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="complex" className="flex-1 flex flex-col mt-4">
-                  <div className="relative mb-3">
-                    <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..."
-                      value={complexSearch}
-                      onChange={(e) => setComplexSearch(e.target.value)}
-                      className="pl-10"
-                    />
-                  </div>
-                  
-                  <div className="flex-1 overflow-y-auto space-y-2 flex flex-col justify-start">
-                    {filteredComplexes.map((complex) => (
-                      <div 
-                        key={complex.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>
-                            <h5 className="font-medium text-sm">{complex.name}</h5>
-                            <p className="text-xs text-muted-foreground">
-                              {complex.exercises.length} exercices
-                            </p>
-                          </div>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => handleAddElement('complex', complex.id)}
-                          >
-                            <Plus className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </div>
       </div>
 
       {/* Boutons de navigation */}
-      <div className="flex justify-between mt-6">
+      <div className="flex justify-between mt-6 flex-shrink-0">
         <Button variant="outline" onClick={onCancel}>
           Annuler
         </Button>
@@ -290,6 +378,32 @@ export function WorkoutElementsStep({
           <Button onClick={onNext}>Suivant</Button>
         </div>
       </div>
+
+      {/* Modales de création */}
+      <DialogCreation
+        open={createExerciseModalOpen}
+        onOpenChange={setCreateExerciseModalOpen}
+        title="Créer un exercice"
+        description="Ajoutez un nouvel exercice à votre catalogue."
+      >
+        <ExerciseCreationForm
+          onSuccess={handleExerciseCreationSuccess}
+          onCancel={() => setCreateExerciseModalOpen(false)}
+        />
+      </DialogCreation>
+
+      <DialogCreation
+        open={createComplexModalOpen}
+        onOpenChange={setCreateComplexModalOpen}
+        title="Créer un complexe"
+        description="Ajoutez un nouveau complexe à votre catalogue."
+        maxWidth="lg"
+      >
+        <ComplexCreationForm
+          onSuccess={handleComplexCreationSuccess}
+          onCancel={() => setCreateComplexModalOpen(false)}
+        />
+      </DialogCreation>
     </div>
   );
 }
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 0cbfa4c..6745d01 100644
--- a/apps/web/src/features/workout/steps/workout-info-step.tsx
+++ b/apps/web/src/features/workout/steps/workout-info-step.tsx
@@ -57,14 +57,15 @@ export function WorkoutInfoStep({
     <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>Titre</FormLabel>
-              <FormControl className="bg-white">
-                <Input placeholder="Titre de l'entraînement" {...field} />
+              <FormLabel>Nom</FormLabel>
+              <FormControl className="bg-background">
+                <Input placeholder="Nom de l'entraînement" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -77,7 +78,7 @@ export function WorkoutInfoStep({
           render={({ field }) => (
             <FormItem>
               <FormLabel>Description</FormLabel>
-              <FormControl className="bg-white">
+              <FormControl className="bg-background">
                 <Textarea
                   placeholder="Description, commentaires de l'entraînement"
                   className="min-h-[120px]"
@@ -96,7 +97,7 @@ export function WorkoutInfoStep({
             <FormItem>
               <FormLabel>Catégorie</FormLabel>
               <Select onValueChange={field.onChange} value={field.value}>
-                <FormControl className="bg-white">
+                <FormControl className="bg-background">
                   <SelectTrigger>
                     <SelectValue placeholder="Sélectionner une catégorie" />
                   </SelectTrigger>
@@ -111,11 +112,12 @@ export function WorkoutInfoStep({
               </Select>
               <FormMessage />
             </FormItem>
-          )}
-        />
+            )}
+          />
+        </div>
       </div>
 
-      <div className="flex justify-between">
+      <div className="bg-white rounded-lg border shadow-sm flex justify-between px-6 py-4">
         <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 79922ae..c8def7a 100644
--- a/apps/web/src/features/workout/workout-card.tsx
+++ b/apps/web/src/features/workout/workout-card.tsx
@@ -81,7 +81,7 @@ export function WorkoutCard({ workout, onWorkoutClick }: WorkoutCardProps) {
                     >
                       {element.sets}
                     </Badge>
-                    <span className="font-medium">{element.complex.name}</span>
+                    <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}%
diff --git a/apps/web/src/features/workout/workout-creation-stepper.tsx b/apps/web/src/features/workout/workout-creation-stepper.tsx
index a7d68dd..9c9ca30 100644
--- a/apps/web/src/features/workout/workout-creation-stepper.tsx
+++ b/apps/web/src/features/workout/workout-creation-stepper.tsx
@@ -25,17 +25,14 @@ const steps = [
   {
     id: 'info',
     name: 'Description',
-    description: 'Définir les informations générales',
   },
   {
     id: 'elements',
     name: 'Construction',
-    description: 'Assembler les éléments',
   },
   {
     id: 'planning',
     name: 'Planification',
-    description: 'Programmer et attribuer',
   },
 ];
 
@@ -78,38 +75,40 @@ export function WorkoutCreationStepper({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="h-full flex flex-col">
         <Steps
           steps={steps}
           currentStep={currentStep}
           onStepClick={setCurrentStep}
         />
 
-        {currentStep === 0 && (
-          <WorkoutInfoStep
-            form={form}
-            onNext={() => setCurrentStep(1)}
-            onCancel={onCancel}
-          />
-        )}
+        <div className="flex-1 min-h-0">
+          {currentStep === 0 && (
+            <WorkoutInfoStep
+              form={form}
+              onNext={() => setCurrentStep(1)}
+              onCancel={onCancel}
+            />
+          )}
 
-        {currentStep === 1 && (
-          <WorkoutElementsStep
-            form={form}
-            onBack={() => setCurrentStep(0)}
-            onNext={() => setCurrentStep(2)}
-            onCancel={onCancel}
-          />
-        )}
+          {currentStep === 1 && (
+            <WorkoutElementsStep
+              form={form}
+              onBack={() => setCurrentStep(0)}
+              onNext={() => setCurrentStep(2)}
+              onCancel={onCancel}
+            />
+          )}
 
-        {currentStep === 2 && (
-          <WorkoutPlanningStep
-            form={form}
-            onBack={() => setCurrentStep(1)}
-            onSubmit={handleSubmit}
-            onCancel={onCancel}
-          />
-        )}
+          {currentStep === 2 && (
+            <WorkoutPlanningStep
+              form={form}
+              onBack={() => setCurrentStep(1)}
+              onSubmit={handleSubmit}
+              onCancel={onCancel}
+            />
+          )}
+        </div>
       </form>
     </Form>
   );
diff --git a/apps/web/src/features/workout/workout-detail.tsx b/apps/web/src/features/workout/workout-detail.tsx
index c049c3d..b8e3c0d 100644
--- a/apps/web/src/features/workout/workout-detail.tsx
+++ b/apps/web/src/features/workout/workout-detail.tsx
@@ -112,7 +112,7 @@ export function WorkoutDetail({
                               {element.sets} séries
                             </Badge>
                             <span className="font-medium">
-                              {element.complex.name}
+                              {element.complex.complexCategory?.name || 'Complex'}
                             </span>
                           </div>
                           <p className="text-sm text-muted-foreground">
diff --git a/apps/web/src/features/workout/workout-editor.tsx b/apps/web/src/features/workout/workout-editor.tsx
index 9b391de..a63daab 100644
--- a/apps/web/src/features/workout/workout-editor.tsx
+++ b/apps/web/src/features/workout/workout-editor.tsx
@@ -250,7 +250,7 @@ export function WorkoutEditor({
                             handleAddElement('complex', complex.id)
                           }
                         >
-                          {complex.name}
+                          {complex.complexCategory?.name || 'Complex'}
                         </Button>
                       ))}
                     </TabsContent>
@@ -304,7 +304,7 @@ export function WorkoutEditor({
                               {element.sets} séries
                             </Badge>
                             <span className="font-medium">
-                              {element.complex.name}
+                              {element.complex.complexCategory?.name || 'Complex'}
                             </span>
                           </div>
                           <p className="text-sm text-muted-foreground">
diff --git a/apps/web/src/routes/__home.programs.complex.tsx b/apps/web/src/routes/__home.programs.complex.tsx
index 2c25970..ecc0140 100644
--- a/apps/web/src/routes/__home.programs.complex.tsx
+++ b/apps/web/src/routes/__home.programs.complex.tsx
@@ -55,7 +55,7 @@ function ComplexPage() {
   })
 
   const filteredComplexes = complexes?.filter((complex) => {
-    const matchesSearch = complex.name
+    const matchesSearch = complex.complexCategory?.name
       .toLowerCase()
       .includes(filter.toLowerCase())
     const matchesCategory =
diff --git a/apps/web/src/routes/__home.programs.tsx b/apps/web/src/routes/__home.programs.tsx
index 7609712..38b0f83 100644
--- a/apps/web/src/routes/__home.programs.tsx
+++ b/apps/web/src/routes/__home.programs.tsx
@@ -60,7 +60,7 @@ function ProgramsLayout() {
         </nav>
       </div>
 
-      <div className="mt-6">
+      <div className="mt-6 h-full flex flex-col">
         <Outlet />
       </div>
     </>
diff --git a/apps/web/src/routes/__home.programs.workouts.tsx b/apps/web/src/routes/__home.programs.workouts.tsx
index 99da7cd..187682d 100644
--- a/apps/web/src/routes/__home.programs.workouts.tsx
+++ b/apps/web/src/routes/__home.programs.workouts.tsx
@@ -63,31 +63,36 @@ function WorkoutPage() {
 
   // Sinon on affiche la grille des workouts
   return (
-    <div className="relative flex-1">
-      <WorkoutFilters
-        onFilterChange={setFilter}
-        onCategoryChange={setCategoryFilter}
-        onCreateClick={handleCreateClick}
-        categories={categories}
-        disabled={isLoading || !workouts?.length}
-      />
-
-      {isLoading ? (
-        <div className="flex items-center justify-center h-32">
-          {t('common.loading')}
-        </div>
-      ) : !workouts?.length ? (
-        <div className="flex flex-col items-center justify-center h-32 gap-2 text-muted-foreground">
-          <p>{t('workout.filters.no_results')}</p>
-          <p className="text-sm">{t('common.start_create')}</p>
-        </div>
-      ) : (
-        <WorkoutGrid
-          workouts={filteredWorkouts || []}
-          onWorkoutClick={handleWorkoutClick}
+    <div className="h-full flex flex-col">
+      <div className="flex-shrink-0">
+        <WorkoutFilters
+          onFilterChange={setFilter}
+          onCategoryChange={setCategoryFilter}
+          onCreateClick={handleCreateClick}
+          categories={categories}
+          disabled={isLoading || !workouts?.length}
         />
-      )}
+      </div>
 
+      <div className="flex-1 h-full">
+        {isLoading ? (
+          <div className="flex items-center justify-center h-32">
+            {t('common.loading')}
+          </div>
+        ) : !workouts?.length ? (
+          <div className="flex flex-col items-center justify-center h-32 gap-2 text-muted-foreground">
+            <p>{t('workout.filters.no_results')}</p>
+            <p className="text-sm">{t('common.start_create')}</p>
+          </div>
+        ) : (
+          <div className="flex-1 overflow-auto h-full">
+            <WorkoutGrid
+              workouts={filteredWorkouts || []}
+              onWorkoutClick={handleWorkoutClick}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/routes/__home.tsx b/apps/web/src/routes/__home.tsx
index 43ac6a4..edbdfa3 100644
--- a/apps/web/src/routes/__home.tsx
+++ b/apps/web/src/routes/__home.tsx
@@ -43,21 +43,18 @@ export const Route = createFileRoute('/__home')({
 });
 
 function HomeLayout() {
-  // Maintenant que la vérification est faite dans beforeLoad, 
-  // on peut directement afficher le layout
-
   return (
     <SidebarProvider className="w-full">
       <div className="flex min-h-screen w-full">
         <AppSidebar />
-        <main className="flex-1 overflow-auto w-full">
-          <div className="h-full w-full">
-            <div className="flex items-center p-2 border-b gap-2">
+        <main className="flex-1 w-full h-screen">
+          <div className="h-full w-full flex flex-col">
+            <div className="flex items-center p-2 border-b gap-2 flex-shrink-0">
               <SidebarTrigger />
               <Separator orientation="vertical" className="h-6" />
               <Breadcrumbs />
             </div>
-            <div className="px-4 pt-10">
+            <div className="px-4 pt-10 pb-4 flex-1 min-h-0 overflow-hidden">
               <Outlet />
             </div>
           </div>
diff --git a/apps/web/src/routes/__home.workouts.create.tsx b/apps/web/src/routes/__home.workouts.create.tsx
index cbeb8f6..1b74345 100644
--- a/apps/web/src/routes/__home.workouts.create.tsx
+++ b/apps/web/src/routes/__home.workouts.create.tsx
@@ -68,23 +68,23 @@ function CreateWorkoutPage() {
   return (
     <div className="h-full flex flex-col">
       {/* Navigation Bar */}
-      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div>
         <div className="flex items-center h-14 gap-4">
           <Button variant="outline" size="icon" onClick={handleCancel}>
             <ArrowLeft className="h-4 w-4" />
           </Button>
           <div className="flex-1">
-            <h1 className="text-lg font-semibold">
-              {t('workout.creation.title')}
-              {selectedDate && ` - ${format(selectedDate, 'PPP', { locale })}`}
+            <h1 className="text-2xl font-bold">
+                {t('workout.creation.title')}
+                {selectedDate && ` - ${format(selectedDate, 'PPP', { locale })}`}
             </h1>
           </div>
         </div>
       </div>
 
       {/* Main Content */}
-      <div className="flex-1 overflow-auto">
-        <div className="p-6">
+      <div className="flex-1 overflow-hidden">
+        <div className="h-full">
           <WorkoutCreationStepper
             onSuccess={handleCreationSuccess}
             onCancel={handleCancel}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index f97da98..186f35c 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -1,5 +1,5 @@
 import { Outlet, createRootRoute } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+//import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 // Root route definition
 export const Route = createRootRoute({
@@ -10,9 +10,9 @@ function RootLayout() {
   return (
     <div className="min-h-screen">
       <Outlet />
-      {process.env.NODE_ENV === 'development' && (
+      {/* {process.env.NODE_ENV === 'development' && (
         <TanStackRouterDevtools position="bottom-right" />
-      )}
+      )} */}
     </div>
   );
 }
diff --git a/apps/web/src/shared/components/layout/app-sidebar.tsx b/apps/web/src/shared/components/layout/app-sidebar.tsx
index 945b63a..aaca593 100644
--- a/apps/web/src/shared/components/layout/app-sidebar.tsx
+++ b/apps/web/src/shared/components/layout/app-sidebar.tsx
@@ -21,7 +21,7 @@ import {
 } from '@/shared/components/ui/sidebar';
 import { toast } from '@/shared/hooks/use-toast';
 import { useTranslation } from '@dropit/i18n';
-import { Link, useNavigate } from '@tanstack/react-router';
+import { Link, useMatches, useNavigate } from '@tanstack/react-router';
 import {
   BicepsFlexed,
   Calendar,
@@ -37,6 +37,7 @@ import { useEffect, useState } from 'react';
 export function AppSidebar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const matches = useMatches();
   const [userEmail, setUserEmail] = useState<string | null>(null);
 
   useEffect(() => {
@@ -100,6 +101,26 @@ export function AppSidebar() {
     },
   ];
 
+  // Fonction pour vérifier si un item est actif
+  const isActiveItem = (itemUrl: string) => {
+    const currentPath = matches[matches.length - 1]?.pathname || '';
+    
+    // Gestion spéciale pour les routes imbriquées
+    if (itemUrl === '/programs/workouts') {
+      return currentPath.startsWith('/programs/') || currentPath.startsWith('/workouts/');
+    }
+    
+    if (itemUrl === '/athletes') {
+      return currentPath.startsWith('/athletes');
+    }
+    
+    if (itemUrl === '/dashboard') {
+      return currentPath === '/dashboard' || currentPath === '/';
+    }
+    
+    return currentPath === itemUrl;
+  };
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
@@ -121,16 +142,24 @@ export function AppSidebar() {
           </SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {items.map((item) => (
-                <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton asChild>
-                    <Link to={item.url} className="flex items-center gap-2">
-                      <item.icon className="h-4 w-4" />
-                      <span>{item.title}</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
+              {items.map((item) => {
+                const isActive = isActiveItem(item.url);
+                return (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton 
+                      asChild
+                      className={isActive ? 'bg-blue-50 text-blue-600 hover:bg-blue-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.title}
+                        </span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
diff --git a/apps/web/src/shared/components/ui/steps.tsx b/apps/web/src/shared/components/ui/steps.tsx
index 9abf09e..1746baf 100644
--- a/apps/web/src/shared/components/ui/steps.tsx
+++ b/apps/web/src/shared/components/ui/steps.tsx
@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 interface Step {
   id: string;
   name: string;
-  description: string;
+  description?: string;
 }
 
 interface StepsProps {
@@ -15,63 +15,62 @@ interface StepsProps {
 
 export function Steps({ steps, currentStep, onStepClick }: StepsProps) {
   return (
-    <nav aria-label="Progress" className="w-full py-6">
-      <div className="flex items-center justify-center">
-        {steps.map((step, index) => (
-          <div key={step.id} className="flex items-center">
-            {/* Cercle numéroté */}
-            <div className="flex flex-col items-center">
-              <button
-                type="button"
-                onClick={() => onStepClick?.(index)}
-                disabled={!onStepClick}
-                className={cn(
-                  'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition-all duration-200',
-                  {
-                    'bg-primary text-primary-foreground': currentStep >= index,
-                    'bg-muted text-muted-foreground border border-border': currentStep < index,
-                    'cursor-pointer hover:bg-primary/90': onStepClick && currentStep < index,
-                    'cursor-default': !onStepClick,
-                  }
-                )}
-              >
-                {currentStep > index ? (
-                  <Check className="h-4 w-4" />
-                ) : (
-                  <span>{index + 1}</span>
-                )}
-              </button>
-              
-              <div className="mt-2 text-center">
-                <div className={cn(
-                  'text-sm font-medium',
-                  {
-                    'text-primary': currentStep === index,
-                    'text-foreground': currentStep > index,
-                    'text-muted-foreground': currentStep < index,
-                  }
-                )}>
-                  {step.name}
-                </div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  {step.description}
+    <div className="bg-white 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) => (
+            <>
+              <div key={step.id} className="flex items-center">
+                <button
+                  type="button"
+                  onClick={() => onStepClick?.(index)}
+                  disabled={!onStepClick}
+                  className={cn(
+                    'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-all duration-200 shrink-0',
+                    {
+                      'bg-primary text-primary-foreground': currentStep >= index,
+                      'bg-gray-100 text-gray-600 border border-gray-200': currentStep < index,
+                      'cursor-pointer hover:bg-primary/90': onStepClick && currentStep < index,
+                      'cursor-default': !onStepClick,
+                    }
+                  )}
+                >
+                  {currentStep > index ? (
+                    <Check className="h-4 w-4" />
+                  ) : (
+                    <span>{index + 1}</span>
+                  )}
+                </button>
+                
+                <div className="ml-3">
+                  <div className={cn(
+                    'text-sm font-medium whitespace-nowrap',
+                    {
+                      'text-gray-900': currentStep >= index,
+                      'text-gray-500': currentStep < index,
+                    }
+                  )}>
+                    {step.name}
+                  </div>
                 </div>
               </div>
-            </div>
-            
-            {/* Trait de liaison */}
-            {index < steps.length - 1 && (
-              <div className={cn(
-                'w-16 h-0.5 mx-4 transition-colors duration-200',
-                {
-                  'bg-primary': currentStep > index,
-                  'bg-border': currentStep <= index,
-                }
-              )} />
-            )}
-          </div>
-        ))}
-      </div>
-    </nav>
+              
+              {/* Trait de liaison */}
+              {index < steps.length - 1 && (
+                <div key={`line-${step.id}-${steps[index + 1].id}`} className="flex-1 mx-4">
+                  <div className={cn(
+                    'h-0.5 w-full transition-colors duration-200',
+                    {
+                      'bg-primary': currentStep > index,
+                      'bg-gray-300': currentStep <= index,
+                    }
+                  )} />
+                </div>
+              )}
+            </>
+          ))}
+        </div>
+      </nav>
+    </div>
   );
 }
diff --git a/packages/schemas/src/complex.schema.ts b/packages/schemas/src/complex.schema.ts
index 78aa058..ada5b5d 100644
--- a/packages/schemas/src/complex.schema.ts
+++ b/packages/schemas/src/complex.schema.ts
@@ -8,7 +8,6 @@ const createExerciseComplexSchema = z.object({
 });
 
 export const createComplexSchema = z.object({
-  name: z.string(),
   complexCategory: z.string(),
   exercises: z.array(createExerciseComplexSchema),
   description: z.string().optional(),
@@ -17,7 +16,6 @@ export const createComplexSchema = z.object({
 export type CreateComplex = z.infer<typeof createComplexSchema>;
 
 export const updateComplexSchema = z.object({
-  name: z.string().optional(),
   complexCategory: z.string().optional(),
   exercises: z.array(createExerciseComplexSchema).optional(),
   description: z.string().optional(),
@@ -32,7 +30,6 @@ const exerciseComplexSchema = exerciseSchema.extend({
 
 export const complexSchema = z.object({
   id: z.string(),
-  name: z.string(),
   complexCategory: z.object({
     id: z.string(),
     name: z.string(),