diff --git a/components/header/header.html b/components/header/header.html
index 812cef3..3dc6e1f 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'] || $_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'] || $_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.js b/components/header/header.js
index 8d67a13..eec0076 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -2,27 +2,22 @@
 $(document).ready( () => {
   console.log('Load component - header')
 
-  const components = $('.component-header')
+  const component = $('.component-header')
 
-  components.each( (i, e) => {
-    const component = $(e)
-    const hamburger = component.find('.hamburger')
-    const menu = component.find('.sidebar-menu')
+  const hamburger = component.find('.hamburger')
+  const menu = component.find('.sidebar-menu')
 
-    hamburger.on('click', (e) => {
-      const hamburger = $(e.currentTarget)
-      hamburger.toggleClass('is-active')
+  hamburger.off('.click').on('click.click', (e) => {
+    const ham = $(e.currentTarget)
 
-      if(hamburger.hasClass('is-active')){
-        menu.addClass('active')
-        //items.slideDown()
-        //$('html, body').css({overflow: 'hidden'})
-      } else {
-        menu.removeClass('active')
-        //items.slideUp()
-        //$('html, body').css({overflow: 'auto'})
-      }
-    })
+    ham.toggleClass('is-active')
+    console.log(ham, menu)
+
+    if(ham.hasClass('is-active')){
+      menu.addClass('active')
+    } else {
+      menu.removeClass('active')
+    }
   })
 
 })
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..9cbb883
--- /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 button-big w-100 text-uppercase">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 input-big" 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..2bfacb9
--- /dev/null
+++ b/components/home/home.js
@@ -0,0 +1,5 @@
+/*
+$(document).ready( () => {
+  console.log('Load component - home')
+
+})*/
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/components/plp/plp.html b/components/plp/plp.html
new file mode 100644
index 0000000..b94d89a
--- /dev/null
+++ b/components/plp/plp.html
@@ -0,0 +1,53 @@
+<div class="component-plp">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10">
+        <div class="row">
+
+          <div class="col-12 pb-1">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-12 pb-4">
+            <select class="select">
+              <option value="">Filtra</option>
+              <option value="1">Opzione 1</option>
+              <option value="2">Opzione 2</option>
+              <option value="3">Opzione 3</option>
+              <option value="4">Opzione 4</option>
+            </select>
+          </div>
+
+
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox2.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox3.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox4.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../productBox/productBox.html')}
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        banner
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/plp/plp.js b/components/plp/plp.js
new file mode 100644
index 0000000..fa0f8b0
--- /dev/null
+++ b/components/plp/plp.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - plp')
+
+})
\ No newline at end of file
diff --git a/components/plp/plp.scss b/components/plp/plp.scss
new file mode 100644
index 0000000..9a8368a
--- /dev/null
+++ b/components/plp/plp.scss
@@ -0,0 +1,12 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-plp {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+}
diff --git a/components/productBox/productBox.html b/components/productBox/productBox.html
new file mode 100644
index 0000000..1c973ab
--- /dev/null
+++ b/components/productBox/productBox.html
@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod1.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto </span>
+    <span class="price">17,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>
diff --git a/components/productBox/productBox.js b/components/productBox/productBox.js
new file mode 100644
index 0000000..7ccd94d
--- /dev/null
+++ b/components/productBox/productBox.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - productBox')
+
+})
\ No newline at end of file
diff --git a/components/productBox/productBox.scss b/components/productBox/productBox.scss
new file mode 100644
index 0000000..809aba8
--- /dev/null
+++ b/components/productBox/productBox.scss
@@ -0,0 +1,38 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-productBox {
+  position: relative;
+  padding-bottom: 80px;
+  height: 100%;
+
+  .image {
+    width: 100%;
+    padding-bottom: 10px;
+  }
+
+  .title {
+    display: inline-block;
+    width: calc(100% - 70px);
+    padding-right: 5px;
+    font-size: $font-16;
+    font-weight: 600;
+    line-height: $font-16;
+  }
+
+  .price {
+    display: inline-block;
+    width: 70px;
+    font-size: $font-16;
+    font-weight: light;
+    text-align: right;
+    white-space: no-wrap;
+  }
+
+  .add-to-cart{
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+  }
+}
+
diff --git a/components/productBox/productBox2.html b/components/productBox/productBox2.html
new file mode 100644
index 0000000..3c82de3
--- /dev/null
+++ b/components/productBox/productBox2.html
@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod2.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
+    <span class="price">170,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>
diff --git a/components/productBox/productBox3.html b/components/productBox/productBox3.html
new file mode 100644
index 0000000..f058334
--- /dev/null
+++ b/components/productBox/productBox3.html
@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod3.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto</span>
+    <span class="price">7,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>
diff --git a/components/productBox/productBox4.html b/components/productBox/productBox4.html
new file mode 100644
index 0000000..daea3b6
--- /dev/null
+++ b/components/productBox/productBox4.html
@@ -0,0 +1,8 @@
+<div class="component-productBox">
+  <img class="image" src="/images/prod4.png">
+  <div class="d-flex">
+    <span class="title">Nome prodotto</span>
+    <span class="price">8,90 €</span>
+  </div>
+  <button class="button button-black add-to-cart">Aggiungi al carrello</button>
+</div>
diff --git a/images/arrow-down.svg b/images/arrow-down.svg
new file mode 100644
index 0000000..1820970
--- /dev/null
+++ b/images/arrow-down.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg2244"
+   version="1.1"
+   viewBox="0 0 90 90"
+   height="90mm"
+   width="90mm">
+  <defs
+     id="defs2238" />
+  <metadata
+     id="metadata2241">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1">
+    <path
+       id="path2932"
+       d="M 7.9511719 20.333984 A 3.5 3.5 0 0 0 5.6542969 21.199219 A 3.5 3.5 0 0 0 5.3242188 26.138672 L 42.365234 68.470703 A 3.50035 3.50035 0 0 0 47.634766 68.470703 L 84.675781 26.138672 A 3.5 3.5 0 0 0 84.345703 21.199219 A 3.5 3.5 0 0 0 79.408203 21.529297 L 45 60.849609 L 10.591797 21.529297 A 3.5 3.5 0 0 0 7.9511719 20.333984 z "
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1" />
+  </g>
+</svg>
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/images/prod1.png b/images/prod1.png
new file mode 100644
index 0000000..cede433
Binary files /dev/null and b/images/prod1.png differ
diff --git a/images/prod2.png b/images/prod2.png
new file mode 100644
index 0000000..61cfa6a
Binary files /dev/null and b/images/prod2.png differ
diff --git a/images/prod3.png b/images/prod3.png
new file mode 100644
index 0000000..f2826c0
Binary files /dev/null and b/images/prod3.png differ
diff --git a/images/prod4.png b/images/prod4.png
new file mode 100644
index 0000000..2e2a235
Binary files /dev/null and b/images/prod4.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
index 82ea089..ca7ccee 100644
--- a/pages/buy.ejs
+++ b/pages/buy.ejs
@@ -1,83 +1,5 @@
-<!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')}
+ ${require('../components/plp/plp.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..331e28a
--- /dev/null
+++ b/pages/home.ejs
@@ -0,0 +1,5 @@
+
+ ${require('../components/home/home.html')}
+
+
+
diff --git a/pages/index.ejs b/pages/index.ejs
index 10c1467..88383a8 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -11,14 +11,20 @@
 
     ${require('../components/header/header.html')}
 
-    <main class="main-content">
 
-        <section class="container">
-
-        </section>
-
-
-    </main>
+    <?php
+      if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') {
+        @include 'home.php';
+      } else {
+    ?>
+      <main class="main-content">
+    <?php
+        @include $_GET['q'].'.php';
+    ?>
+      </main>
+    <?php
+      }
+    ?>
 
     ${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..5625f8f 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 10px;
+  border: 2px solid $white;
+  @include font-style( $font-sans, 'regular', $font-18);
   box-shadow: unset;
   text-transform: initial !important;
 
@@ -116,8 +121,13 @@ input[type=date] {
     background: transparent;
   }
 
+  &.input-gray {
+    border: 2px solid $light-gray;
+    background: $light-gray;
+  }
+
   &:disabled {
-    border-bottom: 1px solid $gray;
+    border-bottom: 2px solid $gray;
     & + .label-text,
     & + label {
       color: $gray;
@@ -125,48 +135,18 @@ input[type=date] {
   }
 }
 
-fieldset,
-.fieldset {
-  position: relative;
-  padding-bottom: 35px;
-  .label-text {
-    color: $gray;
-
-    &.required {
-      &:after {
-        content: '*';
-      }
-    }
-  }
-
-  &.has-error {
-    .label-text {
-      color: $red;
-      text-transform: uppercase;
-      font-size: $font-10;
-    }
-    .error-message {
-      color: $red;
-      display: block !important;
-      text-transform: uppercase;
-      font-size: $font-10;
-    }
-    input {
-      border-bottom: 1px solid $red;
-    }
-  }
-}
-
 select {
   appearance: none;
   background-image: url(/images/arrow-down.svg);
   background-size: auto 40%;
   background-repeat: no-repeat;
   background-position: right 3px center;
+  border-bottom: 1px solid $gray;
 
   &:disabled {
-    background-image: url(/images/arrow-down-gray.svg);
+    background-image: url(/images/arrow-down.svg);
   }
+
   &:focus {
     //background-image: url(/images/arrow-up.svg);
   }
@@ -174,20 +154,19 @@ select {
 
 
 .button {
-  border: none;
-  color: $black;
+  color: $white;
   background: transparent;
   border-radius: 0;
   height: auto;
   display: block;
-  padding: 10px 20px;
+  padding: 7px 15px;
+  border: 2px solid $white;
   text-align: center;
-  @include font-style( $font-sans, 'regular', $font-18);
-  text-transform: uppercase;
+  @include font-style( $font-sans, 'regular', $font-14);
 
-  &.button-blue {
-    background: $blue;
-    color: $white;
+  &.button-big {
+    padding: 10px 20px;
+    font-size: $font-18;
   }
 
   &.button-small {
@@ -196,6 +175,12 @@ select {
     padding: 5px;
   }
 
+  &.button-black {
+    background: $dark-gray;
+    color: $white;
+    border: 2px solid $dark-gray;
+  }
+
   &:disabled {
     opacity: 0.5;
   }
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 00839e6..c0c2a65 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;
@@ -16,6 +17,8 @@ ul {
 
 a,
 input,
+select,
+option,
 button {
   text-decoration: none;
   outline: none;
@@ -90,6 +93,14 @@ button {
   text-transform: uppercase;
 }
 
+.w-100 {
+  width: 100% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
 .middle {
   @include middle();
 }
@@ -106,7 +117,7 @@ button {
 .main-content {
 
   min-height: calc(100vh - #{$footer-height});
-  padding: $header-height-mobile 40px 0 40px;
+  padding: $header-height-mobile 10px 0 10px;
 
   @media (min-width: map-get($grid-breakpoints, 'md')) {
     padding: $header-height 40px 0 40px;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index ccbc827..ace1c6b 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -13,3 +13,6 @@
 
 @import "./components/header/header.scss";
 @import "./components/footer/footer.scss";
+@import "./components/home/home.scss";
+@import "./components/plp/plp.scss";
+@import "./components/productBox/productBox.scss";
diff --git a/webpack.config.js b/webpack.config.js
index a9e4c96..90c28ca 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -75,7 +75,8 @@ module.exports = (env) => {
       plugins.push(
         new HtmlWebpackPlugin({
           template: path.resolve(pagesPath, page),
-          filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php")
+          filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php"),
+          inject: page == 'index.ejs'
         })
       )
     }