diff --git a/front_end/src/App.css b/front_end/src/App.css
index 1dffe81..d62514f 100644
--- a/front_end/src/App.css
+++ b/front_end/src/App.css
@@ -1,40 +1,52 @@
 /* Variables de thème */
 [data-theme='dark'] {
-  --tint0: #000000;
-  --tint1: #0b0c0e;
-  --tint2: #16181d;
-  --tint3: #21252b;
-  --tint4: #2c313a;
-  --tint5: #373d48;
-  --text: #FFFFFF;
+  --tint0: #0a0e27;
+  --tint1: #1a1f3a;
+  --tint2: #232d4a;
+  --tint3: #2e3a59;
+  --tint4: #3d4a6f;
+  --tint5: #4a5a85;
+  --text: #f0f4f8;
   --text2: #000000;
   --disable: #02291d;
   --green-primary: #10b981;
   --green-secondary: #059669;
   --green-dark: #047857;
-  --green-A-primary: #10b98120;
-  --green-A-secondary: #05966920;
-  --green-A-dark: #04785720;
-  --themeButtonColor : #00AAFF;
+  --green-A-primary: #10b98130;
+  --green-A-secondary: #05966930;
+  --green-A-dark: #04785730;
+  --themeButtonColor: #00AAFF;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --blue-accent: #3b82f6;
+  --purple-accent: #a78bfa;
+  --cyan-accent: #06b6d4;
 }
 
 [data-theme='light'] {
-  --tint0: #ffffff;
-  --tint1: #f4f1f1;
-  --tint2: #e8e4e3;
-  --tint3: #ddd6d5;
-  --tint4: #d2c8c6;
-  --tint5: #c6bab8;
-  --text: #000000;
+  --tint0: #f8fafc;
+  --tint1: #f1f5f9;
+  --tint2: #e2e8f0;
+  --tint3: #cbd5e1;
+  --tint4: #b0bac4;
+  --tint5: #94a3b8;
+  --text: #0f172a;
   --text2: #FFFFFF;
   --disable: #02291d;
-  --green-primary: #00ce89;
-  --green-secondary: #00a571;
-  --green-dark: #00825d;
-  --green-A-primary: #00ce8920;
-  --green-A-secondary: #00a57120;
-  --green-A-dark: #00825d20;
-  --themeButtonColor : #FFAA00;
+  --green-primary: #10b981;
+  --green-secondary: #059669;
+  --green-dark: #047857;
+  --green-A-primary: #10b98125;
+  --green-A-secondary: #05966925;
+  --green-A-dark: #04785725;
+  --themeButtonColor: #f59e0b;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
+  --blue-accent: #3b82f6;
+  --purple-accent: #a855f7;
+  --cyan-accent: #06b6d4;
 }
 
 /* Reset et base */
@@ -46,17 +58,18 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--tint0);
+  background: linear-gradient(135deg, var(--tint0) 0%, var(--tint1) 100%);
   color: var(--text);
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition: background 0.4s ease, color 0.4s ease;
+  font-weight: 400;
+  line-height: 1.6;
 }
 
