diff --git a/index.js b/index.js
index 950eae7..13b7091 100644
--- a/index.js
+++ b/index.js
@@ -74,7 +74,8 @@
           html = pug.renderFile(path.join('views/', route + '.pug'), {
             'publicDir': publicRoute,
             'graph': path.join('/', corpus.out, 'graph.json'),
-            'corpus': JSON.stringify(corpus)
+            'corpus': corpus,
+            'data': JSON.stringify(corpus)
           });
         }
         res.send(html);
diff --git a/public/css/style.css b/public/css/style.css
index 8145ec0..dfea9db 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,32 +1,54 @@
-body{
+body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background: #37474f;
-}
-h1{
   color: white;
 }
-#subtitle {
-  height: 50px;
-  font-size: 22px;
+h1 {
   text-align: center;
   vertical-align: center;
-  color: white;
+}
+#header {
+  margin: 1em;
 }
 #container {
   border: 2px dotted white;
   border-radius: 15px;
 }
-#container > div {
-  background-color: gray;
+.title {
+  font-size: 2.2em;
+  text-align: center;
+  vertical-align: center;
+}
+.subtitle {
+  font-size: 1.6em;
+  text-align: center;
+  vertical-align: center;
+}
+.corpus {
+  background-color: lightgray;
   border: solid 1px black;
   display: inline-block;
   padding: 10px;
   margin: 10px;
 }
 .corpus-name {
+  color: black;
   display: block;
   border-bottom: solid 1px black;
+}
+.corpus-properies {
+  padding: 1em;
+  margin: 0em;
+}
+.corpus-properies label {
+  cursor: pointer;
+}
+.corpus-properies li {
+  list-style-type:none;
+}
+.corpus-properies .glyphicon {
+  margin-right: 0.5em;
 }
\ No newline at end of file
diff --git a/views/d3.pug b/views/d3.pug
index a3c56d9..f723253 100644
--- a/views/d3.pug
+++ b/views/d3.pug
@@ -1,13 +1,32 @@
 doctype html
 html(lang="en")
   head
+    meta(charset="utf-8")
     title="ez-indexation"
+
+    <!-- Latest compiled and minified CSS -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
+
+    <!-- Optional theme -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous")
+
+    <!-- Latest compiled and minified JavaScript -->
+    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous")
+    
+    <!-- Custom CSS Rules -->
     link(rel="stylesheet" type="text/css" href=publicDir + "/css/style.css")
     link(rel="stylesheet" type="text/css" href=publicDir + "/css/force-directed-graph.css")
   body
-    h1 Graph Document-Document
-    pre
-      code#subtitle
+    div#header.container
+      div.row
+          div.col-md-12
+            h1 Graph Document-Document
+      div.row
+          div.col-md-12
+            div.title=corpus.name
+      div.row
+          div.col-md-8.col-md-offset-2
+            div.subtitle="Sélectionner un document pour voir visulaiser ses données"
     div
       canvas#container
     script(type="application/javascript" src="https://d3js.org/d3.v4.min.js")
@@ -16,4 +35,4 @@
     script(type="application/javascript" src=publicDir + "/js/resize.js")
     script(type="application/javascript" src=publicDir + "/js/force-directed-graph.js")
     script.
-      initGraph('!{graph}', '!{corpus}');
\ No newline at end of file
+      initGraph('!{graph}', '!{data}');
\ No newline at end of file
diff --git a/views/index.pug b/views/index.pug
index d0bf285..217e5aa 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,22 +1,45 @@
 doctype html
 html(lang="en")
   head
+    meta(charset="UTF-8")
     title="ez-indexation"
+
+    <!-- Latest compiled and minified CSS -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
+
+    <!-- Optional theme -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous")
+
+    <!-- Latest compiled and minified JavaScript -->
+    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous")
+
+    <!-- Custom CSS Rules -->
     link(rel="stylesheet" type="text/css" href=publicDir + "/css/style.css")
+
   body
-    h1 Home Page
-    div#container
-      each val, index in corpora
-        div
-          label.corpus-name=index
-          ul
-            each v, i in corpora[index]
-              if i === "name"
+    div.container
+      div.row
+          div.col-md-12
+            h1 Liste des corpus
+      div.row
+        each corpus, index in corpora
+          div.col-md-3
+            div.corpus
+              label.corpus-name=index
+              ul.corpus-properies
                 li
-                  a(href="/d3/" + v)="Voir le graphe" 
-              else if i === "file"
+                  a(href="/d3/" + corpus.name)
+                    span(class="glyphicon glyphicon-picture" aria-hidden="true")
+                    label="Graphe"
                 li
-                  a(href="/" + v)="Télécharger le fichier : " + corpora[index].name
-              else 
+                  a(href="/" + corpus.in)
+                    span(class="glyphicon glyphicon-folder-open" aria-hidden="true")
+                    label="in"
                 li
-                  a(href="/" + v)="Répertoire : " + i
+                  a(href="/" + corpus.out)
+                    span(class="glyphicon glyphicon-folder-open" aria-hidden="true")
+                    label="out"
+                li
+                  a(href="/" + corpus.file)
+                    span(class="glyphicon glyphicon-file" aria-hidden="true")
+                    label=corpus.name
\ No newline at end of file
diff --git a/views/sigma.pug b/views/sigma.pug
index b342727..5250991 100644
--- a/views/sigma.pug
+++ b/views/sigma.pug
@@ -1,9 +1,20 @@
 doctype html
 html(lang="en")
   head
-    title="ez-indexation"
-    link(rel="stylesheet" type="text/css" href=publicDir + "/css/style.css")
     meta(charset="utf-8")
+    title="ez-indexation"
+
+    <!-- Latest compiled and minified CSS -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
+
+    <!-- Optional theme -->
+    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous")
+
+    <!-- Latest compiled and minified JavaScript -->
+    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous")
+    
+    <!-- Custom CSS Rules -->
+    link(rel="stylesheet" type="text/css" href=publicDir + "/css/style.css")
   body
     h1 Graph Document-Document
     pre