diff --git a/resources/css/components/listen-article.css b/resources/css/components/listen-article.css
new file mode 100644
index 0000000..d8fed59
--- /dev/null
+++ b/resources/css/components/listen-article.css
@@ -0,0 +1,50 @@
+#listen-article,
+#stop-reading {
+  @apply rounded-full w-12 h-12 flex items-center justify-center m-0 p-0 transition-all duration-300;
+}
+#listen-article {
+  @apply bg-primary text-white;
+  &:hover {
+    @apply scale-110;
+  }
+  img {
+    @apply w-6 h-6;
+  }
+  &[data-reading-status='playing'] {
+    /* @apply bg-blue-500; */
+    @apply bg-white border border-primary;
+    /* &:hover {
+          @apply bg-red-500;
+        } */
+    #play-reading {
+      @apply hidden;
+    }
+    #pause-reading {
+      @apply block;
+    }
+  }
+
+  &[data-reading-status='stopped'] {
+    #play-reading {
+      @apply block;
+    }
+    #pause-reading {
+      @apply hidden;
+    }
+  }
+  &[data-reading-status='paused'] {
+    @apply bg-yellow-500;
+    #play-reading {
+      @apply block;
+    }
+    #pause-reading {
+      @apply hidden;
+    }
+  }
+}
+#stop-reading {
+  @apply bg-primary hidden;
+  img {
+    @apply w-4 h-4;
+  }
+}
diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
new file mode 100644
index 0000000..7d9422e
--- /dev/null
+++ b/resources/css/components/post-header.css
@@ -0,0 +1,268 @@
+.post-header {
+  @apply bg-primary text-white py-8 2xl:py-16 px-2 lg:px-4 md:px-8 overflow-x-hidden;
+
+  h1.post-header__title,
+  h2.post-header__title {
+    @apply uppercase font-medium text-4xl md:text-5xl lg:text-5xl text-white;
+    line-height: 1.2;
+  }
+  &__main-author {
+    @apply text-white font-light tracking-wide  flex items-center gap-3 mt-4;
+    
+    &::before {
+      @apply w-6 h-6 block  bg-no-repeat bg-center bg-contain;
+      content: '';
+      background-image: url('../resources/img/icons/carhop-plume2.svg');
+      filter: invert(1) brightness(0) saturate(100%) invert(100%);
+    }
+    &:hover {
+      @apply underline underline-offset-8;
+    }
+  }
+  &__inner {
+    @apply mx-auto  grid  gap-24;
+    @screen xl {
+      @apply container;
+    }
+    @apply max-w-screen-2xl mx-auto;
+    &--has-thumbnail {
+      @screen lg {
+        grid-template-columns: 4fr 1fr;
+      }
+    }
+    &--no-thumbnail {
+      grid-template-columns: 1fr;
+    }
+  }
+  .content-meta__revue-issue {
+    @apply bg-white !text-primary;
+  }
+  .content-meta__type {
+    @apply text-white;
+  }
+  .thumbnail-wrapper {
+    @apply order-2 lg:order-1 relative z-20 h-fit;
+    width: calc(100% - 40px);
+    padding: 1.2rem;
+    /* max-width: calc(70% - 40px);
+    @apply mx-auto; */
+
+    @screen lg {
+      /* transform: translateX(-10px); */
+    }
+
+    &:before {
+      content: '';
+      @apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full  z-10;
+    }
+
+    img {
+      aspect-ratio: 4/5;
+      /* max-height: 200px; */
+      @apply max-h-[200px] lg:max-h-full  h-full relative z-10;
+      @apply object-cover;
+
+      /* width: calc(100% - 2rem);
+      height: calc(100% - 2rem);
+      margin: 0 auto; */
+    }
+    .thumbnail-overlay {
+      @apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
+      transform: translate(2px, 2px) rotate(2deg);
+      /* transform: translate(12px, 12px) rotate(3deg); */
+      background-image: linear-gradient(#efe8ff, #efe8ff);
+      background-size: calc(100% - 12px) calc(100% - 12px);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-blend-mode: color-burn;
+      &:after {
+        content: '';
+        @apply bg-carhop-purple-200;
+        width: calc(100% - 2rem);
+        height: calc(100% - 2rem);
+      }
+    }
+  }
+
+  .post-details {
+    @apply flex flex-col xl:flex-row  xl:justify-between gap-x-4 gap-y-8 mt-12;
+    grid-template-columns: 1fr 1fr;
+
+    &__label {
+      @apply uppercase font-bold text-lg text-white;
+      letter-spacing: 0.2em;
+    }
+  }
+
+  .socials-buttons {
+    @apply flex flex-wrap justify-start xl:justify-end gap-4 h-fit shrink-0;
+    @screen xl {
+      min-width: 570px;
+    }
+
+    &__button {
+      @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
+      transition: transform 0.3s ease-in-out;
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      &[disabled] {
+        @apply opacity-50 cursor-not-allowed;
+      }
+      img {
+        @apply w-7 h-7 filter-primary;
+      }
+
+      &--like {
+        transition: all 0.3s ease-in-out;
+
+        .button-action-text {
+          max-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .likes-count {
+          max-width: 200px;
+          overflow: hidden;
+          /* transition: max-width 0.3s ease-in-out; */
+          white-space: nowrap;
+        }
+
+        &[data-likes-count='0'] {
+          .button-action-text {
+            max-width: 200px;
+          }
+          .likes-count {
+            max-width: 0;
+          }
+        }
+
+        &:hover {
+          .button-action-text {
+            max-width: 200px;
+            transition: max-width 0.3s ease-in-out;
+          }
+          .likes-count {
+            max-width: 0;
+          }
+        }
+
+        &.is-disabled {
+          @apply opacity-100 cursor-not-allowed hover:opacity-80;
+
+          .likes-count {
+            @apply block;
+          }
+          .button-action-text {
+            @apply max-w-0;
+          }
+        }
+
+        &.is-disabled:hover {
+          .button-action-text {
+            @apply max-w-[200px];
+          }
+          .likes-count {
+            @apply max-w-0;
+          }
+        }
+      }
+
+      &--share {
+        .socials-buttons__share-links {
+          @apply max-w-0 opacity-0 overflow-hidden max-h-7;
+          transition: all 0.3s ease-in-out;
+        }
+        &.is-open .socials-buttons__share-links {
+          @apply max-w-[200px] opacity-100;
+        }
+
+        .share-icon {
+          @apply max-w-[200px];
+        }
+
+        &.is-open {
+          .share-icon {
+            @apply max-w-0 overflow-hidden;
+          }
+          .socials-buttons__share-links {
+            overflow: visible;
+          }
+          .share-button {
+            transform: scale(1) !important;
+            transition: transform 0.2s ease-in-out !important;
+          }
+          .share-button:hover {
+            transform: scale(1.02) !important;
+          }
+
+          .copy-link,
+          .share-link {
+            @apply block w-7 h-7;
+
+            &:hover {
+            }
+          }
+        }
+
+        .share-link {
+          display: inline-block;
+          transition: transform 0.2s ease-in-out !important;
+
+          &:hover {
+            transform: scale(1.2) !important;
+          }
+        }
+      }
+    }
+
+    &__share-links {
+      @apply flex flex-wrap gap-2;
+    }
+
+    .share-link {
+      @apply transition-all duration-300;
+      &:after {
+        content: none;
+      }
+      img {
+        @apply w-7 h-7 filter-none;
+      }
+
+      &--copy-link {
+        @apply relative bg-transparent border-0 p-0 cursor-pointer;
+
+        .copy-feedback {
+          @apply absolute left-1/2 -translate-x-1/2 -bottom-8 bg-white text-primary px-3 py-1 rounded-md text-sm font-medium whitespace-nowrap z-50;
+          animation: fadeIn 0.3s ease-in-out;
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -5px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+.article-meta__related-revue {
+  flex-shrink: 1;
+}
+.article-meta__related-revue a {
+  @apply hover:underline underline-offset-8 text-white;
+  text-decoration-color: #fff;
+  text-decoration-thickness: 1px;
+}
+
+.article-meta__value {
+  @apply text-white font-light tracking-wide;
+  letter-spacing: 0.0015em;
+}
diff --git a/resources/css/components/post-tag.css b/resources/css/components/post-tag.css
new file mode 100644
index 0000000..ba41a95
--- /dev/null
+++ b/resources/css/components/post-tag.css
@@ -0,0 +1,19 @@
+.post-tag {
+  @apply w-fit bg-transparent	px-3 py-2 relative text-primary border border-primary !list-none;
+  a {
+    text-decoration: none !important;
+    @apply block;
+    &:hover {
+      @apply !filter-none;
+    }
+  }
+  &:hover {
+    a {
+      @apply text-white;
+    }
+    @apply bg-primary text-white;
+  }
+}
+.post-tags-list {
+  @apply flex flex-wrap gap-2;
+}
diff --git a/resources/css/components/post-toolbar.css b/resources/css/components/post-toolbar.css
new file mode 100644
index 0000000..d8f395e
--- /dev/null
+++ b/resources/css/components/post-toolbar.css
@@ -0,0 +1,11 @@
+#post-toolbar {
+  @apply max-w-screen-2xl mx-auto;
+}
+.toolbar-actions {
+  @apply flex items-center gap-3 ml-auto;
+
+  @media screen and (max-width: 1024px) {
+    @apply absolute left-0 translate-y-full;
+    bottom: -20px;
+  }
+}