diff --git a/src/templates/banner.html b/src/templates/banner.html
new file mode 100644
index 0000000..17b82a5
--- /dev/null
+++ b/src/templates/banner.html
@@ -0,0 +1,21 @@
+<body class="container">
+    <div class="col-md-7 offset-md-2">
+      <a href="/"><img class="rounded" width="100px" src="{{ url_for('static', filename='images/little-printer.png') }}" alt="LittlePrynter icon"></a><h1 class="card-title font-weight-bold">Little Prynter</h1>
+      <hr>
+    <div class="alert alert-dark" role="alert">LittlePrynter is under heavy developpement, you may encounter bugs ! If so, try again. Thanks !</div>
+    <br>
+    {% with messages = get_flashed_messages(category_filter=('error')) %}
+      {% if messages %}
+        {% for message in messages %}
+          <div class="alert alert-danger" role="alert">⚠️ {{ message }}</div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+
+    {% with messages = get_flashed_messages(category_filter=('info')) %}
+      {% if messages %}
+        {% for message in messages %}
+          <div class="alert alert-info" role="alert">ℹ️ {{ message }}</div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..a6cf7a8
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>LittlePrynter</title>
+        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+        <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
+    </head>
+    <body class="container">
+        <div class="col-auto">
+          <a href="/"><img class="rounded" width="100px" src="{{ url_for('static', filename='images/little-printer.png') }}" alt="LittlePrynter icon"></a><h1 class="card-title font-weight-bold">Little Prynter</h1>
+          <hr>
+          <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                  <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/">Home</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="/webcam">Webcam</a>
+                  </li>
+                </ul>
+              </div>
+          </nav>
+
+          <br>
+
+        <div class="alert alert-dark" role="alert">LittlePrynter is under heavy developpement, you may encounter bugs ! If so, try again. Thanks !</div>
+        <br>
+        {% with messages = get_flashed_messages(category_filter=('error')) %}
+          {% if messages %}
+            {% for message in messages %}
+              <div class="alert alert-danger" role="alert">⚠️ {{ message }}</div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+        {% with messages = get_flashed_messages(category_filter=('info')) %}
+          {% if messages %}
+            {% for message in messages %}
+              <div class="alert alert-info" role="alert">ℹ️ {{ message }}</div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+
+        {% block content %}
+
+
+        {% endblock %}
+        <hr>
+        <footer>Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter/src/branch/epson-tm-t20iii">Source code - AGPLv3</a></footer>
+      </div>
+    </body>
+</html>
diff --git a/src/templates/footer.html b/src/templates/footer.html
index e69de29..6b3e682 100644
--- a/src/templates/footer.html
+++ b/src/templates/footer.html
@@ -0,0 +1,5 @@
+<hr>
+<footer>Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter/src/branch/epson-tm-t20iii">Source code - AGPLv3</a></footer>
+</div>
+</body>
+</html>
diff --git a/src/templates/header.html b/src/templates/header.html
index e69de29..f669595 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>LittlePrynter</title>
+        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+        <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
+    </head>
diff --git a/src/templates/index.html b/src/templates/index.html
index e5aead0..2f171f9 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,40 +1,7 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>LittlePrynter</title>
-        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-        <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
-    </head>
-    <body class="container">
-        <div class="col-md-7 offset-md-2">
-            <a href="/"><img class="rounded" width="100px" src="{{ url_for('static', filename='images/little-printer.png') }}" alt="LittlePrynter icon"></a><h1 class="card-title font-weight-bold">Little Prynter</h1>
-            <hr>
-            <div class="alert alert-dark" role="alert">LittlePrynter is under heavy developpement, you may encounter bugs ! If so, try again. Thanks !</div>
-            <br>
-            {% with messages = get_flashed_messages(category_filter=('error')) %}
-              {% if messages %}
-                {% for message in messages %}
-                  <div class="alert alert-danger" role="alert">⚠️ {{ message }}</div>
-                {% endfor %}
-              {% endif %}
-            {% endwith %}
+{% extends 'base.html' %}
 
-            {% with messages = get_flashed_messages(category_filter=('info')) %}
-              {% if messages %}
-                {% for message in messages %}
-                  <div class="alert alert-info" role="alert">ℹ️ {{ message }}</div>
-                {% endfor %}
-              {% endif %}
-            {% endwith %}
+{% block content %}
 
-            <!-- <br>
-            <h3>Imprimer une image aléatoire</h3>
-            <a class="btn btn-primary btn-lg" href="/api/print/image"> Imprimer</a>
-            <hr>
-            <br> -->
             <div class="card">
               <h3 class="card-header">Print a short message</h3>
               <div class="card-body">
