diff --git a/static/hasrung.svg b/static/hasrung.svg
new file mode 100644
index 0000000..efa1e7e
--- /dev/null
+++ b/static/hasrung.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M75.3,35.7c0.3,0.5,6.3,11.4,0.1,24.3c-0.3,0.7-1,1-1.7,1c-0.3,0-0.5-0.1-0.8-0.2c-0.9-0.4-1.3-1.6-0.9-2.5  c5.4-11.1,0.3-20.5,0.1-20.9c-0.5-0.9-0.2-2,0.7-2.5C73.7,34.5,74.8,34.8,75.3,35.7z M84.9,26.2c-0.5-0.9-1.6-1.2-2.5-0.7  c-0.9,0.5-1.2,1.6-0.7,2.5c0.1,0.2,10.3,18.5-0.1,39.8c-0.4,0.9-0.1,2,0.9,2.5c0.3,0.1,0.5,0.2,0.8,0.2c0.7,0,1.3-0.4,1.7-1  C96.1,46.5,85.3,27,84.9,26.2z M63.6,21.4v53.8c0,0,0,0.1,0,0.1c-0.1,1.9-1.4,2.7-2.6,2.7c-0.8,0-1.6-0.4-2.6-1.1L42.9,64.5h-6.1  v11.9c0,3.4-2.7,6.1-6.1,6.1h-5.4c-3.4,0-6.1-2.7-6.1-6.1V64.5h-4.5c-3.3,0-6-2.7-6-6V36.8c0-3.3,2.7-6,6-6h28.3L58,18.7  c0.1-0.1,0.3-0.2,0.4-0.3c0.2-0.1,1.1-0.4,2-0.4C62.3,18,63.6,19.4,63.6,21.4z M14.6,60.8H21h13.9h6.8V34.5H14.6  c-1.2,0-2.3,1-2.3,2.3v21.7C12.4,59.8,13.4,60.8,14.6,60.8z M33.1,64.5H22.9v11.9c0,1.3,1.1,2.4,2.4,2.4h5.4c1.3,0,2.4-1.1,2.4-2.4  V64.5z M59.9,21.9L45.4,33.5v28.2l14.5,11.6V21.9z"></path></svg>
diff --git a/static/toomuch.svg b/static/toomuch.svg
new file mode 100644
index 0000000..a365073
--- /dev/null
+++ b/static/toomuch.svg
@@ -0,0 +1,3 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+  <path d="M89.9,55.3c0.7,0.7,0.7,1.9,0,2.6c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5L81,51.6l-6.3,6.3  c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.7-0.7-0.7-1.9,0-2.6l6.3-6.3l-6.3-6.3c-0.7-0.7-0.7-1.9,0-2.6  c0.7-0.7,1.9-0.7,2.6,0l6.3,6.3l6.3-6.3c0.7-0.7,1.9-0.7,2.6,0c0.7,0.7,0.7,1.9,0,2.6L83.6,49L89.9,55.3z M63.2,21.2V75  c0,0,0,0.1,0,0.1c-0.1,1.9-1.4,2.7-2.6,2.7h0c-0.8,0-1.6-0.4-2.6-1.1L42.4,64.3h-6.1v11.9c0,3.4-2.7,6.1-6.1,6.1h-5.4  c-3.4,0-6.1-2.7-6.1-6.1V64.3h-4.5c-3.3,0-6-2.7-6-6V36.6c0-3.3,2.7-6,6-6h28.3l15.1-12.1c0.1-0.1,0.2-0.2,0.3-0.2  c0,0,1-0.5,2.1-0.5C61.9,17.8,63.2,19.2,63.2,21.2z M14.2,60.6h6.4h13.9h6.8V34.3H14.2c-1.2,0-2.3,1-2.3,2.3v21.7  C11.9,59.6,12.9,60.6,14.2,60.6z M32.6,64.3H22.4v11.9c0,1.3,1.1,2.4,2.4,2.4h5.4c1.3,0,2.4-1.1,2.4-2.4V64.3z M59.5,21.7L44.9,33.4  v28.2l14.5,11.6V21.7z"></path>
+</svg>
diff --git a/templates/base.html b/templates/base.html
index c6169fb..6a5f741 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,10 +3,85 @@
 <html lang="fr">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Sonnette de l'Arcoloc</title>
     <meta name="author" content="Arcoloc.eu">
-    <!-- <link rel="stylesheet" href="static/style.css"> -->
+    <style>
+* {
+  box-sizing: border-box;
+}
+html, body {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+form {
+  background: #97022c;
+  color: #FFF;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  width: initial;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button {
+  flex: 0 0 auto;
+  font-size: 52px;
+  line-height: 28px;
+  font-weight: bold;
+  text-align: center;
+
+  display: block;
+  background: none;
+  color: inherit;
+  border: none;
+  outline: inherit;
+  cursor: pointer;
+}
+button span {
+  display: block;
+  font-size: 22px;
+  margin: 10px 0 0 100px;
+}
+div.notification {
+  position: relative;
+  flex: 0 0 auto;
+  width: 320px;
+  max-width: 90%;
+}
+p {
+  position: absolute;
+  width: 100%;
+  background: #fff;
+  padding: 10px 2px;
+  color: #000;
+  line-height: 18px;
+  min-height: 56px;
+  background: #e6e7ea;
+}
+p::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+  margin: 0 8px;
+  float: left;
+}
+p.hasrung::before {
+  background: url(static/hasrung.svg);
+}
+p.toomuch::before {
+  background: url(static/toomuch.svg);
+}
+    </style>
   </head>
   <body>
     {% block content %}
diff --git a/templates/homepage.html b/templates/homepage.html
index ed17464..634887d 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -2,23 +2,22 @@
 
 {% block content %}
 
-<h1>Sonnette de l'Arcoloc</h1>
-
-{% if has_rung %}
-<div id="hasrung">
-  <p>Dring :)</p>
-</div>
-{% endif %}
-
-{% if too_much_dring %}
-<div id="toomuch">
-  <p>Non mais on est pas sourd·e·s, hein. Nonmaisoh.</p>
-</div>
-{% endif %}
-
 <form method="post">
-  <input type="hidden" name='ding' value='dong' />
-  <input type="submit" value="Dring !" />
+  <button type="submit" name="ding" value="dong">
+    Sonner <span>à l'Arcoloc</span>
+  </button>
+  <div class="notification">
+{% if has_rung %}
+    <p class="hasrung">
+      Dring :)
+    </p>
+{% endif %}
+{% if too_much_dring %}
+    <p class="toomuch">
+      Non mais on est pas sourd·e·s, hein. Nonmaisoh.
+    </p>
+{% endif %}
+  </div>
 </form>
 
 {% endblock content %}
