diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index ccf7bc7..736a8e3 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -3,26 +3,14 @@
 
 <head>
   <meta charset="utf-8">
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Texte.woff2"
-    crossorigin
-  />
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Titre.woff2"
-    crossorigin
-  />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
   <title>template TOPISTO</title>
   <meta name="description" content="Suivi activité">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">
-  
+
 </head>
 
 <body>
@@ -38,15 +26,16 @@
   <nav>
     <section id="ariane">
       <div id="fil"></div>
-      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
+      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log
+            In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
     </section>
     <section id="bandeau">
       <div id="menu">
         <a onclick="activeMenu(this)">Menu1</a>
         <a onclick="activeMenu(this)">Menu2</a>
-        <a onclick="activeMenu(this)">Menu3</a>        
+        <a onclick="activeMenu(this)">Menu3</a>
       </div>
-      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings" >
+      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings">
         <use href="#topisto"></use>
       </svg>
     </section>
@@ -65,7 +54,9 @@
   <dialog id="modal" style="display:flex;flex-direction: row;">
     <section style="width:100%;height:100%">
       <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
-        <div style="float:left"><div class="modal_header">This is a modal header</div></div>
+        <div style="float:left">
+          <div class="modal_header">This is a modal header</div>
+        </div>
         <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
         <div style="clear:both"></div>
       </div>
@@ -84,39 +75,24 @@
       <div style="clear:both"></div>
     </div>
     <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
-    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span class="modal_footer">This is a modal footer</span></div>
+    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
+        class="modal_footer">This is a modal footer</span></div>
   </dialog>
 
-  <template id="filtre_level">
-    <select onchange="changeAffichageNiveauxEvent(event)">
-      <option value="9999" selected>Tous les niveaux</option>
-      <option value="1">1 niveau</option>
-      <option value="2">2 niveaux</option>
-      <option value="3">3 niveaux</option>
-      <option value="4">4 niveaux</option>
-      <option value="5">5 niveaux</option>
-      <option value="6">6 niveaux</option>
-      <option value="7">7 niveaux</option>
-      <option value="8">8 niveaux</option>
-      <option value="9">9 niveaux</option>
-      <option value="10">10 niveaux</option>
-    </select>
-  </template>
-
   <template id="settings_header">
     <section style="display: flex">
       <svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()">
-          <use href="#topisto"></use>
+        <use href="#topisto"></use>
       </svg>
       <svg viewBox="0 0 550 550" onclick="settingsSetModeLogin()">
         <use href="#user"></use>
-      </svg>  
+      </svg>
       <svg viewBox="0 0 1024 1024" onclick="settingsSetModeFilter()">
         <use href="#filter"></use>
-      </svg>  
+      </svg>
       <svg viewBox="0 0 1024 1024" onclick="settingsSetModeSetup()">
         <use href="#setup"></use>
-      </svg>  
+      </svg>
     </section>
   </template>
 
@@ -127,18 +103,25 @@
         <h3>Fournir un template générique pour les applis HTML</h3>
         <p>Version 0.1</p>
         <p><small>
-          contributeurs:<br>
-          Albert Seandhils<br>
-        </small></p>
+            contributeurs:<br>
+            Albert Seandhils<br>
+          </small></p>
       </div>
     </section>
   </template>
 
-  <template id="synthesis_body_accueil">
+  <template id="synthesis_body_Home">
+    <div class="statrow">
+      <div class="statbox2">Indicateur 1<br>110</div>
+      <div class="statbox1">Indicateur 2<br>45</div>
+      <div class="statbox1">Indicateur 3<br>0</div>
+      <div class="statbox1">Indicateur 4<br>0</div>
+      <div class="statbox2">Indicateur 5<br>26</div>
+    </div>
   </template>
 
-  <template id="footer_accueil">
-    <h2>Gestion de Projet</h2>
+  <template id="footer_Home">
+    <h2>Modèle de page HTML pour visulaisation de données</h2>
     <p>
       <small>
         Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
@@ -163,47 +146,47 @@
         NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
       </i>
     </p>
