diff --git a/TemplateBlog/assets/img/IMG_20170122_180255.jpg b/TemplateBlog/assets/img/IMG_20170122_180255.jpg
old mode 100755
new mode 100644
diff --git a/TemplateBlog/assets/js/jquery-2.2.0.min.js b/TemplateBlog/assets/js/jquery-2.2.0.min.js
old mode 100755
new mode 100644
diff --git a/app.js b/app.js
index 3275709..1e18f27 100644
--- a/app.js
+++ b/app.js
@@ -3,7 +3,8 @@ const express   = require('express'),
       r         = require('rethinkdb'),
       cors      = require("cors"),
       app       = express(),
-      log       = require("color-logs")(true, true, "Dryusdan.fr");
+      log       = require("color-logs")(true, true, "Dryusdan.fr"),
+      hbs       = require('hbs');
 
 log.info("Application started and now preparing");
 
@@ -14,6 +15,21 @@ var corsOptions = {
     "preflightContinue": false
 };
 
+hbs.registerHelper('list', function(items, options) {
+    //console.log(items);
+    var out = '';
+    var l=items.length;
+    for(var i=0; i<l; i++) {
+      //console.log(items[i]);
+      out = out + "" + options.fn(items[i]) + "";
+      
+      
+    }
+    //console.log(out);
+    return out;
+});
+
+
 const config = require("./config.json");
 var Template = require("./classes/Template.class");
 
@@ -26,11 +42,14 @@ class App {
         log.info("Application ready");
         var template = new Template(r, this.rdbConn);
         
-        
         app.get("/", function(req, res){
-            res.setHeader("Content-type", "text/html");
+            template.render(function(tplData){
+                res.setHeader("Content-type", "text/html");
+                res.render('template.hbs', tplData);
+            });
+            
+            
             
-            res.end(template.returnHTML("", "", "Accueil"));
         });
         app.get("/article/:slug", function(req, res){
             /*res.setHeader("Content-type", "text/plain");
diff --git a/classes/Categories.class.js b/classes/Categories.class.js
index 7e50815..812217f 100644
--- a/classes/Categories.class.js
+++ b/classes/Categories.class.js
@@ -8,12 +8,12 @@ class Categories {
         this.db = r;
     }
     
-    list() {
+    list(callback) {
         this.db.table('categories').run(this.rdbConn, function(err, cursor){
             if(err) throw err;
             cursor.toArray(function(err, result){
                 if(err) throw err;
-                return result;
+                callback(result);
             });
         });
     }
diff --git a/classes/Template.class.js b/classes/Template.class.js
index ae521cc..b9efc27 100644
--- a/classes/Template.class.js
+++ b/classes/Template.class.js
@@ -5,25 +5,81 @@ const log        = require('color-logs')(true, true, "Template.class.js"),
 
 var Categories = require('../classes/Categories.class.js');
 class Template {
+    
     constructor(r, rtdbConn){
         this.rdbConn = rtdbConn;
         this.db = r;
     }
     
-    returnHTML(source, data, title){
+    getNav(callback){
+        var categories = new Categories(this.db, this.rdbConn);
+        categories.list(function(ctgs){
+            callback(ctgs);
+        }); 
+    }
+    
+    render(callback){
+        this.getNav(function(nav){
+            var tplData  = {
+                "blogName": config.blogName,
+                "title": 'Accueil',
+                "nav": nav,
+            };
+            callback(tplData);
+        })
+        
+
+        
+        //return tplData;
+    }
+    
+    
+    generateHTML(cb){
+        
+        console.log("passage !");
+        cb;
+    }
+    
+    /*generateTemplate(){
         var categories = new Categories(this.db, this.rdbConn);
-        var result = categories.list(); //cette methode n'est pas appelé
-        console.log(result); //Impossible de récupérer les valeurs de result;
         var tplSource  = fs.readFileSync("./view/template.hbs", "utf8");
-        /*var tplSource = require('../view/template.hbs');*/
+        
+        categories.list(function(ctgs, source){
+            console.log(ctgs);
+        }); 
+        
         var template   = Handlebars.compile(tplSource);
         var tplData    = {
             "blogName": config.blogName,
-            "title": title
+            "title": title,
+            "nav": '',
         };
-        
         return template(tplData);
+
+    }*/
+    
+    /*generateHTML(ctgs){
+        var tplData  = {
+            "blogName": config.blogName,
+            "title": title,
+            "nav": ctgs,
+        };
+        console.log(generateSource("./view/template.hbs", "utf8", tplData));
     }
+    
+    static generateSource(source, data){
+        var tplSource  = fs.readFileSync(source);
+        var template   = Handlebars.compile(tplSource);
+        return template(data);
+    }
+
+    returnHTML(source, data, title){
+        var categories = new Categories(this.db, this.rdbConn);
+        categories.list((function(ctgs){
+            return generateHTML(ctgs);
+        })(generateHTML(ctgs))); //cette methode n'est pas appelé
+        
+    }*/
 }
 
 
diff --git a/config.json b/config.json
index cbb08ba..be24b2c 100644
--- a/config.json
+++ b/config.json
@@ -1,6 +1,6 @@
 {
     "appPort": "8888",
-    "rtdbHost": "172.17.0.2",
+    "rtdbHost": "ssh.dryusdan.fr",
     "rtdbPort": "28015",
     "blogName": "Dryusdan.fr"
 }
diff --git a/package.json b/package.json
index b2006fe..99660b6 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "express":"4.15.2",
         "cors":"2.8.1",
         "color-logs":"0.6.1",
-        "rethinkdb":"2.3.3"
+        "rethinkdb":"2.3.3",
+        "hbs":"4.0.1"
     }
 }
diff --git a/public/assets/img/IMG_20170122_180255.jpg b/public/assets/img/IMG_20170122_180255.jpg
old mode 100755
new mode 100644
diff --git a/public/assets/js/jquery-2.2.0.min.js b/public/assets/js/jquery-2.2.0.min.js
old mode 100755
new mode 100644
diff --git a/views/template.hbs b/views/template.hbs
new file mode 100644
index 0000000..10a3552
--- /dev/null
+++ b/views/template.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>{{title}} - {{blogName}}</title>
+    <link rel="stylesheet" href="/assets/css/global.css">
+</head>
+<body>
+<header>
+    <div id="logo"><a href="/">{{blogName}}</a></div>
+    <nav>
+        {{#list nav}}<div class="navItem"><a href="{{slug}}">{{title}}</a></div>{{/list}}
+        <!--<div class="navItem"><a href="index.html">Accueil</a></div>
+        <div class="navItem"><a href="portfolio.html">Portfolio</a></div>
+        <div class="navItem">Contact</div>-->
+        <div class="navItem" id="openSearchTool">
+            <img class="navIcon" src="assets/img/search.png">
+        </div>
+    </nav>
+</header>
+<div class="search">
+    <div class="inputContainer">
+        <input type="search" placeholder="Rechercher...">
+        <button> </button>
+    </div>
+</div>
+{{content}}
+<footer>
+
+</footer>
+<script src="/assets/js/jquery-2.2.0.min.js"></script>
+<script src="/assets/js/parallax.js"></script>
+<script src="/assets/js/searchInput.js"></script>
+</body>
+</html>
\ No newline at end of file