diff --git a/docker/landing/html/landing/fonts/texgyreheros-bold.otf b/docker/landing/html/landing/fonts/texgyreheros-bold.otf
new file mode 100644
index 0000000..2f23b92
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheros-bold.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheros-bolditalic.otf b/docker/landing/html/landing/fonts/texgyreheros-bolditalic.otf
new file mode 100644
index 0000000..556b8e1
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheros-bolditalic.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheros-italic.otf b/docker/landing/html/landing/fonts/texgyreheros-italic.otf
new file mode 100644
index 0000000..ae50725
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheros-italic.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheros-regular.otf b/docker/landing/html/landing/fonts/texgyreheros-regular.otf
new file mode 100644
index 0000000..ac6c32f
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheros-regular.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheroscn-bold.otf b/docker/landing/html/landing/fonts/texgyreheroscn-bold.otf
new file mode 100644
index 0000000..dc5f63a
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheroscn-bold.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheroscn-bolditalic.otf b/docker/landing/html/landing/fonts/texgyreheroscn-bolditalic.otf
new file mode 100644
index 0000000..2b46b47
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheroscn-bolditalic.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheroscn-italic.otf b/docker/landing/html/landing/fonts/texgyreheroscn-italic.otf
new file mode 100644
index 0000000..f5159dd
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheroscn-italic.otf differ
diff --git a/docker/landing/html/landing/fonts/texgyreheroscn-regular.otf b/docker/landing/html/landing/fonts/texgyreheroscn-regular.otf
new file mode 100644
index 0000000..5630217
Binary files /dev/null and b/docker/landing/html/landing/fonts/texgyreheroscn-regular.otf differ
diff --git a/docker/landing/html/landing/1f4ae.svg b/docker/landing/html/landing/img/flower.svg
similarity index 100%
rename from docker/landing/html/landing/1f4ae.svg
rename to docker/landing/html/landing/img/flower.svg
diff --git a/docker/landing/html/landing/prototype.html b/docker/landing/html/landing/prototype.html
index 32345a1..0d1bb4a 100644
--- a/docker/landing/html/landing/prototype.html
+++ b/docker/landing/html/landing/prototype.html
@@ -1,11 +1,15 @@
 <!doctype html>
 <html>
   <head>
-    <title>deuxfleurs</title>
+    <title>💮💮 deuxfleurs</title>
     <meta charset="utf-8"/>
     <style>
+@font-face {
+  font-family: "Heroes";
+  src: url('fonts/texgyreheros-regular.otf') format('truetype');
+}
 * {
-  font-family: Helvetica;
+  font-family: Heroes;
   margin: 0;
   padding: 0;
 }
@@ -13,34 +17,102 @@
 header {
   background-color: #519c60;
   color: #ffffff;
-  padding: 50px 40px 1px 40px;
+  padding: 50px 0px 1px 0px;
 }
 
-header > h1 {
-  font-size: 80px;
-  margin: 10px 0px -31px 0px;
+h1 {
+  font-size: 5em;
 }
 
-header > .site-name > img, header > .site-name > span {
-  vertical-align: middle;
+h2 {
+  font-size: 3em;
 }
 
-header > .site-name > span {
+.spacing {
+  margin-top: 1em;
+}
+
+header > .container > h1 {
+  margin: 10px 0px -27px 0px;
+}
+
+header > .container > .site-name > img {
+  vertical-align: -9px;
+}
+
+header > .container > .site-name > a {
   font-size: 30px;
+  color: white;
+  text-decoration: none;
 }
 
+.container {
+  padding: 0px 40px 0px 40px;
+}
+
+.chapeau {
+  font-size: 1.8em;
+  font-weight: bold; 
+  line-height: 1.2;
+}
+
+.service-box {
+  color: #000;
+  text-decoration: none;
+  border: 0.2em solid #000;
+  width: 250px;
+  text-align:center;
+  margin-right: 1em;
+}
+
+.service-box:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.list {
+  display: flex;
+}
     </style>
   </head>
 
   <body>
     <header>
-      <!-- <div class="site-name">
-        <img src="1f4ae.svg" width="32">
-        <img src="1f4ae.svg" width="32">
-        <span>deuxfleurs<span>
-      </div> -->
-      <h1>documentation</h1> 
+      <div class="container">
+        <div class="site-name" style="float:right">
+          <a href="./prototype.html">deuxfleurs</a>
+          <img src="img/flower.svg" width="38">
+          <img src="img/flower.svg" width="38">
+        </div>
+        <h1>notre internet</h1> 
+      </div>
     </header>
 
+    <main>
+      <div class="container spacing"/>
+        <div class="chapeau">⇨ protège votre vie privée</div>
+        <div class="chapeau">⇨ défend vos libertés et vos droits</div>
+        <div class="chapeau">⇨ ne vous manipule pas</div>
+
+        <section class="spacing">
+          <h2>et vous permet de</h2>
+
+          <div class="list" />
+          <a href="" class="service-box spacing">
+            <div style="font-size: 80px">💬</div>
+            <h3>chatter</h3>
+          </a>
+          <a href="" class="service-box spacing">
+            <div style="font-size: 80px">📄</div>
+            <h3>sauvegarder vos documents</h3>
+          </a>
+          <a href="" class="service-box spacing">
+              <div style="font-size: 80px">📨</div>
+              <h3>envoyer des emails</h3>
+          </a>
+          </div>
+        </section>
+      </div>
+    </main>
   </body>
 </html>