-      <h2>Explications</h2>
-      <p>
-        L'objectif de cette page est de présenter des données sous forme de tableau.<br>
-        La page permet en outre :
-      <ul>
-        <li>De rappeler l'identité visuelle : logo, bannière</li>
-        <li>De naviguer dans l'application</li>
-        <li>D'accéder à une synthèse et à une explication des données</li>
-      </ul>
-      </p>
-      <p>
-        Le header est une bannière qui fait 30% du viewport.
-        Elle contient une image de background alignée à gauche et un texte aligné à droite.
-      </p>
-      <p>
-        Lorsque le header sort de la partie visible de la page :
-      <ul>
-        <li>La barre de navigation devient "collée" au haut de page.</li>
-        <li>Le pied de tableau devient "collé" en bas de page</li>
-        <li>le logo apparaît à gauche de la barre de navigation.</li>
-      </ul>
-      </p>
-      <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
-        toute
-        la page.</p>
-      <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
-        similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
-        voluptatum nesciunt eligendi. Eos harum rerum vitae.
-      </p>
-      <h2>Focus sur la gestion des thèmes</h2>
-      <p>
-        Voici comment s'opère la gestion des couleurs.<br>
-        Dans le default.css, la section CSS root contient des variables CSS.<br>
-        On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
-        Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
-        <br>
-        Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
-      <ul>
-        <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
-        <li>- Soit par calul de dégradé</li>
-      </ul>
+    <h2>Explications</h2>
+    <p>
+      L'objectif de cette page est de présenter des données sous forme de tableau.<br>
+      La page permet en outre :
+    <ul>
+      <li>De rappeler l'identité visuelle : logo, bannière</li>
+      <li>De naviguer dans l'application</li>
+      <li>D'accéder à une synthèse et à une explication des données</li>
+    </ul>
+    </p>
+    <p>
+      Le header est une bannière qui fait 30% du viewport.
+      Elle contient une image de background alignée à gauche et un texte aligné à droite.
+    </p>
+    <p>
+      Lorsque le header sort de la partie visible de la page :
+    <ul>
+      <li>La barre de navigation devient "collée" au haut de page.</li>
+      <li>Le pied de tableau devient "collé" en bas de page</li>
+      <li>le logo apparaît à gauche de la barre de navigation.</li>
+    </ul>
+    </p>
+    <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
+      toute
+      la page.</p>
+    <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
+      similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
+      voluptatum nesciunt eligendi. Eos harum rerum vitae.
+    </p>
+    <h2>Focus sur la gestion des thèmes</h2>
+    <p>
+      Voici comment s'opère la gestion des couleurs.<br>
+      Dans le default.css, la section CSS root contient des variables CSS.<br>
+      On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
+      Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
       <br>
-      Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".  
-  </template>
+      Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
+    <ul>
+      <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
+      <li>- Soit par calul de dégradé</li>
+    </ul>
+    <br>
+    Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
+  </template>
\ No newline at end of file
diff --git a/frontend/src/scripts/UI/IntersectionObserver/footer.js b/frontend/src/scripts/UI/IntersectionObserver/footer.js
index 87f2330..df6e1d9 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/footer.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/footer.js
@@ -3,10 +3,10 @@ const handleFooterIntersection = function (entries) {
   // Loop through all the observed elements
   entries.forEach(entry => {      // Check if the element is intersecting the viewport
       if (entry.isIntersecting) {
-        console.log("The footer is visible in the viewport");
+        msgConsole('IntersectionObserver','The footer is visible in the viewport');
         if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
       } else {
-        console.log("The footer is invisible in the viewport");
+        msgConsole('IntersectionObserver','The footer is invisible in the viewport');
         if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
       }
   });
diff --git a/frontend/src/scripts/UI/IntersectionObserver/header.js b/frontend/src/scripts/UI/IntersectionObserver/header.js
index 2e2ee73..5d56544 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/header.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/header.js
@@ -1,7 +1,13 @@
 // Create a function that will handle any intersection between some elements and the viewport.
 const handleHeaderIntersection = function (entries) {
   entries.forEach(entry => {
-    if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
+    if (entry.isIntersecting) {
+      msgConsole('IntersectionObserver','The header is visible in the viewport');
+      if (typeof headerIsNowVisible === 'function') headerIsNowVisible(entry);
+    } else {
+      msgConsole('IntersectionObserver','The header is invisible in the viewport');
+      if (typeof headerIsNowInvisible === 'function') headerIsNowInvisible(entry);
+    }
   });
 }
 
diff --git a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
index a09c47b..a44d6de 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
@@ -3,10 +3,10 @@ const handleSynthesisIntersection = function (entries) {
   entries.forEach(entry => {
     // Check if the element is intersecting the viewport
     if (entry.isIntersecting) {
-      myLog("The synthesis is visible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is visible in the viewport");
       if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
     } else {
-      myLog("The synthesis is invisible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
       if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
     }
   });
diff --git a/frontend/src/scripts/UI/datagrid.js b/frontend/src/scripts/UI/datagrid.js
index efed85a..47d35cb 100644
--- a/frontend/src/scripts/UI/datagrid.js
+++ b/frontend/src/scripts/UI/datagrid.js
@@ -144,4 +144,5 @@ datagrid_hooks['random'] = function(){
   let element = document.querySelector('#datagrid');
   let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
   setDatagridRandomValues(element, nbCols, nblignes)
-};
\ No newline at end of file
+};
+
diff --git a/frontend/src/scripts/UI/modal.js b/frontend/src/scripts/UI/modal.js
index dadfa8f..df61edb 100644
--- a/frontend/src/scripts/UI/modal.js
+++ b/frontend/src/scripts/UI/modal.js
@@ -138,7 +138,7 @@ function modalSetFooter(valeur)
  */
 function open_modal_hook(parametre)
 {
-    console.log("open_modal_hook pour "+parametre);
+    myLog("open_modal_hook pour "+parametre);
     let hook = null;
     let paramSplit = parametre.split(':');
     paramSplit.forEach(element => {
@@ -147,7 +147,7 @@ function open_modal_hook(parametre)
             hook = modal_hooks[elemSplit[1]];
         }
     });
-    if ((hook===null)||(hook===undefined)) hook = modal_hooks['ITEM'];
+    if ((hook===null)||(hook===undefined)) hook = modal_hooks['random'];
     return hook(parametre);
 }
 
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index 0792179..c318d49 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -130,12 +130,15 @@
     window.scrollTo(0, element.offsetHeight + 1);
   }
 
