diff --git a/cameteo-interface/templates/base.html b/cameteo-interface/templates/base.html.j2
similarity index 100%
rename from cameteo-interface/templates/base.html
rename to cameteo-interface/templates/base.html.j2
diff --git a/cameteo-interface/templates/config_page.html b/cameteo-interface/templates/config_page.html.j2
similarity index 71%
rename from cameteo-interface/templates/config_page.html
rename to cameteo-interface/templates/config_page.html.j2
index 2c80d38..cb64e99 100644
--- a/cameteo-interface/templates/config_page.html
+++ b/cameteo-interface/templates/config_page.html.j2
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.tpl" %}
 {% block title %}Camétéo{% endblock %}
 {% block content %}
 
diff --git a/cameteo-interface/templates/data_graph.html.j2 b/cameteo-interface/templates/data_graph.html.j2
new file mode 100644
index 0000000..6a4552a
--- /dev/null
+++ b/cameteo-interface/templates/data_graph.html.j2
@@ -0,0 +1,46 @@
+{% extends "base.tpl" %}
+{% block title %}Camétéo{% endblock %}
+
+{% block styles %}
+  {{super()}}
+    {{ css_ressources }}
+    {{ js_ressources }}
+{% endblock %}
+
+{% block content %}
+{% from "bootstrap/pagination.html" import render_pagination %}
+<div class="container">
+    {{ plot_div|safe }}
+    <div id="graph"></div>
+    {{ render_pagination(dat) }}
+    <div class="table-responsive">
+        <table class="table table-hover">
+            <thead class="thead-inverse">
+                <tr>
+                    <th>Date/Heure</th>
+                    <th>Type</th>
+                    <th>Valeur</th>
+                    <th>Capteur</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for item in dat.items -%}
+                    {% if item.value is number %}
+                        <tr>
+                    {% else %}
+                        <tr class="warning">
+                    {% endif %}
+                            <td>{{ item.valdate }}</td>
+                            <td><a href="/type_id={{ item.type_id }}">{{ item.type_id }}</a></td>
+                            <td>{{ item.value }} {{ item.unit }}</td>
+                            <td><a href="/sensor_id={{ item.sensor_id }}">{{ item.sensor_id }}</a></td>
+                        </tr>
+                {%- endfor %}            
+            </tbody>
+        </table>
+    {{ render_pagination(dat) }}
+    </div>
+</div>
+{{ plot_script|safe }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/cameteo-interface/templates/data_viz.html b/cameteo-interface/templates/data_viz.html
deleted file mode 100644
index 30a224c..0000000
--- a/cameteo-interface/templates/data_viz.html
+++ /dev/null
@@ -1,85 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Camétéo{% endblock %}
-
-{% block styles %}
-  {{super()}}
-    <link rel="stylesheet" href="{{url_for('static', filename ='css/data_viz.css', _external = True)}}" />
-    <script src="{{url_for('static', filename ='js/d3.min.js', _external = True)}}"></script>
-{% endblock %}
-
-{% block content %}
-{% from "bootstrap/pagination.html" import render_pagination %}
-<div class="container">
-    <div id="graph"></div>
-    {{ render_pagination(dat) }}
-    <div class="table-responsive">
-        <table class="table table-hover">
-            <thead class="thead-inverse">
-                <tr>
-                    <th>Date/Heure</th>
-                    <th>Valeur</th>
-                    <th>Capteur</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for item in dat.items -%}
-                    {% if item.value is number %}
-                        <tr><td>{{ item.valdate }}</td><td>{{ item.value }} {{ item.unit }}</td><td>{{ item.sensor_id }}</td></tr>
-                    {% else %}
-                        <tr class="warning"><td>{{ item.valdate }}</td><td>{{ item.value }}</td><td>{{ item.sensor_id }}</td></tr>
-                    {% endif %}
-                {%- endfor %}            
-            </tbody>
-        </table>
-    {{ render_pagination(dat) }}
-    </div>
-</div>
-<script>
-    var data = d3.range(40).map(function(i) {
-      return i % 5 ? {x: i / 39, y: (Math.sin(i / 3) + 2) / 4} : null;
-    });
-    
-    var margin = {top: 40, right: 40, bottom: 40, left: 40},
-        width = 960 - margin.left - margin.right,
-        height = 500 - margin.top - margin.bottom;
-    
-    var x = d3.scaleLinear()
-        .range([0, width]);
-    
-    var y = d3.scaleLinear()
-        .range([height, 0]);
-    
-    var line = d3.line()
-        .defined(function(d) { return d; })
-        .x(function(d) { return x(d.x); })
-        .y(function(d) { return y(d.y); });
-    
-    var svg = d3.select("#graph").append("svg")
-        .datum(data)
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-      .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
-    svg.append("g")
-        .attr("class", "axis axis--x")
-        .attr("transform", "translate(0," + height + ")")
-        .call(d3.axisBottom(x));
-    
-    svg.append("g")
-        .attr("class", "axis axis--y")
-        .call(d3.axisLeft(y));
-    
-    svg.append("path")
-        .attr("class", "line")
-        .attr("d", line);
-    
-    svg.selectAll(".dot")
-      .data(data.filter(function(d) { return d; }))
-      .enter().append("circle")
-        .attr("class", "dot")
-        .attr("cx", line.x())
-        .attr("cy", line.y())
-        .attr("r", 3.5);
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/cameteo-interface/templates/data_viz.html.j2 b/cameteo-interface/templates/data_viz.html.j2
new file mode 100644
index 0000000..dc70781
--- /dev/null
+++ b/cameteo-interface/templates/data_viz.html.j2
@@ -0,0 +1,37 @@
+{% extends "base.tpl" %}
+{% block title %}Camétéo{% endblock %}
+
+{% block content %}
+{% from "bootstrap/pagination.html" import render_pagination %}
+<div class="container">
+    <div id="graph"></div>
+    {{ render_pagination(dat) }}
+    <div class="table-responsive">
+        <table class="table table-hover">
+            <thead class="thead-inverse">
+                <tr>
+                    <th>Date/Heure</th>
+                    <th>Type</th>
+                    <th>Valeur</th>
+                    <th>Capteur</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for item in dat.items -%}
+                    {% if item.value is number %}
+                        <tr>
+                    {% else %}
+                        <tr class="warning">
+                    {% endif %}
+                            <td>{{ item.valdate }}</td>
+                            <td><a href="/type_id={{ item.type_id }}">{{ item.type_id }}</a></td>
+                            <td>{{ item.value }} {{ item.unit }}</td>
+                            <td><a href="/sensor_id={{ item.sensor_id }}">{{ item.sensor_id }}</a></td>
+                        </tr>
+                {%- endfor %}            
+            </tbody>
+        </table>
+    {{ render_pagination(dat) }}
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/cameteo-interface/templates/index.html b/cameteo-interface/templates/index.html
deleted file mode 100644
index 2631881..0000000
--- a/cameteo-interface/templates/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Camétéo{% endblock %}
-
-{% block content %}
-
-<div class="container">
-    <div class="jumbotron">
-        <h1>Bienvenue !</h1>
-        <p>Camétéo est un projet de prise de mesures et de photos pour documenter
-        des activités d'extérieurs (randonnées, jardin...).</p>
-        <p><a class="btn btn-primary btn-lg" href="/all_data" role="button">Voir les données...</a></p>
-    </div>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/cameteo-interface/templates/index2.html b/cameteo-interface/templates/index.html.j2
similarity index 91%
rename from cameteo-interface/templates/index2.html
rename to cameteo-interface/templates/index.html.j2
index 2631881..55be6dd 100644
--- a/cameteo-interface/templates/index2.html
+++ b/cameteo-interface/templates/index.html.j2
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.tpl" %}
 {% block title %}Camétéo{% endblock %}
 
 {% block content %}
diff --git a/cameteo-interface/templates/photos.html.j2 b/cameteo-interface/templates/photos.html.j2
new file mode 100644
index 0000000..f7fa1cb
--- /dev/null
+++ b/cameteo-interface/templates/photos.html.j2
@@ -0,0 +1,14 @@
+{% extends "base.tpl" %}
+{% block title %}Camétéo - Photos{% endblock %}
+
+{% block content %}
+
+<div class="container">
+    <div class="jumbotron">
+        <p><a href={{ url_for('picture', num=numero+1) }}>Photo précédente</a>{% if numero > 0 %} | <a href={{ url_for('picture', num=numero-1) }}>Photo suivante</a>{% endif %}</p>
+        <p><img src="{{ picture_path }}" width="1020" alt="Dernière photo prise" ></p>
+        <p><a href="{{ picture_path }}"><span class="glyphicon glyphicon-download"></span>Télécharger la photo</a><p>
+    </div>
+</div>
+
+{% endblock %}
\ No newline at end of file