diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index bdd3063..d6d55dc 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -3,7 +3,7 @@
 .detail-page {
   min-height: 100vh;
   color: #1f1f1f;
-  padding: 38px;
+  padding: 26px 38px 38px;
   background:
     linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
     linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
@@ -13,21 +13,71 @@
   background: #f5f5f5;
   border: 1px solid #d9d9d9;
   border-radius: 0px;
-  padding: 38px;
+  padding: 0 38px 38px;
 }
 
 /* --- Product Detail Page Wrapper End --- */
 
+/* --- Topbar Start --- */
+
+.detail-topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  min-height: 72px;
+  padding: 18px 0;
+  border-bottom: 1px solid #dddddd;
+  margin-bottom: 28px;
+}
+
+.detail-topbar-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+  text-align: right;
+}
+
+.detail-topbar-label {
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #777;
+}
+
+.detail-topbar-name {
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  color: #1f1f1f;
+}
+
+/* --- Topbar End --- */
+
 /* --- Back Link Start --- */
 
 .back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   background: none;
   border: none;
   padding: 0;
-  margin-bottom: 18px;
-  font-size: 14px;
+  font-size: 13px;
   cursor: pointer;
   color: #1f1f1f;
+  letter-spacing: 0.01em;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.back-link:hover {
+  opacity: 0.65;
+  transform: translateX(-2px);
+}
+
+.back-link-arrow {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
 }
 
 /* --- Back Link End --- */
@@ -129,18 +179,6 @@
   gap: 6px;
 }
 
-/* -> habe ich durch Material Tags ersetzt, siehe weiter unten
-.structure-tags span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 34px;
-  padding: 8px 14px;
-  border: 1px solid #d2d2d2;
-  background: #ebebeb;
-  font-size: 12px;
-}
-*/
-
 .mood-box {
   margin-top: 18px;
   background: #dfdfdf;
@@ -194,20 +232,38 @@
 .detail-info {
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: 28px;
+  padding-top: 4px;
+}
+
+.detail-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.detail-kicker {
+  display: inline-block;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  color: #777;
 }
 
 .detail-heading h1 {
-  margin: 0 0 6px;
-  font-size: 52px;
-  line-height: 0.95;
-  font-weight: 400;
-  letter-spacing: -0.04em;
+  margin: 0;
+  font-size: 56px;
+  line-height: 0.92;
+  font-weight: 300;
+  letter-spacing: -0.045em;
   color: #131313;
 }
 
 .detail-heading p {
-  font-size: 22px;
+  max-width: 520px;
+  font-size: 18px;
+  line-height: 1.45;
   color: #5f5f5f;
   margin: 0;
 }
@@ -215,20 +271,60 @@
 .detail-section-block {
   display: flex;
   flex-direction: column;
+  gap: 12px;
 }
 
 .label-title {
   display: block;
-  margin-bottom: 10px;
-  font-size: 11px;
+  margin-bottom: 0;
+  font-size: 10px;
   letter-spacing: 0.24em;
-  color: #5f5f5f;
+  color: #666;
 }
 
+/* --- Description Section Start --- */
+
+.detail-description-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-top: 8px;
+}
+
+.detail-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 22px 30px;
+  padding-top: 0;
+}
+
+.detail-copy-block {
+  padding-top: 14px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.detail-copy-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  color: #666;
+}
+
+.detail-copy-block p {
+  white-space: pre-line;
+  line-height: 1.6;
+  margin: 0;
+  font-size: 15px;
+  color: #1f1f1f;
+}
+
+/* --- Description Section End --- */
+
 /* --- Delivery Box Start --- */
 
 .delivery-box {
-  margin-top: 8px;
+  margin-top: 4px;
   padding: 20px;
   border: 1px solid #d9d9d9;
   background: #efefef;
@@ -326,9 +422,15 @@
   border: 1px solid #d0d0d0;
   border-radius: 0px;
   background: #fff;
-  padding: 18px;
+  padding: 20px 18px 18px;
   text-align: center;
   cursor: pointer;
+  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
+}
+
+.size-card:hover {
+  transform: translateY(-1px);
+  border-color: #bdbdbd;
 }
 
 .size-card.active {
@@ -337,20 +439,23 @@
 
 .size-title {
   display: block;
-  margin-bottom: 8px;
-  font-size: 13px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: #1f1f1f;
 }
 
 .size-card strong {
   display: block;
-  font-size: 28px;
+  font-size: 26px;
   font-weight: 400;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
+  letter-spacing: -0.03em;
 }
 
 .size-card small {
   font-size: 11px;
-  color: #5f5f5f;
+  color: #6a6a6a;
 }
 
 /* --- Size Selection End --- */
@@ -360,34 +465,38 @@
 .discovery-note {
   background: #1f1f1f;
   color: #fff;
-  padding: 14px 16px;
+  padding: 16px 16px;
   border-radius: 0px;
   justify-content: space-between;
   display: flex;
   gap: 20px;
+  align-items: center;
 }
 
 .discovery-note-text strong {
   display: block;
   margin-bottom: 6px;
   font-size: 13px;
+  font-weight: 500;
 }
 
 .discovery-note-text p {
   font-size: 11px;
+  line-height: 1.45;
   color: #d0d0d0;
   margin: 0;
+  max-width: 420px;
 }
 
 .discovery-note-btn {
   border: none;
-  border-radius: 18px;
+  border-radius: 999px;
   background: #ff6a00;
   color: #fff;
   padding: 12px 18px;
   font-size: 14px;
   cursor: pointer;
-  margin-left: auto; 
+  margin-left: auto;
   flex-shrink: 0;
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
@@ -409,9 +518,10 @@
   background: #ff6a00;
   color: #fff;
   padding: 18px;
-  font-size: 16px;
-  letter-spacing: 0.08em;
+  font-size: 15px;
+  letter-spacing: 0.12em;
   cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }
 
 .buy-button:hover {
@@ -426,22 +536,6 @@
 
 /* --- Discovery Hinweis + Kaufen Button End --- */
 
-/* --- Description Columns Start --- */
-
-.detail-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 22px 30px;
-}
-
-.detail-copy-block p {
-  white-space: pre-line;
-  line-height: 1.55;
-  margin: 0;
-}
-
-/* --- Description Columns End --- */
-
 /* --- Bottom CTA Start --- */
 
 .detail-bottom-cta {
@@ -465,7 +559,6 @@
   font-size: 15px;
   line-height: 1.5;
   color: #fff;
-  line-height: 1.5;
 }
 
 .detail-bottom-actions {
@@ -504,8 +597,16 @@
     grid-template-columns: 1fr;
   }
 
+  .detail-info {
+    gap: 24px;
+  }
+
   .detail-heading h1 {
-    font-size: 40px;
+    font-size: 42px;
+  }
+
+  .detail-heading p {
+    font-size: 17px;
   }
 }
 
