diff --git a/OLD/components/article/article.html b/OLD/components/article/article.html
new file mode 100644
index 0000000..6b308ea
--- /dev/null
+++ b/OLD/components/article/article.html
@@ -0,0 +1,33 @@
+<div class="component-article">
+<div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10 pb-4">
+        <div class="row">
+
+          <div class="col-12 pb-4">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-12">
+            <img class="image" src="/images/articleHeader.png">
+          </div>
+          <div class="col-12">
+            <h2 class="title">
+              La tecnica dell'assaggio
+            </h2>
+            <span class="subtitle">
+              Come degustare un olio extravergine
+            </span>
+            <span class="text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </span>
+          </div>
+
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner<br><br>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/OLD/components/article/article.js b/OLD/components/article/article.js
new file mode 100644
index 0000000..5c586fb
--- /dev/null
+++ b/OLD/components/article/article.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - article')
+
+})
\ No newline at end of file
diff --git a/OLD/components/article/article.scss b/OLD/components/article/article.scss
new file mode 100644
index 0000000..e70e6e5
--- /dev/null
+++ b/OLD/components/article/article.scss
@@ -0,0 +1,41 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-article {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+  }
+
+  .title {
+    display: block;
+    font-size: $font-30;
+    font-weight: normal;
+    padding: 15px 0;
+    margin: 0;
+    color: $olive;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: $font-18;
+    font-weight: bold;
+    padding-bottom: 7px;
+    margin-bottom: 15px;
+    color: $dark-gray;
+  }
+
+  .text {
+    display: block;
+    font-size: $font-16;
+    padding-bottom: 5px;
+    color: $dark-gray;
+  }
+
+}
diff --git a/OLD/components/articleBox/articleBox.html b/OLD/components/articleBox/articleBox.html
new file mode 100644
index 0000000..32b76b8
--- /dev/null
+++ b/OLD/components/articleBox/articleBox.html
@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article1.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker olive"></span>
+  </a>
+</div>
diff --git a/OLD/components/articleBox/articleBox.js b/OLD/components/articleBox/articleBox.js
new file mode 100644
index 0000000..fe1befd
--- /dev/null
+++ b/OLD/components/articleBox/articleBox.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - articleBox')
+
+})
\ No newline at end of file
diff --git a/OLD/components/articleBox/articleBox.scss b/OLD/components/articleBox/articleBox.scss
new file mode 100644
index 0000000..e9db49e
--- /dev/null
+++ b/OLD/components/articleBox/articleBox.scss
@@ -0,0 +1,60 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-articleBox {
+
+  position: relative;
+  padding-bottom: 20px;
+  height: 100%;
+
+  .image {
+    width: 100%;
+    padding-bottom: 10px;
+  }
+
+  .title {
+    display: block;
+    width: 100%;
+    padding-right: 5px;
+    font-size: $font-16;
+    font-weight: 600;
+    line-height: $font-16;
+    color: $black;
+  }
+
+  .marker {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+
+    &:before {
+      position: absolute;
+      content: '\e903';
+      font-family: $icon;
+      font-size: 30px;
+      color: $white;
+    }
+    &:after {
+      position: absolute;
+      top: 4px;
+      left: 3px;
+      content: '\e903';
+      font-family: $icon;
+      font-size: 24px;
+      color: $gray;
+    }
+    &.olive {
+      &:after {color: $olive;}
+    }
+    &.gray {
+      &:after {color: $dark-gray;}
+    }
+    &.white {
+      &:after {color: $white;}
+    }
+    &.orange {
+      &:after {color: $orange;}
+    }
+  }
+
+}
diff --git a/OLD/components/articleBox/articleBox2.html b/OLD/components/articleBox/articleBox2.html
new file mode 100644
index 0000000..d548f30
--- /dev/null
+++ b/OLD/components/articleBox/articleBox2.html
@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article2.png">
+    <span class="title">Titolo articolo test 2 </span>
+    <span class="marker gray"></span>
+  </a>
+</div>
diff --git a/OLD/components/articleBox/articleBox3.html b/OLD/components/articleBox/articleBox3.html
new file mode 100644
index 0000000..07ca4b2
--- /dev/null
+++ b/OLD/components/articleBox/articleBox3.html
@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article3.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker white"></span>
+  </a>
+</div>
diff --git a/OLD/components/articleBox/articleBox4.html b/OLD/components/articleBox/articleBox4.html
new file mode 100644
index 0000000..0844849
--- /dev/null
+++ b/OLD/components/articleBox/articleBox4.html
@@ -0,0 +1,7 @@
+<div class="component-articleBox">
+  <a href="/article">
+    <img class="image" src="/images/article4.png">
+    <span class="title">Titolo articolo </span>
+    <span class="marker orange"></span>
+  </a>
+</div>
diff --git a/OLD/components/articles/articles.html b/OLD/components/articles/articles.html
new file mode 100644
index 0000000..41f229c
--- /dev/null
+++ b/OLD/components/articles/articles.html
@@ -0,0 +1,53 @@
+<div class="component-articles">
+  <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('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox2.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox3.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox4.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+          <div class="col-12 col-sm-6 col-md-3">
+            ${require('../articleBox/articleBox.html')}
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/OLD/components/articles/articles.js b/OLD/components/articles/articles.js
new file mode 100644
index 0000000..24ab23b
--- /dev/null
+++ b/OLD/components/articles/articles.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - articles')
+
+})
\ No newline at end of file
diff --git a/OLD/components/articles/articles.scss b/OLD/components/articles/articles.scss
new file mode 100644
index 0000000..380b646
--- /dev/null
+++ b/OLD/components/articles/articles.scss
@@ -0,0 +1,11 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-articles {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+}
diff --git a/components/footer/footer.html b/OLD/components/footer/footer.html
similarity index 79%
rename from components/footer/footer.html
rename to OLD/components/footer/footer.html
index ab212ac..cc3f26e 100644
--- a/components/footer/footer.html
+++ b/OLD/components/footer/footer.html
@@ -1,8 +1,8 @@
 <div class="component-footer">
   <div class="container d-flex my-auto">
     <ul class="menu">
