diff --git a/app/static/js/assiduites.js b/app/static/js/assiduites.js
index 91fee8cf..a29c2f25 100644
--- a/app/static/js/assiduites.js
+++ b/app/static/js/assiduites.js
@@ -837,3 +837,64 @@ function dateCouranteEstTravaillee() {
   }
   return true;
 }
+
+/**
+ * Ajout de la visualisation des assiduités de la mini timeline
+ * @param {HTMLElement} el l'élément survollé
+ * @param {Assiduité} assiduite l'assiduité représentée par l'élément
+ */
+function setupAssiduiteBubble(el, assiduite) {
+  function formatDateModal(dateStr) {
+    const date = new Date(Date.removeUTC(dateStr));
+    return date.format("DD/MM/Y HH:mm");
+  }
+
+  if (!assiduite) return;
+
+  const bubble = document.createElement("div");
+  bubble.className = "assiduite-bubble";
+  bubble.classList.add(assiduite.etat.toLowerCase());
+
+  const idDiv = document.createElement("div");
+  idDiv.className = "assiduite-id";
+  getModuleImpl(assiduite).then((modImpl) => {
+    idDiv.textContent = `${modImpl}`;
+  });
+  bubble.appendChild(idDiv);
+
+  const periodDivDeb = document.createElement("div");
+  periodDivDeb.className = "assiduite-period";
+  periodDivDeb.textContent = `${formatDateModal(assiduite.date_debut)}`;
+  bubble.appendChild(periodDivDeb);
+  const periodDivFin = document.createElement("div");
+  periodDivFin.className = "assiduite-period";
+  periodDivFin.textContent = `${formatDateModal(assiduite.date_fin)}`;
+  bubble.appendChild(periodDivFin);
+
+  const stateDiv = document.createElement("div");
+  stateDiv.className = "assiduite-state";
+  stateDiv.textContent = `État: ${assiduite.etat.capitalize()}`;
+  bubble.appendChild(stateDiv);
+
+  const motifDiv = document.createElement("div");
+  stateDiv.className = "assiduite-why";
+  const motif = ["", null, undefined].includes(assiduite.desc)
+    ? "Pas de motif"
+    : assiduite.desc.capitalize();
+  stateDiv.textContent = `Motif: ${motif}`;
+  bubble.appendChild(motifDiv);
+
+  const userIdDiv = document.createElement("div");
+  userIdDiv.className = "assiduite-user_id";
+  userIdDiv.textContent = `saisie le ${formatDateModal(
+    assiduite.entry_date,
+    " à "
+  )}`;
+
+  if (assiduite.user_id != null) {
+    userIdDiv.textContent += `\npar ${assiduite.user_nom_complet}`;
+  }
+  bubble.appendChild(userIdDiv);
+
+  el.appendChild(bubble);
+}
diff --git a/app/templates/assiduites/pages/signal_assiduites_diff.j2 b/app/templates/assiduites/pages/signal_assiduites_diff.j2
index b61b538b..699024bc 100644
--- a/app/templates/assiduites/pages/signal_assiduites_diff.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_diff.j2
@@ -1,101 +1,371 @@
-{#
-
-    - TODO : revoir le fonctionnement de cette page (trop lente / complexe)
-    - Utiliser majoritairement du python
- #}
-
 {% extends "sco_page.j2" %}
 
 {% block styles %}
-    {{ super() }}
-    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
+{{ super() }}
+<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
+<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">
+
+<style>
+    .ui-timepicker-container,#ui-datepicker-div{
+        z-index: 5 !important;
+    }
+    #new_periode,
+    #actions {
+        display: flex;
+        flex-direction: column;
+        width: fit-content;
+        gap: 0.5em;
+    }
+
+    #fix {
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+        justify-content: space-between;
+        width: fit-content;
+    }
+
+    #fix>.box {
+        border: 1px solid #444;
+        border-radius: 0.5em;
+        padding: 1em;
+    }
+
+    .timepicker {
+        width: 5em;
+        text-align: center;
+    }
+
+    #moduleimpl_select {
+        width: 10em;
+    }
+
+    #gtrcontent .pdp {
+        display: none;
+    }
+
+    #gtrcontent[data-pdp="true"] .pdp {
+        display: block;
+    }
+
+    #tableau-periode {
+        overflow-x: scroll;
+        max-width: var(--sco-content-max-width);
+    }
+
+    #tableau-periode .pdp {
+        width: 2em;
+        height: 2em;
+        border-radius: 50%;
+    }
+
+    .grid-table {
+        display: grid;
+        grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr);
+        width: var(--sco-content-max-width);
+    }
+    .cell, .header {
+        border: 1px solid #ddd;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #f9f9f9;
+    }
+    .header{
+        justify-content: space-between;
+
+    }
+    .cell{
+        justify-content: center;
+
+    }
+
+    .cell p{
+        text-align: center;
+    }
+    .sticky {
+        position: sticky;
+        left: 0;
+        background-color: #f9f9f9;
+        z-index: 2;
+    }
+
+    .cell .assiduite-bubble {
+        display: block;
+        top: 0;
+        z-index: 0;
+    }
+    
+
+</style>
+
+{# Temporaire #}
+<style>
+.wip::before{
+    content: "WIP 🚧";
+    font-size: 1.5em;
+    margin: 2px;
+    color: red;
+}
+</style>
+
 {% endblock styles %}
 
+{% block scripts %}
+{{ super() }}
+<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
+<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
+<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
+{% include "sco_timepicker.j2" %}
+
+<script>
+
+    function afficherPDP(checked) {
+        if (checked) {
+            gtrcontent.setAttribute("data-pdp", "true");
+        } else {
+            gtrcontent.removeAttribute("data-pdp");
+        }
+    }
+
+    async function nouvellePeriode(){
+        periodeId++;
+
+        // On récupère les valeurs des inputs
+        let date = document.getElementById("date").value;
+        let debut = document.getElementById("debut").value;
+        let fin = document.getElementById("fin").value;
+        let moduleimpl_id = document.getElementById("moduleimpl_select").value;
+        const moduleimpl = await getModuleImpl({moduleimpl_id: moduleimpl_id});
+
+        // On ajoute la nouvelle période au tableau
+        let periodeDiv = document.createElement("div");
+        periodeDiv.classList.add("cell", "sticky");
+        const periodP = document.createElement("p");
+        periodP.textContent = `Période du ${date} de ${debut} à ${fin}`;
+
+        const modP = document.createElement("p");
+        modP.textContent = moduleimpl;
+
+        const close = document.createElement("button");
+        close.textContent = "❌";
+        close.addEventListener("click", (event)=>{
+            document.querySelectorAll(`.cell[data-periodeid="${periodeDiv.getAttribute('data-periodeid')}"]`).forEach((e)=>e.remove());
+        });
+
+        periodeDiv.appendChild(periodP);
+        periodeDiv.appendChild(modP);
+        periodeDiv.appendChild(close);
+        periodeDiv.setAttribute("data-periodeid", periodeId);
+        document.getElementById("tableau-periode").appendChild(periodeDiv);
+        
+        let etudids = [...document
+        .querySelectorAll("#tableau-periode .header[data-etudid]")]
+        .map((e)=>e.getAttribute("data-etudid"));
+        
+        const date_debut = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + debut);
+        const date_fin = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + fin);
+        date_debut.add(1, "seconds")
+        const url =
+        `../../api/assiduites/group/query?date_debut=${date_debut.toFakeIso()}` +
+        `&date_fin=${date_fin.toFakeIso()}&etudids=${etudids.join(',')}&with_justifs`;
+        
+
+        await fetch(url)
+        .then((res) => {
+        if (!res.ok) {
+            throw new Error("Network response was not ok");
+        }
+        return res.json();
+        })
+        .then((data)=>{
+            Object.entries(data).forEach(([etudid, assiduites]) => {
+                let cell = document.createElement("div");
+                cell.classList.add("cell");
+                cell.setAttribute("data-etudid", etudid);
+                cell.setAttribute("data-periodeid", periodeId);
+
+                if (assiduites.length == 0) {
+                    ["present", "retard", "absent"].forEach((value) => {
+                        const cbox = document.createElement('input');
+                        cbox.type = "checkbox";
+                        cbox.value = value;
+                        cbox.name = `rbtn_${etudid}_${periodeId}`
+                            cbox.classList.add("rbtn", value);
+
+                        cbox.addEventListener('click', (event)=>{
+                            const parent = event.target.parentElement;
+                            parent.querySelectorAll(".rbtn").forEach((ele)=>{
+                                if(ele.value != value){
+                                    ele.checked = false;
+                                }
+                            })
+                        })
+
+                        cbox.checked = etatDef.value == value
+
+                        cell.appendChild(cbox);
+                    });
+                }else{
+                    setupAssiduiteBubble(cell, assiduites[0])
+                }
+
+                document.getElementById("tableau-periode").appendChild(cell);
+            });
+        }).catch((error)=>{
+            console.error('Error:', error);
+        });
+
+    }
+
+
+
+    let periodeId = 0;
+    const moduleimpls = new Map();
+    const nonWorkDays = [{{ nonworkdays| safe }}];
+
+
+    window.forceModule = "{{ forcer_module }}" == "True"
+    if (window.forceModule) {
+        if (moduleimpl_select.value == "") {
+            document.getElementById('forcemodule').style.display = "block";
+                add_periode.disabled = true;
+
+        }
+
+        moduleimpl_select?.addEventListener('change', (e) => {
+            if (e.target.value != "") {
+                document.getElementById('forcemodule').style.display = "none";
+                add_periode.disabled = false;
+
+            } else {
+                document.getElementById('forcemodule').style.display = "block";
+                add_periode.disabled = true;
+
+            }
+        });
+    }
+
+    async function main(){
+        afficherPDP(pdp.checked);
+        $('#date').on('change', async function(d) {
+        // On vérifie si la date est un jour travaillé
+        dateCouranteEstTravaillee();
+        });
+    }
+
+
+    main();
+</script>
+
+{% endblock scripts %}
+
 {% block title %}
