diff --git a/webapp/class/json/example.json b/webapp/class/json/example.json
index 6699a850ebd1934f6e34a5932d36020c36c1db2c..62b0a40336a93891fe82c529ac813a24c828c1f4 100644
--- a/webapp/class/json/example.json
+++ b/webapp/class/json/example.json
@@ -16,7 +16,7 @@
 		{
 			"id": 0,
 			"name": "Marc Vachon",
-			"location": "16, chemin de Vers",
+			"address": "Genève",
 			"calendar": [{
 					"day": 27,
 					"month": 5,
@@ -31,7 +31,7 @@
 					}
 				},
 				{
-					"day": 27,
+					"day": 28,
 					"month": 5,
 					"year": 2019,
 					"from": {
@@ -62,6 +62,57 @@
 					}
 				}]
 			}
+		},
+
+		{
+			"id": 1,
+			"name": "Cholet Cholet",
+			"address": "Berne",
+			"calendar": [{
+					"day": 27,
+					"month": 5,
+					"year": 2019,
+					"from": {
+						"hour": 14,
+						"minutes": 30
+					},
+					"to": {
+						"hour": 22,
+						"minutes": 15
+					}
+				},
+				{
+					"day": 29,
+					"month": 5,
+					"year": 2019,
+					"from": {
+						"hour": 9,
+						"minutes": 0
+					},
+					"to": {
+						"hour": 18,
+						"minutes": 0
+					}
+				}
+			],
+			"path": {
+				"time": {
+					"hour": 2,
+					"minutes": 36
+				},
+				"steps": [{
+					"from": {
+						"station": "",
+						"hour": 0,
+						"minutes": 0
+					},
+					"to": {
+						"station": "",
+						"hour": 0,
+						"minutes": 0
+					}
+				}]
+			}
 		}
 
 
diff --git a/webapp/package.json b/webapp/package.json
index e0db93636b8e7c14c4cb1592b3c503cd026709c3..152f95a46ab98b10a3284558187bf3c9eadea2ec 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "ejs": "^2.6.1",
     "express": "^4.16.4",
+    "mysql": "^2.17.1",
     "sass": "^1.20.1"
   }
 }
diff --git a/webapp/ressources/db/connect_db.js b/webapp/ressources/db/connect_db.js
index 065c898b95defa75694499b4574071ff5e948cdd..7dc849a38dabe0855fa75a3587dc6c8bd970010d 100644
--- a/webapp/ressources/db/connect_db.js
+++ b/webapp/ressources/db/connect_db.js
@@ -5,7 +5,7 @@ var mysql = require('mysql');
 var db = mysql.createConnection({
 	host     : 'localhost',
 	user     : 'meet',
-	port 	 : '8888',
+	port 	 : '8889',
 	password : 'Super',
 	database : 'meetus',
 });
