diff --git a/resources/css/components/post-grid.css b/resources/css/components/post-grid.css
new file mode 100644
index 0000000..cebcf05
--- /dev/null
+++ b/resources/css/components/post-grid.css
@@ -0,0 +1,134 @@
+.post-grid {
+  &__toolbar {
+    /* @apply flex flex-col md:grid  md:grid-cols-2 gap-4 md:items-center justify-between pb-12; */
+    @apply pb-12 grid gap-8 gap-y-8 items-end;
+    grid-template-columns: max-content 1fr;
+    .post-count {
+      @apply flex items-end gap-2 col-span-1;
+
+      &__count {
+        @apply font-normal uppercase fjalla;
+        line-height: 0.8;
+      }
+
+      &__text {
+        @apply text-lg nunito;
+      }
+    }
+
+    .search-bar {
+      @apply md:justify-self-end text-primary relative w-full md:max-w-[500px];
+
+      &:after {
+        @apply absolute  top-1/2 -translate-y-1/2;
+        content: '';
+        right: 10px;
+        display: flex;
+        width: 30px;
+        height: 30px;
+        background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+      }
+      input {
+        @apply w-full  !py-4 px-4 border border-primary rounded-full text-base;
+        padding-right: 33px;
+        line-height: 1.5;
+        height: auto;
+
+        &::placeholder {
+          @apply !text-base font-normal text-carhop-green-700;
+        }
+      }
+    }
+
+    select {
+      @apply w-full md:w-auto border border-carhop-green-700 text-carhop-green-700 rounded-full !py-4 px-4 max-w-full text-base;
+      line-height: 1.5;
+      height: auto;
+
+      appearance: none; /* Disable the default arrow */
+      -webkit-appearance: none; /* For WebKit-based browsers */
+      -moz-appearance: none; /* For Firefox */
+
+      background-color: #fff;
+      background-image: url('../resources/img/elements/select-drop-button.svg');
+
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      background-size: 30px;
+      cursor: pointer;
+    }
+
+    select[name='sort_by'] {
+      @apply pr-12 w-fit  justify-self-end col-span-1;
+    }
+  }
+  .search-by {
+    @apply col-span-2 md:col-span-1;
+    &__label {
+      @apply text-primary font-semibold nunito;
+    }
+    .search-by__buttons {
+      @apply flex items-center  border border-primary border-solid w-fit;
+
+      button {
+        @apply block  font-normal nunito text-primary py-3 px-4;
+        &[aria-selected='true'] {
+          @apply bg-primary text-white;
+          &:hover {
+            @apply bg-primary text-white;
+          }
+        }
+        &:hover {
+          @apply bg-carhop-green-50;
+        }
+      }
+      &[data-filter='thematique'] {
+      }
+    }
+  }
+  &__toolbar-actions {
+    @apply flex flex-wrap md:items-center gap-4 w-full md:justify-start col-span-2 md:col-span-1;
+
+    select[name='etiquettes'] {
+      /* @apply bg-blue-300; */
+    }
+
+    select[name='auteurs'] {
+      /* @apply bg-red-300; */
+    }
+  }
+
+  &__list {
+    @apply grid grid-cols-1 lg:grid-cols-2  gap-8;
+  }
+}
+
+body:has(.search-by button[data-filter='thematique'][aria-selected='true']) {
+  .post-grid__toolbar-actions {
+    select[name='auteurs'],
+    .search-bar {
+      @apply hidden;
+    }
+  }
+}
+
+body:has(.search-by button[data-filter='auteur'][aria-selected='true']) {
+  .post-grid__toolbar-actions {
+    select[name='etiquettes'],
+    .search-bar {
+      @apply hidden;
+    }
+  }
+}
+
+body:has(.search-by button[data-filter='occurence'][aria-selected='true']) {
+  .post-grid__toolbar-actions {
+    select[name='etiquettes'],
+    select[name='auteurs'] {
+      @apply hidden;
+    }
+  }
+}