diff --git a/components/header/header.html b/components/header/header.html
index 812cef3..8d7e230 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -13,13 +13,13 @@
     </div>
 
     <ul class="menu">
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'iolovolio') { echo "active";}?>">
         <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
       </li>
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
         <a href="/buy" class="label">acquistare</a>
       </li>
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
         <a href="/learn" class="label">imparare</a>
       </li>
       <li class="item disabled">
@@ -28,13 +28,13 @@
     </ul>
 
     <ul class="sidebar-menu">
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'iolovolio') { echo "active";}?>">
         <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
       </li>
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
         <a href="/buy" class="label">acquistare</a>
       </li>
-      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
         <a href="/learn" class="label">imparare</a>
       </li>
       <li class="item disabled">
diff --git a/components/header/header.scss b/components/header/header.scss
index 637fea9..763b852 100644
--- a/components/header/header.scss
+++ b/components/header/header.scss
@@ -10,6 +10,7 @@
   width: 100%;
   background: $olive;
   color: $white;
+  z-index: 200;
 
   .header-wrapper {
     display: flex;
@@ -163,3 +164,4 @@
     }
   }
 }
+
diff --git a/components/home/home.html b/components/home/home.html
new file mode 100644
index 0000000..4b3b0a1
--- /dev/null
+++ b/components/home/home.html
@@ -0,0 +1,22 @@
+<div class="component-home">
+  <div class="container my-auto">
+    <div class="row">
+      <div class="col-12 col-sm-6 col-md-4 order-1 order-md-0">
+        <img class="drop" src="/images/drop1.png">
+        <span class="title"><b>io</b>lov<b>olio</b> acquistare</span>
+        <span class="subtitle"></span>
+        <button class="button w-100">Vai allo shop</button>
+      </div>
+      <div class="col-12 col-md-4 order-0 order-md-1">
+        <img class="logo" src="/images/logo.png">
+      </div>
+      <div class="col-12 col-sm-6 col-md-4 order-2 order-md-2">
+        <img class="drop" src="/images/drop2.png">
+        <span class="title"><b>io</b>lov<b>olio</b> produrre</span>
+        <span class="subtitle">Avvisami quando l'opzione sarà attiva</span>
+        <input type="text" class="input" placeholder="latuamail@mail.com">
+        <span class="privacy">*Autorizzo il trattamento dei miei dati personali ai sensi del Dlgs 196 del 30 giugno 2003 e dell'art. 13 GDPR (Regolamento UE 2016/679)</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/home/home.js b/components/home/home.js
new file mode 100644
index 0000000..8379788
--- /dev/null
+++ b/components/home/home.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - home')
+
+})
\ No newline at end of file
diff --git a/components/home/home.scss b/components/home/home.scss
new file mode 100644
index 0000000..1f08ad1
--- /dev/null
+++ b/components/home/home.scss
@@ -0,0 +1,54 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-home {
+  display: flex;
+  background: $olive;
+  min-height: calc(100vh - #{$footer-height});
+  padding: $header-height-mobile 40px 0 40px;
+
+  .drop {
+    width: 100%;
+    padding: 40px 70px 10px 70px;
+  }
+
+  .title {
+    display: block;
+    color: $white;
+    font-size: $font-28;
+    text-align: center;
+  }
+
+  .subtitle {
+    display: block;
+    min-height: 30px;
+    color: $white;
+    font-size: $font-18;
+    text-align: center;
+  }
+
+  .privacy {
+    display: block;
+    color: $white;
+    font-size: $font-12;
+    text-align: left;
+    padding-bottom: 50px;
+  }
+
+  .logo {
+    width: 100%;
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-home {
+    padding: $header-height 40px 0 40px;
+
+    .logo {
+      width: calc(100% + 100px);
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
diff --git a/images/drop1.png b/images/drop1.png
index 5aa423d..81f8d3c 100644
Binary files a/images/drop1.png and b/images/drop1.png differ
diff --git a/images/drop2.png b/images/drop2.png
index 356d1b1..25ab7b7 100644
Binary files a/images/drop2.png and b/images/drop2.png differ
diff --git a/pages/.htaccess b/pages/.htaccess
index 9b40104..74b5589 100644
--- a/pages/.htaccess
+++ b/pages/.htaccess
@@ -1,3 +1,8 @@
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
-RewriteRule ^([^\.]+)$ $1.php [NC,L]
+RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L]
+#
+# Rewritebase /
+# RewriteCond %{REQUEST_FILENAME} !-f
+# RewriteCond %{REQUEST_FILENAME} !-d
+# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]
diff --git a/pages/buy.ejs b/pages/buy.ejs
deleted file mode 100644
index 82ea089..0000000
--- a/pages/buy.ejs
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-  <head>
-    <meta charset="UTF-8">
-    <title>IoLovOlio</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="description" content=".">
-    <link rel="stylesheet" href="/assets/css/styles.css">
-  </head>
-  <body>
-
-    ${require('../components/header/header.html')}
-
-    <main class="main-content">
-
-        <section class="container">
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-        </section>
-
-
-    </main>
-
-    ${require('../components/footer/footer.html')}
-
-  </body>
-</html>
diff --git a/pages/home.ejs b/pages/home.ejs
new file mode 100644
index 0000000..7c8f042
--- /dev/null
+++ b/pages/home.ejs
@@ -0,0 +1,7 @@
+
+
+
+    ${require('../components/home/home.html')}
+
+
+
diff --git a/pages/index.ejs b/pages/index.ejs
index 10c1467..39123d9 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -11,14 +11,23 @@
 
     ${require('../components/header/header.html')}
 
-    <main class="main-content">
 
-        <section class="container">
+    <?php
+      if(!$_GET['q'] || $_GET['q'] == 'home') {
+        @include 'home.php';
+      } else {
 
-        </section>
+      ?>
+        <main class="main-content">
+      <?php
+        @include $_GET['q'].'.php';
+      ?>
+        </main>
+      <?php
+      }
+      ?>
 
 
-    </main>
 
     ${require('../components/footer/footer.html')}
 
diff --git a/pages/iolovolio.ejs b/pages/iolovolio.ejs
deleted file mode 100644
index 82ea089..0000000
--- a/pages/iolovolio.ejs
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-  <head>
-    <meta charset="UTF-8">
-    <title>IoLovOlio</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="description" content=".">
-    <link rel="stylesheet" href="/assets/css/styles.css">
-  </head>
-  <body>
-
-    ${require('../components/header/header.html')}
-
-    <main class="main-content">
-
-        <section class="container">
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-        </section>
-
-
-    </main>
-
-    ${require('../components/footer/footer.html')}
-
-  </body>
-</html>
diff --git a/pages/learn.ejs b/pages/learn.ejs
deleted file mode 100644
index 82ea089..0000000
--- a/pages/learn.ejs
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-  <head>
-    <meta charset="UTF-8">
-    <title>IoLovOlio</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="description" content=".">
-    <link rel="stylesheet" href="/assets/css/styles.css">
-  </head>
-  <body>
-
-    ${require('../components/header/header.html')}
-
-    <main class="main-content">
-
-        <section class="container">
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-            section<br>
-        </section>
-
-
-    </main>
-
-    ${require('../components/footer/footer.html')}
-
-  </body>
-</html>
diff --git a/src/scss/forms.scss b/src/scss/forms.scss
index 86f8b96..4be96e8 100644
--- a/src/scss/forms.scss
+++ b/src/scss/forms.scss
@@ -67,9 +67,14 @@ input[type=password],
 input[type=email],
 input[type=tel],
 input[type=date] {
-  border: none;
-  border-bottom: 1px solid $black;
-  height: 30px;
+  color: $dark-gray;
+  background: $white;
+  border-radius: 0;
+  height: auto;
+  display: block;
+  padding: 10px 20px;
+  border: 2px solid $white;
+  @include font-style( $font-sans, 'regular', $font-18);
   box-shadow: unset;
   text-transform: initial !important;
 
@@ -174,21 +179,17 @@ select {
 
 
 .button {
-  border: none;
-  color: $black;
+  color: $white;
   background: transparent;
   border-radius: 0;
   height: auto;
   display: block;
   padding: 10px 20px;
+  border: 2px solid $white;
   text-align: center;
   @include font-style( $font-sans, 'regular', $font-18);
   text-transform: uppercase;
 
-  &.button-blue {
-    background: $blue;
-    color: $white;
-  }
 
   &.button-small {
     height: 18px;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 00839e6..1ea347e 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -2,6 +2,7 @@
 body {
   font-family: $font-sans;
   font-weight: 400;
+  letter-spacing: 1px;
   margin: 0;
   color: $black;
   overflow-x: hidden;
@@ -90,6 +91,14 @@ button {
   text-transform: uppercase;
 }
 
+.w-100 {
+  width: 100% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
 .middle {
   @include middle();
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index ccbc827..d5ae6d8 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -13,3 +13,4 @@
 
 @import "./components/header/header.scss";
 @import "./components/footer/footer.scss";
+@import "./components/home/home.scss";