diff --git a/resources/css/components/forms/field-classic-rating.css b/resources/css/components/forms/field-classic-rating.css
new file mode 100644
index 0000000..a0599e2
--- /dev/null
+++ b/resources/css/components/forms/field-classic-rating.css
@@ -0,0 +1,123 @@
+.gfield--type-classic-rating {
+  legend.gfield_label {
+    @apply pb-6 !text-2xl text-center;
+  }
+  .gfield_radio {
+    @apply flex justify-between max-w-lg text-center mx-auto;
+
+    .gchoice {
+      @apply flex flex-col justify-center items-center;
+      label.gform-field-label {
+        @apply !ml-0 mt-3 !font-normal;
+      }
+      input.gfield-choice-input {
+        @apply rounded-none border-none;
+        @apply w-20 h-12 bg-no-repeat bg-center bg-contain cursor-pointer py-4 rounded-2xl bg-transparent box-content;
+
+        box-shadow: none;
+        filter: grayscale(100%) opacity(0.5);
+        transition: all 0.3s ease-in-out;
+        display: block;
+        background-image: url('../resources/img/graphic-assets/star.svg');
+        background-size: 70%;
+        &:after {
+          content: '';
+          @apply pointer-events-none flex justify-center items-center relative inset-1/2;
+          transform: translate(-50%, -50%);
+          @apply w-12 h-12;
+        }
+
+        &[value='1']:after {
+          content: '1';
+        }
+        &[value='2']:after {
+          content: '2';
+        }
+        &[value='3']:after {
+          content: '3';
+        }
+
+        &[value='4']:after {
+          content: '4';
+        }
+        &[value='5']:after {
+          content: '5';
+        }
+        &:checked,
+        &:focus-visible,
+        &:hover {
+          /* @apply ring ring-2 ring-secondary; */
+          transform: scale(1.15);
+          filter: grayscale(0%) opacity(1);
+          @apply !outline-secondary outline-1;
+          outline-opacity: 50% !important;
+        }
+        &:hover,
+        &:focus-visible {
+          @apply !outline-secondary outline-1;
+          outline-opacity: 50% !important;
+        }
+      }
+
+      &:has(input.gfield-choice-input:checked) {
+        label.gform-field-label {
+          @apply !text-secondary !font-bold;
+        }
+      }
+    }
+  }
+
+  .gfield_radio:has(
+      input.gfield-choice-input[value='5']:checked,
+      input.gfield-choice-input[value='5']:hover,
+      input.gfield-choice-input[value='5']:focus-visible
+    ) {
+    input.gfield-choice-input[value='4'],
+    input.gfield-choice-input[value='3'],
+    input.gfield-choice-input[value='2'],
+    input.gfield-choice-input[value='1'] {
+      /* @apply !bg-green-400; */
+      filter: grayscale(0%) opacity(1);
+    }
+  }
+  .gfield_radio:has(
+      input.gfield-choice-input[value='4']:checked,
+      input.gfield-choice-input[value='4']:hover,
+      input.gfield-choice-input[value='4']:focus-visible
+    ) {
+    input.gfield-choice-input[value='3'],
+    input.gfield-choice-input[value='2'],
+    input.gfield-choice-input[value='1'] {
+      /* @apply !bg-purple-400; */
+      filter: grayscale(0%) opacity(1);
+    }
+  }
+  .gfield_radio:has(
+      input.gfield-choice-input[value='3']:checked,
+      input.gfield-choice-input[value='3']:hover,
+      input.gfield-choice-input[value='3']:focus-visible
+    ) {
+    input.gfield-choice-input[value='2'],
+    input.gfield-choice-input[value='1'] {
+      /* @apply !bg-yellow-400; */
+      filter: grayscale(0%) opacity(1);
+    }
+  }
+  .gfield_radio:has(
+      input.gfield-choice-input[value='2']:checked,
+      input.gfield-choice-input[value='2']:hover,
+      input.gfield-choice-input[value='2']:focus-visible
+    ) {
+    input.gfield-choice-input[value='1'] {
+      /* @apply !bg-cyan-400; */
+      filter: grayscale(0%) opacity(1);
+    }
+  }
+}
+
+form:has(.gfield--type-satisfaction-rating):not(.metabox-location-side):not(
+    .metabox-location-normal
+  ):not(.metabox-location-advanced):not(.search-module__search-form)
+  input[type='submit'] {
+  @apply !mx-auto !text-base;
+}
diff --git a/resources/css/components/forms/field-homegrade-rating.css b/resources/css/components/forms/field-homegrade-rating.css
new file mode 100644
index 0000000..c890cac
--- /dev/null
+++ b/resources/css/components/forms/field-homegrade-rating.css
@@ -0,0 +1,58 @@
+.gfield--type-homegrade-rating {
+  legend.gfield_label {
+    @apply pb-6 !text-2xl text-center;
+  }
+  .gfield_radio {
+    @apply flex justify-between max-w-lg text-center mx-auto;
+    .gchoice {
+      @apply flex flex-col justify-center items-center;
+      label.gform-field-label {
+        @apply !ml-0 mt-3 !font-normal;
+      }
+      input.gfield-choice-input {
+        @apply rounded-none border-none;
+        @apply w-20 h-12 bg-no-repeat bg-center bg-contain cursor-pointer py-4 rounded-2xl bg-transparent box-content;
+        box-shadow: none;
+        filter: grayscale(100%) opacity(0.5);
+        transition: all 0.3s ease-in-out;
+        &[value='1'] {
+          content: url('../resources/img/pictogrammes/icon-satisfaction-pas-du-tout.svg');
+        }
+        &[value='2'] {
+          content: url('../resources/img/pictogrammes/icon-satisfaction-un-peu.svg');
+        }
+        &[value='3'] {
+          content: url('../resources/img/pictogrammes/icon-satisfaction-moyen.svg');
+        }
+        &[value='4'] {
+          content: url('../resources/img/pictogrammes/icon-satisfaction-beaucoup.svg');
+        }
+        &[value='5'] {
+          content: url('../resources/img/pictogrammes/icon-satisfaction-parfait.svg');
+        }
+        &:focus-visible,
+        &:hover,
+        &:checked {
+          transform: scale(1.15);
+          filter: grayscale(0%) opacity(1);
+
+          @apply !outline-secondary outline-1;
+          outline-opacity: 50% !important;
+        }
+        &:focus-visible {
+        }
+      }
+
+      &:has(input.gfield-choice-input:checked) {
+        label.gform-field-label {
+          @apply !text-secondary !font-bold;
+        }
+      }
+    }
+  }
+}
+#client-satisfaction {
+  input[type='submit'] {
+    @apply !mx-auto !text-base mt-6;
+  }
+}