-    {{title}}
+{{title}}
 {% endblock title %}
 
 {% block app_content %}
 
-{% include "assiduites/widgets/alert.j2" %}
-{% include "assiduites/widgets/prompt.j2" %}
-{% include "assiduites/widgets/conflict.j2" %}
-{% include "assiduites/widgets/toast.j2" %}
-<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
-
 <h2>Signalement différé de l'assiduité {{gr |safe}}</h2>
 
-<div class="ue_warning">Attention, cette page utilise des couleurs et conventions différentes
-        de celles des autres pages ScoDoc: elle sera prochainement modifée, merci de votre patience.
-        </div>
 
-<h3>{{sem | safe }}</h3>
+<div id="fix">
+    <!-- Nouvelle période
+        Permet de créer une nouvelle ligne pour une nouvelle période
+        (
+            Jour, -> datepicker
+            Heure de début, -> timepicker
+            Heure de fin -> timepicker
+            ModuleImplId -> select (liste des modules tout semestre confondu)
+        )
+    --->
 
-{{diff | safe}}
+    <div id="new_periode" class="box">
+        <h4>Nouvelle période</h4>
+        <label for="date">
+            Date :
+            <input type="text" name="date" id="date" class="datepicker">
+        </label>
+        <label for="debut">
+            Heure de début :
+            <input type="text" name="debut" id="debut" class="timepicker">
+        </label>
+        <label for="fin">
+            Heure de fin :
+            <input type="text" name="fin" id="fin" class="timepicker">
+        </label>
 
