diff --git a/homepage/css/style.css b/homepage/css/style.css
new file mode 100644
index 0000000..9f27e13
--- /dev/null
+++ b/homepage/css/style.css
@@ -0,0 +1,221 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('../fonts/roboto-v19-latin-regular.eot?#iefix')
+      format('embedded-opentype'),
+    url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'),
+    url('../fonts/roboto-v19-latin-regular.woff') format('woff'),
+    url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'),
+    url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto-light-webfont.woff2') format('woff2');
+  src: url('../fonts/roboto-light-webfont.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto-bold-webfont.woff2') format('woff2');
+  src: url('../fonts/roboto-bold-webfont.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+body {
+  font-family: Roboto;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100%;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  height: 100%;
+}
+
+header,
+main,
+footer {
+  margin: 0 auto;
+}
+
+#logoTitle {
+  width: 100%;
+  max-width: 400px;
+  margin: auto;
+  display: flex;
+  justify-content: space-evenly;
+  flex-flow: row nowrap;
+  text-align: left;
+}
+
+#logoTitle img {
+  width: 140px;
+  height: 140px;
+  margin-bottom: 0;
+}
+
+#logoTitle h1 {
+  width: 200px;
+  color: #2e4369;
+  font-size: 60px;
+  font-weight: 300;
+  line-height: 60px;
+  margin: 0;
+  margin-top: auto;
+}
+
+#logo {
+  width: 140px;
+  height: auto;
+}
+
+h2 {
+  color: #999999;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 38px;
+  text-align: center;
+}
+
+#features {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.feature {
+  width: 300px;
+}
+
+#features .feature:first-child {
+  margin-bottom: 50px;
+}
+
+.feature h3,
+.feature p {
+  margin: 0;
+}
+
+.left-feature {
+  text-align: right;
+  margin-right: 50px;
+}
+
+.right-feature {
+  text-align: left;
+  margin-left: 50px;
+}
+
+.feature h3 {
+  color: #2e4369;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 30px;
+}
+
+.feature p {
+  color: #7e7e7e;
+  font-size: 16px;
+  line-height: 21px;
+}
+
+main .button {
+  height: 50px;
+  width: 220px;
+  border-radius: 10px;
+  background-color: #ffcc66;
+  border: none;
+  color: #2e4369;
+  display: block;
+  margin: 0 auto;
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 50px;
+  cursor: pointer;
+  margin: auto;
+  padding: 5px 20px;
+  text-align: center;
+  text-decoration: none;
+  transition: all .3s ease-in-out;
+}
+main .button:hover {
+  background-color: #2e4369;
+  color: #ffcc66;
+}
+
+footer ul {
+  margin-top: 50px;
+  list-style-type: none;
+  text-align: center;
+  padding: 0;
+}
+
+footer ul li {
+  display: inline-block;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+footer ul li a {
+  color: #9b9b9b;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+@media screen and (max-width: 1024px) {
+  body {
+    height: 100%;
+  }
+  .container {
+    margin: 50px 0;
+  }
+  #features {
+    flex-flow: column nowrap;
+  }
+  .left-feature,
+  .right-feature {
+    text-align: center;
+    margin-bottom: 50px;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+@media screen and (max-width: 340px) {
+  body {
+    height: 100%;
+  }
+  .container {
+    margin: 50px 0;
+  }
+  #features {
+    flex-flow: column nowrap;
+  }
+  #logoTitle {
+    text-align: center;
+    flex-wrap: wrap;
+  }
+  #logoTitle h1 {
+    font-size: 50px;
+    margin: auto;
+    width: 100%;
+  }
+  #logoTitle img {
+    margin: auto;
+  }
+}
diff --git a/homepage/fonts/Roboto-Bold-webfont.woff b/homepage/fonts/Roboto-Bold-webfont.woff
new file mode 100755
index 0000000..ee614ee
Binary files /dev/null and b/homepage/fonts/Roboto-Bold-webfont.woff differ
diff --git a/homepage/fonts/Roboto-Light-webfont.woff b/homepage/fonts/Roboto-Light-webfont.woff
new file mode 100755
index 0000000..8f5552d
Binary files /dev/null and b/homepage/fonts/Roboto-Light-webfont.woff differ
diff --git a/homepage/fonts/roboto-bold-webfont.woff2 b/homepage/fonts/roboto-bold-webfont.woff2
new file mode 100755
index 0000000..58c8a2d
Binary files /dev/null and b/homepage/fonts/roboto-bold-webfont.woff2 differ
diff --git a/homepage/fonts/roboto-light-webfont.woff2 b/homepage/fonts/roboto-light-webfont.woff2
new file mode 100755
index 0000000..df1d87c
Binary files /dev/null and b/homepage/fonts/roboto-light-webfont.woff2 differ
diff --git a/homepage/img/iPhone/@2-black.png b/homepage/img/iPhone/@2-black.png
new file mode 100644
index 0000000..2d46890
Binary files /dev/null and b/homepage/img/iPhone/@2-black.png differ
diff --git a/homepage/img/iPhone/@2-white.png b/homepage/img/iPhone/@2-white.png
deleted file mode 100644
index eddc0ca..0000000
Binary files a/homepage/img/iPhone/@2-white.png and /dev/null differ
diff --git a/homepage/index.html b/homepage/index.html
index 7668bf1..e1796a3 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -3,7 +3,8 @@
     <head>
         <title>Cygnal - Track and share issues in realtime on bike lanes!</title>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
         <meta name=description content="Track and share issues in realtime on bike lanes!">
         <meta name=twitter:card content=summary>
