diff --git a/src/templates/api.html b/src/templates/api.html
new file mode 100644
index 0000000..b02aeb6
--- /dev/null
+++ b/src/templates/api.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>LittlePrynter API</title>
+  </head>
+  <body>
+    "Welcome to the printing software's API. Please see the index page to get started.
+  </body>
+</html>
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..6412b08
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,60 @@
+<!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-6 offset-md-3">
+            <img class="rounded" width="100px" src="{{ url_for('static', filename='images/little-printer.png') }}" alt="LittlePrynter icon"><h1 class="card-title font-weight-bold">Little Prynter</h1>
+            <hr>
+            <br>
+            {% with messages = get_flashed_messages(category_filter=('error')) %}
+              {% if messages %}
+                {% for message in messages %}
+                  <div class="alert alert-warning" 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 %}
+
+            <!-- <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">
+
+                <form class="form-group" action="/api/print/sms" method="post">
+                  <input class="form-control" type="text" name="txt" placeholder="200 chars or less " maxlength="200"><br>
+                  <input class="form-control" type="text" name="signature" placeholder="Signature or pseudo" maxlength="200"><br>
+
+                  <input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
+                </form>
+              </div>
+
+              <div id="pbar" style="display:none">
+                <img src="{{ url_for('static',filename='load.gif') }}" alt="loading wheel">
+              </div>
+
+            </div>
+            <br>
+            <br>
+            <hr>
+            <footer>Little Prynter is built for fun by <a href="https://n07070.xyz/about-me/">n07070</a> for fun :) </footer>
+        </div>
+    </body>
+</html>
diff --git a/templates/password.html b/src/templates/password.html
similarity index 100%
rename from templates/password.html
rename to src/templates/password.html
diff --git a/templates/index.html b/templates/index.html
deleted file mode 100644
index a2aa495..0000000
--- a/templates/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>LittlePrynter</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-        <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
-    </head>
-    <body class="container">
-        <div class="col-md-6 offset-md-3">
-            <h1 class="font-weight-bold">Little Prynter</h1>
-            <hr>
-            <br>
-            {% with messages = get_flashed_messages() %}
-              {% if messages %}
-                {% for message in messages %}
-                  <div class="alert alert-danger" role="alert">{{ message }}</div>
-                {% endfor %}
-              {% endif %}
-            {% endwith %}
-            <br>
-            <h3>Imprimer une image aléatoire</h3>
-            <a class="btn btn-primary btn-lg btn-block" href="/print/image"> Imprimer</a>
-            <hr>
-            <br>
-            <h3>Imprimer ton propre texte</h3>
-            <form class="form-group" action="/print/text" method="post">
-                <input class="form-control" type="text" name="message" placeholder="200 caractères ou moins " maxlength="200"><br>
-                <input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
-            </form>
-
-            <div id="pbar" style="display:none">
-                <img src="{{ url_for('static',filename='load.gif') }}" alt="loading wheel">
-            </div>
-            <br>
-            <br>
-            <footer><a href="/logout">Se déconnecter</a></footer>
-        </div>
-    </body>
-
-    <script>
-
-    function printImage() {
-        // Make an ajax call to the flask server on the /print/image route to trigger an image to be printer.
-        var xhttp = new XMLHttpRequest();
-         xhttp.onreadystatechange = function() {
-             var x = document.getElementById("pbar");
-                if (x.style.display === "none") {
-                    x.style.display = "inline";
-                }
-           if (this.readyState == 4 && this.status == 429) {
-               x.style.display = "none";
-               alert("Hé, attends un peu avant d'imprimer une autre image, je me repose...");
-           } else if (this.readyState == 4 && this.status == 200) {
-               x.style.display = "none";
-           }
-         };
-         xhttp.open("GET", "/print/image", true);
-         xhttp.send();
-    }
-
-    function printText(){
-        var xhttp = new XMLHttpRequest();
-         xhttp.onreadystatechange = function() {
-             if (this.readyState == 4 && this.status == 400) {
-               alert("Le text est trop long !");
-           }
-         };
-         xhttp.open("GET", "/print/text", true);
-         xhttp.send();
-    }
-
-    </script>
-</html>
