diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html
new file mode 100644
index 0000000..1ed4672
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.html
@@ -0,0 +1,47 @@
+<?php
+
+  switch($_GET['q']) {
+    case 'raccontare':
+        $levels[0] = array('raccontare', '/raccontare');
+    break;
+    case 'conoscere':
+        $levels[0] = array('conoscere', '/conoscere');
+    break;
+    case 'produrre':
+        $levels[0] = array('produrre', '/produrre');
+    break;
+    case 'acquistare':
+        $levels[0] = array('acquistare', '/acquistare');
+    break;
+
+    case 'due-cucchiai-di-salute':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Due cucchiai di salute', '/due-cucchiai-di-salute');
+    break;
+    case 'le-variabili-del-gusto':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Le variabili del gusto', '/le-variabili-del-gusto');
+    break;
+    case 'un-olio-da-strippare':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Un olio da... strippare', '/un-olio-da-strippare');
+    break;
+  }
+?>
+
+<div class="component-breadcrumb">
+  <div class="container">
+    <ul class="items">
+      <li class="item">
+        <a class="link" href="/iolovolio">iolovolio</a>
+      </li>
+
+      <?php
+        foreach($levels as $level) {
+          echo '<li class="item"> <a class="link" href="'.$level[1].'">'.$level[0].'</a></li>';
+        }
+
+      ?>
+    </ul>
+  </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..196a639
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.scss
@@ -0,0 +1,45 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-breadcrumb {
+  display: block;
+  padding-top: $header-height-mobile+60;
+  margin-bottom: 20px;
+
+  .items {
+    display: block;
+    list-style: none;
+    padding: 20px 0 15px 0;
+    border-bottom: 1px solid $black-alpha;
+
+    .item {
+      display: inline;
+      @include font-style($font-sans, 'regular', $font-18);
+      color: $gray;
+
+      .link {
+        color: $gray;
+      }
+
+      &:after {
+        content: '>';
+        padding: 0 4px;
+        font-size: $font-14;
+      }
+
+      &:last-of-type {
+        font-weight: bold;
+        &:after {
+          content: '';
+        }
+      }
+
+    }
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-breadcrumb {
+    padding-top: $header-height+60;
+  }
+}
diff --git a/components/buy/buy.html b/components/buy/buy.html
new file mode 100644
index 0000000..ac76340
--- /dev/null
+++ b/components/buy/buy.html
@@ -0,0 +1,8 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
+<div class="component-buy">
+  <div class="row no-gutters">
+  </div>
+</div>
diff --git a/components/buy/buy.js b/components/buy/buy.js
new file mode 100644
index 0000000..af5a4a7
--- /dev/null
+++ b/components/buy/buy.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - buy')
+
+})
\ No newline at end of file
diff --git a/components/buy/buy.scss b/components/buy/buy.scss
new file mode 100644
index 0000000..008676f
--- /dev/null
+++ b/components/buy/buy.scss
@@ -0,0 +1,7 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-buy {
+  padding-top: $header-height-mobile+60px;
+
+}
diff --git a/components/content/content-learn.html b/components/content/content-learn.html
index 654b56f..831e3bf 100644
--- a/components/content/content-learn.html
+++ b/components/content/content-learn.html
@@ -1,3 +1,6 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
 
 <div class="component-content">
   <div class="container">
diff --git a/components/content/content-produce.html b/components/content/content-produce.html
index 8bfb834..55a2a7a 100644
--- a/components/content/content-produce.html
+++ b/components/content/content-produce.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 
 <div class="component-content">
   <div class="container">