-<div class="help">
-    <h3>Explication de la saisie différée</h3>
-    <p>Si la colonne n'est pas valide elle sera affichée en rouge, passez le curseur sur la colonne pour afficher
-        le message d'erreur</p>
-    <p>Sélectionner la date de début de la colonne mettra automatiquement la date de fin à la durée d'une séance
-        (préférence de département)</p>
-    <p>Modifier le module alors que des informations d'assiduité sont déjà enregistrées pour la période changera leur
-        module.</p>
-    <p>Il y a 4 boutons sur la colonne permettant d'enregistrer l'information pour tous les étudiants</p>
-    <p>Le dernier des boutons retire l'information présente.</p>
-    <p>Vous pouvez ajouter des colonnes en appuyant sur le bouton + </p>
-    <p>Vous pouvez supprimer une colonne en appuyant sur la croix qui se situe dans le coin haut droit de la colonne.
-    </p>
+        <label for="moduleimpl_select">
+            <div id="forcemodule" style="display: none; margin:10px 0px;">
+                Vous devez spécifier le module ! (voir réglage préférence du semestre)
+            </div>
+            Module :
+            {{moduleimpl_select | safe}}
+        </label>
+
+        <button id="add_periode" onclick="nouvellePeriode()">Ajouter une période</button>
+    </div>
+
+
+    <!-- Boutons d'actions
+        - Sauvegarder
+        - Afficher la photo de profil
+        - Assiduité par défaut (aucune, present, retard, absent)
+        ? - Import Excel (fournie un fichier excel 
+            avec les étudiants et les périodes préremplis)
+    --->
+
+    <div id="actions" class="box">
+        <h4>Actions</h4>
+        <label for="pdp">
+            Photo de profil :
+            <input type="checkbox" name="pdp" id="pdp" checked onclick="afficherPDP(this.checked)">
+        </label>
+
+        <label for="etatDef">
+        Assiduité par défaut : 
+        <select name="etatDef" id="etatDef">
+            <option value="">Aucune</option>
+            <option value="present">Présence</option>
+            <option value="retard">Retard</option>
+            <option value="absent">Absence</option>
+        </select>
+        </label>
+
+        <label for="excel" class="wip">
+            Importer Excel :
+            <input type="file" name="excel" id="excel" accept=".xlsx, .xls, .csv">
+        </label>
+        <button class="wip" id="save wip">Sauvegarder l'assiduité</button>
+    </div>
 </div>