-.padding{
+.padding {
   padding: 10px
 }
 
@@ -71,10 +84,23 @@ code {
   color: var(--green-primary);
 }
 
-.App{
+.App {
   display: grid;
-  padding: 10px;
-  gap:10px;
+  padding: 20px;
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.App h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
 }
 
 /* Container principal */
@@ -83,18 +109,20 @@ code {
   background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
 }
 
-.composant-padding{
- padding: 10px;
+.composant-padding {
+  padding: 10px;
 }
 
-.composant-container{
-  background-color: var(--tint2);
-  border-radius: 30px;
-  padding: 10px;
-  border: 2px solid var(--tint4);
-  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
+.composant-container {
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  border-radius: 24px;
+  padding: 24px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+
 /* Header / Navigation */
 .app-header {
   background-color: var(--tint1);
@@ -134,18 +162,18 @@ code {
 
 /* Cards et containers */
 .card {
-  background-color: var(--tint1);
+  background: linear-gradient(135deg, var(--tint1) 0%, var(--tint2) 100%);
   border-radius: 20px;
-  padding: 20px;
-  border: 2px solid var(--green-A-secondary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
+  padding: 24px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .card:hover {
   border-color: var(--green-primary);
-  box-shadow: 0 6px 16px var(--green-A-primary);
-  transform: translateY(-2px);
+  box-shadow: 0 8px 24px var(--green-A-primary);
+  transform: translateY(-4px);
 }
 
 .card-header {
@@ -171,20 +199,21 @@ input[type="time"],
 input[type="search"],
 input[type="datetime-local"],
 textarea {
-  background-color: var(--tint3);
+  background-color: var(--tint2);
   color: var(--text);
-  border: 2px solid var(--tint5);
-  border-radius: 8px;
-  padding: 10px 14px;
-  transition: all 0.3s ease;
+  border: 1px solid var(--tint4);
+  border-radius: 12px;
+  padding: 12px 14px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 15px;
+  font-family: inherit;
 }
 
 input:focus,
 textarea:focus {
   outline: none;
   border-color: var(--green-primary);
-  background-color: var(--tint3);
+  background-color: var(--tint1);
   box-shadow: 0 0 0 3px var(--green-A-primary);
 }
 
@@ -227,23 +256,29 @@ select option {
 /* Buttons */
 button {
   color: var(--text);
-  background-color: var(--tint3);
-  border: 2px solid var(--tint5);
-  border-radius: 8px;
-  padding: 5px 10px;
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+  border: 1px solid var(--tint4);
+  border-radius: 12px;
+  padding: 10px 16px;
   cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 600;
   font-size: 14px;
   display: inline-block;
   width: auto;
+  box-shadow: var(--shadow-sm);
 }
 
 button:hover {
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   border-color: var(--green-primary);
+  color: white;
   transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 6px 20px var(--green-A-primary);
+}
+
+button:active {
+  transform: translateY(0);
 }
 
 button:active {
@@ -290,7 +325,7 @@ button.secondary:hover {
 .deleteButton,
 button.delete,
 .btn-danger {
-  background-color: #dc2626;
+  background: #dc2626;
   border: 2px solid #991b1b;
   border-radius: 10px;
   color: white;
@@ -299,7 +334,7 @@ button.delete,
 .deleteButton:hover,
 button.delete:hover,
 .btn-danger:hover {
-  background-color: #b91c1c;
+  background: #b91c1c;
   border-color: #7f1d1d;
 }
 
@@ -307,7 +342,7 @@ button.delete:hover,
 .addButton,
 button.add,
 .btn-success {
-  background-color: var(--green-primary);
+  background: var(--green-primary);
   border: none;
   border-radius: 10px;
   color: white;
@@ -430,7 +465,8 @@ td {
 
 
 /* Lists */
-ul, ol {
+ul,
+ol {
   color: var(--text);
   padding-left: 20px;
 }
@@ -547,6 +583,7 @@ input[type="radio"] {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -557,6 +594,7 @@ input[type="radio"] {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
diff --git a/front_end/src/components/edt.tsx b/front_end/src/components/edt.tsx
index 9dd0ce5..c2894a6 100644
--- a/front_end/src/components/edt.tsx
+++ b/front_end/src/components/edt.tsx
@@ -170,7 +170,7 @@ export const EDT =() =>{
             <div className="edt_colonnes">
                 <div className="top_left_loading">{loading && <Loading/>}</div>
                 {week_days_nums.map((num,index)=>(
-                    <div className={`edt_colonne`}>
+                    <div className={`edt_colonne ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
                         <div className={`edt_day_header ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
                             <div> {week_days[index]} </div>
                             <div className="edt_date"> {dateToString(getNextDay(week,index))} </div>
diff --git a/front_end/src/components/login.tsx b/front_end/src/components/login.tsx
index 546dcc2..84c0843 100644
--- a/front_end/src/components/login.tsx
+++ b/front_end/src/components/login.tsx
@@ -1,5 +1,5 @@
 import { useKeycloak } from '@react-keycloak/web'
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Admin, Athlete, Coach, User } from '../classes';
 import { useLocalData } from '../context/useLocalData';
 import { loginOrRegister, postAthlete } from '../requetes';
@@ -9,10 +9,25 @@ import { Modal } from './Modal';
 import './style/topBar.css';
 
 export const Login =() =>{
+    const ref = useRef<HTMLDivElement | null>(null);
     const {userLocal: user,setUserLocal: setUser} = useLocalData()
     const { keycloak } = useKeycloak();
     const [open,setOpen] = useState<boolean>(false);
 
+    useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+        if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+        }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+    };
+    }, []);
+
 
     async function loginUser(){
         if(keycloak.authenticated){
@@ -50,7 +65,7 @@ export const Login =() =>{
 
     if(keycloak.authenticated){
     return(
-            <div className='loginContainer'>
+            <div ref={ref} className='loginContainer'>
                 <button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button>
                 {open &&
                 <div className='login'>
diff --git a/front_end/src/components/object/detailSession.tsx b/front_end/src/components/object/detailSession.tsx
index 5cdb5dc..5408326 100644
--- a/front_end/src/components/object/detailSession.tsx
+++ b/front_end/src/components/object/detailSession.tsx
@@ -37,10 +37,6 @@ function DetailSession({session,open,setOpen}:Props){
     }
 
     async function updateActivites(){
-        const coach = await getCoachOfSession(session);
-        if(coach!=null){
-            session.coach = coach;
-        }
         const newActivites = await getSessionOfActivite(session);
         if(newActivites!=null){
             session.activites=newActivites;
@@ -97,7 +93,7 @@ function DetailSession({session,open,setOpen}:Props){
 
         return(
             <Modal isOpen={open} onClose={() => setOpen(false)}>
-                <div className="object_modal">
+                <div>
                     <h2>{session.name}</h2>
                     
                     <div>{hoursToString(sDate)}</div>
diff --git a/front_end/src/components/style/createSession.css b/front_end/src/components/style/createSession.css
index 89000af..f22eabf 100644
--- a/front_end/src/components/style/createSession.css
+++ b/front_end/src/components/style/createSession.css
@@ -1,5 +1,8 @@
-.createActivite{
-    background: var(--tint1);
-    padding: 15px;
-    border-radius: 15px;
-}
\ No newline at end of file
+.createActivite {
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    padding: 20px;
+    border-radius: 16px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css
index ccc46c5..14a8f0c 100644
--- a/front_end/src/components/style/edt.css
+++ b/front_end/src/components/style/edt.css
@@ -1,17 +1,24 @@
-.edt{
-  background-color: var(--tint2);
-  border-radius: 30px;
-  padding: 10px;
-  border: 2px solid var(--tint4);
-  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
+.edt {
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  border-radius: 24px;
+  padding: 20px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.edt_header{
+.edt:hover {
+  border-color: var(--green-primary);
+  box-shadow: 0 12px 40px var(--green-A-primary);
+}
+
+.edt_header {
   justify-content: center;
   display: grid;
   grid-template-columns: repeat(3, 0.5fr);
-  padding-bottom: 10px;
-  gap: 5%;
+  padding-bottom: 16px;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
 .edt_colonnes {
@@ -24,7 +31,7 @@
   width: 100%;
 }
 
-.edt_loading{
+.edt_loading {
   position: absolute;
   inset: 0;
   display: grid;
@@ -32,31 +39,43 @@
 }
 
 .edt_colonne {
-  background-color: var(--tint3);
-  border-radius: 20px;
-  transition: all 0.3s ease;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint4) 100%);
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   height: 100%;
+  border: 1px solid var(--tint4);
+  padding: 12px;
+}
+
+.edt_colonne.today {
+  background: linear-gradient(135deg, var(--tint1) 25%, var(--tint2) 100%);
+  border: 1px solid var(--green-primary);
 }
 
 
-.edt_day_header{
+.edt_day_header {
   font-size: clamp(5px, 1vw, 18px);
-  padding: 8px;
-  border-radius: 20px;
+  padding: 12px;
+  border-radius: 12px;
   height: fit-content;
   text-align: center;
   font-size: 1em;
-  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark)); 
-  font-weight: 600;
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
+  font-weight: 700;
   font-size: large;
+  color: white;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.today{
-  background: linear-gradient(135deg, var(--green-primary), var(--green-dark)); 
+.edt_day_header.today {
+  background: linear-gradient(135deg, var(--green-dark) 0%, var(--cyan-accent) 100%);
   color: #FFFFFF;
+  box-shadow: 0 6px 20px var(--green-A-primary);
+  transform: scale(1.02);
 }
 
-.edt_day_content{
+.edt_day_content {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -68,39 +87,39 @@
 .edt_session {
   font-size: clamp(1px, 8cqi, 18px);
   gap: 8px;
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
   border-radius: 12px;
-  padding: 5%;
+  padding: 12px;
   min-width: 0;
-  border-left: 3px solid var(--green-primary); /* Accent vert à gauche */
-  transition: all 0.3s ease;
+  border-left: 4px solid var(--green-primary);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  box-shadow: var(--shadow-sm);
 }
 
 .edt_session:hover {
-  background-color: var(--tint2);
-  border-left-width: 5px;
-  transform: translateX(3px);
-  box-shadow: -2px 2px 8px var(--green-A-primary);
+  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
+  border-left-width: 6px;
+  transform: translateX(4px);
+  box-shadow: 0 8px 16px var(--green-A-primary);
 }
 
 .edt_session:active {
-  background-color: var(--tint5);
   transform: translateX(1px);
 }
 
-.edt_session_header{
+.edt_session_header {
   display: flex;
   gap: 5px;
 }
 
-.edt_date{
+.edt_date {
   font-size: 0.75em;
   font-weight: 500;
 }
 
-.edt_button_week_select{
-  background: linear-gradient(135deg, var(--green-primary), var( --green-secondary));
+.edt_button_week_select {
+  background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
   color: white;
   height: 40px;
   border-radius: 20px;
@@ -123,7 +142,7 @@
   box-shadow: 0 1px 2px var(--green-A-primary);
 }
 
-.edt_session_modal{
+.edt_session_modal {
   background-color: var(--tint2);
   padding: 10px;
   border-radius: 20px;
@@ -132,14 +151,14 @@
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary);
 }
 
-.ent_activite_list{
+.ent_activite_list {
   padding: 10px;
   background-color: var(--tint3);
   border-radius: 10px;
   border: 1px solid var(--green-A-primary);
 }
 
-.edt_activite_modal{
+.edt_activite_modal {
   background-color: var(--tint3);
   padding: 10px;
   border-radius: 20px;
diff --git a/front_end/src/components/style/objectList.css b/front_end/src/components/style/objectList.css
index bc6c3df..be7fdaf 100644
--- a/front_end/src/components/style/objectList.css
+++ b/front_end/src/components/style/objectList.css
@@ -1,65 +1,81 @@
 .list_object{
   display: grid;
-  gap:10px;
-  background-color: var(--tint1);
-  padding: 10px;
-  border-radius: 20px;
+  gap: 12px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-md);
 }
 
 .list_object_modal{
   display: grid;
-  gap:10px;
-  background-color: var(--tint1);
-  padding: 10px;
-  border-radius: 20px;
-  max-height: 200px;
+  gap: 12px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 16px;
+  border-radius: 16px;
+  max-height: 280px;
   overflow-y: auto;
+  border: 1px solid var(--tint4);
 }
 
 .object {
-  
   font-size: clamp(1px, 8cqi, 18px);
   gap: 8px;
-  background-color: var(--tint3);
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
   border-radius: 12px;
-  padding: 10px;
+  padding: 12px;
   min-width: 0;
-  border: 2px solid;
-  border-color: var(--tint3);
+  border: 1px solid var(--tint4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
 }
+
 .object:hover {
-  background-color: var(--tint2);
+  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
   border-color: var(--green-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px var(--green-A-primary);
 }
 
 .object:active {
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
+  transform: translateY(0);
 }
+
 .object_header{
   display: flex;
-  gap: 5px;
+  gap: 8px;
+  align-items: center;
+  font-weight: 600;
 }
 
 .object_small{
   font-size: 0.75em;
+  opacity: 0.8;
 }
 
 .object_modal{
-  background-color: var(--tint2);
-  padding: 10px;
-  border-radius: 20px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 14px;
+  border-radius: 12px;
   position: relative;
+  border: 1px solid var(--tint4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+
 .session_modal_activite_list{
   display: grid;
-  padding: 10px;
-  background-color: var(--tint3);
-  border-radius: 10px;
-  gap: 5px;
+  padding: 12px;
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+  border-radius: 12px;
+  gap: 8px;
+  border: 1px solid var(--tint4);
 }
 
 .activiteList{
   display: flex;
-  gap: 10px;
-}
\ No newline at end of file
+  gap: 12px;
+  flex-wrap: wrap;
+}
diff --git a/front_end/src/components/style/topBar.css b/front_end/src/components/style/topBar.css
index acee0f8..1465d63 100644
--- a/front_end/src/components/style/topBar.css
+++ b/front_end/src/components/style/topBar.css
@@ -1,18 +1,27 @@
-.topBar{
+.topBar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding:15px;
-    background: var(--tint2);
-    border-radius: 30px;
-    height: 60px;
-    border: 3px solid var(--tint5);
+    padding: 16px 24px;
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    border-radius: 20px;
+    height: auto;
+    min-height: 70px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-md);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.topBar:hover {
+    border-color: var(--green-primary);
+    box-shadow: 0 8px 32px var(--green-A-primary);
 }
 
 .toBarLeft{
     flex: 1;
     display: flex;
-    gap: 10px;
+    gap: 16px;
     align-items: center;
     
 }
@@ -27,53 +36,86 @@
 
 .topBarRight{
     flex: 1;
+    font-weight: 600;
+}
+
+.toBarLeft h2 {
+    background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+
+.topBarRight {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
 }
 
-.loginContainer{
+.loginContainer {
     position: relative;
 }
 
-.login{
-    position:absolute;
+.login {
+    position: absolute;
     right: 0;
-    top: 1;
+    top: calc(100% + 8px);
     display: grid;
-    gap:15px;
+    gap: 12px;
     width: fit-content;
     white-space: nowrap;
     align-items: left;
-    background: var(--tint2) ;
-    padding: 10px;
-    border-radius: 15px;
-    border: 3px solid var(--tint5);
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-lg);
+    z-index: 1000;
+    backdrop-filter: blur(10px);
 }
 
-.loginButton{
+.loginButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 120px;
     height: 30px;
     border-radius: 15px;
 }
 
 
-.ButtonTheme{
-    height: 40px;
-    width: 40px;
+.ButtonTheme {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    width: 44px;
     color: var(--text);
-    background-color: var(--tint3);
-    border-radius: 15px;
-    font-size: 16px;
-    border-color: var(--tint5);
+    background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+    border: 1px solid var(--tint4);
+    border-radius: 12px;
+    font-size: 18px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
 }
 
-.ButtonTheme:hover{
+.ButtonTheme:hover {
     border-color: var(--themeButtonColor);
-    color: var(--themeButtonColor);
+    /* color: var(--themeButtonColor); */
+    box-shadow: 0 4px 12px rgba(0, 170, 255, 0.3);
+    transform: scale(1.05) rotateZ(-180deg);
 }
 
-.logo{
-    height: 30px;
+.logo {
+    height: 40px;
+    filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3));
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.logo:hover {
+    transform: scale(1.1) rotateY(10deg);
 }
\ No newline at end of file
diff --git a/front_end/src/requetes.tsx b/front_end/src/requetes.tsx
index 8a2e61e..975fe08 100644
--- a/front_end/src/requetes.tsx
+++ b/front_end/src/requetes.tsx
@@ -219,28 +219,11 @@ export async function postAthlete(athlete: Athlete):Promise<Athlete>{
 
 export async function postSession(session: Session){
     try {
-       /* const data = {
-                name: session.name,
-                creneau: session.creneau, // string ISO OK
-                duree: session.duree,
-                isRecurrent: session.isRecurrent,
-
-                coachId: session.coach?.id,
-                groupe: session.groupe ? session.groupe  : undefined,
-        }*/
-
         const response = await sessionService.create(session.toDTO());
         session.id = response.data.id; //TODO ?
 
         session.activites.forEach(activite => {
-            const data2 = {
-                name: activite.nom,
-                duree: activite.duree,
-                date: activite.data,
-                theme: activite.theme,
-                sessionId: session.id, //TODO
-            }
-            activiteService.create(data2);
+            activiteService.create(activite.toDTO());
             //     console.log("Session créée");
         });
     } catch (error) {
@@ -300,9 +283,14 @@ export async function getSessionsOfUserAPI(user:User): Promise<Session[]>{
             sessionsDTO = response.data;
         }
         const sessions:Session[] = [];
-        sessionsDTO.forEach(sessionDTO => {
-            sessions.push(new Session(sessionDTO));
-        });
+        for (const sessionDTO of sessionsDTO) {
+            const session = new Session(sessionDTO);
+            const coach = await getCoachByIdAPI(sessionDTO.coachId);
+            if(coach!=null){
+                session.coach = coach;
+            }
+            sessions.push(session);
+        }
         return sessions;
 
     }catch (error) {