diff --git a/css/_global.scss b/css/_global.scss
deleted file mode 100644
index 20b5612ce318e2d12ad1f46e984eeea45cd5a32e..0000000000000000000000000000000000000000
--- a/css/_global.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  position: relative;
-  z-index: 0;
-  text-align: center;
-  background-color: white;
-  font-size: 18px;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: blue;
-}
diff --git a/css/graph.css b/css/graph-vis.css
similarity index 54%
rename from css/graph.css
rename to css/graph-vis.css
index 454e58e9d6df5d1b20fdac0b6023657f5be86904..1422bdc978f12753f884e0a11eab2ca44601bf5b 100644
--- a/css/graph.css
+++ b/css/graph-vis.css
@@ -1,19 +1,4 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  position: relative;
-  z-index: 0;
-  text-align: center;
-  background-color: #f5f5f5;
-  font-size: 18px;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: #2D2B54;
-}
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
 
 .graph {
   display: flex;
@@ -24,6 +9,7 @@ body {
   height: 100%;
   background-color: unset;
 }
+
 .graph-container {
   position: relative;
   display: flex;
@@ -31,12 +17,12 @@ body {
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 100px;
 }
+
 .graph-ring {
   z-index: 0;
   position: absolute;
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 100%;
   width: 80%;
   height: 80%;
@@ -49,8 +35,8 @@ body {
   width: 40px;
   border-radius: 5px;
   background-color: red;
-  background-size: 100% 100%;
-  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.5);
   line-height: 0;
 }
 .graph-point {
@@ -60,7 +46,55 @@ body {
   width: 20px;
   border-radius: 100%;
   background-color: greenyellow;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3);
+  transform: scale(1);
+}
+.graph-point:hover {
+  transform: scale(1.5);
+  box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.5);
+}
+.graph-point:hover .graph-point-label {
+  display: inline-block;
+}
+.graph-point-label {
+  display: none;
+  position: absolute;
+  top: -25px;
+  left: -25px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3);
+  background-color: #16172b;
+  color: white;
+  font-size: 10px;
+  white-space: nowrap;
+}
+.graph-marker {
+  z-index: 0;
+  position: absolute;
+  height: 300px;
+  width: 1px;
+  transform-origin: center;
+  background-color: salmon;
+  display: inline-block;
+  line-height: 0;
+}
+.graph-label {
+  z-index: 2;
+  position: absolute;
+  display: inline-block;
+  max-width: 250px;
+  font-size: 1em;
+  color: white;
+}
+.graph-label-small {
+  z-index: 2;
+  position: absolute;
+  display: inline-block;
+  width: 100px;
+  height: 50px;
+  font-size: 0.7em;
+  color: white;
 }
 .graph-bg-1 {
   background-color: #aa4fff;
@@ -115,4 +149,4 @@ body {
   }
 }
 
-/*# sourceMappingURL=graph.css.map */
+/*# sourceMappingURL=graph-vis.css.map */
diff --git a/css/graph-vis.css.map b/css/graph-vis.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..dced87d610200e6943fe339f9f0572a8e7e30ebb
--- /dev/null
+++ b/css/graph-vis.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_global.scss","graph-vis.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph-vis.css"}
\ No newline at end of file
diff --git a/css/graph.scss b/css/graph-vis.scss
similarity index 54%
rename from css/graph.scss
rename to css/graph-vis.scss
index fc89286608b52fe89f4e47802b5bfa22b57895e6..36b012cfa0db51e920885f7bf6f367124baa8dce 100644
--- a/css/graph.scss
+++ b/css/graph-vis.scss
@@ -18,13 +18,13 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding: 100px;
+    padding: 50px;
   }
 
   &-ring {
     z-index: 0;
     position: absolute;
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 100%;
     width: 80%;
     height: 80%;
@@ -38,8 +38,8 @@
     width: 40px;
     border-radius: 0;
     background-color: red;
-    background-size: 100% 100%;
-    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+    background-size: cover;
+    box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.5);
     line-height: 0;
   }
 
@@ -50,7 +50,64 @@
     width: 20px;
     border-radius: 100%;
     background-color: greenyellow;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3);
