diff --git a/README.md b/README.md
index a00de0c..4333724 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 [![Tests](https://img.shields.io/github/actions/workflow/status/tales-from-a-dev/flowbite-bundle/ci.yml?label=tests&style=for-the-badge)](https://github.com/tales-from-a-dev/flowbite-bundle/actions/workflows/ci.yml)
 ![PHP Version](https://img.shields.io/badge/php->=8.1-4f5b93.svg?style=for-the-badge)
 ![Symfony Version](https://img.shields.io/badge/symfony->=6.4-000.svg?style=for-the-badge)
-[![Flowbite Version](https://img.shields.io/badge/flowbite->=1.6-1c64f2.svg?style=for-the-badge)](https://flowbite.com)
+[![Flowbite Version](https://img.shields.io/badge/flowbite->=4.0-1c64f2.svg?style=for-the-badge)](https://flowbite.com)
 [![Packagist Version](https://img.shields.io/packagist/v/tales-from-a-dev/flowbite-bundle?style=for-the-badge)](https://packagist.org/packages/tales-from-a-dev/flowbite-bundle)
 [![License](https://img.shields.io/github/license/talesfromadev/flowbite-bundle?style=for-the-badge)](https://github.com/tales-from-a-dev/flowbite-bundle/blob/main/LICENSE)
 
diff --git a/composer.json b/composer.json
index dd97bc8..4837897 100644
--- a/composer.json
+++ b/composer.json
@@ -21,7 +21,7 @@
     "php": ">=8.1",
     "symfony/http-kernel": "^6.4 || ^7.0 || ^8.0",
     "symfony/twig-bridge": "^6.4 || ^7.0 || ^8.0",
-    "tales-from-a-dev/twig-tailwind-extra": "^0.5"
+    "tales-from-a-dev/twig-tailwind-extra": "^1.0"
   },
   "require-dev": {
     "friendsofphp/php-cs-fixer": "^3.15",
diff --git a/docs/custom_form_types.md b/docs/custom_form_types.md
index fb7c6aa..4897adb 100644
--- a/docs/custom_form_types.md
+++ b/docs/custom_form_types.md
@@ -1,6 +1,6 @@
 # Custom Form Types
 
-This bundle provide the following custom form types:
+This bundle provides the following custom form types:
 
 ## SwitchType
 
diff --git a/docs/index.md b/docs/index.md
index 534b74d..783be16 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,7 +2,7 @@
 
 ## Prerequisites
 
-This bundle requires **PHP 8.1+**, **Symfony 6.4+** and **Flowbite 1.6+**.
+This bundle requires **PHP 8.1+**, **Symfony 6.4+** and **Flowbite 4.0+**.
 
 ## Installation
 
@@ -34,16 +34,26 @@ return [
 
 ### Configuring Tailwind CSS
 
-Update your Tailwind configuration file to include the `templates` folder of the bundle:
+Update your Tailwind configuration to include the `templates` folder of the bundle:
+
+```css
+/* assets/styles/app.css */
+
+@source "../../vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig";
+```
+
+#### Legacy Tailwind CSS configuration
+
+If you are using the legacy Tailwind CSS configuration, add the following line to your `tailwind.config.js` file:
 
 ```js
 // tailwind.config.js
 
 module.exports = {
-  content: [
-    //...
-    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
-  ],
+    content: [
+        //...
+        "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
+    ],
 }
 ```
 
@@ -60,9 +70,17 @@ twig:
         - '@TalesFromADevFlowbite/form/default.html.twig'
 ```
 
-## Run the watcher
+### Compiling assets
+
+Finally, run one of the following commands to build your front-end assets:
+
+#### With [Tailwind bundle](https://symfony.com/bundles/TailwindBundle/current/index.html)
+
+```bash
+php bin/console tailwind:build 
+```
 
-Finally, run the following command to compile the front-end assets via Webpack:
+#### With Webpack Encore
 
 ```bash
 # With npm
diff --git a/docs/theme_customization.md b/docs/theme_customization.md
index 6b28a95..fdcc4a9 100644
--- a/docs/theme_customization.md
+++ b/docs/theme_customization.md
@@ -2,8 +2,8 @@
 
 ## Overriding CSS classes
 
-All used CSS classes are contained in [Twig blocks](https://github.com/talesfromadev/flowbite-bundle/blob/main/templates/form/default.twig#L244) 
-which allows to customize the theme very easily.
+All CSS classes are contained in [Twig blocks](https://github.com/talesfromadev/flowbite-bundle/blob/main/templates/form/default.twig#L244) 
+which allows customizing the theme very easily.
 
 Create a new theme in your `templates` directory and make it use the bundle `default` theme: 
 
@@ -13,7 +13,7 @@ Create a new theme in your `templates` directory and make it use the bundle `def
 {% use '@TalesFromADevFlowbite/form/default.html.twig' %}
 ```
 
-Now, just override the desire block with any Tailwind CSS class you want:
+Now, override the desired block with any Tailwind CSS class you want:
 
 ```php
 # templates/form/layout.html.twig
@@ -25,7 +25,7 @@ Now, just override the desire block with any Tailwind CSS class you want:
 {%- endblock class_submit %}
 ```
 
-Finally, don't forget to update your `twig` configuration to use your newly created template:
+Finally, update your `twig` configuration to use your newly created template:
 
 ```yaml
 # config/packages/twig.yaml
@@ -36,9 +36,9 @@ twig:
         - 'form/layout.html.twig'
 ```
 
-## Class block list
+## Class blocks list
 
-Here is a list of all available class block:
+Here is a list of all available class blocks:
 
 * Label
   * class_label
@@ -60,12 +60,13 @@ Here is a list of all available class block:
   * class_button
   * class_submit
 * Various
-  * class_time_separator
+  * class_input_group
   * class_addon
   * class_widget_addon_prepend
   * class_widget_addon_append
   * class_addon_prepend
   * class_addon_append
+  * class_time_separator
   * class_help_text
 * Error
   * class_label_error
diff --git a/templates/form/default.html.twig b/templates/form/default.html.twig
index 3833bb3..7eeb923 100644
--- a/templates/form/default.html.twig
+++ b/templates/form/default.html.twig
@@ -13,32 +13,33 @@
         {%- elseif type == 'file' -%}
             {%- set attr_class = block('class_input_file') -%}
         {%- endif -%}
-        {%- set attr = attr|merge({'class': (attr_class ~ ' ' ~ attr.class|default(''))|trim}) -%}
+        {%- set attr_class = attr_class ~ ' ' ~ attr.class|default('') -%}
+        {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
         {{- parent() -}}
     {%- endif -%}
 {%- endblock form_widget_simple -%}
 
 {%- block textarea_widget -%}
-    {%- set attr_class = attr_class|default(block('class_textarea')) -%}
-    {%- set attr = attr|merge({'class': (attr_class ~ ' ' ~ attr.class|default(''))|trim}) -%}
+    {%- set attr_class = block('class_textarea') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
     {{- parent() -}}
 {%- endblock textarea_widget -%}
 
 {%- block choice_widget_collapsed -%}
-    {%- set attr_class = attr_class|default(block('class_select')) -%}
-    {%- set attr = attr|merge({'class': (attr_class ~ ' ' ~ attr.class|default(''))|trim}) -%}
+    {%- set attr_class = block('class_select') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
     {{- parent() -}}
 {%- endblock choice_widget_collapsed -%}
 
 {%- block checkbox_widget -%}
-    {%- set attr_class = attr_class|default(block('class_input_checkbox')) -%}
-    {%- set attr = attr|merge({'class': (attr_class ~ ' ' ~ attr.class|default(''))|trim}) -%}
+    {%- set attr_class = block('class_input_checkbox') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
     {{- form_label(form, null, { widget: parent() }) -}}
 {%- endblock checkbox_widget -%}
 
 {%- block radio_widget -%}
-    {%- set attr_class = attr_class|default(block('class_input_radio')) -%}
-    {%- set attr = attr|merge({'class': (attr_class ~ ' ' ~ attr.class|default(''))|trim}) -%}
+    {%- set attr_class = block('class_input_radio') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
     {{- form_label(form, null, { widget: parent() }) -}}
 {%- endblock radio_widget -%}
 
@@ -52,9 +53,9 @@
     {%- set append = not (money_pattern ends with '}}') -%}
     {%- if prepend or append -%}
         <div class="flex">
-            {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_prepend') -%}
+            {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_append') -%}
             {%- if prepend -%}
-                {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_append') -%}
+                {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_prepend') -%}
                 <span class="{{ block('class_addon') ~ ' ' ~ block('class_addon_prepend') }}">{{ money_pattern|form_encode_currency }}</span>
             {%- endif -%}
             {% with { attr_class: attr_class } %}{{- block('form_widget_simple') -}}{% endwith %}
@@ -69,7 +70,7 @@
 
 {% block percent_widget -%}
     {%- if symbol -%}
-        {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_prepend') -%}
+        {%- set attr_class = block('class_input_text') ~ ' ' ~ block('class_widget_addon_append') -%}
         <div class="flex">
             {%- with { attr_class: attr_class } -%}{{- block('form_widget_simple') -}}{%- endwith -%}
             <span class="{{ block('class_addon') ~ ' ' ~ block('class_addon_append') }}">{{ symbol|default('%') }}</span>
@@ -90,9 +91,9 @@
         {%- endif -%}
         <div {{ block('widget_container_attributes') }}>
             {{- date_pattern|replace({
-                '{{ year }}':  form_widget(form.year, { attr: { class: (block('class_widget_addon_append') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
-                '{{ month }}': form_widget(form.month, { attr: { class: (block('class_widget_addon_prepend') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
-                '{{ day }}':   form_widget(form.day, { attr: { class: ('rounded-none' ~ attr_class_error)|trim|tailwind_merge }}),
+                '{{ year }}':  form_widget(form.year, { attr: { 'class': block('class_input_group') ~ ' ' ~ attr_class_error|trim|tailwind_merge }}),
+                '{{ month }}': form_widget(form.month, { attr: { 'class': block('class_input_group') ~ ' ' ~ attr_class_error|trim|tailwind_merge }}),
+                '{{ day }}':   form_widget(form.day, { attr: { 'class': block('class_input_group') ~ ' ' ~ attr_class_error|trim|tailwind_merge }}),
             })|raw -}}
         </div>
     {%- endif -%}
@@ -108,27 +109,29 @@
             {%- set attr_class_error = ' ' ~ block('class_input_error') -%}
         {%- endif -%}
         <div {{ block('widget_container_attributes') }}>
-            {{- form_widget(form.hour, { attr: { class: ((with_minutes or with_seconds ? block('class_widget_addon_prepend') : '') ~ attr_class_error)|trim|tailwind_merge }}) -}}
+            {{- form_widget(form.hour, { attr: { 'class': ((with_minutes or with_seconds ? block('class_widget_addon_append') : '') ~ ' ' ~ attr_class_error)|trim|tailwind_merge }}) -}}
             {%- if with_minutes -%}
                 <span class="{{ block('class_time_separator') }}">:</span>
-                {{- form_widget(form.minute, { attr: { class: ((with_seconds ? 'rounded-none' : block('class_widget_addon_append')) ~ attr_class_error|trim|tailwind_merge) }}) -}}
+                {{- form_widget(form.minute, { attr: { 'class': ((with_seconds ? 'rounded-none' : block('class_widget_addon_prepend')) ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}) -}}
             {%- endif -%}
             {%- if with_seconds -%}
                 <span class="{{ block('class_time_separator') }}">:</span>
-                {{- form_widget(form.second, { attr: { class: (block('class_widget_addon_append') ~ attr_class_error)|trim|tailwind_merge }}) -}}
+                {{- form_widget(form.second, { attr: { 'class': (block('class_widget_addon_prepend') ~ ' ' ~ attr_class_error)|trim|tailwind_merge }}) -}}
             {%- endif -%}
         </div>
     {%- endif -%}
 {%- endblock time_widget -%}
 
 {%- block button_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default(block('class_button')))|trim}) -%}
+    {%- set attr_class = block('class_button') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
     {{- parent() -}}
 {%- endblock button_widget %}
 
 {%- block submit_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default(block('class_submit')))|trim}) -%}
-    {{- parent() -}}
+    {%- set attr_class = block('class_submit') ~ ' ' ~ attr.class|default('') -%}
+    {%- set attr = attr|merge({'class': attr_class|trim|tailwind_merge}) -%}
+    {{- block('submit_widget', 'form_div_layout.html.twig') -}}
 {%- endblock submit_widget %}
 
 {# Labels #}
@@ -152,15 +155,23 @@
 {%- block checkbox_radio_label -%}
     {#- Do not display the label if widget is not defined in order to prevent double label rendering -#}
     {%- if widget is defined -%}
-        {%- if checked and form.parent.vars.valid == false -%}
-            {%- set valid = false -%}
+        {%- if checked -%}
+            {%- if form.parent is rootform -%}
+                {%- if form.vars.valid == false -%}
+                    {%- set valid = false -%}
+                {%- endif -%}
+            {%- else -%}
+                {%- if form.parents.vars.valid == false -%}
+                    {%- set valid = false -%}
+                {%- endif -%}
+            {%- endif -%}
         {%- endif -%}
         {%- set label_attr_class = (valid ? block('class_input_radio_label') : block('class_input_radio_label_error')) ~ ' ' ~ label_attr.class|default('') -%}
         {%- set label_attr = label_attr|merge({'class': label_attr_class|trim|tailwind_merge}) -%}
         {%- if not compound -%}
             {% set label_attr = label_attr|merge({'for': id}) %}
         {%- endif -%}
-        <div class="flex items-center mr-4">
+        <div class="flex items-center">
             {{ widget|raw }}
             <label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>
                 {%- if label is not same as(false) -%}
@@ -182,8 +193,16 @@
 {% block switch_label -%}
     {#- Do not display the label if widget is not defined in order to prevent double label rendering -#}
     {%- if widget is defined -%}
-        {%- if checked and form.parent.vars.valid == false -%}
-            {%- set valid = false -%}
+        {%- if checked -%}
+            {%- if form.parent is rootform -%}
+                {%- if form.vars.valid == false -%}
+                    {%- set valid = false -%}
+                {%- endif -%}
+            {%- else -%}
+                {%- if form.parents.vars.valid == false -%}
+                    {%- set valid = false -%}
+                {%- endif -%}
+            {%- endif -%}
         {%- endif -%}
         {%- set label_attr_class = (valid ? block('class_input_switch_label') : block('class_input_switch_label_error')) ~ ' ' ~ label_attr.class|default('') -%}
         {%- set label_container_attr_class = block('class_input_switch_label_container') ~ ' ' ~ label_container_attr.class|default('') -%}
@@ -208,8 +227,8 @@
 
 {% block form_help -%}
     {%- if help is not empty -%}
-        {%- set help_attr_class = (block('class_help_text') ~ ' '~ help_attr.class|default(''))|trim -%}
-        {%- set help_attr = help_attr|merge({'class': help_attr_class}) -%}
+        {%- set help_attr_class = block('class_help_text') ~ ' ' ~ help_attr.class|default('') -%}
+        {%- set help_attr = help_attr|merge({'class': help_attr_class|trim|tailwind_merge}) -%}
         <p id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
             {{- block('form_help_content') -}}
         </p>
@@ -219,7 +238,7 @@
 {# Rows #}
 
 {%- block form_row -%}
-    {%- set row_attr = row_attr|merge({'class': (row_attr.class|default('mb-3'))|trim}) -%}
+    {%- set row_attr = row_attr|merge({'class': (row_attr.class|default('mb-3'))|trim|tailwind_merge}) -%}
     {%- set widget_attr = {} -%}
     {%- if help is not empty -%}
         {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
@@ -259,11 +278,11 @@
 {# Class #}
 
 {% block class_label -%}
-    block mb-2 text-sm font-medium text-gray-900 dark:text-white
+    block mb-2.5 text-sm font-medium text-heading
 {%- endblock class_label %}
 
 {% block class_input_radio_label -%}
-    ml-2 text-sm font-medium text-gray-900 dark:text-gray-300
+    select-none ms-2 text-sm font-medium text-heading
 {%- endblock class_input_radio_label %}
 
 {% block class_input_switch_label -%}
@@ -271,31 +290,31 @@
 {%- endblock class_input_switch_label %}
 
 {% block class_input_switch_label_container -%}
-    relative inline-flex items-center cursor-pointer
+    inline-flex items-center cursor-pointer
 {%- endblock class_input_switch_label_container %}
 
 {% block class_input_text -%}
-    text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500
+    bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body
 {%- endblock class_input_text %}
 
 {% block class_input_range -%}
-    w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700
+    w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer
 {%- endblock class_input_range %}
 
 {% block class_input_file -%}
-    block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+    bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full shadow-xs cursor-pointer focus:ring-brand focus:border-brand placeholder:text-body
 {%- endblock class_input_file %}
 
 {% block class_input_radio -%}
-    w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600
+    size-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle
 {%- endblock class_input_radio %}
 
 {% block class_input_checkbox -%}
-    rounded {{ block('class_input_radio') }}
+    size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft
 {%- endblock class_input_checkbox %}
 
 {% block class_input_switch -%}
-    relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600
+    relative w-9 h-5 bg-neutral-quaternary rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft peer-checked:bg-brand peer-checked:after:translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:size-4 after:transition-all rtl:peer-checked:after:-translate-x-full
 {%- endblock class_input_switch %}
 
 {% block class_select -%}
@@ -307,47 +326,51 @@
 {%- endblock class_textarea %}
 
 {% block class_button -%}
-    text-gray-900 bg-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 border border-gray-200 hover:text-blue-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700
+    text-body bg-neutral-secondary-medium box-border border border-default-medium shadow-xs font-medium text-sm leading-5 rounded-base px-4 py-2.5 hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary focus:outline-none
 {%- endblock class_button %}
 
 {% block class_submit -%}
-    text-white bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+    text-white bg-brand box-border border border-transparent shadow-xs font-medium text-sm leading-5 rounded-base px-4 py-2.5 hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium focus:outline-none
 {%- endblock class_submit %}
 
-{% block class_time_separator -%}
-    inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-x-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600
-{%- endblock class_time_separator %}
+{% block class_input_group -%}
+    rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0
+{%- endblock class_input_group %}
 
 {% block class_addon -%}
-    inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600
+    inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium
 {%- endblock class_addon %}
 
 {% block class_widget_addon_prepend -%}
-    rounded-none rounded-l-lg
+    rounded-s-none
 {%- endblock class_widget_addon_prepend %}
 
 {% block class_widget_addon_append -%}
-    rounded-none rounded-r-lg
+    rounded-e-none
 {%- endblock class_widget_addon_append %}
 
 {% block class_addon_prepend -%}
-    border-r-0 rounded-l-md
+    rounded-s-base border-s
 {%- endblock class_addon_prepend %}
 
 {% block class_addon_append -%}
-    border-l-0 rounded-r-md
+    rounded-e-base border-e
 {%- endblock class_addon_append %}
 
+{% block class_time_separator -%}
+    {{ block('class_addon') }}
+{%- endblock class_time_separator %}
+
 {% block class_help_text -%}
-    mt-2 text-sm text-gray-500 dark:text-gray-400
+    mt-2.5 text-sm text-body
 {%- endblock class_help_text %}
 
 {% block class_label_error -%}
-    block mb-2 text-sm font-medium text-red-600 dark:text-red-500
+    block mb-2.5 text-sm font-medium text-fg-danger-strong
 {%- endblock class_label_error %}
 
 {% block class_input_radio_label_error -%}
-    ml-2 text-sm font-medium text-red-600 dark:text-red-500
+    select-none ms-2 text-sm font-medium text-fg-danger-strong
 {%- endblock class_input_radio_label_error %}
 
 {% block class_input_switch_label_error -%}
@@ -355,13 +378,13 @@
 {%- endblock class_input_switch_label_error %}
 
 {% block class_input_error -%}
-    bg-red-50 border-red-500 text-red-900 placeholder-red-700 dark:bg-red-100 dark:border-red-500 dark:text-red-500 dark:placeholder-red-500 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500
+    bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong
 {%- endblock class_input_error %}
 
 {% block class_text_error -%}
-    mt-2 text-sm text-red-600 dark:text-red-500
+    mt-2.5 text-sm text-fg-danger-strong
 {%- endblock class_text_error %}
 
 {% block class_input_disabled -%}
-    disabled:bg-gray-100 disabled:border-gray-300 disabled:cursor-not-allowed dark:disabled:text-gray-400
+    disabled:text-fg-disabled disabled:cursor-not-allowed
 {%- endblock class_input_disabled %}
diff --git a/tests/FormLayout/BirthdayLayoutTest.php b/tests/FormLayout/BirthdayLayoutTest.php
index 9e66f92..b2fc234 100644
--- a/tests/FormLayout/BirthdayLayoutTest.php
+++ b/tests/FormLayout/BirthdayLayoutTest.php
@@ -24,7 +24,7 @@ public function testBirthday(): void
                     ./select
                         [@name="birthday[month]"]
                         [@id="birthday_month"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="2"]
@@ -33,7 +33,7 @@ public function testBirthday(): void
                     /following-sibling::select
                         [@name="birthday[day]"]
                         [@id="birthday_day"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="3"]
@@ -42,7 +42,7 @@ public function testBirthday(): void
                     /following-sibling::select
                         [@name="birthday[year]"]
                         [@id="birthday_year"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="2000"]
@@ -66,7 +66,7 @@ public function testBirthdaySingleText(): void
                 [@type="date"]
                 [@name="birthday"]
                 [@id="birthday"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [@value="2000-02-03"]
                 [@required="required"]
             '
diff --git a/tests/FormLayout/ButtonLayoutTest.php b/tests/FormLayout/ButtonLayoutTest.php
index 8c8d9d8..987f253 100644
--- a/tests/FormLayout/ButtonLayoutTest.php
+++ b/tests/FormLayout/ButtonLayoutTest.php
@@ -16,8 +16,9 @@ public function testButton(): void
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/button
             [@type="button"]
+            [@id="name"]
             [@name="name"]
-            [@class="text-gray-900 bg-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 border border-gray-200 hover:text-blue-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"]
+            [@class="text-body bg-neutral-secondary-medium box-border border border-default-medium shadow-xs font-medium text-sm leading-5 rounded-base px-4 py-2.5 hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary focus:outline-none"]
             [
                 .="[trans]Name[/trans]"
             ]'
diff --git a/tests/FormLayout/CheckboxLayoutTest.php b/tests/FormLayout/CheckboxLayoutTest.php
index c87ed27..edbe6f2 100644
--- a/tests/FormLayout/CheckboxLayoutTest.php
+++ b/tests/FormLayout/CheckboxLayoutTest.php
@@ -16,16 +16,16 @@ public function testCheckbox(): void
 
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/div
-                [@class="flex items-center mr-4"]
+                [@class="flex items-center"]
                 [
                     ./input
                         [@type="checkbox"]
                         [@name="name"]
                         [@id="name"]
-                        [@class="rounded w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                        [@class="size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"]
                         [@value="1"]
                     /following-sibling::label
-                        [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                        [@class="select-none ms-2 text-sm font-medium text-heading"]
                         [.="[trans]Name[/trans]"]
                 ]
             '
@@ -43,7 +43,7 @@ public function testCheckboxLabelError(): void
                 [
                     ./label
                         [@for="name"]
-                        [@class="ml-2 text-sm font-medium text-red-600 dark:text-red-500"]
+                        [@class="select-none ms-2 text-sm font-medium text-fg-danger-strong"]
                         [.="[trans]Name[/trans]"]
                 ]
             '
diff --git a/tests/FormLayout/ChoiceLayoutTest.php b/tests/FormLayout/ChoiceLayoutTest.php
index 6cb107b..8f5ffa7 100644
--- a/tests/FormLayout/ChoiceLayoutTest.php
+++ b/tests/FormLayout/ChoiceLayoutTest.php
@@ -22,7 +22,7 @@ public function testChoice(): void
             '/select
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [count(./option)=2]
             '
         );
@@ -42,7 +42,7 @@ public function testChoiceError(): void
             '/select
                 [@name="name"]
                 [@id="name"]
-                [@class="rounded-lg text-sm block w-full p-2.5 border bg-red-50 border-red-500 text-red-900 placeholder-red-700 dark:bg-red-100 dark:border-red-500 dark:text-red-500 dark:placeholder-red-500 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
+                [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
                 [count(./option)=2]
             '
         );
@@ -62,7 +62,7 @@ public function testChoiceDisabled(): void
                 [@name="name"]
                 [@id="name"]
                 [@disabled="disabled"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-gray-100 disabled:border-gray-300 disabled:cursor-not-allowed dark:disabled:text-gray-400"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body disabled:text-fg-disabled disabled:cursor-not-allowed"]
                 [count(./option)=2]
             '
         );
@@ -81,29 +81,29 @@ public function testChoiceCheckbox(): void
                 [@id="name"]
                 [
                     ./div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="checkbox"]
                             [@name="name[]"]
                             [@id="name_0"]
-                            [@class="rounded w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"]
                             [@value="foo"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Foo[/trans]"]
                     ]
                     /following-sibling::div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="checkbox"]
                             [@name="name[]"]
                             [@id="name_1"]
-                            [@class="rounded w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"]
                             [@value="bar"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Bar[/trans]"]
                     ]
                 ]
@@ -128,29 +128,29 @@ public function testChoiceCheckboxInline(): void
                 [@class="flex"]
                 [
                     ./div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="checkbox"]
                             [@name="name[]"]
                             [@id="name_0"]
-                            [@class="rounded w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"]
                             [@value="foo"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Foo[/trans]"]
                     ]
                     /following-sibling::div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="checkbox"]
                             [@name="name[]"]
                             [@id="name_1"]
-                            [@class="rounded w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"]
                             [@value="bar"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Bar[/trans]"]
                     ]
                 ]
@@ -171,29 +171,29 @@ public function testChoiceRadio(): void
                 [@id="name"]
                 [
                     ./div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="radio"]
                             [@name="name"]
                             [@id="name_0"]
-                            [@class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 text-neutral-primary bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle"]
                             [@value="foo"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Foo[/trans]"]
                     ]
                     /following-sibling::div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="radio"]
                             [@name="name"]
                             [@id="name_1"]
-                            [@class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 text-neutral-primary bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle"]
                             [@value="bar"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Bar[/trans]"]
                     ]
                 ]
@@ -218,29 +218,29 @@ public function testChoiceRadioInline(): void
                 [@class="flex"]
                 [
                     ./div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="radio"]
                             [@name="name"]
                             [@id="name_0"]
-                            [@class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 text-neutral-primary bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle"]
                             [@value="foo"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Foo[/trans]"]
                     ]
                     /following-sibling::div
-                    [@class="flex items-center mr-4"]
+                    [@class="flex items-center"]
                     [
                         ./input
                             [@type="radio"]
                             [@name="name"]
                             [@id="name_1"]
-                            [@class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                            [@class="size-4 text-neutral-primary bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle"]
                             [@value="bar"]
                         /following-sibling::label
-                            [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                            [@class="select-none ms-2 text-sm font-medium text-heading"]
                             [.="[trans]Bar[/trans]"]
                     ]
                 ]
diff --git a/tests/FormLayout/DateLayoutTest.php b/tests/FormLayout/DateLayoutTest.php
index 6978014..d0b9e96 100644
--- a/tests/FormLayout/DateLayoutTest.php
+++ b/tests/FormLayout/DateLayoutTest.php
@@ -24,7 +24,7 @@ public function testDate(): void
                     ./select
                         [@name="date[month]"]
                         [@id="date_month"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="2"]
@@ -33,7 +33,7 @@ public function testDate(): void
                     /following-sibling::select
                         [@name="date[day]"]
                         [@id="date_day"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="3"]
@@ -42,7 +42,7 @@ public function testDate(): void
                     /following-sibling::select
                         [@name="date[year]"]
                         [@id="date_year"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none first-of-type:rounded-s-base first-of-type:border-e-0 last-of-type:rounded-e-base last-of-type:border-s-0"]
                         [
                             ./option
                                 [@value="'.date('Y').'"]
@@ -66,7 +66,7 @@ public function testDateSingleText(): void
                 [@type="date"]
                 [@name="date"]
                 [@id="date"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [@value="'.date('Y').'-02-03"]
                 [@required="required"]
             '
diff --git a/tests/FormLayout/FileLayoutTest.php b/tests/FormLayout/FileLayoutTest.php
index a45effd..7c95cee 100644
--- a/tests/FormLayout/FileLayoutTest.php
+++ b/tests/FormLayout/FileLayoutTest.php
@@ -18,7 +18,7 @@ public function testFile(): void
                 [@type="file"]
                 [@name="name"]
                 [@id="name"]
-                [@class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full shadow-xs cursor-pointer focus:ring-brand focus:border-brand placeholder:text-body"]
             '
         );
     }
diff --git a/tests/FormLayout/MoneyLayoutTest.php b/tests/FormLayout/MoneyLayoutTest.php
index dee8b52..24bbc28 100644
--- a/tests/FormLayout/MoneyLayoutTest.php
+++ b/tests/FormLayout/MoneyLayoutTest.php
@@ -5,6 +5,7 @@
 namespace TalesFromADev\FlowbiteBundle\Tests\FormLayout;
 
 use Symfony\Component\Form\Extension\Core\Type\MoneyType;
+use Symfony\Component\Form\FormError;
 use TalesFromADev\FlowbiteBundle\Tests\AbstractFlowbiteLayoutTestCase;
 
 final class MoneyLayoutTest extends AbstractFlowbiteLayoutTestCase
@@ -20,15 +21,39 @@ public function testMoney(): void
                 [@class="flex"]
                 [
                     ./span
-                        [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 border-r-0 rounded-l-md"]
+                        [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium rounded-s-base border-s"]
                     /following-sibling::input
                         [@type="text"]
                         [@name="name"]
                         [@id="name"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-s-none"]
                         [@value="1234.56"]
                 ]
             '
         );
     }
+
+    public function testMoneyError(): void
+    {
+        $form = $this->factory->createNamed('name', MoneyType::class, 1234.56, [
+            'currency' => 'EUR',
+        ]);
+        $form->addError(new FormError('[trans]Error message[/trans]'));
+        $form->submit([]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+            '/div
+                [@class="flex"]
+                [
+                    ./span
+                        [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium rounded-s-base border-s"]
+                    /following-sibling::input
+                        [@type="text"]
+                        [@name="name"]
+                        [@id="name"]
+                        [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs rounded-s-none bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
+                ]
+            '
+        );
+    }
 }
diff --git a/tests/FormLayout/PercentLayoutTest.php b/tests/FormLayout/PercentLayoutTest.php
index 87e90e2..0303e3f 100644
--- a/tests/FormLayout/PercentLayoutTest.php
+++ b/tests/FormLayout/PercentLayoutTest.php
@@ -5,6 +5,7 @@
 namespace TalesFromADev\FlowbiteBundle\Tests\FormLayout;
 
 use Symfony\Component\Form\Extension\Core\Type\PercentType;
+use Symfony\Component\Form\FormError;
 use TalesFromADev\FlowbiteBundle\Tests\AbstractFlowbiteLayoutTestCase;
 
 final class PercentLayoutTest extends AbstractFlowbiteLayoutTestCase
@@ -23,10 +24,10 @@ public function testPercent(): void
                         [@type="text"]
                         [@name="name"]
                         [@id="name"]
-                        [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-e-none"]
                         [@value="50"]
                     /following-sibling::span
-                        [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 border-l-0 rounded-r-md"]
+                        [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium rounded-e-base border-e"]
                         [.="%"]
                 ]
             '
@@ -45,9 +46,34 @@ public function testPercentWithoutSymbol(): void
                 [@type="text"]
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [@value="50"]
             '
         );
     }
+
+    public function testPercentError(): void
+    {
+        $form = $this->factory->createNamed('name', PercentType::class, 0.5, [
+            'rounding_mode' => \NumberFormatter::ROUND_CEILING,
+        ]);
+        $form->addError(new FormError('[trans]Error message[/trans]'));
+        $form->submit([]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+            '/div
+                [@class="flex"]
+                [
+                    ./input
+                        [@type="text"]
+                        [@name="name"]
+                        [@id="name"]
+                        [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs rounded-e-none bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
+                    /following-sibling::span
+                        [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium rounded-e-base border-e"]
+                        [.="%"]
+                ]
+            '
+        );
+    }
 }
diff --git a/tests/FormLayout/RadioLayoutTest.php b/tests/FormLayout/RadioLayoutTest.php
index f3e26fe..c19d4a6 100644
--- a/tests/FormLayout/RadioLayoutTest.php
+++ b/tests/FormLayout/RadioLayoutTest.php
@@ -5,6 +5,7 @@
 namespace TalesFromADev\FlowbiteBundle\Tests\FormLayout;
 
 use Symfony\Component\Form\Extension\Core\Type\RadioType;
+use Symfony\Component\Form\FormError;
 use TalesFromADev\FlowbiteBundle\Tests\AbstractFlowbiteLayoutTestCase;
 
 final class RadioLayoutTest extends AbstractFlowbiteLayoutTestCase
@@ -15,16 +16,34 @@ public function testRadio(): void
 
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/div
-                [@class="flex items-center mr-4"]
+                [@class="flex items-center"]
                 [
                     ./input
                         [@type="radio"]
                         [@name="name"]
                         [@id="name"]
-                        [@class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"]
+                        [@class="size-4 text-neutral-primary bg-neutral-secondary-medium rounded-full border border-default appearance-none checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle"]
                         [@value="1"]
                     /following-sibling::label
-                        [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                        [@class="select-none ms-2 text-sm font-medium text-heading"]
+                        [.="[trans]Name[/trans]"]
+                ]
+            '
+        );
+    }
+
+    public function testRadioLabelError(): void
+    {
+        $form = $this->factory->createNamed('name', RadioType::class);
+        $form->addError(new FormError('[trans]Error message[/trans]'));
+        $form->submit([]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+            '/div
+                [
+                    ./label
+                        [@for="name"]
+                        [@class="select-none ms-2 text-sm font-medium text-fg-danger-strong"]
                         [.="[trans]Name[/trans]"]
                 ]
             '
diff --git a/tests/FormLayout/RangeLayoutTest.php b/tests/FormLayout/RangeLayoutTest.php
index a2c4611..a4c0edb 100644
--- a/tests/FormLayout/RangeLayoutTest.php
+++ b/tests/FormLayout/RangeLayoutTest.php
@@ -18,7 +18,7 @@ public function testRange(): void
                 [@type="range"]
                 [@name="name"]
                 [@id="name"]
-                [@class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"]
+                [@class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer"]
                 [@value="10"]
             '
         );
diff --git a/tests/FormLayout/ResetLayoutTest.php b/tests/FormLayout/ResetLayoutTest.php
index ab78531..f9c7aff 100644
--- a/tests/FormLayout/ResetLayoutTest.php
+++ b/tests/FormLayout/ResetLayoutTest.php
@@ -16,8 +16,9 @@ public function testReset(): void
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/button
             [@type="reset"]
+            [@id="name"]
             [@name="name"]
-            [@class="text-gray-900 bg-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 border border-gray-200 hover:text-blue-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"]
+            [@class="text-body bg-neutral-secondary-medium box-border border border-default-medium shadow-xs font-medium text-sm leading-5 rounded-base px-4 py-2.5 hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary focus:outline-none"]
             [
                 .="[trans]Name[/trans]"
             ]'
diff --git a/tests/FormLayout/SelectLayoutTest.php b/tests/FormLayout/SelectLayoutTest.php
index 27a58cb..7e76db3 100644
--- a/tests/FormLayout/SelectLayoutTest.php
+++ b/tests/FormLayout/SelectLayoutTest.php
@@ -27,7 +27,7 @@ public function testSelect(string $classType): void
             '/select
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
             '
         );
     }
@@ -43,7 +43,7 @@ public function testSelectError(string $classType): void
             '/select
                 [@name="name"]
                 [@id="name"]
-                [@class="rounded-lg text-sm block w-full p-2.5 border bg-red-50 border-red-500 text-red-900 placeholder-red-700 dark:bg-red-100 dark:border-red-500 dark:text-red-500 dark:placeholder-red-500 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
+                [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
             '
         );
     }
@@ -63,7 +63,7 @@ public function testSelectDisabled(string $classType): void
                 [@name="name"]
                 [@id="name"]
                 [@disabled="disabled"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-gray-100 disabled:border-gray-300 disabled:cursor-not-allowed dark:disabled:text-gray-400"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body disabled:text-fg-disabled disabled:cursor-not-allowed"]
             '
         );
     }
diff --git a/tests/FormLayout/SubmitLayoutTest.php b/tests/FormLayout/SubmitLayoutTest.php
index fbe86db..ae7ad26 100644
--- a/tests/FormLayout/SubmitLayoutTest.php
+++ b/tests/FormLayout/SubmitLayoutTest.php
@@ -16,8 +16,9 @@ public function testSubmit(): void
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/button
             [@type="submit"]
+            [@id="name"]
             [@name="name"]
-            [@class="text-white bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"]
+            [@class="text-white bg-brand box-border border border-transparent shadow-xs font-medium text-sm leading-5 rounded-base px-4 py-2.5 hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium focus:outline-none"]
             [
                 .="[trans]Name[/trans]"
             ]'
diff --git a/tests/FormLayout/SupportLayoutTest.php b/tests/FormLayout/SupportLayoutTest.php
index a95bd97..dfe3294 100644
--- a/tests/FormLayout/SupportLayoutTest.php
+++ b/tests/FormLayout/SupportLayoutTest.php
@@ -18,7 +18,7 @@ public function testLabel(): void
         $this->assertMatchesXpath($html,
             '/label
                 [@for="name"]
-                [@class="block mb-2 text-sm font-medium text-gray-900 dark:text-white required"]
+                [@class="block mb-2.5 text-sm font-medium text-heading required"]
                 [.="[trans]Name[/trans]"]
             '
         );
@@ -32,7 +32,7 @@ public function testLabelWithOptionalField(): void
         $this->assertMatchesXpath($html,
             '/label
                 [@for="name"]
-                [@class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"]
+                [@class="block mb-2.5 text-sm font-medium text-heading"]
                 [.="[trans]Name[/trans]"]
             '
         );
@@ -50,7 +50,7 @@ public function testLabelWithAttrClass(): void
         $this->assertMatchesXpath($html,
             '/label
                 [@for="name"]
-                [@class="block mb-2 text-sm font-medium text-gray-900 dark:text-white my&class required"]
+                [@class="block mb-2.5 text-sm font-medium text-heading my&class required"]
                 [.="[trans]Name[/trans]"]
             '
         );
@@ -66,7 +66,7 @@ public function testHelp(): void
         $this->assertMatchesXpath($html,
             '/p
                 [@id="name_help"]
-                [@class="mt-2 text-sm text-gray-500 dark:text-gray-400"]
+                [@class="mt-2.5 text-sm text-body"]
                 [.="[trans]Help text test![/trans]"]
             '
         );
@@ -85,7 +85,7 @@ public function testHelpWithAttrClass(): void
         $this->assertMatchesXpath($html,
             '/p
                 [@id="name_help"]
-                [@class="mt-2 text-sm text-gray-500 dark:text-gray-400 my&class"]
+                [@class="mt-2.5 text-sm text-body my&class"]
                 [.="[trans]Help text test![/trans]"]
             '
         );
@@ -101,7 +101,7 @@ public function testErrorLabel(): void
         $this->assertMatchesXpath($html,
             '/label
                 [@for="name"]
-                [@class="block mb-2 text-sm font-medium text-red-600 dark:text-red-500 required"]
+                [@class="block mb-2.5 text-sm font-medium text-fg-danger-strong required"]
                 [.="[trans]Name[/trans]"]
             '
         );
diff --git a/tests/FormLayout/SwitchLayoutTest.php b/tests/FormLayout/SwitchLayoutTest.php
index f2e1e94..1985d58 100644
--- a/tests/FormLayout/SwitchLayoutTest.php
+++ b/tests/FormLayout/SwitchLayoutTest.php
@@ -16,7 +16,7 @@ public function testSwitch(): void
 
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/label
-                [@class="relative inline-flex items-center cursor-pointer"]
+                [@class="inline-flex items-center cursor-pointer"]
                 [@for="name"]
                 [
                     ./input
@@ -26,9 +26,9 @@ public function testSwitch(): void
                         [@class="sr-only peer"]
                         [@value="1"]
                     /following-sibling::div
-                        [@class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[\'\'] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"]
+                        [@class="relative w-9 h-5 bg-neutral-quaternary rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft peer-checked:bg-brand peer-checked:after:translate-x-full peer-checked:after:border-buffer after:content-[\'\'] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:size-4 after:transition-all rtl:peer-checked:after:-translate-x-full"]
                     /following-sibling::span
-                        [@class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"]
+                        [@class="select-none ms-2 text-sm font-medium text-heading"]
                         [.="[trans]Name[/trans]"]
                 ]
             '
@@ -45,7 +45,7 @@ public function testSwitchLabelContainerAttr(): void
 
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/label
-                [@class="relative inline-flex items-center cursor-pointer foo bar"]
+                [@class="inline-flex items-center cursor-pointer foo bar"]
                 [@for="name"]
             '
         );
@@ -59,11 +59,11 @@ public function testSwitchLabelError(): void
 
         $this->assertWidgetMatchesXpath($form->createView(), [],
             '/label
-                [@class="relative inline-flex items-center cursor-pointer"]
+                [@class="inline-flex items-center cursor-pointer"]
                 [@for="name"]
                 [
                     ./span
-                        [@class="ml-2 text-sm font-medium text-red-600 dark:text-red-500"]
+                        [@class="select-none ms-2 text-sm font-medium text-fg-danger-strong"]
                         [.="[trans]Name[/trans]"]
                 ]
             '
diff --git a/tests/FormLayout/TextLayoutTest.php b/tests/FormLayout/TextLayoutTest.php
index cec5f1c..10993e9 100644
--- a/tests/FormLayout/TextLayoutTest.php
+++ b/tests/FormLayout/TextLayoutTest.php
@@ -29,7 +29,7 @@ public function testInput(string $classType, mixed $data, string $inputType): vo
                 [@type="%s"]
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 %s
             ',
             $inputType,
@@ -49,7 +49,7 @@ public function testInputError(string $classType, mixed $data, string $inputType
                 [@type="%s"]
                 [@name="name"]
                 [@id="name"]
-                [@class="rounded-lg text-sm block w-full p-2.5 border bg-red-50 border-red-500 text-red-900 placeholder-red-700 dark:bg-red-100 dark:border-red-500 dark:text-red-500 dark:placeholder-red-500 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
+                [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
             ',
             $inputType,
         ));
@@ -67,7 +67,7 @@ public function testInputDisabled(string $classType, mixed $data, string $inputT
                 [@name="name"]
                 [@id="name"]
                 [@disabled="disabled"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-gray-100 disabled:border-gray-300 disabled:cursor-not-allowed dark:disabled:text-gray-400"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body disabled:text-fg-disabled disabled:cursor-not-allowed"]
             ',
             $inputType,
         ));
@@ -82,7 +82,7 @@ public function testTextError(): void
         $this->assertMatchesXpath($html,
             '/p
                 [@id="name_error_0"]
-                [@class="mt-2 text-sm text-red-600 dark:text-red-500"]
+                [@class="mt-2.5 text-sm text-fg-danger-strong"]
                 [.="[trans]Error message[/trans]"]
             '
         );
diff --git a/tests/FormLayout/TextareaLayoutTest.php b/tests/FormLayout/TextareaLayoutTest.php
index e8cc900..bfac89e 100644
--- a/tests/FormLayout/TextareaLayoutTest.php
+++ b/tests/FormLayout/TextareaLayoutTest.php
@@ -18,7 +18,7 @@ public function testTextarea(): void
             '/textarea
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [.="foo"]
             '
         );
@@ -34,7 +34,7 @@ public function testTextareaError(): void
             '/textarea
                 [@name="name"]
                 [@id="name"]
-                [@class="rounded-lg text-sm block w-full p-2.5 border bg-red-50 border-red-500 text-red-900 placeholder-red-700 dark:bg-red-100 dark:border-red-500 dark:text-red-500 dark:placeholder-red-500 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
+                [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
             '
         );
     }
diff --git a/tests/FormLayout/TimeLayoutTest.php b/tests/FormLayout/TimeLayoutTest.php
index 3190283..e9c8cee 100644
--- a/tests/FormLayout/TimeLayoutTest.php
+++ b/tests/FormLayout/TimeLayoutTest.php
@@ -5,6 +5,7 @@
 namespace TalesFromADev\FlowbiteBundle\Tests\FormLayout;
 
 use Symfony\Component\Form\Extension\Core\Type\TimeType;
+use Symfony\Component\Form\FormError;
 use TalesFromADev\FlowbiteBundle\Tests\AbstractFlowbiteLayoutTestCase;
 
 final class TimeLayoutTest extends AbstractFlowbiteLayoutTestCase
@@ -25,7 +26,7 @@ public function testTime(): void
                 ./select
                     [@name="name[hour]"]
                     [@id="name_hour"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-e-none"]
                     [not(@size)]
                     [
                         ./option
@@ -34,11 +35,11 @@ public function testTime(): void
                     ]
                     [count(./option)>23]
                 /following-sibling::span
-                    [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-x-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"]
+                    [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium"]
                 /following-sibling::select
                     [@name="name[minute]"]
                     [@id="name_minute"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-s-none"]
                     [not(@size)]
                     [
                         ./option
@@ -67,7 +68,7 @@ public function testTimeWithSeconds(): void
                 ./select
                     [@name="name[hour]"]
                     [@id="name_hour"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-e-none"]
                     [not(@size)]
                     [
                         ./option
@@ -77,11 +78,11 @@ public function testTimeWithSeconds(): void
                     ]
                     [count(./option)>23]
                 /following-sibling::span
-                    [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-x-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"]
+                    [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium"]
                 /following-sibling::select
                     [@name="name[minute]"]
                     [@id="name_minute"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-none"]
                     [not(@size)]
                     [
                         ./option
@@ -90,11 +91,11 @@ public function testTimeWithSeconds(): void
                     ]
                     [count(./option)>59]
                 /following-sibling::span
-                    [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-x-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"]
+                    [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium"]
                 /following-sibling::select
                     [@name="name[second]"]
                     [@id="name_second"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-s-none"]
                     [not(@size)]
                     [
                         ./option
@@ -122,15 +123,15 @@ public function testTimeText(): void
                 ./input
                     [@name="name[hour]"]
                     [@id="name_hour"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-l-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-e-none"]
                     [@value="04"]
                     [@required="required"]
                 /following-sibling::span
-                    [@class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-x-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"]
+                    [@class="inline-flex items-center px-3 shadow-xs text-sm text-body bg-neutral-tertiary border-y border-default-medium"]
                 /following-sibling::input
                     [@name="name[minute]"]
                     [@id="name_minute"]
-                    [@class="text-gray-900 bg-gray-50 text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 rounded-none rounded-r-lg"]
+                    [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body rounded-s-none"]
                     [@value="05"]
                     [@required="required"]
             ]
@@ -150,10 +151,28 @@ public function testTimeSingleText(): void
             [@type="time"]
             [@name="name"]
             [@id="name"]
-            [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+            [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
             [@value="04:05"]
             [@required="required"]
             [not(@size)]'
         );
     }
+
+    public function testTimeSingleTextError(): void
+    {
+        $form = $this->factory->createNamed('name', TimeType::class, '04:05:06', [
+            'input' => 'string',
+            'widget' => 'single_text',
+        ]);
+        $form->addError(new FormError('[trans]Error message[/trans]'));
+        $form->submit([]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+            '/input
+            [@type="time"]
+            [@id="name"]
+            [@name="name"]
+            [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]'
+        );
+    }
 }
diff --git a/tests/FormLayout/WeekLayoutTest.php b/tests/FormLayout/WeekLayoutTest.php
index fa9daf0..3b9dbf6 100644
--- a/tests/FormLayout/WeekLayoutTest.php
+++ b/tests/FormLayout/WeekLayoutTest.php
@@ -5,6 +5,7 @@
 namespace TalesFromADev\FlowbiteBundle\Tests\FormLayout;
 
 use Symfony\Component\Form\Extension\Core\Type\WeekType;
+use Symfony\Component\Form\FormError;
 use TalesFromADev\FlowbiteBundle\Tests\AbstractFlowbiteLayoutTestCase;
 
 final class WeekLayoutTest extends AbstractFlowbiteLayoutTestCase
@@ -21,7 +22,7 @@ public function testWeek(): void
                 [@type="week"]
                 [@name="name"]
                 [@id="name"]
-                [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                 [@value="1970-W01"]
                 [@required="required"]
             '
@@ -44,7 +45,7 @@ public function testWeekChoices(): void
                     ./select
                         [@id="name_year"]
                         [@name="name[year]"]
-                        [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                         [
                             ./option
                                 [@value="'.$data['year'].'"]
@@ -53,7 +54,7 @@ public function testWeekChoices(): void
                     /following-sibling::select
                         [@id="name_week"]
                         [@name="name[week]"]
-                        [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                         [
                             ./option
                                 [@value="'.$data['week'].'"]
@@ -80,17 +81,36 @@ public function testWeekText(): void
                         [@type="number"]
                         [@id="name_year"]
                         [@name="name[year]"]
-                        [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                         [@value="2000"]
                     /following-sibling::input
                         [@type="number"]
                         [@id="name_week"]
                         [@name="name[week]"]
-                        [@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"]
+                        [@class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base block w-full px-3 py-2.5 shadow-xs focus:ring-brand focus:border-brand placeholder:text-body"]
                         [@value="1"]
                 ]
                 [count(./input)=2]
             '
         );
     }
+
+    public function testWeekError(): void
+    {
+        $form = $this->factory->createNamed('name', WeekType::class, '1970-W01', [
+            'input' => 'string',
+            'widget' => 'single_text',
+        ]);
+        $form->addError(new FormError('[trans]Error message[/trans]'));
+        $form->submit([]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+            '/input
+                [@type="week"]
+                [@name="name"]
+                [@id="name"]
+                [@class="border text-sm rounded-base block w-full px-3 py-2.5 shadow-xs bg-danger-soft border-danger-subtle text-fg-danger-strong focus:ring-danger focus:border-danger placeholder:text-fg-danger-strong"]
+            '
+        );
+    }
 }