+
+<br>
+
+<!-- Tableau à double entrée 
+        Colonne : Etudiants (Header = Nom, Prénom, Photo (si actif))
+        Ligne : Période (Header = Jour, Heure de début, Heure de fin, ModuleImplId)
+        Contenu : 
+            - bouton assiduité (présent, retard, absent)
+            - Bouton conflit si conflit de période
+    --->
+
+<div id="tableau-periode" class="grid-table">
+   <!-- Header de la première colonne -->
+    <div class="header sticky">Période</div>
+    <!-- Headers des autres colonnes (noms des étudiants) -->
+    {% for etud in etudiants %}
+    <div class="header etudinfo" data-etudid="{{etud.etudid}}" id="head-{{etud.etudid}}">
+        <img src="../../api/etudiant/etudid/{{etud.etudid}}/photo?size=small" alt="{{etud.nomprenom}}" class="pdp">
+        <span>{{ etud.nomprenom }}</span>
+    </div>
+    {% endfor %}
+
+   <!-- Sera remplis avec les nouvelles périodes -->
+
+</div>
+
+
+{% include "assiduites/widgets/alert.j2" %}
 {% endblock app_content %}
-
-
-{% block scripts %}
-    {{ super() }}
-    <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
-    <script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
-    <script>
-    const etudsDefDem = {{ defdem  | safe }}
-
-    const timeMorning = "{{ timeMorning | safe}}";
-    const timeNoon = "{{ timeNoon | safe}}";
-    const timeEvening = "{{ timeEvening | safe}}";
-
-    const defaultDates = {{ defaultDates | safe }}
-    const nonWorkDays = [{{ nonworkdays| safe }}];
-
-
-    window.addEventListener('load', () => {
-        [...document.querySelectorAll('.tr[etudid]')].forEach((a) => {
-            try {
-                if (a.getAttribute("etudid") in etudsDefDem) {
-                    defdem = etudsDefDem[a.getAttribute("etudid")] == "D" ? "dem" : "def";
-                    a.classList.add(defdem);
-                }
-            } catch (_) { }
-        });
-
-        if (defaultDates != null) {
-            defaultDates.forEach((dateString) => {
-
-                d = new Date(dateString);
-
-                if (isNonWorkDay(d, nonWorkDays)) return;
-
-                matin = `${dateString}T${timeMorning}`;
-                midi = `${dateString}T${timeNoon}`;
-                soir = `${dateString}T${timeEvening}`;
-
-                console.log(matin, midi, soir)
-
-                createColumn(matin, midi);
-                createColumn(midi, soir);
-            });
-
-            updateAllCol();
-        } else {
-            createColumn();
-        }
-    })
-</script>
-{% endblock scripts %}
diff --git a/app/templates/assiduites/pages/signal_assiduites_group.j2 b/app/templates/assiduites/pages/signal_assiduites_group.j2
index 341b624a..c3f43af4 100644
--- a/app/templates/assiduites/pages/signal_assiduites_group.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_group.j2
@@ -30,8 +30,8 @@
     const nonWorkDays = [{{ nonworkdays| safe }}];
     const readOnly = {{ readonly }};
 