@@ -18,214 +19,63 @@
         <link rel="icon" type="image/png" sizes="228x228" href="./img/coast-228x228.png">
         <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
         <link rel="shortcut icon" href="./images/icons/favicon.ico">
-        <style type="text/css">
-            @font-face {
-                font-family: 'Roboto';
-                font-style: normal;
-                font-weight: 400;
-                src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
-                src: local('Roboto'), local('Roboto-Regular'),
-                    url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-                    url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-                    url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
-                    url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-                    url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
-            }
-
-            body {
-                font-family: Roboto;
-            }
-
-            header, main, footer {
-                margin: auto;
-            }
-
-            #logoTitle {
-                width: 100%;
-                max-width: 400px;
-                margin: auto;
-                display: flex;
-                align-items: flex-end;
-            }
-
-            #logoTitle img {
-                width: 140px;
-                height: 140px;
-            }
-
-            #logoTitle h1 {
-                margin-top: 0;
-                margin-bottom: 0;
-                margin-left: 20px;
-                width: 200px;
-                color: #2E4369;
-                font-size: 60px;
-                font-weight: 300;
-                line-height: 60px;
-            }
-
-            #logo {
-                width: 140px;
-                height: auto;
-            }
-
-            h2 {
-                color: #999999;
-                font-size: 32px;
-                font-weight: bold;
-                line-height: 38px;
-                text-align: center;
-            }
-
-            #features {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .feature {
-                width: 300px;
-            }
-
-            #features .feature:first-child {
-                margin-bottom: 50px;
-            }
-
-            .feature h3, .feature p {
-                margin: 0;
-            }
-
-            .left-feature {
-                text-align: right;
-                margin-right: 50px;
-            }
-
-            .right-feature {
-                text-align: left;
-                margin-left: 50px;
-            }
-
-            .feature h3 {
-                color: #2E4369;
-                font-size: 20px;
-                font-weight: bold;
-                line-height: 26px;
-            }
-
-            .feature p {
-                color: #7E7E7E;
-                font-size: 16px;
-                line-height: 21px;
-            }
-
-            main .button {
-                height: 50px;
-                width: 220px;
-                border-radius: 10px;
-                background-color: #FFCC66;
-                border: none;
-                font-size: 24px;
-                font-weight: 300;
-                line-height: 50px;
-                cursor: pointer;
-                margin: auto;
-                text-align: center;
-            }
-
-            main .button a {
-                color: #2E4369;
-                text-decoration: none;
-            }
-
-            footer ul {
-                margin-top: 50px;
-                list-style-type: none;
-                text-align: center;
-                padding: 0;
-            }
-
-            footer ul li {
-                display: inline-block;
-                margin-left: 1em;
-                margin-right: 1em;
-            }
-
-            footer ul li a {
-                color: #9B9B9B;
-                font-size: 12px;
-                line-height: 16px;
-            }
-
-            @media screen and (max-width: 1024px) {
-                #features {
-                    flex-direction: column;
-                }
-
-                .left-feature, .right-feature {
-                    text-align: center;
-                    margin-bottom: 50px;
-                    margin-left: 0;
-                    margin-right: 0;
-                }
-            }
-        </style>
+        <link rel="stylesheet" href="css/style.css">
     </head>
     <body>
