diff --git a/View/src/CSS/Admin2.css b/View/src/CSS/Admin2.css
new file mode 100644
index 00000000..8e1f9eaa
--- /dev/null
+++ b/View/src/CSS/Admin2.css
@@ -0,0 +1,239 @@
+@font-face {
+    font-family: Fauna;
+    src: url("../../assets/fonts/Fauna.ttf");
+  }
+  
+  @font-face {
+    font-family: Equinox;
+    src: url("../../assets/fonts/Equinox.otf");
+  }
+  /* End Fonts CSS */
+  
+  body {
+    min-height: 100vh;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: white;
+    height: 100vh;
+    background-color: #111219;
+  }
+  
+  li {
+    display: inline;
+    width: 225px;
+  }
+  
+  a {
+    color: white;
+    text-decoration: none !important;
+  }
+  a:hover {
+    color: white;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .font {
+    font-family: Equinox;
+  }
+  
+  button {
+    background: transparent;
+    color: white;
+    outline: none;
+  }
+  
+  .legend {
+    color: #898989;
+    font-weight: bolder;
+  }
+  
+  .current {
+    background: rgb(146, 254, 157);
+    background: -moz-linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    background: -webkit-linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    background: linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    box-shadow: 0px 0px 50px -5px rgba(0, 201, 255, 0.3);
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+  }
+  
+  .send {
+    background: rgb(146, 254, 157);
+    background: -moz-linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    background: -webkit-linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    background: linear-gradient(
+      50deg,
+      rgba(146, 254, 157, 1) 0%,
+      rgba(0, 201, 255, 1) 100%
+    );
+    box-shadow: 0px 0px 50px -5px rgba(0, 201, 255, 0.3);
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+  
+    width: max-content;
+    height: min-content;
+  }
+  
+  .currentText {
+    color: black;
+  }
+  .currentText:hover {
+    color: black;
+  }
+  
+  .nav-button {
+    color: #898989;
+  }
+  
+  .nav-button:hover {
+    color: white;
+  }
+  
+  .dashboard-card {
+    background: rgb(0, 0, 0);
+    background: -moz-linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgb(0, 0, 0) 30%
+    );
+    background: -webkit-linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgb(0, 0, 0) 30%
+    );
+    background: linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+    border-radius: 15px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    -o-border-radius: 15px;
+    max-height: 350px;
+    overflow-y: scroll;
+  }
+  
+  .dashboard-card-reversed {
+    background: rgb(0, 0, 0);
+    background: -moz-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+    background: -webkit-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+    background: linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+  }
+  
+  .dashboard-card-mail {
+    background: rgb(0, 0, 0);
+    background: -moz-linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+    background: -webkit-linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 30%
+    );
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 1) 40%
+    );
+    border-radius: 15px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    -o-border-radius: 15px;
+    height: 400px;
+  }
+  
+  .user-box input {
+    width: 100%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    padding: 8px 0;
+    font-size: 12px;
+    color: #fff;
+    border: none;
+    border-bottom: 1px solid #fff;
+    outline: none;
+    background: transparent;
+  }
+  
+  .user-box label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 16px;
+    color: #fff;
+    pointer-events: none;
+    transition: 0.5s;
+    -webkit-transition: 0.5s;
+    -moz-transition: 0.5s;
+    -ms-transition: 0.5s;
+    -o-transition: 0.5s;
+  }
+  
+  .user-box input:focus ~ label,
+  .user-box input:valid ~ label {
+    top: -20px;
+    left: 0;
+    color: rgba(146, 254, 157, 1);
+    font-size: 12px;
+  }
+  
+  #message {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    border: none;
+    background-color: transparent;
+    border: 1px solid #fff;
+    color: #fff;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+  }
\ No newline at end of file
diff --git a/View/src/JS/dashboard.js b/View/src/JS/dashboard.js
new file mode 100644
index 00000000..7b382577
--- /dev/null
+++ b/View/src/JS/dashboard.js
@@ -0,0 +1,123 @@
+window.onload = function () {
+    /*data = [{
+        type: "line",
+        xValueFormatString: "Pierre",
+        dataPoints: [
+            { x: 0, y: 0 },
+            { x: 1, y: 50 },
+            { x: 2, y: 100 },
+            { x: 3, y: 150 },
+            { x: 4, y: 150 },
+            { x: 5, y: 200 },
+            ]
+    },
+    {
+        type: "line",
+        xValueFormatString: "Noe",
+        dataPoints: [
+            { x: 0, y: 0 },
+            { x: 1, y: 100 },
+            { x: 2, y: 100 },
+            { x: 3, y: 200 },
+            { x: 4, y: 250 },
+            { x: 5, y: 300 },
+        ]
+    },
+    {
+        type: "line",
+        xValueFormatString: "Nathan",
+        dataPoints: [
+            { x: 0, y: 0 },
+            { x: 1, y: 75 },
+            { x: 2, y: 100 },
+            { x: 3, y: 150 },
+            { x: 4, y: 200 },
+            { x: 5, y: 250 },
+        ]
+    }]*/
+
+    v1 = {
+        type: "line",
+        xValueFormatString: "Pierre",
+        dataPoints: [
+            { x: 0, y: 0 },
+            { x: 1, y: 50 },
+            { x: 2, y: 100 },
+            { x: 3, y: 150 },
+            { x: 4, y: 150 },
+            { x: 5, y: 200 },
+        ]
+    }
+
+
+    v2 = {
+        type: "line",
+        xValueFormatString: "Noe",
+        dataPoints: [
+            { x: 0, y: 0 },
+            { x: 1, y: 100 },
+            { x: 2, y: 100 },
+            { x: 3, y: 200 },
+            { x: 4, y: 250 },
+            { x: 5, y: 300 },
+        ]
+    }
+
+    ///dataPoints=[{x:0,y:0},{x:1,y:300}]
+
+    
+
+    ///v3={type:"line",xValueFormatString:"test",dataPoints};
+
+    data = [];
+
+    v = {}
+    v.type="line";
+    v.xValueFormatString="test";
+    v.dataPoints=[];
+    v.dataPoints.push({x:0,y:0});
+    v.dataPoints.push({x:0.5,y:300});
+
+    data.push(v);
+
+    v = {}
+    v.type="line";
+    v.xValueFormatString="toto";
+    v.dataPoints=[{ x: 0, y: 0 },
+        { x: 1, y: 100 },
+        { x: 2, y: 100 },
+        { x: 3, y: 200 },
+        { x: 4, y: 250 },
+        { x: 5, y: 300 },];
+
+    data.push(v);
+    ///data.push(v3);
+    console.log(data);
+
+    var chart = new CanvasJS.Chart("chartContainer", {
+        animationEnabled: true,
+        zoomEnabled: true,
+        theme: "dark2",
+        title: {
+            text: "Score"
+        },
+        axisX: {
+            title: "Temps",
+            valueFormatString: "####",
+            interval: 1
+        },
+        axisY: {
+            title: "Point",
+            titleFontColor: "#6D78AD",
+            lineColor: "#6D78AD",
+            gridThickness: 0,
+            lineThickness: 1,
+        },
+        legend: {
+            verticalAlign: "top",
+            fontSize: 16,
+        },
+        data 
+    });
+    chart.render();
+    }
\ No newline at end of file