diff --git a/app/templates/scolar/partition_editor.html b/app/templates/scolar/partition_editor.html
index bd34fe574..0b204602b 100644
--- a/app/templates/scolar/partition_editor.html
+++ b/app/templates/scolar/partition_editor.html
@@ -86,19 +86,15 @@
 						<div class=etudiants></div>
 					</div>
 					${(() => {
-					let output = "";
-					Object.entries(partition.groups).forEach(([idGroupe, titreGroupe]) => {
-						/***************/
-						outputMasques += `<div data-idgroupe="${idGroupe}"><span class="editing move">||</span><span>${titreGroupe.name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
-						/***************/
-						output += `
-								<div class=groupe data-idgroupe="${idGroupe}">
-									<div>${titreGroupe.name}</div>
-									<div class=etudiants></div>
-								</div>`;
-					})
-					return output;
-				})()}
+						let output = "";
+						Object.entries(partition.groups).forEach(([idGroupe, titreGroupe]) => {
+							/***************/
+							outputMasques += `<div data-idgroupe="${idGroupe}"><span class="editing move">||</span><span>${titreGroupe.name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
+							/***************/
+							output += templateGroupe_zoneGroupes(idGroupe, titreGroupe.name);
+						})
+						return output;
+					})()}
 				</div>`;
 			outputMasques += `
 					<div class="editing ajoutGroupe">+</div>
@@ -121,36 +117,42 @@
 					let output = "<div class=grpPartitions>";
 					Object.entries(partitions).forEach(([idPartition, dataPartition]) => {
 						output += `
-								<div class=partition data-idpartition="${idPartition}">
-									<div>${dataPartition.partition_name}</div>
-									${(() => {
+							<div class=partition data-idpartition="${idPartition}">
+								<div>${dataPartition.partition_name}</div>
+								${(() => {
 								let output = "";
 								let affected = false;
 								Object.entries(dataPartition.groups).forEach(([idGroupe, titreGroupe]) => {
 									output += `
-												<label><input type=radio name="${idPartition}-${etudiant.etudid}" value="${idGroupe}" ${(etudiant.partitions[idPartition] == idGroupe) ? "checked" : ""}><span>${titreGroupe.name}</span></label>`;
+													<label><input type=radio name="${idPartition}-${etudiant.etudid}" value="${idGroupe}" ${(etudiant.partitions[idPartition] == idGroupe) ? "checked" : ""}><span>${titreGroupe.name}</span></label>`;
 
 									if (etudiant.partitions[idPartition] == idGroupe) {
 										affected = true;
-										document.querySelector(`#zoneGroupes [data-idgroupe="${idGroupe}"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant);
+										document.querySelector(`#zoneGroupes [data-idgroupe="${idGroupe}"]>.etudiants`).innerHTML += templateEtudiant_zoneGroupes(etudiant);
 									}
 								})
 								if (!affected) {
-									document.querySelector(`#zoneGroupes [data-idpartition="${idPartition}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant);
+									document.querySelector(`#zoneGroupes [data-idpartition="${idPartition}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiant_zoneGroupes(etudiant);
 								}
 								return `<label title="Aucun groupe"><input type=radio name="${idPartition}-${etudiant.etudid}" value="aucun" ${(!affected) ? "checked" : ""}><span class=aucun>❌</span></label>` + output;
 							})()}
-								</div>`;
+							</div>`;
 					})
 					return output + "</div>";
 				})()}
 				</div>`;
 		})
 		document.querySelector("#zoneChoix>.etudiants").innerHTML = output;
-
 	}
 
-	function templateEtudiantGroupes(etudiant) {
+	function templateGroupe_zoneGroupes(idGroupe, name) {
+		return `<div class=groupe data-idgroupe="${idGroupe}">
+					<div>${name}</div>
+					<div class=etudiants></div>
+				</div>`;
+	}
+
+	function templateEtudiant_zoneGroupes(etudiant) {
 		return `<div data-etudid="${etudiant.etudid}" data-nom="${etudiant.nom_disp}" data-prenom="${etudiant.prenom}">${etudiant.nom_disp} ${etudiant.prenom}</div>`
 	}
 
@@ -274,7 +276,7 @@
 		}
 
 		let results = document.querySelector(`#zoneGroupes [data-idPartition="${idPartition}"] [data-idgroupe="${idGroupe}"]>.etudiants`);