diff --git a/components/content/content-recount-1.html b/components/content/content-recount-1.html
index d4f7950..e202406 100644
--- a/components/content/content-recount-1.html
+++ b/components/content/content-recount-1.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content-recount-2.html b/components/content/content-recount-2.html
index 94cf728..61c7f5f 100644
--- a/components/content/content-recount-2.html
+++ b/components/content/content-recount-2.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content-recount-3.html b/components/content/content-recount-3.html
index 64f1498..3b6dea2 100644
--- a/components/content/content-recount-3.html
+++ b/components/content/content-recount-3.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content-recount-index.html b/components/content/content-recount-index.html
index d3dfc2f..0f5c6d2 100644
--- a/components/content/content-recount-index.html
+++ b/components/content/content-recount-index.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content-recount.html b/components/content/content-recount.html
index 469ee85..5e8cbdc 100644
--- a/components/content/content-recount.html
+++ b/components/content/content-recount.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content.html b/components/content/content.html
index 96ff4d4..6760c70 100644
--- a/components/content/content.html
+++ b/components/content/content.html
@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 
diff --git a/components/content/content.scss b/components/content/content.scss
index b9c43a7..6e1ff88 100644
--- a/components/content/content.scss
+++ b/components/content/content.scss
@@ -2,7 +2,7 @@
 @import "../../src/scss/mixins.scss";
 
 .component-content {
-  padding-top: $header-height-mobile+60px;
+  //padding-top: $header-height-mobile+60px;
 
   .title {
     display: block;
@@ -52,6 +52,6 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-content {
-    padding-top: $header-height+60px;
+    //padding-top: $header-height+60px;
   }
 }
diff --git a/components/header/header.html b/components/header/header.html
index 1fbace9..37259de 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -17,17 +17,17 @@
       </span>
 
       <ul class="menu">
-        <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-          <a href="/learn" class="label">conoscere</a>
+        <li class="item <?php if($_GET['q'] == 'conoscere') { echo "active";}?>">
+          <a href="/conoscere" class="label">conoscere</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'produce') { echo "active";}?>">
-          <a href="/produce" class="label">produrre</a>
+        <li class="item <?php if($_GET['q'] == 'produrre') { echo "active";}?>">
+          <a href="/produrre" class="label">produrre</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
-          <a href="/buy" class="label">acquistare</a>
+        <li class="item <?php if($_GET['q'] == 'acquistare') { echo "active";}?>">
+          <a href="/acquistare" class="label">acquistare</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'recount') { echo "active";}?>">
-          <a href="/recount" class="label">raccontare</a>
+        <li class="item <?php if($_GET['q'] == 'raccontare') { echo "active";}?>">
+          <a href="/raccontare" class="label">raccontare</a>
         </li>
       </ul>
     </nav>
diff --git a/pages/acquistare.ejs b/pages/acquistare.ejs
new file mode 100644
index 0000000..d52112b
--- /dev/null
+++ b/pages/acquistare.ejs
@@ -0,0 +1,2 @@
+
+${require('../components/buy/buy.html')}
diff --git a/pages/learn.ejs b/pages/conoscere.ejs
similarity index 100%
rename from pages/learn.ejs
rename to pages/conoscere.ejs
diff --git a/pages/index.ejs b/pages/index.ejs
index 955502e..7114cc8 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -1,18 +1,18 @@
 <?php
   switch($_GET['q']) {
-    case 'recount':
+    case 'raccontare':
     case 'due-cucchiai-di-salute':
     case 'le-variabili-del-gusto':
     case 'un-olio-da-strippare':
         $section_label = 'raccontare';
     break;
-    case 'learn':
+    case 'conoscere':
         $section_label = 'conoscere';
     break;
-    case 'produce':
+    case 'produrre':
         $section_label = 'produrre';
     break;
-    case 'buy':
+    case 'acquistare':
         $section_label = 'acquistare';
     break;
   }
@@ -34,6 +34,7 @@
     <main class="main-content">
 
       <?php
+      echo $_GET['q'];
         @include $_GET['q'].'.php';
       ?>
 
diff --git a/pages/produce.ejs b/pages/produrre.ejs
similarity index 100%
rename from pages/produce.ejs
rename to pages/produrre.ejs
diff --git a/pages/recount.ejs b/pages/raccontare.ejs
similarity index 100%
rename from pages/recount.ejs
rename to pages/raccontare.ejs
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 508be94..02b971e 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -15,3 +15,5 @@
 @import "./components/sectionHeader/sectionHeader.scss";
 @import "./components/content/content.scss";
 @import "./components/footer/footer.scss";
+@import "./components/buy/buy.scss";
+@import "./components/breadcrumb/breadcrumb.scss";