-      <li class="item mr-4">
-        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio.</b></a>
+      <li class="item mr-md-4">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio</b></a>
       </li>
       <li class="item">
         <a href="/terms" class="label">Termini servizio</a>
diff --git a/components/footer/footer.js b/OLD/components/footer/footer.js
similarity index 100%
rename from components/footer/footer.js
rename to OLD/components/footer/footer.js
diff --git a/components/footer/footer.scss b/OLD/components/footer/footer.scss
similarity index 63%
rename from components/footer/footer.scss
rename to OLD/components/footer/footer.scss
index 16ca24a..72a5138 100644
--- a/components/footer/footer.scss
+++ b/OLD/components/footer/footer.scss
@@ -4,14 +4,15 @@
 .component-footer {
   //position: absolute;
   display: flex;
-  height: $footer-height;
+  padding: 10px 0;
+  text-align: center;
   width: 100%;
   bottom: 0;
   background: $gray;
   color: $white;
 
   .menu {
-    display: flex;
+    display: block;
     height: 100%;
     width: 100%;
     list-style: none;
@@ -19,16 +20,29 @@
     padding: 0;
 
     .item {
-      display: flex;
+      display: block;
       color: $white;
       margin: auto 20px auto 0;
       font-size: $font-12;
       letter-spacing: 2px;
+      padding: 5px;
 
       .label {
         color: $white;
       }
     }
   }
+}
 
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-footer {
+    height: $footer-height;
+    .menu {
+      display: flex;
+      .item {
+        display: flex;
+        padding: 0;
+      }
+    }
+  }
 }