+    transform: scale(1);
+
+    &:hover {
+      transform: scale(1.5);
+      box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.5);
+
+      .graph-point-label {
+        display: inline-block;
+      }
+    }
+
+    &-label {
+      display: none;
+      position: absolute;
+      top: -25px;
+      left: -25px;
+      padding: 5px 10px;
+      border-radius: 3px;
+      box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3);
+      background-color: #16172b;
+      color: white;
+      font-size: 10px;
+      white-space: nowrap;
+    }
+
+  }
+
+
+  &-marker {
+    z-index: 0;
+    position: absolute;
+    height: 300px;
+    width: 1px;
+    transform-origin: center;
+    background-color: salmon;
+    display: inline-block;
+    line-height: 0;
+  }
+
+  &-label {
+    z-index: 2;
+    position: absolute;
+    display: inline-block;
+    max-width: 250px;
+    font-size: 1em;
+    color: white;
+  }
+
+
+  &-label-small {
+    z-index: 2;
+    position: absolute;
+    display: inline-block;
+    width: 100px;
+    height: 50px;
+    font-size: 0.7em;
+    color: white;
   }
 
   &-bg-1 {
diff --git a/css/graph.css.map b/css/graph.css.map
deleted file mode 100644
index 93fdc001a571fdcd2df670e91f7910546c4b2358..0000000000000000000000000000000000000000
--- a/css/graph.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"}
\ No newline at end of file
diff --git a/documentation-graphVis.md b/documentation-graphVis.md
new file mode 100644
index 0000000000000000000000000000000000000000..88786f05ae4a63d4136b9e1e001c34570919b3c8
--- /dev/null
+++ b/documentation-graphVis.md
@@ -0,0 +1,93 @@
+Librarie maison créée avec un ❤ de 🍑️ par Grégoire
+
+# Dev en cours :
+- [ ] Changement du css des points
+- [ ] Affichage des marqueurs complets
+- [ ] Fix marqueurs size
+- [x] Fix css colors points with Judi
+- [x] Fix css colors markeurs with Judi
+- [x] Marker = Picto ?
+- [ ] change markeur box shadow to dark one
+- [ ] SI indicateurs vide pas de pts
+- [ ] Trouver astuce valeur de points hover
+- [ ] si undefined pas afficher le pt
+- [ ] minimum si le pt est à zero
+- [ ] 
+
+# 1. Installation
+
+La librarie est composée de 3 élements (voir exemple de code pour plus de compréhension):
+
+- Un fichier CSS `graph-vis.css` à importer dans le `<head>`
+- Du code HMTL à rajouter dans le `<body>` avant l'import du fichier JS
+- Un Fichier Javascript `graph-visualisation.js` à placer **avant son appel en javascript** 
+
+Le container va prendre automatiquement l'espace disponible autour de lui.
+disponible
+
+## Structure des fichiers et du code en HTML 
+```html
+<!-- Container HTML à placer avant l'appel de la lib -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- 1. CSS a mettre dans le head -->
+    <link rel="stylesheet" type="text/css" href="PATH-TO-CSS/graph-vis.css"/>
+</head>
+<body>
+    <!-- 2. Container HTML à placer dans le body -->
+    <div class="graph-container">
+        <div class="graph"></div>
+    </div>
+    
+    <!-- 3. Appel de la librarie après le container HTML -->
+    <script src="PATH-TO-LIB/graph-visualisation.js"></script>
+</body>
+
+```
+
+# 2. Utilisation & subtilités
+
+## Données du graph
+
+Les données doivent être définis grâce à la propriété `graphVis.data` et avec le format suivant :
+
+```javascript
+ graphVis.data = [
+    // Un objet par pays
+    {
+        flagURL: "PathToTheFlagImage",
+        country: "NameOfTheCountry️",
+        //Liste des indicateurs un par objet
+        indicators: [
+            {
+                name: "Masque porté quotodiennement",
+                data: [
+                    {
+                        //date au format timestamp
+                        date: 1519211809934,
+                        // pourcentage entre 0 et 100 ou undefined si pas de données
+                        percent: 50
+                    }
+                ]
+            },
+        ],
+    }
+];
+```
+
+## (Dev en cours) Ajout de marqueurs (Claim et Validation)
+
+Les marqueurs sont de types `{ 'claim', 'valid'}`
+
+```javascript
+graphVis.setMarker(timestamp, label = '', type = 'claim');
+```
+
+## Mise à jour du graph
+
+La mise à jour du graphique est lancé par :
+
+```javascript
+graphVis.refreshData();
+```
\ No newline at end of file
diff --git a/graph-visualisation.js b/graph-visualisation.js
index 8cecfa5c9157b9ab4ee6df22c6f821f13d298c05..aaadaaba69356504f006f02dd7a3aa30f18c6f6c 100644
--- a/graph-visualisation.js
+++ b/graph-visualisation.js
@@ -1,39 +1,64 @@
 const graphVis = {
+
     data: [],
-    refreshData: function () {
 
+    markers: [],
+
+    setMarker: function (timestamp, label = '', type = 'claim') {
+        graphVis.markers.push({
+            date: timestamp,
+            type: type,
+            label: label
+        });
+    },
+
+    existMarker: function (timestamp) {
+        const test = graphVis.markers.find(function (item) {
+            return timestamp === item.date;
+        });
+        return test !== undefined;
+    },
+
+    refreshData: function () {
         //Clear the graph before render
         graphVis.getGraph().innerHTML = "";
+        if (graphVis.data.length === 1) graphVis.renderSoloCountry();
+        else if (graphVis.data.length >= 2) graphVis.renderMultipleCountries();
+        else graphVis.renderDefault();
+    },
 
-        if (graphVis.data.length === 1) {
-            console.log("DISPlAY - 1 pays");
-            // Si un seul pays alors on affiche les indicateurs
-            let data = graphVis.data[0];
-            graphVis.addFlag(-1, data.flagURL, data.country);
-            data.indicators.forEach(function (indicator, index) {
-                let radius = 85 - 15 * index;
-                graphVis.addRing(radius);
-                graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1));
-            });
-        } else if (graphVis.data.length >= 2) {
-            console.log("DISPlAY - au moins 2pays");
-            // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays
-            graphVis.data.forEach(function (country, index) {
-                let radius = 85 - 15 * index;
-                graphVis.addFlag(radius, country.flagURL, country.country);
-                graphVis.addRing(radius);
-                graphVis.addIndicators(country.indicators[0], radius, "graph-bg-1");
-            });
-        } else {
-            //reaction par defaut
-            console.log("display default");
-            graphVis.getGraph().innerHTML = "Veuillez selectioner plus de paramètres.";
-        }
+    renderSoloCountry: function () {
+        console.log("DISPlAY - 1 pays");
+        // Si un seul pays alors on affiche les indicateurs
+        let data = graphVis.data[0];
+        graphVis.addFlag(-1, data.flagURL, data.country);
+        data.indicators.forEach(function (indicator, index) {
+            let radius = 85 - 15 * index;
+            graphVis.addRing(radius);
+            graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1));
+            graphVis.addLabel(radius, indicator.name);
+        });
+    },
+    renderMultipleCountries: function () {
+        console.log("DISPlAY - au moins 2pays");
+        // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays
+        graphVis.addLabel(-1, graphVis.data[0].indicators[0].name);
+        graphVis.data.forEach(function (country, index) {
+            let radius = 85 - 15 * index;
+            graphVis.addFlag(radius, country.flagURL, country.country);
+            graphVis.addRing(radius);
+            graphVis.addIndicators(country.indicators[0], radius, "graph-bg-1");
+        });
+    },
+    renderDefault: function () {
+        //reaction par defaut
+        console.log("display default");
+        graphVis.getGraph().innerHTML = "Veuillez selectioner plus de paramètres.";
     },
