diff --git a/components/header/header.html b/components/header/header.html
index 3dc6e1f..9eb2d82 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -16,7 +16,7 @@
       <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') { echo "active";}?>">
+      <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";}?>">
@@ -31,7 +31,7 @@
       <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') { echo "active";}?>">
+      <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";}?>">
diff --git a/components/pdp/pdp.html b/components/pdp/pdp.html
new file mode 100644
index 0000000..d711769
--- /dev/null
+++ b/components/pdp/pdp.html
@@ -0,0 +1,41 @@
+<div class="component-pdp">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10">
+        <div class="row">
+
+          <div class="col-12 pb-4">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-5">
+            <img class="image" src="/images/prod2.png">
+          </div>
+          <div class="col-4 px-3">
+            <h2 class="title">
+              Nome prodotto
+            </h2>
+            <span class="subtitle">
+              Dettagli
+            </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 class="col-3">
+            <span class="price">17,90 €</span>
+            <button class="button button-black w-100">Aggiungi al carrello</button>
+            <div class="related">
+              <br><br>Prodotti correlati
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/pdp/pdp.js b/components/pdp/pdp.js
new file mode 100644
index 0000000..5dc5ec4
--- /dev/null
+++ b/components/pdp/pdp.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - pdp')
+
+})
\ No newline at end of file
diff --git a/components/pdp/pdp.scss b/components/pdp/pdp.scss
new file mode 100644
index 0000000..603f6e0
--- /dev/null
+++ b/components/pdp/pdp.scss
@@ -0,0 +1,54 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-pdp {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+  }
+
+  .title {
+    display: block;
+    font-size: $font-30;
+    font-weight: normal;
+    padding: 0 0 30px 0;
+    margin: 0;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: $font-12;
+    text-transform: uppercase;
+    padding-bottom: 7px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid $gray;
+  }
+
+  .text {
+    display: block;
+    font-size: $font-12;
+    padding-bottom: 5px;
+  }
+
+  .price {
+    display: block;
+    font-size: $font-26;
+    font-weight: normal;
+    text-align: right;
+    padding: 0 0 20px 0;
+    margin: 0;
+  }
+
+  .related {
+    background: $light-gray;
+    text-align: center;
+    margin-top: 40px;
+    height: calc(100% - 130px);
+  }
+}
diff --git a/components/plp/plp.html b/components/plp/plp.html
index b94d89a..fd64f78 100644
--- a/components/plp/plp.html
+++ b/components/plp/plp.html
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        banner
+        <br><br>banner
       </div>
     </div>
   </div>
diff --git a/components/productBox/productBox.html b/components/productBox/productBox.html
index 1c973ab..443d55e 100644
--- a/components/productBox/productBox.html
+++ b/components/productBox/productBox.html
@@ -1,8 +1,10 @@
 <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>
+  <a href="/product">
+    <img class="image" src="/images/prod1.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto </span>
+      <span class="price">17,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>
diff --git a/components/productBox/productBox.scss b/components/productBox/productBox.scss
index 809aba8..282a7ae 100644
--- a/components/productBox/productBox.scss
+++ b/components/productBox/productBox.scss
@@ -18,6 +18,7 @@
     font-size: $font-16;
     font-weight: 600;
     line-height: $font-16;
+    color: $black;
   }
 
   .price {
@@ -27,6 +28,7 @@
     font-weight: light;
     text-align: right;
     white-space: no-wrap;
+    color: $black;
   }
 
   .add-to-cart{
diff --git a/components/productBox/productBox2.html b/components/productBox/productBox2.html
index 3c82de3..58a0d79 100644
--- a/components/productBox/productBox2.html
+++ b/components/productBox/productBox2.html
@@ -1,8 +1,10 @@
 <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>
+  <a href="/product">
+    <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>
+  </a>
   <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
index f058334..32210e0 100644
--- a/components/productBox/productBox3.html
+++ b/components/productBox/productBox3.html
@@ -1,8 +1,10 @@
 <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>
+  <a href="/product">
+    <img class="image" src="/images/prod3.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">7,90 €</span>
+    </div>
+  </a>
   <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
index daea3b6..0f08f59 100644
--- a/components/productBox/productBox4.html
+++ b/components/productBox/productBox4.html
@@ -1,8 +1,10 @@
 <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>
+  <a href="/product">
+    <img class="image" src="/images/prod4.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">8,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>
diff --git a/pages/product.ejs b/pages/product.ejs
new file mode 100644
index 0000000..3f9b49c
--- /dev/null
+++ b/pages/product.ejs
@@ -0,0 +1,4 @@
+${require('../components/pdp/pdp.html')}
+
+
+
diff --git a/src/scss/global.scss b/src/scss/global.scss
index c0c2a65..6755fb2 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -4,7 +4,7 @@ body {
   font-weight: 400;
   letter-spacing: 1px;
   margin: 0;
-  color: $black;
+  color: $dark-gray;
   overflow-x: hidden;
 }
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index ace1c6b..caa6592 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -16,3 +16,4 @@
 @import "./components/home/home.scss";
 @import "./components/plp/plp.scss";
 @import "./components/productBox/productBox.scss";
+@import "./components/pdp/pdp.scss";