@@ -13,7 +13,7 @@ var db = mysql.createConnection({
 
 db.connect(function(err) {
 	if (err) throw err
-	console.log('-> db.js loaded');
+	console.log('DB: db.js loaded');
 });
 
 module.exports = db;
diff --git a/webapp/ressources/db/db_request.js b/webapp/ressources/db/db_request.js
index fce5fceb59d70d1944c290277c70059ac122b44a..02788e9007a766e99517c273d3fd7412e3a49650 100644
--- a/webapp/ressources/db/db_request.js
+++ b/webapp/ressources/db/db_request.js
@@ -3,37 +3,39 @@ var db = require('./connect_db');
 
 module.exports = {
   // MEETING
-  get_meeting: (id, callback) => {
-    let query = "SELECT COUNT(*) as nb_demand FROM sessions as se NATURAL JOIN state_session as st WHERE se.id_tutor = ? AND st.id_state_session = 2";
+  get_meeting: (id_meeting, callback) => {
+    let query = "SELECT * FROM t_meeting WHERE idMeeting = ?";
 
-    db.query(query, [id_user], (error, results, fields) => {
+    db.query(query, id_meeting, (error, results, fields) => {
         if (error) throw error;
-        callback(results)
 
+        var json = JSON.parse(results[0]['data'])
+
+        callback(json)
     })
   }
 
-  function create_meeting(){
+}
 
-  }
+function create_meeting(){
 
-  // USER
-  function get_user(){
+}
 
-  }
+// USER
+function get_user(){
 
-  function add_user(name, location, calendar){
+}
 
+function add_user(name, location, calendar){
 
 
-  }
 
-  function modify_user(idMeeting, idUser){
+}
 
-  }
+function modify_user(idMeeting, idUser){
 
-  function delete_user(idMeeting, idUser){
+}
 
-  }
+function delete_user(idMeeting, idUser){
 
 }
diff --git a/webapp/ressources/router.js b/webapp/ressources/router.js
index c12f602a0c0f01a3b980eb9f82797ab3b6bcddd8..39974602c80bf43f12fae40fbe8b15bb6b964fbc 100644
--- a/webapp/ressources/router.js
+++ b/webapp/ressources/router.js
@@ -8,8 +8,10 @@ module.exports = function (app) {
   });
 
   app.get('/meeting', function (req, res) {
-    db_request.get_meeting(, function(){
-      res.render("meeting.ejs");
+    var id = 0;
+
+    db_request.get_meeting(id, function(meeting_data){
+      res.render("meeting.ejs", {data: meeting_data});
     })
 
   });
diff --git a/webapp/views/js/script.js b/webapp/views/js/script.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..65699e409ee228ae8e5a50019ee6256f454e8e57 100644
--- a/webapp/views/js/script.js
+++ b/webapp/views/js/script.js
@@ -0,0 +1,4 @@
+function calc_meeting(idMeeting){
+  
+
+}
diff --git a/webapp/views/meeting.ejs b/webapp/views/meeting.ejs
index 4d75bf03d3622d5b849f47d842e43ff4fcf53a75..81023f0b5023c37a8aab85a15c17bff84fddf9e0 100644
--- a/webapp/views/meeting.ejs
+++ b/webapp/views/meeting.ejs
@@ -12,7 +12,8 @@
 
     <div class="w-100 d-flex mt-4 mb-3">
       <div class="d-flex justify-content-end">
-        <button type="button" name="add user" class="btn btn-primary">Ajouter un membre</button>
+        <button type="button" name="add user" class="btn btn-primary mr-2">Ajouter un membre</button>
+        <button type="button" name="button" class="btn btn-success mx-2">Calculer</button>
       </div>
     </div>
 
@@ -27,117 +28,61 @@
       <div class="col-sm-6">
         <h2>Résultat</h2>
         <dl class="row">
-          <dt class="col-sm-3">Périodes</dt>
-          <dd class="col-sm-9">Du 12/05/219 au 24/07/19</dd>
+          <dt class="col-sm-3">Date</dt>
+          <dd class="col-sm-9">
+            Le <%= data['date']['day'] %>/<%= data['date']['month'] %>/<%= data['date']['year'] %>
+            à <%= data['date']['time']['hour'] %>:<%= data['date']['time']['minutes'] %>
+          </dd>
         </dl>
       </div>
     </div>
 
     <div class="row">
 
-      <div class="col-md-6 col-lg-4 col-xl-3 mb-3 mb-3">
-        <div class="card">
-          <div class="card-body px-1 py-2">
-            <h5>Marc Vachon</h5>
-            <h5>Habite</h5>
-            <p>16, chemin de Vers, 1228 Plan-Les-Ouates</p>
-            <h5>Calendrier</h5>
-            <table class="table">
-              <tr>
-                <td>14/05/2019</td>
-                <td>14:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>15/05/2019</td>
-                <td>10:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>17/05/2019</td>
-                <td>17:00 à 24:00</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
+      <% data['user_table'].forEach(function(user){ %>
 
-      <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
-        <div class="card">
-          <div class="card-body px-1 py-2">
-            <h5>Marc Vachon</h5>
-            <h5>Habite</h5>
-            <p>16, chemin de Vers, 1228 Plan-Les-Ouates</p>
-            <h5>Calendrier</h5>
-            <table class="table">
-              <tr>
-                <td>14/05/2019</td>
-                <td>14:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>15/05/2019</td>
-                <td>10:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>17/05/2019</td>
-                <td>17:00 à 24:00</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
+        <div class="col-md-6 col-lg-4 col-xl-3 mb-3 mb-3">
+          <div class="card">
+            <div class="card-body px-1 py-2">
+              <h5><%= user['name'] %></h5>
+              <h5>Habite</h5>
+              <p><%= user['address'] %></p>
+              <h5>Calendrier</h5>
+
+              <table class="table">
+                <% user['calendar'].forEach(function(date){ %>
+                  <tr>
+                    <td><%= date['day'] %>/<%= date['month'] %>/<%= date['year'] %></td>
+                    <td><%= date['from']['hour'] %>:<%= date['from']['minutes'] %> à <%= date['to']['hour'] %>:<%= date['to']['minutes'] %></td>
+                  </tr>
+                <% }) %>
+              </table>
+
+              <table class="table">
+                <tr>
+                  <th>Time</th>
+                  <th>Journey</th>
+                  <th>Platform</th>
+                </tr>
+                <tr>
+                  <td></td>
+                  <td></td>
+                </tr>
+              </table>
 
-      <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
-        <div class="card">
-          <div class="card-body px-1 py-2">
-            <h5>Marc Vachon</h5>
-            <h5>Habite</h5>
-            <p>16, chemin de Vers, 1228 Plan-Les-Ouates</p>
-            <h5>Calendrier</h5>
-            <table class="table">
-              <tr>
-                <td>14/05/2019</td>
-                <td>14:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>15/05/2019</td>
-                <td>10:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>17/05/2019</td>
-                <td>17:00 à 24:00</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
 
-      <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
-        <div class="card">
-          <div class="card-body px-1 py-2">
-            <h5>Marc Vachon</h5>
-            <h5>Habite</h5>
-            <p>16, chemin de Vers, 1228 Plan-Les-Ouates</p>
-            <h5>Calendrier</h5>
-            <table class="table">
-              <tr>
-                <td>14/05/2019</td>
-                <td>14:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>15/05/2019</td>
-                <td>10:00 à 19:00</td>
-              </tr>
-              <tr>
-                <td>17/05/2019</td>
-                <td>17:00 à 24:00</td>
-              </tr>
-            </table>
+                <button class="btn btn-warning" type="button" name="button">Modify</button>
+                <button class="btn btn-danger" type="button" name="button">delete</button>
+
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-    </div>
-  </section>
+      <% }) %>
+
+        </div>
+      </section>
 
 
-</body>
-</html>
+    </body>
+    </html>