diff --git a/frontend/src/Apps/ManageCourses.vue b/frontend/src/Apps/ManageCourses.vue
index 7337633..96bd35b 100644
--- a/frontend/src/Apps/ManageCourses.vue
+++ b/frontend/src/Apps/ManageCourses.vue
@@ -17,7 +17,7 @@
   const editElementID = ref("")
 
   function editItem(id){
-    editElementID = id;
+    editElementID.value = id;
   }
 
   //Juste pour montrer le Create Mode
diff --git a/frontend/src/Apps/Schedule.vue b/frontend/src/Apps/Schedule.vue
index 490cf9b..1fab1bc 100644
--- a/frontend/src/Apps/Schedule.vue
+++ b/frontend/src/Apps/Schedule.vue
@@ -3,23 +3,26 @@
  
   const schedule = [
     {course:"Math Pour L'info",
-     start:"Wed Mar 27 2024 10:15 GMT+0100",
-     end:"Wed Mar 27 2024 12:15 GMT+0100"},
+     start:"Tue Mar 26 2024 08:15 GMT+0100",
+     end:"Tue Mar 26 2024 10:15 GMT+0100",
+    color:"rgb(0,50,100)"},
     {
       course:"Calculus",
-      start:"Wed Mar 27 2024 08:00 GMT+0100",
-      end:"Wed Mar 27 2024 10:00 GMT+0100"
-      
+      start:"Wed Mar 27 2024 08:15 GMT+0100",
+      end:"Wed Mar 27 2024 09:15 GMT+0100",   
+      color:"rgb(100,50,0)"
   },
   {
       course:"Physique II",
-      start:"Tue Mar 26 2024 10:15 GMT+0100",
-      end:"Tue Mar 26 2024 12:15 GMT+0100"      
+      start:"Tue Mar 26 2024 10:30 GMT+0100",
+      end:"Tue Mar 26 2024 12:30 GMT+0100", 
+      color:"rgb(100,50,100)"
   },
     {
       course:"Math Pour L'info",
-      start:"Thu Mar 28 2024 10:15 GMT+0100",
-      end:"Thu Mar 28 2024 12:15 GMT+0100"      
+      start:"Tue Mar 26 2024 13:30 GMT+0100",
+      end:"Tue Mar 26 2024 15:30 GMT+0100", 
+      color:"rgb(100,0,50)"
   }]
   function formatDate(date) {
     var d = new Date(date),
@@ -97,10 +100,28 @@
       return matrix;
   }
 
-  
-  const schedule2 = matrixFromList(schedule);
-  const scheduleByWeek = transpose(schedule2);
-  
+  function sundayToTheEnd(list){
+    const newlist = list;
+    const sunday = newlist.shift();
+    newlist.push(sunday);
+    return newlist;
+  }
+
+  function getDifferenceTime(date1,date2){
+    return Math.abs((new Date(date2).getTime() - new Date(date1).getTime())/60000);
+  }
+
+  function getMarginTop(list, index1, index2){
+    if(index2 < 0){
+      const temp = new Date(list[index1].start);
+      temp.setHours(8,0,0);
+      return Math.abs((new Date(list[index1].start).getTime()- temp.getTime())/60000);
+    }   
+    return Math.abs((new Date(list[index1].start).getTime()- new Date(list[index2].end).getTime())/60000)+getMarginTop(list,index2,index2-1);
+  }
+
+
+  const scheduleByWeek = sundayToTheEnd(matrixFromList(schedule));
   console.log(scheduleByWeek)
 
 </script>
@@ -126,8 +147,15 @@
         </tr>
       </table>
       <div class="courseGrid">
-        <div v-for="i in 7">
-          Test
+        <div class="dayCourse" v-for="element in scheduleByWeek">
+          <template v-for="i,index in element.length">
+            {{console.log(element[index].start)}}
+            <div class="course" v-bind:style="{background:element[index].color,
+              height:((getDifferenceTime(element[index].end,element[index].start)/7.2)-0.5)+'%', top:((getMarginTop(element, index, index-1)/7.20))+'%'}">      
+              
+              <div>Local</div> 
+          </div>
+          </template>
         </div>
       </div>
     </div>
@@ -201,11 +229,20 @@
       }
   
 
-  .course{
-    width:100%;
-    height:100%;
-    background-color:rgb(100,0,100);
-  }
 
+  .course{
+    position:relative;
+    border: 1px solid black;
+    border-radius:10px;
+    width:90%;
+    margin-left:auto;
+    margin-right:auto;
+    display:grid;
+    grid-template-rows:1fr 1fr 1fr;
+    }
+  
+  .dayCourse{
+    display:block; 
+  }
   
 </style>