-    window.forceModule = "{{ forcer_module }}"
-    window.forceModule = window.forceModule == "True" ? true : false
+    window.forceModule = "{{ forcer_module }}" == "True"
+
     const etudsDefDem = {{ defdem  | safe }}
 
     const select = document.getElementById("moduleimpl_select");
diff --git a/app/templates/assiduites/widgets/minitimeline.j2 b/app/templates/assiduites/widgets/minitimeline.j2
index dfe15fc7..8a6b4d11 100644
--- a/app/templates/assiduites/widgets/minitimeline.j2
+++ b/app/templates/assiduites/widgets/minitimeline.j2
@@ -85,66 +85,6 @@
         return timeline;
     }
 
-    /**
-     * Ajout de la visualisation des assiduités de la mini timeline
-     * @param {HTMLElement} el l'élément survollé
-     * @param {Assiduité} assiduite l'assiduité représentée par l'élément
-     */
-    function setupAssiduiteBubble(el, assiduite) {
-
-        function formatDateModal(dateStr){
-            const date = new Date(Date.removeUTC(dateStr));
-            return date.format("DD/MM/Y HH:mm");
-        }
-
-        if (!assiduite) return;
-
-        const bubble = document.createElement('div');
-        bubble.className = "assiduite-bubble";
-        bubble.classList.add(assiduite.etat.toLowerCase());
-
-        const idDiv = document.createElement("div");
-        idDiv.className = "assiduite-id";
-        getModuleImpl(assiduite).then((modImpl) => {
-            idDiv.textContent = `${modImpl}`;
-        });
-        bubble.appendChild(idDiv);
-
-        const periodDivDeb = document.createElement("div");
-        periodDivDeb.className = "assiduite-period";
-        periodDivDeb.textContent = `${formatDateModal(assiduite.date_debut)}`;
-        bubble.appendChild(periodDivDeb);
-        const periodDivFin = document.createElement("div");
-        periodDivFin.className = "assiduite-period";
-        periodDivFin.textContent = `${formatDateModal(assiduite.date_fin)}`;
-        bubble.appendChild(periodDivFin);
-
-        const stateDiv = document.createElement("div");
-        stateDiv.className = "assiduite-state";
-        stateDiv.textContent = `État: ${assiduite.etat.capitalize()}`;
-        bubble.appendChild(stateDiv);
-
-        const motifDiv = document.createElement("div");
-        stateDiv.className = "assiduite-why";
-        const motif = ["", null, undefined].includes(assiduite.desc)  ? "Pas de motif" : assiduite.desc.capitalize();
-        stateDiv.textContent = `Motif: ${motif}`;
-        bubble.appendChild(motifDiv);
-
-        const userIdDiv = document.createElement("div");
-        userIdDiv.className = "assiduite-user_id";
-        userIdDiv.textContent = `saisie le ${formatDateModal(
-            assiduite.entry_date,
-            " à "
-        )}`;
-
-        if (assiduite.user_id != null) {
-            userIdDiv.textContent += `\npar ${assiduite.user_nom_complet}`
-        }
-        bubble.appendChild(userIdDiv);
-
-        el.appendChild(bubble);
-    }
-
     function setMiniTick(timelineDate, dayStart, dayDuration) {
         const endDate = timelineDate.clone().startOf("day");
         endDate.setHours(13, 0);
diff --git a/app/views/assiduites.py b/app/views/assiduites.py
index 4d89939f..d77729fc 100644
--- a/app/views/assiduites.py
+++ b/app/views/assiduites.py
@@ -1813,33 +1813,8 @@ def signal_assiduites_diff():
     formsemestre_id: int = request.args.get("formsemestre_id", -1)
     formsemestre: FormSemestre = FormSemestre.get_formsemestre(formsemestre_id)
 
-    date: str = request.args.get("jour", datetime.date.today().isoformat())
-    date_deb: str = request.args.get("date_deb")
-    date_fin: str = request.args.get("date_fin")
-    semaine: str = request.args.get("semaine")
-
-    # Dans le cas où on donne une semaine plutot qu'un jour
-    if semaine is not None:
-        # On génère la semaine iso à partir de l'anne scolaire.
-        semaine = (
-            f"{scu.annee_scolaire()}-W{semaine}" if "W" not in semaine else semaine
-        )
-        # On met à jour les dates avec le date de debut et fin de semaine
-        date_deb: datetime.date = datetime.datetime.strptime(
-            semaine + "-1", "%Y-W%W-%w"
-        )
-        date_fin: datetime.date = date_deb + datetime.timedelta(days=6)
-
     etudiants: list[Identite] = []
 
-    # --- Vérification de la date ---
-    real_date = scu.is_iso_formated(date, True).date()
-
-    if real_date < formsemestre.date_debut:
-        date = formsemestre.date_debut.isoformat()
-    elif real_date > formsemestre.date_fin:
-        date = formsemestre.date_fin.isoformat()
-
     # Vérification des groupes
     if group_ids is None:
         group_ids = []
@@ -1875,26 +1850,16 @@ def signal_assiduites_diff():
 
     return render_template(
         "assiduites/pages/signal_assiduites_diff.j2",
-        defaultDates=_get_days_between_dates(date_deb, date_fin),
-        defdem=_get_etuds_dem_def(formsemestre),
-        diff=_differee(
-            etudiants=etudiants,
-            moduleimpl_select=_module_selector(
-                formsemestre, request.args.get("moduleimpl_id", None)
-            ),
-            date=date,
-            periode={
-                "deb": formsemestre.date_debut.isoformat(),
-                "fin": formsemestre.date_fin.isoformat(),
-            },
-        ),
+        etudiants=etudiants,
+        moduleimpl_select=_module_selector(formsemestre=formsemestre),
         gr=gr_tit,
         nonworkdays=_non_work_days(),
         sco=ScoData(formsemestre=formsemestre),
-        sem=formsemestre.titre_num(),
-        timeEvening=ScoDocSiteConfig.get("assi_afternoon_time", "18:00:00"),
-        timeMorning=ScoDocSiteConfig.get("assi_morning_time", "08:00:00"),
-        timeNoon=ScoDocSiteConfig.get("assi_lunch_time", "13:00:00"),
+        forcer_module=sco_preferences.get_preference(
+            "forcer_module",
+            formsemestre_id=formsemestre_id,
+            dept_id=g.scodoc_dept_id,
+        ),
     )