diff --git a/assets/calendar.js b/assets/calendar.js
index 2c181f4f9616c46c618513b83da39d82c31cbdac..09eb15669fcce21cfc5f55db6df2b2cdc1586200 100644
--- a/assets/calendar.js
+++ b/assets/calendar.js
@@ -33,13 +33,19 @@ $(function () {
   var scheduleIds = []
   var currentSchedule = 1
 
-  function sendCalendarData() {
+  function getAllSchedules() {
     var schedules = []
     scheduleIds.forEach(function (id) {
       var schedule = calendar.getSchedule(String(id), '1');
       schedules[schedules.length] = schedule
     })
 
+    return schedules
+  }
+
+  function sendCalendarData() {
+    var schedules = getAllSchedules();
+
 
     $.ajax({
       type: "POST",
@@ -80,7 +86,7 @@ $(function () {
   });
 
   calendar.on('beforeDeleteSchedule', function (event) {
-    calendar.deleteSchedule(event.schedule.id, event.schedule.calendarId, event.schedule);
+    calendar.deleteSchedule(event.schedule.id, event.schedule.calendarId);
     sendCalendarData();
   });
 
@@ -126,4 +132,140 @@ $(function () {
 
     },
   });
+
+  function createSchedule(start, end, title) {
+    var schedule = {
+      id: String(currentSchedule),
+      calendarId: '1',
+      title: title,
+      start: start,
+      end: end,
+      category: 'time'
+    };
+
+    scheduleIds[scheduleIds.length] = currentSchedule;
+    currentSchedule++;
+
+    calendar.createSchedules([schedule]);
+  }
+
+  $(planForm).on('submit', function (e) {
+    e.preventDefault();
+    // taskPlan, hoursPlan, deadlinePlan
+    var deadline = new Date(deadlinePlan.value + "T00:00:00-05:00")
+    console.log(deadline)
+    var today = new Date()
+    var day = new Date(new Date().setDate(today.getDate() + 1))
+    var schedules = getAllSchedules();
+
+    console.log(schedules)
+
+    var days = []
+    var availableHoursTotal = 0
+    while (day.getDate() <= deadline.getDate()) {
+      day.availableHours = 10; // de 8h à 18h
+      day.schedules = []
+      var minTime = new Date(day)
+      minTime.setHours(8)
+      minTime.setMinutes(0)
+      minTime.setSeconds(0)
+      var maxTime = new Date(day)
+      maxTime.setHours(18)
+      maxTime.setMinutes(0)
+      maxTime.setSeconds(0)
+
+      schedules.forEach(function (schedule) {
+        if (schedule) {
+          startTime = schedule.start._date
+          endTime = schedule.end._date
+          if (endTime > minTime && startTime < maxTime) {
+            if (startTime < minTime) {
+              startTime = minTime
+            }
+            if (endTime > maxTime) {
+              endTime = maxTime
+            }
+            minutes = endTime.getMinutes() - startTime.getMinutes()
+            day.availableHours -= (minutes / 60)
+            day.schedules[day.schedules.length] = schedule
+          }
+        }
+      })
+      availableHoursTotal += day.availableHours
+
+      days[days.length] = day
+
+      day = new Date(new Date().setDate(day.getDate() + 1))
+    }
+
+    var hoursToWork = hoursPlan.value
+    var task = taskPlan.value
+
+    if (hoursToWork > availableHoursTotal) {
+      alert("There are more hours of work to do than what is available !")
+      return
+    }
+
+    days.forEach(function (day) {
+      console.log("day", day)
+      console.log("hours total", availableHoursTotal)
+      console.log("day total", day.availableHours)
+      hoursToPlace = (day.availableHours / availableHoursTotal) * hoursToWork
+      beginTime = new Date()
+      beginTime.setDate(day.getDate())
+      beginTime.setHours(8)
+      beginTime.setMinutes(0)
+      beginTime.setSeconds(0)
+      endTime = new Date(beginTime)
+      endTime.setHours(9)
+      i = 0
+      while (hoursToPlace > 0 && i < 50) {
+        console.log("hours", hoursToPlace)
+        clear = true
+        getAllSchedules().forEach(function (schedule) {
+          console.log("schedule", schedule)
+          // console.log(schedule.start._date)
+          // console.log(beginTime, endTime, schedule.start._date, schedule.end._date)
+          if (schedule) {
+            if (beginTime <= schedule.start._date && schedule.start._date <= endTime) {
+              clear = false
+              console.log("not clear 1")
+            }
+            if (beginTime <= schedule.end._date && schedule.end._date <= endTime) {
+              clear = false
+              console.log("not clear 2")
+            }
+            if (schedule.start._date < beginTime && schedule.end._date > endTime)
+            {
+              clear = false
+              console.log("not clear 3")
+            }
+          }
+        })
+        if (clear) {
+          createSchedule(beginTime, endTime, task)
+          hoursToPlace--;
+        }
+        beginTime.setHours(beginTime.getHours() + 1)
+        endTime.setHours(endTime.getHours() + 1)
+        console.log("check new begin and end")
+        console.log(beginTime)
+        console.log(endTime)
+        i++;
+      }
+      if (i > 50) alert("FATAL ERROR!!!!")
+    })
+
+    sendCalendarData();
+  })
+
+  $("#clearPlanButton").on('click', function (e) {
+    var schedules = getAllSchedules()
+    schedules.forEach(function (schedule) {
+      if (schedule && schedule.title == taskPlan.value) {
+        calendar.deleteSchedule(schedule.id, schedule.calendarId);
+      }
+    })
+    sendCalendarData();
+  })
 });
diff --git a/templates/calendar/index.html.twig b/templates/calendar/index.html.twig
index d0e2aca54bf75faa8c8b13bf74ea3c0e894792eb..e1ee7a4cdd7e0a7363104ee276a455cc391a0180 100644
--- a/templates/calendar/index.html.twig
+++ b/templates/calendar/index.html.twig
@@ -9,22 +9,58 @@
 {% endblock %}
 {% block body %}
 
-	<h1>Welcome to
-		{{ "SmartCal" }}!
-	</h1>
+	<div class="container mt-2">
+
+		<h1 style="text-align: center;">Welcome to SmartCal,
+			{{ app.user.displayName }}!
+		</h1>
+
+		<div class="row">
+			<div
+				class="col">
+				<!-- Button trigger modal -->
+				<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#feedbackModal">
+					Daily feedback
+				</button>
+			</div>
+
+			<div class="col badge badge-primary text-wrap" style="width: 40rem;color : black;">
+				<button id="prevBtn" class="btn btn-secondary">Prev</button>
+				<button id="nextBtn" class="btn btn-primary">Next</button>
+				<h4 class="text-center">
+					<span id="dateStart"></span>
+					to
+					<span id="dateEnd"></span>
+				</h4>
+			</div>
+
+			<div class="col">
+				<p>
+					<strong>Planning for deadline</strong>
+				</p>
+				<form id="planForm">
+					<div class="row">
+					<input placeholder="Task to do" required class="form-control mb-1" type="text" id="taskPlan"/>
+					<input placeholder="Hours of work" required class="form-control mb-1" type="number" id="hoursPlan"/>
+					<label for="deadlinePlan">Deadline</label>
+					<input required class="form-control mb-1" type="date" id="deadlinePlan"/>
+					</div>
+
+					<div class="row">
+					<button class="btn btn-primary col" type="submit">Plan</button>
+					<button id="clearPlanButton" class="btn btn-danger col" type="button">Clear</button>
+					</div>
+				</form>
+			</div>
+		</div>
 
-	<body>
 
-		<!-- Button trigger modal -->
-		<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
-			Daily feedback
-		</button>
 		<!-- Modal -->
-		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+		<div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<div class="modal-header">
-						<h5 class="modal-title" id="exampleModalLabel">Daily Feedback</h5>
+						<h5 class="modal-title" id="feedbackModalLabel">Daily Feedback</h5>
 						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 					</div>
 					<div class="modal-body">
@@ -38,16 +74,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="badge badge-primary text-wrap" style="width: 40rem;color : black;">
-			<button id="prevBtn" class="btn btn-secondary">Prev</button>
-			<button id="nextBtn" class="btn btn-primary">Next</button>
-			<h4 class="text-center">
-				<span id="dateStart"></span>
-				jusqu'au
-				<span id="dateEnd"></span>
-			</h4>
-		</div>
-		<div id="calendarList"></div>
-	</body>
+
+	</div>
 
 {% endblock %}
diff --git a/templates/login/index.html.twig b/templates/login/index.html.twig
index ed542ad95d3d577878cf26a96543420312ea632f..f51a5900c2dac1a8f4e0d6689aa7131487fb9307 100644
--- a/templates/login/index.html.twig
+++ b/templates/login/index.html.twig
@@ -5,27 +5,28 @@
 
 	<div class="container mt-5 card">
 		{% if error %}
-			<div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+			<div class="alert alert-danger mb-3">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
 		{% endif %}
 
 		{% for message in app.flashes('success') %}
-			<div class="alert alert-success">
+			<div class="alert alert-success mt-3">
 				{{ message }}
 			</div>
 		{% endfor %}
 
+        <p>No account yet ? <a href="{{ path("sign_up") }}">Click here !</a></p>
 
 		<form action="{{ path('login') }}" method="post">
 			<label class="form-label" for="username">Email address:</label>
-			<input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}"/>
+			<input required class="form-control mb-3" type="text" id="username" name="_username" value="{{ last_username }}"/>
 
 			<label class="form-label" for="password">Password:</label>
-			<input class="form-control" type="password" id="password" name="_password"/>
+			<input required class="form-control mb-3" type="password" id="password" name="_password"/>
 
 			{# If you want to control the URL the user is redirected to on success
 					        <input type="hidden" name="_target_path" value="/account"/> #}
 
-			<button class="btn btn-primary" type="submit">Log in</button>
+			<button class="btn btn-primary mb-3" type="submit">Log in</button>
 		</form>
 	</div>
 {% endblock %}