@@ -526,6 +627,35 @@
   .detail-thumbs {
     flex-wrap: wrap;
   }
+
+  .detail-topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: auto;
+    padding: 16px 0;
+  }
+
+  .detail-topbar-meta {
+    text-align: left;
+    gap: 8px;
+  }
+
+  .detail-heading h1 {
+    font-size: 34px;
+  }
+
+  .detail-heading p {
+    font-size: 16px;
+  }
+
+  .discovery-note {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .discovery-note-btn {
+    margin-left: 0;
+  }
 }
 
 /* --- Responsive End --- */
\ No newline at end of file
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index 6527daa..bf959e5 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -52,9 +52,17 @@ function ProductDetailContent({ perfumeSlug }) {
       </nav>
 
       <main className="detail-shell">
-        <button className="back-link" type="button" onClick={() => navigate("/")}>
-          ← Zurück zur Startseite
-        </button>
+        <div className="detail-topbar">
+          <button className="back-link" type="button" onClick={() => navigate("/")}>
+            <span className="back-link-arrow">←</span>
+            <span>Zurück zur Startseite</span>
+          </button>
+
+          <div className="detail-topbar-meta">
+            <span className="detail-topbar-label">DUFTDETAIL</span>
+            <span className="detail-topbar-name">{perfume.name}</span>
+          </div>
+        </div>
 
         <section className="detail-layout">
           <div className="detail-gallery">
@@ -133,6 +141,7 @@ function ProductDetailContent({ perfumeSlug }) {
 
           <div className="detail-info">
             <div className="detail-heading">
+              <span className="detail-kicker">Edition 04</span>
               <h1>{perfume.name}</h1>
               <p>{perfume.shortText}</p>
             </div>
@@ -182,25 +191,29 @@ function ProductDetailContent({ perfumeSlug }) {
               KAUFEN
             </button>
 
-            <div className="detail-columns">
-              <div className="detail-copy-block">
-                <span className="label-title">BESCHREIBUNG</span>
-                <p>{perfume.description}</p>
-              </div>
+            <div className="detail-description-section">
+              <span className="label-title">BESCHREIBUNG</span>
 
-              <div className="detail-copy-block">
-                <span className="label-title">HERKUNFT</span>
-                <p>{perfume.origin}</p>
-              </div>
+              <div className="detail-columns">
+                <div className="detail-copy-block">
+                  <span className="detail-copy-label">PARFÜMERIE / STUDIO</span>
+                  <p>{perfume.description}</p>
+                </div>
 
-              <div className="detail-copy-block">
-                <span className="label-title">KONZENTRATION</span>
-                <p>{perfume.concentration}</p>
-              </div>
+                <div className="detail-copy-block">
+                  <span className="detail-copy-label">HERKUNFT</span>
+                  <p>{perfume.origin}</p>
+                </div>
 
-              <div className="detail-copy-block">
-                <span className="label-title">EDITION</span>
-                <p>{perfume.edition}</p>
+                <div className="detail-copy-block">
+                  <span className="detail-copy-label">KONZENTRATION</span>
+                  <p>{perfume.concentration}</p>
+                </div>
+
+                <div className="detail-copy-block">
+                  <span className="detail-copy-label">EDITION</span>
+                  <p>{perfume.edition}</p>
+                </div>
               </div>
             </div>
 
@@ -227,7 +240,6 @@ function ProductDetailContent({ perfumeSlug }) {
                 </div>
               </div>
             </div>
-
           </div>
         </section>