-        <header>
-            <div id="logoTitle">
-                <img id="logo" src="img/logo.svg" alt="Logo"/>
-                <h1>Cygnal app</h1>
-            </div>
-            <h2>Get realtime infos on your bike route.</h2>
-        </header>
-
-        <main>
-            <div id="features">
-                <div class="left-feature">
-                    <div class="feature">
-                        <img src="img/signal.svg" alt="Report"/>
-                        <h3>Track and share issues</h3>
-                        <p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
+        <div class="container">
+            <header>
+                <div id="logoTitle">
+                    <img id="logo" src="img/logo.svg" alt="Logo"/>
+                    <h1>Cygnal app</h1>
+                </div>
+                <h2>Get realtime infos on your bike route.</h2>
+            </header>
+    
+            <main>
+                <div id="features">
+                    <div class="left-feature">
+                        <div class="feature">
+                            <img src="img/signal.svg" alt="Report"/>
+                            <h3>Track and share issues</h3>
+                            <p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
+                        </div>
+    
+                        <div class="feature">
+                            <img src="img/openData.svg" alt="OpenData"/>
+                            <h3>Based on available OpenData</h3>
+                            <p>Always up to date to inform you about road works ahead while you bike!</p>
+                        </div>
                     </div>
-
+    
                     <div class="feature">
-                        <img src="img/openData.svg" alt="OpenData"/>
-                        <h3>Based on available OpenData</h3>
-                        <p>Always up to date to inform you about road works ahead while you bike!</p>
+                        <img src="img/iPhone/@2-black.png" alt="Screenshot"/>
+                    </div>
+    
+                    <div class="right-feature">
+                        <div class="feature">
+                            <img src="img/open.svg" alt="Open-source"/>
+                            <h3>Free and open-source</h3>
+                            <p>From one fellow cyclist to another!</p>
+                        </div>
+    
+                        <div class="feature">
+                            <img src="img/privacy.svg" alt="Privacy"/>
+                            <h3>Respecting your privacy</h3>
+                            <p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
+                        </div>
                     </div>
                 </div>
-
-                <div class="feature">
-                    <img src="img/iPhone/@1-black.png" alt="Screenshot"/>
-                </div>
-
-                <div class="right-feature">
-                    <div class="feature">
-                        <img src="img/open.svg" alt="Open-source"/>
-                        <h3>Free and open-source</h3>
-                        <p>From one fellow cyclist to another!</p>
-                    </div>
-
-                    <div class="feature">
-                        <img src="img/privacy.svg" alt="Privacy"/>
-                        <h3>Respecting your privacy</h3>
-                        <p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
-                    </div>
-                </div>
-            </div>
-
-            <p class="button">
-                <a href="https://app.cygnal.eu/">Go to app</a>
-            </p>
-        </main>
-
-        <footer>
-            <nav>
-                <ul>
-                    <li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
-                    <li><a href="https://framagit.org/phyks/cygnal">source</a></li>
-                </ul>
-            </nav>
-        </footer>
+                <a class="button" href="httdivps://app.cygnal.eu/">Go to app</a>
+            </main>
+    
+            <footer>
+                <nav>
+                    <ul>
+                        <li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
+                        <li><a href="https://framagit.org/phyks/cygnal">source</a></li>
+                    </ul>
+                </nav>
+            </footer>
+        </div>
     </body>
 </html>