diff --git a/resources/css/components/post-card--article.css b/resources/css/components/post-card--article.css
index fcc6582..a1348c6 100644
--- a/resources/css/components/post-card--article.css
+++ b/resources/css/components/post-card--article.css
@@ -2,7 +2,7 @@
   &.has-cover {
     @apply gap-2;
     .post-card__content {
-      @apply pl-6;
+      @apply md:pl-6;
     }
   }
   .post-card__title {
diff --git a/resources/css/components/post-card.css b/resources/css/components/post-card.css
index f118a68..809ac58 100644
--- a/resources/css/components/post-card.css
+++ b/resources/css/components/post-card.css
@@ -1,9 +1,19 @@
 .post-card {
-  @apply p-8 border border-primary relative grid gap-12 bg-white;
-  grid-template-columns: 1fr 40px;
-
+  @apply p-8 border border-primary relative grid gap-y-4 gap-12 bg-white;
+  grid-template-columns: 1fr;
+  @screen lg {
+    grid-template-columns: 1fr 40px;
+  }
   &.has-cover {
-    grid-template-columns: 1fr 3fr 40px;
+    .post-card__cover {
+      @apply col-span-1;
+    }
+    @screen lg {
+      grid-template-columns: 1fr 3fr 40px;
+      .post-card__cover {
+        @apply col-span-1;
+      }
+    }
   }
 
   .content-meta {
@@ -20,8 +30,9 @@
   }
 
   &__cover {
-    @apply p-2  object-cover w-full h-36  relative;
+    @apply order-3 lg:order-1 p-2  object-cover w-full h-36 md:h-56 lg:h-36 md:mt-6 lg:mt-0  relative mb-6 lg:mb-0;
     z-index: 10;
+
     img {
       @apply w-full h-full object-cover;
     }
@@ -46,8 +57,13 @@
     }
   }
 
+  &__content {
+    @apply order-2 lg:order-1;
+  }
+
   .issue-number {
-    @apply bg-primary text-white w-full h-auto flex items-center justify-center;
+    @apply order-1 lg:order-1;
+    @apply bg-primary text-white w-[40px] h-auto flex items-center justify-center;
     aspect-ratio: 1/1;
   }
 }
diff --git a/resources/css/components/post-grid.css b/resources/css/components/post-grid.css
index 97b48a6..e427530 100644
--- a/resources/css/components/post-grid.css
+++ b/resources/css/components/post-grid.css
@@ -1,6 +1,6 @@
 .post-grid {
   &__toolbar {
-    @apply grid grid-cols-1 md:grid-cols-2 gap-4 items-center justify-between pb-12;
+    @apply flex flex-col md:grid  md:grid-cols-2 gap-4 md:items-center justify-between pb-12;
 
     h2.post-count {
       @apply flex items-end gap-2;
@@ -16,20 +16,20 @@
     }
 
     .search-bar {
-      @apply justify-self-end;
+      @apply md:justify-self-end text-primary;
       input {
-        @apply py-2 px-4 border border-primary rounded-full;
+        @apply w-full md:w-auto py-2 px-4 border border-primary rounded-full;
         &::placeholder {
-          @apply text-sm text-carhop-green-700;
+          @apply text-base font-normal text-carhop-green-700;
         }
       }
     }
   }
   &__toolbar-actions {
-    @apply col-span-2 flex items-center gap-4;
+    @apply col-span-2 flex flex-wrap items-center gap-4;
 
     select {
-      @apply border border-carhop-green-700 rounded-full py-2 px-4;
+      @apply w-full md:w-auto border border-carhop-green-700 text-carhop-green-700 rounded-full py-2 px-4 max-w-full text-base;
     }
 
     select[name='etiquettes'] {
@@ -41,7 +41,7 @@
     }
 
     select[name='sort_by'] {
-      @apply ml-auto;
+      @apply md:ml-auto;
     }
   }
 
diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
index 448724b..00477ee 100644
--- a/resources/css/components/post-header.css
+++ b/resources/css/components/post-header.css
@@ -1,5 +1,5 @@
 .post-header {
-  @apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8;
+  @apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8 overflow-x-hidden;
 
   h1.post-header__title,
   h2.post-header__title {
@@ -25,12 +25,13 @@
   }
   .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(-40px);
+      /* transform: translateX(-10px); */
     }
 
     &:before {
@@ -41,15 +42,17 @@
     img {
       aspect-ratio: 4/5;
       /* max-height: 200px; */
-      @apply max-h-[200px] lg:max-h-full w-full h-full relative z-10;
+      @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(12px, 12px) rotate(3deg);
+      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;