-  function headerIsVisible(flagVisible) {
-    setLogoVisiblity(!flagVisible);
-    if (!flagVisible) gotoTop();
+  function headerIsNowVisible(header) {
+    setLogoVisiblity(false);
   }
 
-  function synthesisTopIsNowVisible(entry) {
+  function headerIsNowInvisible(header) {
+    setLogoVisiblity(true);
+  }
+
+  function synthesisIsNowVisible(entry) {
 
     setDatagridHeadSticky(false);
     setDataGridFootSticky(false);
@@ -159,11 +162,13 @@
 
   function initDatagrid()
   {
+    let fonctionAffichageDataGrid = datagrid_hooks['random'];
     datagridLoading();
+    fonctionAffichageDataGrid();
   }
 
 
-  function afficher_synthese(mode) {
+  function initSynthese(mode) {
     let synthesis_body = document.querySelector('#synthesis_body');
     if (synthesis_body) {
       synthesis_body.innerHTML='';
@@ -175,7 +180,7 @@
     }
   }
 
-  function afficher_footer(mode) {
+  function initFooter(mode) {
     let footer_body = document.querySelector('footer');
     if (footer_body) {
       footer_body.innerHTML='';
@@ -188,46 +193,15 @@
   }
 
   function activeMenu(element) {
-    datagridEmptyLines(50);
-
-    activeMode(element.innerText);
-
-    gotoTop();
+      activeMode(element.innerText);
   }
-
-  function modeToAffichage(mode)
-  {
-    let retour='taches';
-    switch (mode) {
-      case 'Releases':
-        retour='releases';
-      break;
-      case 'Hollidays':
-        retour='feries';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Items':
-        retour='items';
-      break;
-      case 'Project':
-        retour='prestations';
-      break;
-      default:
-      case 'Tasks':
-        retour='taches';
-      break;
-    }
-    return retour;
-  }
-
+  
   function activeMode(mode) {
-    setFilAriane(['Home', mode]);
-    initDatagrid();
+    setFilAriane(['Home']);
+    if (mode != 'Home') setFilAriane(['Home', mode]);
+    initDatagrid(mode);
+    initSynthese(mode);
+    initFooter(mode);
   }
 
   // UI
@@ -237,4 +211,4 @@
   setContexteValeur('user', 'Anonymous');
 
   // GO !
-  activeMode('Menu1');
+  activeMode('Home');
diff --git a/frontend/src/scripts/tools/logs.js b/frontend/src/scripts/tools/logs.js
index 240a197..1997e4c 100644
--- a/frontend/src/scripts/tools/logs.js
+++ b/frontend/src/scripts/tools/logs.js
@@ -1,10 +1,19 @@
-var useLog=false;
-var useError=true;
+const msgLevel = ['log','error','alert'];
+
+function msgConsole(level, message) {
+  if (msgLevel.includes(level)) {
+    if ((level == 'error')||(level == 'alert')) console.error(message);
+    else console.log(message);
+  }
+}
 function myLog(message) {
-  if (useLog)
-    console.log(message);
+  msgConsole('log',message);
 }
 function myError(message) {
-  if (useError)
-    console.error(message);
-}
\ No newline at end of file
+  msgConsole('error',message);
+}
+function myAlert(message) {
+  msgConsole('alert',message);
+}
+
+
diff --git a/frontend/src/tools/cscripts.sh b/frontend/src/tools/cscripts.sh
index 6cdc63d..3bc2939 100755
--- a/frontend/src/tools/cscripts.sh
+++ b/frontend/src/tools/cscripts.sh
@@ -6,7 +6,7 @@ export src=scripts
 sources=""
 sources="$sources tools/delai tools/logs tools/dates tools/postData"
 # Commenter les Observer
-# sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
+sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
 sources="$sources UI/CSS UI/modal UI/settings UI/datagrid UI/pomodoro"
 sources="$sources UI/calendrier UI/planning"
 sources="$sources filtres contexte parametres ariane"