-		results.innerHTML += templateEtudiantGroupes(etudiant);
+		results.innerHTML += templateEtudiant_zoneGroupes(etudiant);
 
 		/* Tri */
 		let results2 = [...results.children];
@@ -308,18 +310,20 @@
 	}
 
 
-	/*******************/
-	/* Ajout partition */
-	/*******************/
+	/****************************/
+	/* Ajout partition / groupe */
+	/****************************/
 	function addPartition() {
 		let date = new Date;
 		if (this.classList.contains("ajoutPartition")) {
+			// Partition
 			var name = "Nouvelle " + date.getSeconds();
 			let params = (new URL(document.location)).searchParams;
 			let formsemestre_id = params.get('formsemestre_id');
 			var url = "/ScoDoc/api/formsemestre/" + formsemestre_id + "/partition/create";
 			var payload = { partition_name: name };
 		} else {
+			// Groupe
 			var name = "Nouveau " + date.getSeconds();
 			var url = `/ScoDoc/api/partition/${this.parentElement.dataset.idpartition}/group/create`;
 			var payload = { group_name: name };
@@ -355,8 +359,72 @@
 				}
 				if (this.classList.contains("ajoutPartition")) {
 					div.dataset.idpartition = r.id;
+
+					// Ajout dans la zone masques
+					let div = document.createElement("div");
+					div.dataset.idpartition = r.id;
+					div.innerHTML = `
+						<div data-idpartition="${r.id}" data-idgroupe=aucun>Non affectés - ${name}</div>
+						<div class="editing ajoutGroupe">+</div>`;
+
+					div.querySelector("div").addEventListener("click", filtre);
+					div.querySelector(".ajoutGroupe").addEventListener("click", addPartition);
+
+					document.querySelector("#zoneChoix .masques>div").appendChild(div);
+
+					// Ajout de la zone pour chaque étudiant
+					let outputGroupes = "";
+
+					document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(e => {
+						let etudid = e.previousElementSibling.dataset.etudid;
+
+						// Préparation pour la section suivante
+						let etudiant = {
+							etudid: etudid,
+							nom_disp: e.previousElementSibling.dataset.nom,
+							prenom:e.previousElementSibling.dataset.prenom
+						}
+						outputGroupes += templateEtudiant_zoneGroupes(etudiant);
+						////////////////////////
+
+						let div = document.createElement("div");
+						div.className = "partition";
+						div.dataset.idpartition = r.id;
+						div.innerHTML = `
+							<div>${name}</div>
+							<label title="Aucun groupe">
+								<input type="radio" name="${r.id}-${etudid}" value="aucun" checked>
+								<span class="aucun">❌</span>
+							</label>
+						`;
+						div.querySelector("input").addEventListener("input", assignment);
+						e.appendChild(div);
+					});
+
+					// Ajout de la zone groupes
+					document.querySelector("#zoneGroupes>.groupes").innerHTML += `
+						<div class=partition data-idpartition="${r.id}">
+							<h3>${name}</h3>
+							<div class=groupe data-idgroupe=aucun>
+								<div>Non affecté(s)</div>
+								<div class=etudiants>${outputGroupes}</div>
+							</div>
+						</div>`;
 				} else {
 					div.dataset.idgroupe = r.id;
+
+					// Ajout du bouton pour chaque étudiant
+					let idpartition = this.parentElement.dataset.idpartition;
+					document.querySelectorAll(`#zoneChoix .etudiants [data-idpartition="${idpartition}"]`).forEach(e => {
+						let etudid = e.parentElement.parentElement.dataset.etudid;
+						let label = document.createElement("label");
+						label.innerHTML = `<input type=radio name="${idPartition}-${etudiant.etudid}" value="${r.id}"><span>${name}</span>`;
+						label.querySelector("input").addEventListener("input", assignment);
+						e.appendChild(label);
+					})
+
+					// Ajout du groupe dans la zone Groupes
+					document.querySelector(`#zoneGroupes .partition[data-idpartition="${idpartition}"]`).innerHTML += templateGroupe_zoneGroupes(r.id, name);
 				}
 
 			})