-    getAngleRange: function (angleArray) {
 
-        console.log(angleArray);
+    getAngleRange: function (angleArray) {
 
+        //console.log(angleArray);
         const max = angleArray.reduce(function (max, current) {
             return (current > max) ? current : max;
         }, angleArray[0]);
@@ -57,27 +82,16 @@ const graphVis = {
         let style = window.getComputedStyle(graph);
         let width = graph.offsetWidth - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
         let height = graph.offsetHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-
-        return {
-            height: height,
-            width: width,
-            ratio: height / width
-        };
+        return {height: height, width: width, ratio: height / width};
     },
 
     getGraphSize: function () {
         let graph = document.querySelector(".graph");
         let width = graph.offsetWidth;
         let height = graph.offsetHeight;
-
-        return {
-            height: height,
-            width: width,
-            ratio: height / width
-        };
+        return {height: height, width: width, ratio: height / width};
     },
 
-
     degreeToRadian: function (deg) {
         return deg * (Math.PI / 180);
     },
@@ -86,7 +100,7 @@ const graphVis = {
         return document.querySelector(".graph");
     },
 
-    rescaleRange: function (numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) {
+    rescaleRange: function (numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 5, destinationMax = 95) {
         numberToRescale = parseFloat(numberToRescale);
         initScaleMin = parseFloat(initScaleMin);
         initScaleMax = parseFloat(initScaleMax);
@@ -97,33 +111,36 @@ const graphVis = {
 
     addIndicators: function (indicator, radius, colorClass = false) {
 
-        let angle = 0;
+        let angleInPercent = 0;
         let angleRange = graphVis.getAngleRange(indicator.data.map(function (indicatorValue, index, array) {
             return graphVis.getAngle(index, array.length);
         }));
 
         for (let i = 0, item; item = indicator.data[i]; i++) {
-            angle = graphVis.getAngle(i, indicator.data.length);
-            console.log("OnCountry - Angle: " + angle);
-            graphVis.addPoint(item.percent, angle, radius, angleRange, colorClass);
+            angleInPercent = graphVis.getAngle(i, indicator.data.length);
+            //console.log("OnCountry - Angle: " + angle);
+            graphVis.addPoint(item.percent, angleInPercent, radius, angleRange, colorClass, item.date);
+            //if (item.date === graphVis.markers) graphVis.addMarker(radius, angleInPercent, angleRange);
         }
     },
 
-    addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false) {
-
-        if (rescaleOptions) {
-            angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax);
-        }
-        console.log(angle);
+    addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false, date = '') {
 
+        if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax);
+        //console.log(angle);
         let pointSize = (parseFloat(value) / 100.0) * 20.0;
         let pointPos = graphVis.getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0);
         let parent = graphVis.getGraph();
         let pt = document.createElement('div');
         pt.classList.add("graph-point");
         pt.classList.add("fade-in");
-        if (colorClass) pt.classList.add(colorClass);
+        if (colorClass !== false) pt.classList.add(colorClass);
         pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;');
+        pt.setAttribute("title", value + "% le " + date);
+        let inner = document.createElement('div');
+        inner.classList.add('graph-point-label');
+        inner.innerHTML = value + "% le " + date;
+        pt.append(inner);
         parent.appendChild(pt);
     },
 
@@ -157,8 +174,9 @@ const graphVis = {
 
     addFlag: function (radius = -1, flagURL = '', country = '') {
 
-        let graph = graphVis.getGraph();
+        // If the radius is -1 then the flag is placed in the middle of the visualisation
 
+        let graph = graphVis.getGraph();
         let flag = document.createElement("div");
         flag.classList.add("graph-flag");
         flag.classList.add("fade-in");
@@ -177,22 +195,35 @@ const graphVis = {
 
     addLabel: function (radius = 0, content) {
 
-        /* let graph = graphVis.getGraph();
-
+        let graph = graphVis.getGraph();
         let label = document.createElement("div");
-        label.classList.add("graph-flag");
+
+        if (radius > 0) {
+            let labelPos = graphVis.getCoordinates(0, radius, 50, 25);
+            label.setAttribute("style", "top: " + labelPos.posY + "px; left: " + labelPos.posX + "px;");
+            label.classList.add("graph-label-small");
+        } else
+            label.classList.add("graph-label");
+
         label.classList.add("fade-in");
+        label.innerHTML = content;
+        label.setAttribute("title", content);
+        graph.append(label);
+    },
 
-        if (radius !== 0) {
-            //TODO: FLAG PLACEMENT & shift DONT WORK
-            let flagPos = graphVis.getCoordinates(0, radius, 20, 15);
-            label.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;");
-        } else {
-            label.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)");
-        }
+    addMarker: function (radius, angle, rescaleOptions = false) {
+
+        if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax);
+        console.log("Add marker: " + radius + " / " + angle);
 
-        label.setAttribute("title", country);
-        graph.append(label); */
+        let graph = graphVis.getGraph();
+        let marker = document.createElement("div");
+        let markerPos = graphVis.getCoordinates(angle, radius, 1.0, 150.0);
+        marker.setAttribute("style", "top: " + markerPos.posY + "px; left: " + markerPos.posX + "px; transform: rotate(" + angle * 3.6 + "deg);");
+        marker.classList.add("graph-marker");
+        marker.classList.add("fade-in");
+        marker.setAttribute("title", "Apparition de la fake new");
+        graph.append(marker);
     },
 
     /**
@@ -201,7 +232,7 @@ const graphVis = {
      */
     resizeGraphContainer: function () {
         let dimensions = graphVis.getGraphContainerSize();
-        let minDim = 0;
+        let minDim;
 
         if (dimensions.height > dimensions.width) minDim = dimensions.width;
         else minDim = dimensions.height;
@@ -213,9 +244,6 @@ const graphVis = {
 
 };
 
-//TODO: hover value, couleurs, indicator de fake news
-
-
 /**
  * ---------- INIT ------------------------
  */
@@ -228,11 +256,22 @@ function getRandomInt(min, max) {
 
 function testGraph() {
 
+    graphVis.setMarker('2010-10-10');
+
     let data = [];
 
     for (let i = 0; i <= 100; i += 5) {
-        data.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        if (i !== 50) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)});
+    }
+
+    let data2 = [];
+
+    for (let i = 0; i <= 100; i += 2) {
+        if (i !== 30) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)});
     }
+
     graphVis.data = [
         {
             flagURL: "images/flag-groeinland.svg",
@@ -244,7 +283,7 @@ function testGraph() {
                 },
                 {
                     name: "Masque porté quotodiennement",
-                    data: data
+                    data: data2
                 },
             ],
         },
@@ -254,16 +293,20 @@ function testGraph() {
 
 function testGraph2() {
 
+    graphVis.setMarker('2010-10-10');
+
     let data = [];
 
     for (let i = 0; i <= 100; i += 5) {
-        data.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        if (i !== 80) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)});
     }
 
     let data2 = [];
 
     for (let i = 0; i <= 100; i += 2) {
-        data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        if (i !== 80) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)});
+        else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)});
     }
 
     graphVis.data = [
@@ -277,6 +320,16 @@ function testGraph2() {
                 },
             ],
         },