@@ -60,12 +27,4 @@
                   </form>
                 </div>
 
-              <!-- <div id="pbar" style="display:none">
-                <img src="{{ url_for('static',filename='load.gif') }}" alt="loading wheel">
-              </div> -->
-            </div>
-            <hr>
-            <footer>Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter/src/branch/epson-tm-t20iii">Source code - AGPLv3</a></footer>
-        </div>
-    </body>
-</html>
+                {% endblock %}
diff --git a/src/templates/webcam.html b/src/templates/webcam.html
new file mode 100644
index 0000000..4aed202
--- /dev/null
+++ b/src/templates/webcam.html
@@ -0,0 +1,186 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="card">
+  <h3 class="card-header">Photomaton</h3>
+  <div class="card-body row">
+
+    <canvas id="canvas"></canvas>
+    <video id="video" class="align-self-center">Video stream not available.</video>
+    <div class="image_dither">
+      <picture>
+        <img id="photo" class="align-self-center">
+      </picture>
+    </div>
+  </div>
+
+  <hr>
+
+  <!-- <div class="row row-cols-2"> -->
+      <!-- <button class="align-self-center col-3 btn btn-danger" name="take_picture" id="startbutton">
+        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
+          <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
+          <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
+        </svg>
+      </button>
+      <br><br> -->
+      <button class="align-self-center col-3 btn btn-danger" name="print_picture" id="print_button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16">
+          <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
+          <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
+        </svg>
+      </button>
+  <!-- </div> -->
+
+</div>
+
+<style media="screen">
+  canvas {
+    display: none;
+  }
+
+  video {
+    display: none;
+  }
+
+  .image_dither {
+    /* width: 300px;
+    height: 400px; */
+    image-rendering: smooth;
+    filter: saturate(0) contrast(250);
+  }
+
+  picture {
+    image-rendering: smooth;
+  }
+
+  .image_dither > picture::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    position: fixed;
+    display: block;
+    z-index: 2;
+    top: 0px;
+    left: 0px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');
+    background-repeat: repeat;
+}
+
+
+  #photo {
+    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
+    padding: 0;
+    max-width: 100%;
+    vertical-align: middle;
+    image-rendering: pixelated;
+  }
+
+</style>
+
+<script type="text/javascript">
+  let streaming;
+  var width = document.getElementById("video").parentNode.parentElement.clientWidth;
+  var height = width / (4 / 3);
+  function startup() {
+    video = document.getElementById('video');
+    canvas = document.getElementById('canvas');
+    photo = document.getElementById('photo');
+    printButton = document.getElementById('print_button');
+
+    // access video stream from webcam
+    navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: false
+        })
+        // on success, stream it in video tag
+        // the video tag is hidden, as is the canvas.
+        .then(function(stream) {
+            video.srcObject = stream;
+            video.play();
+        })
+        .catch(function(err) {
+            console.log("An error occurred: " + err);
+        });
+
+    video.addEventListener('canplay', function(ev) {
+        if (!streaming) {
+            height = video.videoHeight / (video.videoWidth / width);
+
+            if (isNaN(height)) {
+                height = width / (4 / 3);
+            }
+
+            video.setAttribute('width', width);
+            video.setAttribute('height', height);
+            canvas.setAttribute('width', width);
+            canvas.setAttribute('height', height);
+
+            photo.setAttribute('width', width);
+            photo.setAttribute('height', height);
+
+
+            streaming = true;
+        }
+    }, false);
+
+    printButton.addEventListener('click', function(ev){
+      data = takepicture();
+      printPicture(data)
+      ev.preventDefault();
+
+    }, false)
+
+}
+
+  function clearphoto() {
+      var context = canvas.getContext('2d');
+      context.fillStyle = "#AAA";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      var data = canvas.toDataURL('image/png');
+      photo.setAttribute('src', data);
+  }
+
+  function takepicture() {
+      var context = canvas.getContext('2d');
+      if (width && height) {
+          canvas.width = width;
+          canvas.height = height;
+          context.drawImage(video, 0, 0, width, height);
+
+          var data = canvas.toDataURL('image/png');
+          photo.setAttribute('src', data);
+      } else {
+          clearphoto();
+      }
+
+      return data;
+  }
+
+  function printPicture(data){
+      var url = "/api/print/img"
+      var picture = data;
+      const formData = new FormData();
+
+      formData.append("file", picture);
+
+      fetch(url, {
+        method: 'POST', // or 'PUT'
+        body: formData,
+        headers:{
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(response => console.log('Success:', response), true)
+      .catch(error => console.error('Error:', error), false);
+
+    }
+
+  window.addEventListener('load', startup, false);
+</script>
+
+<br>
+
+{% endblock %}