diff --git a/OLD/components/header/header.html b/OLD/components/header/header.html
new file mode 100644
index 0000000..f9d5457
--- /dev/null
+++ b/OLD/components/header/header.html
@@ -0,0 +1,46 @@
+<header class="component-header">
+
+  <div class="container header-wrapper">
+    <button class="hamburger hamburger--spin my-auto">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+
+    <div class="actions">
+      <button class="icon icon-user"></button>
+      <button class="icon icon-cart"><span class="qty">3</span></button>
+    </div>
+
+    <ul class="menu">
+      <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($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+
+    <ul class="sidebar-menu">
+      <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($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+  </div>
+
+</header>
diff --git a/OLD/components/header/header.js b/OLD/components/header/header.js
new file mode 100644
index 0000000..eec0076
--- /dev/null
+++ b/OLD/components/header/header.js
@@ -0,0 +1,23 @@
+
+$(document).ready( () => {
+  console.log('Load component - header')
+
+  const component = $('.component-header')
+
+  const hamburger = component.find('.hamburger')
+  const menu = component.find('.sidebar-menu')
+
+  hamburger.off('.click').on('click.click', (e) => {
+    const ham = $(e.currentTarget)
+
+    ham.toggleClass('is-active')
+    console.log(ham, menu)
+
+    if(ham.hasClass('is-active')){
+      menu.addClass('active')
+    } else {
+      menu.removeClass('active')
+    }
+  })
+
+})
diff --git a/OLD/components/header/header.scss b/OLD/components/header/header.scss
new file mode 100644
index 0000000..763b852
--- /dev/null
+++ b/OLD/components/header/header.scss
@@ -0,0 +1,167 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-header {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  height: $header-height-mobile;
+  width: 100%;
+  background: $olive;
+  color: $white;
+  z-index: 200;
+
+  .header-wrapper {
+    display: flex;
+    position: relative;
+
+    .hamburger {
+      display: flex;
+      margin-right: 20px;
+    }
+
+    .actions {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .icon {
+        position: relative;
+        margin: 0 5px;
+        padding: 0;
+        background: none;
+        border: none;
+        color: $white;
+        font-size: $font-24;
+
+        .qty {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          height: 15px;
+          width: 15px;
+          border-radius: 50%;
+          background: $orange;
+          color: $white;
+          font-size: $font-12;
+          line-height: $font-16;
+          font-family: $font-sans;
+        }
+      }
+    }
+
+    .menu {
+      display: none;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      .item {
+        display: flex;
+        color: $white;
+        margin: auto 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+    }
+
+    .sidebar-menu {
+      position: fixed;
+      top: $header-height-mobile;
+      left: 0;
+      height: calc(100vh - #{$header-height-mobile});
+      background: $olive;
+      display: block;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      transform: translateX(-100%);
+      transition: transform .3s;
+
+      .item {
+        display: block;
+        color: $white;
+        margin: 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+        padding: 20px;
+        border-bottom: 1px dotted $gray;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          //border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+
+      &.active {
+        transform: translateX(0%);
+      }
+    }
+  }
+}
+
+
+
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-header {
+    height: $header-height;
+
+    .header-wrapper {
+      .actions {
+        position: absolute;
+        right: 0;
+
+        .icon {
+          margin: 0 5px;
+          font-size: $font-30;
+
+          .qty {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            height: 25px;
+            width: 25px;
+            font-size: $font-20;
+            line-height: $font-24;
+          }
+        }
+      }
+
+      .menu {
+        display: flex;
+      }
+
+      .sidebar-menu {
+        top: $header-height;
+        height: calc(100vh - #{$header-height});
+      }
+    }
+  }
+}
+
diff --git a/components/home/home.html b/OLD/components/home/home.html
similarity index 100%
rename from components/home/home.html
rename to OLD/components/home/home.html
diff --git a/components/home/home.js b/OLD/components/home/home.js
similarity index 100%
rename from components/home/home.js
rename to OLD/components/home/home.js
diff --git a/components/home/home.scss b/OLD/components/home/home.scss
similarity index 100%
rename from components/home/home.scss
rename to OLD/components/home/home.scss
diff --git a/components/pdp/pdp.html b/OLD/components/pdp/pdp.html
similarity index 94%
rename from components/pdp/pdp.html
rename to OLD/components/pdp/pdp.html
index a450c4d..dbcecaa 100644
--- a/components/pdp/pdp.html
+++ b/OLD/components/pdp/pdp.html
@@ -26,7 +26,7 @@
             <span class="price">17,90 €</span>
             <button class="button button-black w-100">Aggiungi al carrello</button>
             <div class="related">
-              <br><br>Prodotti correlati
+              <br><br>Prodotti correlati<br><br>
             </div>
           </div>
 
@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        <br><br>banner
+        <br><br>banner<br><br>
       </div>
     </div>
   </div>
diff --git a/components/pdp/pdp.js b/OLD/components/pdp/pdp.js
similarity index 100%
rename from components/pdp/pdp.js
rename to OLD/components/pdp/pdp.js
diff --git a/components/pdp/pdp.scss b/OLD/components/pdp/pdp.scss
similarity index 100%
rename from components/pdp/pdp.scss
rename to OLD/components/pdp/pdp.scss
diff --git a/components/plp/plp.html b/OLD/components/plp/plp.html
similarity index 98%
rename from components/plp/plp.html
rename to OLD/components/plp/plp.html
index fd64f78..6cda930 100644
--- a/components/plp/plp.html
+++ b/OLD/components/plp/plp.html
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        <br><br>banner
+        <br><br>banner<br><br>
       </div>
     </div>
   </div>
diff --git a/components/plp/plp.js b/OLD/components/plp/plp.js
similarity index 100%
rename from components/plp/plp.js
rename to OLD/components/plp/plp.js
diff --git a/components/plp/plp.scss b/OLD/components/plp/plp.scss
similarity index 100%
rename from components/plp/plp.scss
rename to OLD/components/plp/plp.scss
diff --git a/components/productBox/productBox.html b/OLD/components/productBox/productBox.html
similarity index 100%
rename from components/productBox/productBox.html
rename to OLD/components/productBox/productBox.html
diff --git a/components/productBox/productBox.js b/OLD/components/productBox/productBox.js
similarity index 100%
rename from components/productBox/productBox.js
rename to OLD/components/productBox/productBox.js
diff --git a/components/productBox/productBox.scss b/OLD/components/productBox/productBox.scss
similarity index 100%
rename from components/productBox/productBox.scss
rename to OLD/components/productBox/productBox.scss
diff --git a/components/productBox/productBox2.html b/OLD/components/productBox/productBox2.html
similarity index 100%
rename from components/productBox/productBox2.html
rename to OLD/components/productBox/productBox2.html
diff --git a/components/productBox/productBox3.html b/OLD/components/productBox/productBox3.html
similarity index 100%
rename from components/productBox/productBox3.html
rename to OLD/components/productBox/productBox3.html
diff --git a/components/productBox/productBox4.html b/OLD/components/productBox/productBox4.html
similarity index 100%
rename from components/productBox/productBox4.html
rename to OLD/components/productBox/productBox4.html
diff --git a/OLD/pages/.htaccess b/OLD/pages/.htaccess
new file mode 100644
index 0000000..74b5589
--- /dev/null
+++ b/OLD/pages/.htaccess
@@ -0,0 +1,8 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+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/OLD/pages/article.ejs b/OLD/pages/article.ejs
new file mode 100644
index 0000000..c5f8b1a
--- /dev/null
+++ b/OLD/pages/article.ejs
@@ -0,0 +1,5 @@
+
+ ${require('../components/article/article.html')}
+
+
+
diff --git a/pages/buy.ejs b/OLD/pages/buy.ejs
similarity index 100%
rename from pages/buy.ejs
rename to OLD/pages/buy.ejs
diff --git a/pages/home.ejs b/OLD/pages/home.ejs
similarity index 100%
rename from pages/home.ejs
rename to OLD/pages/home.ejs
diff --git a/OLD/pages/index.ejs b/OLD/pages/index.ejs
new file mode 100644
index 0000000..88383a8
--- /dev/null
+++ b/OLD/pages/index.ejs
@@ -0,0 +1,32 @@
+<!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')}
+
+
+    <?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')}
+
+  </body>
+</html>
diff --git a/OLD/pages/learn.ejs b/OLD/pages/learn.ejs
new file mode 100644
index 0000000..1be7946
--- /dev/null
+++ b/OLD/pages/learn.ejs
@@ -0,0 +1,5 @@
+
+ ${require('../components/articles/articles.html')}
+
+
+
diff --git a/pages/product.ejs b/OLD/pages/product.ejs
similarity index 100%
rename from pages/product.ejs
rename to OLD/pages/product.ejs
diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html
new file mode 100644
index 0000000..06bb696
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.html
@@ -0,0 +1,5 @@
+<div class="component-breadcrumb">
+    <div class="row no-gutters">
+      breadcrumb
+    </div>
+</div>
diff --git a/components/breadcrumb/breadcrumb.js b/components/breadcrumb/breadcrumb.js
new file mode 100644
index 0000000..f6df84b
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - breadcrumb')
+
+})
\ No newline at end of file
diff --git a/components/breadcrumb/breadcrumb.scss b/components/breadcrumb/breadcrumb.scss
new file mode 100644
index 0000000..55907a5
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.scss
@@ -0,0 +1,8 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-breadcrumb {
+  width: 100%;
+  background: $brown;
+  height: 100px;
+}
diff --git a/components/header/header.html b/components/header/header.html
index 9eb2d82..929db92 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -1,46 +1,40 @@
 <header class="component-header">
 
   <div class="container header-wrapper">
-    <button class="hamburger hamburger--spin my-auto">
+
+    <img class="logo" src="/images/logoHeader.png">
+
+    <button class="hamburger hamburger--spring my-auto">
       <span class="hamburger-box">
         <span class="hamburger-inner"></span>
       </span>
     </button>
 
-    <div class="actions">
-      <button class="icon icon-user"></button>
-      <button class="icon icon-cart"><span class="qty">3</span></button>
-    </div>
-
-    <ul class="menu">
-      <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($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
-        <a href="/buy" class="label">acquistare</a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-        <a href="/learn" class="label">imparare</a>
-      </li>
-      <li class="item disabled">
-        <span class="label">produrre (coming soon)</span>
-      </li>
-    </ul>
-
-    <ul class="sidebar-menu">
-      <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($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
-        <a href="/buy" class="label">acquistare</a>
-      </li>
-      <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-        <a href="/learn" class="label">imparare</a>
-      </li>
-      <li class="item disabled">
-        <span class="label">produrre (coming soon)</span>
-      </li>
-    </ul>
+
+    <nav class="menu-container">
+      <span class="menu-label">
+        <a href="/iolovolio" class="label">iolovolio</b></a>
+      </span>
+
+      <ul class="menu">
+        <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
+          <a href="/learn" class="label">conoscere</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'produce') { echo "active";}?>">
+          <a href="/produce" class="label">produrre</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
+          <a href="/buy" class="label">acquistare</a>
+        </li>
+        <li class="item <?php if($_GET['q'] == 'recount') { echo "active";}?>">
+          <a href="/recount" class="label">raccontare</a>
+        </li>
+      </ul>
+    </nav>
   </div>
 
+  <?php
+    @include('components/breadcrumb/breadcrumb.php');
+  ?>
+
 </header>
diff --git a/components/header/header.js b/components/header/header.js
index eec0076..9bebade 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -5,18 +5,21 @@ $(document).ready( () => {
   const component = $('.component-header')
 
   const hamburger = component.find('.hamburger')
-  const menu = component.find('.sidebar-menu')
+  const menuContainer = component.find('.menu-container')
+  const menu = menuContainer.find('.menu')
 
   hamburger.off('.click').on('click.click', (e) => {
     const ham = $(e.currentTarget)
-
+    console.log('toggle')
     ham.toggleClass('is-active')
     console.log(ham, menu)
 
     if(ham.hasClass('is-active')){
-      menu.addClass('active')
+      menuContainer.addClass('active')
+      menu.slideDown()
     } else {
-      menu.removeClass('active')
+      menuContainer.removeClass('active')
+      menu.slideUp()
     }
   })
 
diff --git a/components/header/header.scss b/components/header/header.scss
index 763b852..ce2115d 100644
--- a/components/header/header.scss
+++ b/components/header/header.scss
@@ -3,123 +3,88 @@
 
 .component-header {
   position: fixed;
-  display: flex;
   top: 0;
   left: 0;
-  height: $header-height-mobile;
+  min-height: $header-height-mobile;
   width: 100%;
-  background: $olive;
-  color: $white;
+  background: $white;
+  color: $black;
   z-index: 200;
 
   .header-wrapper {
     display: flex;
     position: relative;
+    min-height: $header-height-mobile;
 
-    .hamburger {
-      display: flex;
-      margin-right: 20px;
+    .logo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 70px;
+      transform: translate(-50%, -50%);
     }
 
-    .actions {
+    .hamburger {
       position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-
-      .icon {
-        position: relative;
-        margin: 0 5px;
-        padding: 0;
-        background: none;
-        border: none;
-        color: $white;
-        font-size: $font-24;
-
-        .qty {
-          position: absolute;
-          top: -5px;
-          right: -5px;
-          height: 15px;
-          width: 15px;
-          border-radius: 50%;
-          background: $orange;
-          color: $white;
-          font-size: $font-12;
-          line-height: $font-16;
-          font-family: $font-sans;
-        }
-      }
+      top: 45px;
+      right: 20px;
     }
 
-    .menu {
-      display: none;
-      list-style: none;
-      margin: 0;
-      padding: 0;
+    .menu-container {
+      margin: 100px 0 20px auto;
 
-      .item {
-        display: flex;
-        color: $white;
-        margin: auto 20px;
-        font-size: $font-20;
-        letter-spacing: 2px;
+      .menu-label {
+        //display: none;
+        position: absolute;
+        right: 35px;
+        top: 80px;
+        opacity: 0;
+        transition: transform .4s, right .4s, opacity .4s;
+        transform-origin: right;
+        transform: rotate(-90deg);
+        -webkit-backface-visibility: hidden;
 
         .label {
-          color: $white;
+          @include font-style($font-serif, 'regular', $font-18);
+          color: $brown;
+          transition: font-size .4s;
         }
+      }
 
-        &.active {
-          border-bottom: 2px solid $white;
-        }
+      .menu {
+        text-align: right;
+        display: none;
+        opacity: 0;
+        transition: opacity .4s;
+
+        .item {
+          padding: 0 5px;
 
-        &.disabled {
           .label {
-            color: $white-alpha;
+            @include font-style($font-serif, 'regular', $font-18);
+            color: $olive-dark;
           }
-        }
-      }
-    }
-
-    .sidebar-menu {
-      position: fixed;
-      top: $header-height-mobile;
-      left: 0;
-      height: calc(100vh - #{$header-height-mobile});
-      background: $olive;
-      display: block;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      transform: translateX(-100%);
-      transition: transform .3s;
-
-      .item {
-        display: block;
-        color: $white;
-        margin: 20px;
-        font-size: $font-20;
-        letter-spacing: 2px;
-        padding: 20px;
-        border-bottom: 1px dotted $gray;
-
-        .label {
-          color: $white;
-        }
 
-        &.active {
-          //border-bottom: 2px solid $white;
+          &:first-of-type {
+            padding-top: 5px;
+          }
         }
+      }
 
-        &.disabled {
+      &.active {
+        .menu-label {
+          opacity: 1;
+          transform: rotate(0deg);
+          right: 20px;
           .label {
-            color: $white-alpha;
+            font-size:$font-14;
           }
         }
-      }
 
-      &.active {
-        transform: translateX(0%);
+        .menu {
+          opacity: 1;
+        }
+
       }
     }
   }
@@ -130,37 +95,15 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-header {
-    height: $header-height;
-
+    min-height: $header-height;
     .header-wrapper {
-      .actions {
-        position: absolute;
-        right: 0;
-
-        .icon {
-          margin: 0 5px;
-          font-size: $font-30;
-
-          .qty {
-            position: absolute;
-            top: -15px;
-            right: -15px;
-            height: 25px;
-            width: 25px;
-            font-size: $font-20;
-            line-height: $font-24;
-          }
+      min-height: $header-height;
+      .menu-container {
+        .menu-label {
+          //display: block;
+          opacity: 1;
         }
       }
-
-      .menu {
-        display: flex;
-      }
-
-      .sidebar-menu {
-        top: $header-height;
-        height: calc(100vh - #{$header-height});
-      }
     }
   }
 }
diff --git a/images/drop1.png b/images/drop1.png
deleted file mode 100644
index 81f8d3c..0000000
Binary files a/images/drop1.png and /dev/null differ
diff --git a/images/drop2.png b/images/drop2.png
deleted file mode 100644
index 25ab7b7..0000000
Binary files a/images/drop2.png and /dev/null differ
diff --git a/images/logo.png b/images/logo.png
index fbbe144..af7721f 100644
Binary files a/images/logo.png and b/images/logo.png differ
diff --git a/images/logoHeader.png b/images/logoHeader.png
new file mode 100644
index 0000000..e91fe0f
Binary files /dev/null and b/images/logoHeader.png differ
diff --git a/images/prod1.png b/images/prod1.png
deleted file mode 100644
index cede433..0000000
Binary files a/images/prod1.png and /dev/null differ
diff --git a/images/prod2.png b/images/prod2.png
deleted file mode 100644
index 61cfa6a..0000000
Binary files a/images/prod2.png and /dev/null differ
diff --git a/images/prod3.png b/images/prod3.png
deleted file mode 100644
index f2826c0..0000000
Binary files a/images/prod3.png and /dev/null differ
diff --git a/images/prod4.png b/images/prod4.png
deleted file mode 100644
index 2e2a235..0000000
Binary files a/images/prod4.png and /dev/null differ
diff --git a/package.json b/package.json
index a5b767d..8d3fb46 100644
--- a/package.json
+++ b/package.json
@@ -16,42 +16,42 @@
   "author": "Dslak",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "autoprefixer": "^9.7.6",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "autoprefixer": "^10.1.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
     "base-href-webpack-plugin": "^2.0.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.5.3",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^3.5.1",
+    "css-loader": "^5.0.1",
     "es6-promise-promise": "^1.0.0",
-    "eslint": "^6.0.1",
-    "eslint-config-google": "^0.13.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "extract-loader": "^3.1.0",
-    "file-loader": "^4.0.0",
-    "glob": "^7.1.4",
+    "eslint": "^7.15.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.2.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "glob": "^7.1.6",
     "hamburgers": "^1.1.3",
-    "html-loader": "^0.5.5",
+    "handlebars": "^4.7.6",
+    "html-loader": "^1.3.2",
     "html-webpack-plugin": "^3.2.0",
-    "http-server": "^0.12.1",
-    "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "^0.7.0",
+    "http-server": "^0.12.3",
+    "jquery": "^3.5.1",
+    "mini-css-extract-plugin": "^1.3.3",
     "minimist": "^1.2.5",
-    "node-sass": "^4.12.0",
-    "nodemon": "^1.19.1",
-    "popper.js": "^1.15.0",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.18.2",
-    "sass-loader": "^7.1.0",
-    "url-loader": "^2.0.1",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.9",
-    "webpack-notifier": "^1.8.0"
+    "node-sass": "^5.0.0",
+    "nodemon": "^2.0.6",
+    "popper.js": "^1.16.1",
+    "postcss-loader": "^4.1.0",
+    "prettier": "^2.2.1",
+    "sass-loader": "^10.1.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.2.0",
+    "webpack-notifier": "^1.12.0"
   }
 }
diff --git a/pages/index.ejs b/pages/index.ejs
index 88383a8..677bcba 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -26,7 +26,6 @@
       }
     ?>
 
-    ${require('../components/footer/footer.html')}
 
   </body>
 </html>
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
index d7cd022..030f235 100644
--- a/src/scss/fonts.scss
+++ b/src/scss/fonts.scss
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&family=Open+Sans:300,400,500,700&display=swap');
diff --git a/src/scss/main.scss b/src/scss/main.scss
index caa6592..938fb64 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -12,8 +12,14 @@
 @import "../scss/forms.scss";
 
 @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";
 @import "./components/pdp/pdp.scss";
+@import "./components/article/article.scss";
+@import "./components/articles/articles.scss";
+@import "./components/articleBox/articleBox.scss";
+*/
+@import "./components/breadcrumb/breadcrumb.scss";
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 98265f3..4e52fa6 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -30,8 +30,8 @@ $container-max-widths: (
   xl: 1560px
 );
 
-$font-serif: 'Source Sans Pro';
-$font-sans: 'Source Sans Pro';
+$font-serif: 'DM Serif Display';
+$font-sans: 'Open Sans';
 $icon: 'icomoon';
 
 $black:       #000;
@@ -41,7 +41,10 @@ $light-gray:  #f0efec;
 $dark-gray:   #393939;
 
 $olive:       #86876f;
+$olive-dark:  #383920;
 $orange:      #ddb279;
+$brown:       #92704F;
+
 
 $white-alpha: rgba(255, 255, 255, 0.5);
 $black-alpha: rgba(0, 0, 0, 0.5);
@@ -49,19 +52,19 @@ $black-alpha: rgba(0, 0, 0, 0.5);
 //Hamburgers settings
 $hamburger-padding-x           : 0;
 $hamburger-padding-y           : 6px;
-$hamburger-layer-width         : 35px;
-$hamburger-layer-height        : 1px;
+$hamburger-layer-width         : 30px;
+$hamburger-layer-height        : 3px;
 $hamburger-layer-spacing       : 8px;
-$hamburger-layer-color         : $white;
+$hamburger-layer-color         : $olive-dark;
 $hamburger-layer-border-radius : 0;
 $hamburger-hover-opacity       : 1;
-$hamburger-active-layer-color  : $white;
-$hamburger-active-hover-opacity: $white;
+$hamburger-active-layer-color  : $olive-dark;
+$hamburger-active-hover-opacity: $olive-dark;
 
 
-$header-height: 120px;
-$header-height-mobile: 50px;
-$footer-height: 30px;
+$header-height: 200px;
+$header-height-mobile: 110px;
+$footer-height: 40px;
 
 /* Font-size variables */
 $font-6: 0.375rem;      /* 6px */
diff --git a/webpack.config.js b/webpack.config.js
index 90c28ca..d3c008e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,7 @@ const fs = require('fs')
 const WebpackNotifierPlugin = require('webpack-notifier')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const Handlebars = require('handlebars')
 
 const basePath = './'
 const pagesPath = path.join(__dirname, './pages')
@@ -128,14 +129,17 @@ module.exports = (env) => {
 
         // HTML
         {
-          test: /.*\.html?$/,
-          use: {
-            loader: 'html-loader',
-            options: {
-              attrs: ['link:href', 'script:src', 'img:src'],
-              interpolate: true,
-            },
-          },
+          test: /\.html$/i,
+          loader: 'html-loader',
+          options: {
+            attributes: {
+              list: [
+                { tag: 'img', attribute: 'data-src', type: 'src'},
+                { tag: 'img', attribute: 'data-srcset', type: 'srcset'}
+              ],
+              root: '.'
+            }
+          }
         }
       ]
     },