+        {
+            flagURL: "images/flag-france.svg",
+            country: "France ❤️",
+            indicators: [
+                {
+                    name: "Masque porté quotodiennement",
+                    data: data2
+                },
+            ],
+        },
         {
             flagURL: "images/flag-france.svg",
             country: "France ❤️",
diff --git a/index.html b/index.html
index e5050bffd657dd89df236302d23ed0488425fe78..753d074b501d42f04f6724085c75e6a1f6db73c5 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="stylesheet" href="src/css/search_window.css">
     <link rel="stylesheet" href="src/css/jsr_lib_styles.css">
+    <link rel="stylesheet" href="css/graph-vis.css">
 </head>
 <body>
     <div class="app-container">
@@ -44,14 +45,20 @@
                 <div class="covid-indicators-list"></div>
             </div>
     
-            <div class="data-visualization-container"></div>
+            <div class="data-visualization-container">
+                <div class="graph-container">
+                    <div class="graph"></div>
+                </div>
+            </div>
             
             <div class="right-side-search-parameters">
+                <div class="legend"></div>
                 <div class="countries-list"></div>
             </div>
         </div>
 
         <div class="bottom-parameters">
+            <button class="play-slowly">Play slowly</button>
             <div class="daterange-slider"></div>
         </div>
     </div>
@@ -67,8 +74,8 @@
     <script type="text/javascript" src="src/js/cwsod_api/cwsodAPI.js"></script>
     <script type="text/javascript" src="src/js/gfct_api/load_google_client.js"></script>
     <script type="text/javascript" src="src/js/fp_api/fpAPI.js"></script>
+    <script type="text/javascript" src="graph-visualisation.js"></script>
     <script type="text/javascript" src="src/js/main.js" onload="onPageLoad()"></script>
-
     <script type="text/javascript" onload="loadGoogleClient()" src="https://apis.google.com/js/api.js"></script>
     
 </body>
diff --git a/res/arrow-down.svg b/res/arrow-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..90e69142ab7260231d3088897c607f2e1b6480b7
--- /dev/null
+++ b/res/arrow-down.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="451.8px" height="451.8px" viewBox="0 0 451.8 451.8" style="enable-background:new 0 0 451.8 451.8;" xml:space="preserve"
+	>
+<style type="text/css">
+	.st0{fill:#6266B2;}
+</style>
+<g>
+	<path class="st0" d="M225.9,354.7c-8.1,0-16.2-3.1-22.4-9.3L9.3,151.2c-12.4-12.4-12.4-32.4,0-44.8c12.4-12.4,32.4-12.4,44.7,0
+		l171.9,171.9l171.9-171.9c12.4-12.4,32.4-12.4,44.7,0c12.4,12.4,12.4,32.4,0,44.8L248.3,345.4C242.1,351.6,234,354.7,225.9,354.7z"
+		/>
+</g>
+</svg>
diff --git a/src/css/index.css b/src/css/index.css
index aeab5d38e0f4b7ae10bab19fddebfcc819c94bdc..1cb4d6a5775d5d432a1cf676576870d13533caa3 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,19 +1,16 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto);
 
-@font-face {
-
-}
-
 /* MAIN APP CONTAINERS */
 
 body {
     overflow: hidden;
-    background-color: #2D2B54;
-    font-family: 'Roboto';
+    background-color: #20214f;
     color : #f5f5f5;
     width: 100vw;
     height: 100vh;
     margin : auto auto auto auto;
+    font-family: "Open Sans", sans-serif;
+    text-overflow: "...";
 }
 
 .app-container {
@@ -31,19 +28,35 @@ body {
 .left-side-search-parameters{
     display: flex;
     flex-direction: column;
-
     width: 20vw;
+    height: 80vh;
+    overflow: hidden;
 }
 
 .left-side-search-parameters > div {
     background-color:#18183B;
-    border-radius: 10px;
-    padding: 20px;
-    margin : 1em 1em 1em 1em;
+    border-radius: 5px;
+    padding: 0 0 0 0 !important;
+    margin: 0.75em 0.75em 0.75em 0.75em;
+    box-shadow: 2px 2px 7.5px black;
+}
+
+/* SELECTED ARTICLE */
+.selected-article{
+    height: 20vh;
 }
 
-.language-selector {
-    margin : 1em 1em 1em 1em;
+.selected-article > .news-container {
+    background-color: #18183B;
+    box-shadow: none ! important;
+    box-shadow: none !important;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    width: auto;
+    height: auto;
+    border-radius: 4px;
+    padding: 0 0 0 0;
 }
 
 .search-bar-button {
@@ -67,71 +80,193 @@ body {
     border-radius: 5px;
 }
 
-/* DATA VISUALIZATION CONTAINERS */
+/* COVID INDICATOR */
+.covid-indicators-list{
+    height: 50vh;
+    overflow-y: scroll;
+    background-color: #191725 !important;
+    padding: 20px 0 0 0 !important;
+}
 
-.data-visualization-container {
-    width: 55vw;
+.covid-sublist-container {
+    display: block !important;
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+    background-color: #18183B;
 }
 
-/* RIGHT SIDE SEARCH PARAMETERS */
+.covid-indicators-list > ul {
+    display: none;
+}
 
-.right-side-search-parameters {
-    width: 15vw;
+.label-container {
+    width: 100%;
+    height: 6vh;
+    border-bottom: 6px solid #18183b;
+    display: flex;
+    flex-direction: row;
+}
+
+.label-container > label {
+    display: inline-block;
+    height: 50%;
+    width: 60%;
+    padding: 4% 4% 4% 10%;
+}
+
+.logo-dropdown {
+    height: 50%;
+    margin: 0 auto 0 auto;
+    padding: 4% 4% 4% 4%;
+}
+
+.rotated-img {
+    -webkit-transform: rotate(180deg);
+}
+
+.covid-sublist-container > li {
+    width: 100%;
+    height: 5.5vh;
+    border-bottom: 2px solid #4b4b71;;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+}
+
+.covid-sublist-container-checked {
+    width: 100%;
+    height: 5vh;
+    background-color: #30304f;
+    border-bottom: 2px solid #4b4b71;
+    box-sizing: border-box;
+    display: block;
+}
+
+.covid-sublist-container > li > input {
+    opacity: 0;
+}
+
+.covid-sublist-container > li > label {
+    display: inline-block;
+    font-size: 14px;
+    margin: auto 0 auto 0;
+    width: 80%;
 }
 
 .covid-indicators-list > ul {
     list-style-type: none;
+    height: auto;
+    display: none;
 }
 
-.covid-sublist-container {
-    padding-left: 10px;
+.input[type=checkbox]:before {
+    opacity: 0;
 }
 
-.available-countries-list {
-   list-style-type: none;
-   padding-left: 10px;
+.not-checked-logo {
+    height: 3vh;
+    margin: auto 0 auto 0;
+    opacity: 0;
+}
+.checked-logo {
+    height: 3vh;
+    margin: auto 0 auto 0;
+    opacity: 1;
 }
 
-/* BOTTOM SEARCH PARAMETERS */
+.input[type=checkbox]:hover ~ div {
+    background-color: #30304f;
+}
 
-.bottom-parameters {
+.input[type=checkbox]:checked ~ div {
+    background-color: #30304f;
+}
+
+
+/* DATA VISUALIZATION CONTAINERS */
+
+.data-visualization-container {
+    width: 60vw;
+    height: 80vh;
+}
+
+/* RIGHT SIDE SEARCH PARAMETERS */
+
+.right-side-search-parameters {
     display: flex;
     flex-direction: column;
+    width: 20vw;
+    height: 80vh;
+    overflow: hidden;
+}
+
+.right-side-search-parameters>div{
+    background-color: #18183B;
+    border-radius: 5px;
+    margin: 0.75em 0.75em 0.75em 0.75em;
+    box-shadow: 2px 2px 5px black;
+}
 
-    margin: 3em 3em 3em 3em;
+/* LEGEND */
+.legend {
+    height: 5vh;
 }
 
-.daterange-slider {
-    color :#f5f5f5 !important;
+/* COUNTRIES LIST */
+.countries-list {
+    height: 65vh;
+    overflow-y: scroll;
 }
 
-.jsr_slider::before {
-    background-color : #6266b2 !important;
+.available-countries-list {
+    list-style-type: none;
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
 }
 
-.jsr_rail {
-    background-color: #18183B !important;
+.available-countries-list > li {
+    width: 100%;
+    height: 5.5vh;
+    border-bottom: 2px solid #4b4b71;;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
 }
 
-.jsr_bar {
-    background-color: #f5f5f5 !important;
+.available-countries-list > li > input {
+    opacity: 0;
 }
 
-.jsr_label {
-    background-color : #6266b2 !important;
-    color : #f5f5f5;
+.available-countries-list > li > label {
+    display: inline-block;
+    font-size: 14px;
+    margin: auto 0 auto 0;
+    width: 80%;
+}
+
+/* BOTTOM SEARCH PARAMETERS */
+
+.bottom-parameters {
+    display: flex;
+    flex-direction: row;
+
+    margin: 3em auto 3em auto;
+    width: 75vw;
 }
 
 canvas {
     margin : 1em auto auto auto !important;
 }
 
-.visualize-btn {
-    background-color:#6266b2;
+.play-slowly {
+    position: fixed;
+    bottom: 5vh;
+    left: 4vw;
+    background-color: #6266b2;
     border-style: none;
-    color : #f5f5f5;
-    margin : 1em auto auto auto;
-    width : 8em;
-    height: 3em;
-    border-radius: 5px;
+    color: #f5f5f5;
+    margin: 1em auto auto auto;
+    width: 8em;
+    height: 2em;
+    border-radius: 3px;
 }
diff --git a/src/css/jsr_lib_styles.css b/src/css/jsr_lib_styles.css
index 4afe5898c3781b25ab5292054e33cdcc22761c8e..4b6068b65c98d19492e595370387ee742d655e37 100644
--- a/src/css/jsr_lib_styles.css
+++ b/src/css/jsr_lib_styles.css
@@ -28,7 +28,7 @@
 
 .jsr_rail {
   height: 5px;
-  background: #444;
+  background-color: #18183B !important;
 }
 
 .jsr_slider {
@@ -38,8 +38,9 @@
 
   transform: translate(-50%, -50%);
 
-  width: 25px;
-  height: 25px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50px;
 
   cursor: col-resize;
   transition: background 0.1s ease-in-out;
@@ -47,6 +48,7 @@
   outline: 0;
 
   z-index: 3;
+  background-color: #6266b2;
 }
 
 .jsr_slider:focus {
@@ -61,8 +63,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #999;
   border-radius: 50%;
+  background-color : #6266b2 !important;
 }
 
 .jsr_slider:focus::before {
@@ -74,7 +76,6 @@
   top: calc(10px + 5px + 15px / 1.5);
   transform: translateX(-50%);
   padding: 0.2em 0.4em;
-  background: #444;
   color: #fff;
   font-size: 0.9em;
   white-space: nowrap;
@@ -82,6 +83,7 @@
   z-index: 2;
   cursor: col-resize;
   opacity: 1;
+  background-color : #6266b2 !important;
 }
 
 .jsr_label.is-hidden {
@@ -92,10 +94,10 @@
 .jsr_bar {
   position: absolute;
   height: 5px;
-  background-color: #999;
   z-index: 2;
   cursor: move;
   top: 10px;
+  background-color: #f5f5f5 !important;
 }
 
 .jsr_limit {
@@ -109,7 +111,7 @@
 
 .jsr_grid {
   margin-top: 5px;
-  width: 100%;
+  width: 75vw;
 }
 
 .jsr_lockscreen {
diff --git a/src/css/search_window.css b/src/css/search_window.css
index 98edad05557d75faead540bfcde2c5480692a9a2..b2d05a9db98d1bf6f139462f51af82dca95d8363 100644
--- a/src/css/search_window.css
+++ b/src/css/search_window.css
@@ -1,9 +1,6 @@
 /* WINDOW */
 
-.body {
-    overflow: hidden;
-}
-
+/*link*/
 a:link {
     color: #18183B;
 }
@@ -19,8 +16,6 @@ a:hover {
 }
 
 .search-window {
-    overflow-x: hidden;
-    overflow-y: hidden;
     position: fixed;
     top: 0%;
     left: 0%;
@@ -33,6 +28,7 @@ a:hover {
 
     background-color: black;
     opacity: 1;
+    font-family: "Open Sans", sans-serif;
 }
 
 /* CLOSE BUTTON */
@@ -95,6 +91,8 @@ input[type=text]{
     width: 80px;
 }
 
+/* LANGUAGE SELECTOR */
+
 .language-selector {
     background-color: white;
     appearance:none;
@@ -131,6 +129,8 @@ input[type=text]{
     justify-content: center;
 }
 
+/* MORE RESULTS BTN */
+
 .more-results-btn {
     display: none;
     margin: 5vh auto;
@@ -146,24 +146,29 @@ input[type=text]{
     color: white;
 }
 
+/* CONTAINER RESULT */
+
 .news-container {
+    display:flex;
     flex-direction: column;
     margin: 10px;
     background-color: #6266b2;
     width: 17.5vw;
-    height: 12vh;
+    height: 15vh;
     border-radius: 4px;
     box-shadow: 10px 5px black;
     padding: 15px 20px 15px 20px;
 }
 
+/* PUBLISHER CONTAINER */
+
 .news-publisher-container {
     flex-direction: row;
     color: #18183B;
     width: 100%;
     height: 10%;
     display: flex;
-    font-size: xx-small;
+    font-size: xx-small !important;
 }
 
 .news-publisher-label {
@@ -171,23 +176,30 @@ input[type=text]{
     padding: 0;
 }
 
+/* TITLE */
+
 .news-title {
     margin: 0;
     padding: 1% 0 0 0;
-    font-size: small;
+    font-size: small !important;
+    overflow: hidden;
+    height: 4.5vh;
 }
 
+/* DATES CONTAINER */
+
 .news-dates-container {
     display: flex;
     flex-direction: row;
-    font-size: xx-small;
+    font-size: xx-small !important;
     color: #18183B;
+    height: 15%;
 }
 
 .news-claim-date-container{
     display: flex;
     flex-direction: row;
-    font-size: xx-small;
+    font-size: xx-small !important;
     color:#18183B;
     width: 50%;
     height: 70%;
@@ -201,7 +213,7 @@ input[type=text]{
 .news-review-date-container{
     display: flex;
     flex-direction: row;
-    font-size: xx-small;
+    font-size: xx-small !important;
     color: #18183B;
     width: 50%;
     height: 70%;
@@ -212,6 +224,8 @@ input[type=text]{
     padding: 0.5% 0 0 0;
 }
 
+/* BOTTOM ELEMENT */
+
 .news-elements-container {
     display: flex;
     flex-direction: row;
@@ -226,15 +240,19 @@ input[type=text]{
 .news-review-rating {
     margin: 0;
     padding: 0 0 0 0;
-    font-size: small;
+    font-size: small !important;
+    overflow: hidden;
+    height: 4vh;
 }
 
 .news-review-view-article {
     margin:0;
     padding:5px 0 0 0;
-    font-size: xx-small;
+    font-size: xx-small !important;
 }
 
+/* SELECT BTN */
+
 .article-button-select{
     margin: 0;
     padding: 0 10px 0 0;
diff --git a/src/js/cwsod_api/build_country_list.js b/src/js/cwsod_api/build_country_list.js
index 8138679f2b5d936fab2814f578d3b92dd93fd83c..fa983be0a2342c64143d156392b63c74cddf9211 100644
--- a/src/js/cwsod_api/build_country_list.js
+++ b/src/js/cwsod_api/build_country_list.js
@@ -15,19 +15,27 @@ const buildCountryList = (countries, country_codes) => {
             const label = document.createElement('label');
             label.setAttribute('for', el.country);
             label.innerHTML = el.country;
+            // Logo checkbox 
+            const logo_checkbox = document.createElement('img');
+            logo_checkbox.className = 'not-checked-logo';
+            logo_checkbox.alt = 'Checked';
+            logo_checkbox.src = 'res/checkmark.svg';
             // checkbox
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
+            checkbox.id = el.country;
             checkbox.value = el.country;
             checkbox.name = el.country;
+            checkbox.onclick = onClickCheckbox;
             // country flag
             // const flag = document.createElement('img');
             // flag.setAttribute('src', fpAPI.getFlagUrl(country_codes[el.country]));
             // flag.setAttribute('alt', el.country);
             // flag.setAttribute('width', '40px');
 
-            list_item.appendChild(label);
             list_item.appendChild(checkbox);
+            list_item.appendChild(logo_checkbox);
+            list_item.appendChild(label);
             // list_item.appendChild(flag);
             ordered_list.appendChild(list_item);
         });
@@ -39,4 +47,11 @@ const buildCountryList = (countries, country_codes) => {
         main_container.appendChild(error_message);
     }
 
+}
+
+function onClickCheckbox(){
+    const parent = this.parentElement;
+    parent.classList.toggle("covid-sublist-container-checked");
+    const checked_logo = parent.firstChild.nextSibling;
+    checked_logo.classList.toggle("checked-logo");
 }
\ No newline at end of file
diff --git a/src/js/cwsod_api/build_indicators_list.js b/src/js/cwsod_api/build_indicators_list.js
index 37cc10462b64fddd29ed9d2f999ca2945d7fc9c7..81b3a70eada5eb2afe2b46fc98652688d37b8897 100644
--- a/src/js/cwsod_api/build_indicators_list.js
+++ b/src/js/cwsod_api/build_indicators_list.js
@@ -3,12 +3,24 @@ const buildIndicatorsList = (indicators) => {
     indicators.map((set_of_indics) => {
         // sublist container
         const sublist_container = document.createElement('ul');
-        sublist_container.className = 'covid-sublist-container';
         sublist_container.name = set_of_indics.category;
+        // Label container
+        const label_container = document.createElement('div');
+        label_container.className = 'label-container';
+        label_container.onclick = onClickDropDown;
         // label sublist
         const label_sublist = document.createElement('label');
         label_sublist.setAttribute('for', set_of_indics.category);
         label_sublist.innerHTML = set_of_indics.category;
+        // dropdown logo
+        const logo_dropdown = document.createElement('img');
+        logo_dropdown.className = 'logo-dropdown';
+        logo_dropdown.alt = 'dropdown';
+        logo_dropdown.src = 'res/arrow-down.svg';
+
+        
+        label_container.appendChild(label_sublist);
+        label_container.appendChild(logo_dropdown);
         // list items
         const indicators = set_of_indics.indicators.map((indic) => {
             // list item
@@ -17,21 +29,42 @@ const buildIndicatorsList = (indicators) => {
             const label_checkbox = document.createElement('label')
             label_checkbox.setAttribute('for', indic.indicator);
             label_checkbox.innerHTML = indic.name[0].toUpperCase() + indic.name.slice(1);
+            // Logo checkbox 
+            const logo_checkbox = document.createElement('img');
+            logo_checkbox.className = 'not-checked-logo';
+            logo_checkbox.alt = 'Checked';
+            logo_checkbox.src = 'res/checkmark.svg';
             // checkbox
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
-            checkbox.value = indic.indicator;
+            checkbox.id = indic.indicator;
             checkbox.name = indic.indicator;
+            checkbox.onclick = onClickCheckbox;
 
-            list_element.appendChild(label_checkbox);
             list_element.appendChild(checkbox);
+            list_element.appendChild(logo_checkbox);
+            list_element.appendChild(label_checkbox);
             return list_element;
         });
         indicators.forEach((indic) => {sublist_container.appendChild(indic);});
-        return {container: sublist_container, label: label_sublist};
+        return {container: sublist_container, label: label_container};
     })
     .forEach((sublist) => {
         main_container.appendChild(sublist.label);
         main_container.appendChild(sublist.container);
     });
-};
\ No newline at end of file
+};
+
+function onClickCheckbox(){
+    const parent = this.parentElement;
+    parent.classList.toggle("covid-sublist-container-checked");
+    const checked_logo = parent.firstChild.nextSibling;
+    checked_logo.classList.toggle("checked-logo");
+}
+
+function onClickDropDown(){
+    this.firstChild.nextSibling.classList.toggle('rotated-img');
+    const sibling = this.nextSibling;
+    sibling.classList.toggle('covid-sublist-container');
+
+}
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index bb05c85c24f73fac95b3b541d7f41253c9e1f54a..37410310b3e317b0870be99720f8884df55eeabe 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -24,5 +24,4 @@ const onPageLoad = async () => {
 const cleanContainer = (container) => {
     while(container.firstChild)
         container.removeChild(container.firstChild);
-};
-
+};
\ No newline at end of file
diff --git a/visualisation.html b/visualisation.html
index e189653d2b8cee31c3827fffadc4d8cde93a8b27..dc4fcc273b4e734cfd8e3de968a5b98a81dab1cc 100644
--- a/visualisation.html
+++ b/visualisation.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Hey salut</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="stylesheet" type="text/css" href="css/graph.css"/>
+    <link rel="stylesheet" type="text/css" href="css/graph-vis.css"/>
     <style>
         .random-pos {
             transition: all 1s ease-in-out;