diff --git a/animatecss_ui/css/animatecss.admin.css b/animatecss_ui/css/animatecss.admin.css
index fe37f1f38cb2a8142fe353c29f5b21013ea906a6..433013fca3b6f895215fa5f05e3df108659ac80e 100644
--- a/animatecss_ui/css/animatecss.admin.css
+++ b/animatecss_ui/css/animatecss.admin.css
@@ -80,13 +80,64 @@
 }
 /* Animate field suffix */
 .animatecss-form .form-item__suffix,
-.animatecss-settings-form  .form-item__suffix {
+.animatecss-settings-form .form-item__suffix {
   display: inline-flex;
-  align-self: center;
-  margin-right: -14px;
-  margin-left: 0;
+  vertical-align: middle;
+  margin-right: 0;
+  margin-left: -6px;
   transform: rotate(90deg);
 }
+/* Animate flags */
+.animatecss-unit-flag,
+.animatecss-beta-flag,
+.animatecss-experimental-flag,
+.animatecss-new-flag {
+  font-size: 10px;
+  font-weight: 525;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  display: inline-block;
+  padding: .125em .5em;
+  vertical-align: .125em;
+  border: 1px solid transparent;
+  border-radius: .125rem;
+  line-height: 1.5;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag,
+body[class^="gin--"] .animatecss-new-flag {
+  border-radius: .75rem;
+}
+.animatecss-beta-flag,
+.animatecss-experimental-flag {
+  color: #555;
+  background: #ddd;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag {
+  color: #777;
+  background: #eee;
+}
+.gin--dark-mode .animatecss-beta-flag,
+.gin--dark-mode .animatecss-experimental-flag {
+  color: #9e9fa0 !important;
+  background: rgba(255, 255, 255, .1) !important;
+}
+.animatecss-new-flag {
+  color: #fff;
+  background-color: #26a769;
+}
+body[class^="gin--"]  .animatecss-new-flag {
+  font-size: 9px;
+  font-weight: bold;
+  color: #39b77b;
+  background-color: #26a76930;
+}
+.animatecss-unit-flag {
+  font-size: 14px;
+  color: #d8b234;
+  text-transform: lowercase;
+}
 /* Library status report */
 .library-status-report {
   position: relative;
@@ -95,14 +146,18 @@
   padding-block: 1em;
   padding-inline: 3em 1em;
   font-weight: 400;
+  font-size: 14px;
+  color: #545454;
+  background-color: #f6f6f6;
+  border-radius: .45rem;
 }
 .library-status-report::before {
   position: absolute;
   inset-block-start: 1em;
   inset-inline-start: 0.625rem;
   display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.2rem;
+  height: 1.2rem;
   margin-inline-end: 0.625rem;
   content: "";
   vertical-align: top;
@@ -151,6 +206,31 @@
   margin-left: 0;
   margin-right: 0;
 }
+/* List status marker */
+.animatecss-list .marker {
+  font-size: .75rem;
+  font-weight: 525;
+  display: inline-block;
+  padding: .125em .75em;
+  vertical-align: .125em;
+  border: 1px solid transparent;
+  border-radius: .125rem;
+  color: #777;
+  background: #eee;
+}
+.gin-layer-wrapper .animatecss-list .marker {
+  color: #777;
+  background: #eee;
+  border-radius: .75rem;
+}
+.animatecss-list .marker--enabled {
+  color: #fff;
+  background-color: #26a769;
+}
+.gin-layer-wrapper .animatecss-list .marker--enabled {
+  color: #39b77b;
+  background-color: #26a76930;
+}
 /* Gin theme fix delete icon color */
 #block-gin-content .action-link--icon-trash.action-link--danger:before,
 #block-gin-content .button.button--danger:before,
diff --git a/animatecss_ui/css/animatecss.form.css b/animatecss_ui/css/animatecss.form.css
index 1b49d79784ff6594874a2b48bf5689904fd3f51c..5ccbc7c474f843f6cc65f078082497e1625ebccc 100644
--- a/animatecss_ui/css/animatecss.form.css
+++ b/animatecss_ui/css/animatecss.form.css
@@ -427,35 +427,59 @@ body[data-toggle-sidebar=open] .toggle-sidebar__overlay {
 .animatecss-form .form-item__suffix,
 .animatecss-settings-form .form-item__suffix {
   display: inline-flex;
-  align-self: center;
-  margin-right: -14px;
-  margin-left: 0;
+  vertical-align: middle;
+  margin-right: 0;
+  margin-left: -6px;
   transform: rotate(90deg);
 }
 /* Animate flags */
+.animatecss-unit-flag,
 .animatecss-beta-flag,
 .animatecss-experimental-flag,
 .animatecss-new-flag {
   font-size: 10px;
-  font-weight: var(--gin-font-weight-semibold);
+  font-weight: 525;
   text-transform: uppercase;
   letter-spacing: .1em;
   display: inline-block;
   padding: .125em .5em;
   vertical-align: .125em;
-  border-radius: var(--gin-border-xs);
+  border: 1px solid transparent;
+  border-radius: .125rem;
+  line-height: 1.5;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag,
+body[class^="gin--"] .animatecss-new-flag {
+  border-radius: .75rem;
 }
 .animatecss-beta-flag,
 .animatecss-experimental-flag {
   color: #555;
   background: #ddd;
 }
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag {
+  color: #777;
+  background: #eee;
+}
 .gin--dark-mode .animatecss-beta-flag,
 .gin--dark-mode .animatecss-experimental-flag {
-  color: #eee;
-  background: #444;
+  color: #9e9fa0 !important;
+  background: rgba(255, 255, 255, .1) !important;
 }
 .animatecss-new-flag {
   color: #fff;
   background-color: #26a769;
 }
+body[class^="gin--"]  .animatecss-new-flag {
+  font-size: 9px;
+  font-weight: bold;
+  color: #39b77b;
+  background-color: #26a76930;
+}
+.animatecss-unit-flag {
+  font-size: 14px;
+  color: #d8b234;
+  text-transform: lowercase;
+}
diff --git a/animatecss_ui/js/animatecss.admin.js b/animatecss_ui/js/animatecss.admin.js
index 31f2f7c4af8d2d9b460be595d90d411fb58d99f3..07bb499d13fec855aa4de9b5d2b45774a7bd9f77 100644
--- a/animatecss_ui/js/animatecss.admin.js
+++ b/animatecss_ui/js/animatecss.admin.js
@@ -36,10 +36,10 @@
               selector: Selector,
               animation: Drupal.animateGetValue('#edit-animation', '.animate__animation', example.animation),
               delay: Drupal.animateGetValue('#edit-delay', '.animate__delay', example.delay),
-              time: Drupal.animateGetValue('#edit-time', '.animate__time', example.delay),
-              speed: Drupal.animateGetValue('#edit-speed', '.animate__speed', example.delay),
-              duration: Drupal.animateGetValue('#edit-duration', '.animate__duration', example.delay),
-              repeat: Drupal.animateGetValue('#edit-repeat', '.animate__repeat', example.delay),
+              time: Drupal.animateGetValue('#edit-time', '.animate__time', example.time),
+              speed: Drupal.animateGetValue('#edit-speed', '.animate__speed', example.speed),
+              duration: Drupal.animateGetValue('#edit-duration', '.animate__duration', example.duration),
+              repeat: Drupal.animateGetValue('#edit-repeat', '.animate__repeat', example.repeat),
               event: Drupal.animateGetValue('#edit-event', '.animate__event', example.event),
               once: $('.animate__once').is(':checked'),
             };
diff --git a/animatecss_ui/src/AnimateCssAdmin.php b/animatecss_ui/src/AnimateCssAdmin.php
index 49b3c39aec80342b6a08348b945df4bd6752d0bb..69ba713d8f26a08cfba8bd4004693ea5192393df 100644
--- a/animatecss_ui/src/AnimateCssAdmin.php
+++ b/animatecss_ui/src/AnimateCssAdmin.php
@@ -131,10 +131,18 @@ class AnimateCssAdmin extends FormBase {
     $result = $this->animateManager->findAll($header, $search, $status);
     foreach ($result as $animate) {
       $row = [];
-      $row[] = $animate->selector;
-      $row[] = $animate->label;
-      $row[] = $animate->status ? $this->t('Enabled') : $this->t('Disabled');
-      $row[] = $this->dateFormatter->format($animate->changed, 'short');
+      $row['selector'] = $animate->selector;
+      $row['label'] = $animate->label;
+      $status_class = $animate->status ? 'marker marker--enabled' : 'marker';
+      $row['status'] = [
+        'data' => [
+          '#type' => 'markup',
+          '#prefix' => '<span class="' . $status_class . '">',
+          '#suffix' => '</span>',
+          '#markup' => $animate->status ? $this->t('Enabled') : $this->t('Disabled'),
+        ],
+      ];
+      $row['changed'] = $this->dateFormatter->format($animate->changed, 'short');
       $links = [];
       $links['edit'] = [
         'title' => $this->t('Edit'),
@@ -165,6 +173,7 @@ class AnimateCssAdmin extends FormBase {
         ':link' => Url::fromRoute('animatecss.add')
           ->toString(),
       ]),
+      '#attributes' => ['class' => ['animatecss-list']],
     ];
 
     $form['pager'] = ['#type' => 'pager'];
diff --git a/animatecss_ui/src/Form/AnimateCssForm.php b/animatecss_ui/src/Form/AnimateCssForm.php
index 8b50ce5708bdbcbc278043b7559a6e3559b35b0f..180e30dadcdd249c1f1955658dc7b694e8ec33c2 100644
--- a/animatecss_ui/src/Form/AnimateCssForm.php
+++ b/animatecss_ui/src/Form/AnimateCssForm.php
@@ -92,9 +92,11 @@ class AnimateCssForm extends FormBase {
    *   Animate ID form data.
    */
   public function buildForm(array $form, FormStateInterface $form_state, int $animate = 0) {
+    // AnimateCSS flags for specific form labels and suffix.
     $experimental_label = ' <span class="animatecss-experimental-flag">Experimental</span>';
     $beta_label = ' <span class="animatecss-beta-flag">Beta</span>';
     $new_label = ' <span class="animatecss-new-flag">New</span>';
+    $ms_unit_label = ' <span class="animatecss-unit-flag">ms</span>';
 
     // Attach AnimateCSS form library.
     $form['#attached']['library'][] = 'animatecss_ui/animate-form';
@@ -187,7 +189,7 @@ class AnimateCssForm extends FormBase {
       '#min'           => 0,
       '#title'         => $this->t('Delay time'),
       '#default_value' => $options['time'] ?? $config->get('options.time'),
-      '#field_suffix'  => 'ms',
+      '#field_suffix'  => $ms_unit_label,
       '#attributes'    => ['class' => ['animate-delay-time']],
       '#states'        => [
         'visible' => [
@@ -219,7 +221,7 @@ class AnimateCssForm extends FormBase {
       '#type'          => 'number',
       '#title'         => $this->t('Duration'),
       '#default_value' => $options['duration'] ?? $config->get('options.duration'),
-      '#field_suffix'  => 'ms',
+      '#field_suffix'  => $ms_unit_label,
       '#attributes'    => ['class' => ['animate-duration']],
       '#states'        => [
         'visible' => [
@@ -388,7 +390,7 @@ class AnimateCssForm extends FormBase {
 
     $form['sticky'] = [
       '#type'       => 'container',
-      '#attributes' => ['class' => ['gin-sticky']],
+      '#attributes' => ['class' => ['gin-sticky', 'gin-sticky-form-actions']],
     ];
 
     // Enabled status for this animate.
diff --git a/animatecss_ui/src/Form/AnimateCssSettings.php b/animatecss_ui/src/Form/AnimateCssSettings.php
index dfaf8ec51147ef7f21e94af93f4e60ed6f739c58..67a8dc43b7082a9b156a6c20477f630a6945dbda 100644
--- a/animatecss_ui/src/Form/AnimateCssSettings.php
+++ b/animatecss_ui/src/Form/AnimateCssSettings.php
@@ -21,6 +21,12 @@ class AnimateCssSettings extends ConfigFormBase {
    * {@inheritdoc}
    */
   public function buildForm(array $form, FormStateInterface $form_state) {
+    // AnimateCSS flags for specific form labels and suffix.
+    $experimental_label = ' <span class="animatecss-experimental-flag">Experimental</span>';
+    $beta_label = ' <span class="animatecss-beta-flag">Beta</span>';
+    $new_label = ' <span class="animatecss-new-flag">New</span>';
+    $ms_unit_label = ' <span class="animatecss-unit-flag">ms</span>';
+
     // Attach AnimateCSS settings page library.
     $form['#attached']['library'][] = 'animatecss_ui/animate-settings';
 
@@ -166,18 +172,17 @@ class AnimateCssSettings extends ConfigFormBase {
     // Clean previous animation classes.
     $form['options']['clean'] = [
       '#type'          => 'checkbox',
-      '#title'         => $this->t('Clean previous classes'),
+      '#title'         => $this->t('Clean previous classes') . $new_label . $beta_label,
       '#description'   => $this->t("Previous Animate.css classes may already be applied to this element from the site's theme. Selecting this option will remove them before applying the new classes based on the settings on this page."),
-      '#default_value' => $config->get('options.clean'),
+      '#default_value' => $config->get('options.clean') ?? FALSE,
     ];
 
     // Convert element display if is inline.
-    $form['display'] = [
+    $form['options']['display'] = [
       '#type'          => 'checkbox',
-      '#title'         => $this->t('Fix Display'),
+      '#title'         => $this->t('Fix Display') . $new_label . $experimental_label,
       '#description'   => $this->t("Enable this option to change display from inline to inline-block to fix animation issues."),
-      '#default_value' => $options['display'] ?? $config->get('options.display'),
-      '#weight'        => 96,
+      '#default_value' => $config->get('options.display') ?? FALSE,
     ];
 
     // The animation to use.
@@ -208,7 +213,7 @@ class AnimateCssSettings extends ConfigFormBase {
       '#min'           => 0,
       '#title'         => $this->t('Delay time'),
       '#default_value' => $config->get('options.duration'),
-      '#field_suffix'  => 'ms',
+      '#field_suffix'  => $ms_unit_label,
       '#attributes'    => ['class' => ['animate-delay-time']],
       '#states'        => [
         'visible' => [
@@ -241,7 +246,7 @@ class AnimateCssSettings extends ConfigFormBase {
       '#min'           => 0,
       '#title'         => $this->t('Duration'),
       '#default_value' => $config->get('options.duration'),
-      '#field_suffix'  => 'ms',
+      '#field_suffix'  => $ms_unit_label,
       '#attributes'    => ['class' => ['animate-duration']],
       '#states'        => [
         'visible' => [
@@ -275,10 +280,11 @@ class AnimateCssSettings extends ConfigFormBase {
     $form['options']['event'] = [
       '#type'          => 'select',
       '#options'       => $events,
-      '#title'         => $this->t('Event'),
+      '#title'         => $this->t('Event') . $experimental_label,
       '#description'   => $this->t('Select the event to trigger the Animate.css animation and will be automatically handled by JavaScript. This field allows you to customize when the animation occurs.'),
       '#default_value' => $config->get('options.event') ?? 'load',
       '#attributes'    => ['class' => ['animate__event']],
+      '#field_suffix'  => $new_label,
     ];
 
     // Trigger the animation only once.
@@ -287,6 +293,11 @@ class AnimateCssSettings extends ConfigFormBase {
       '#title'         => $this->t('Once'),
       '#description'   => $this->t("Trigger the animation by the specified event only once."),
       '#default_value' => $config->get('options.once') ?? FALSE,
+      '#states'        => [
+        'invisible' => [
+          'select[name="event"]' => ['value' => 'load'],
+        ],
+      ],
     ];
 
     // Animate.css preview.
diff --git a/composer.json b/composer.json
index e31e6a4452a86a9ec55c94767a062651b4ce68a6..4e4464a8a2486b744e2340c67b9b972d25481b36 100644
--- a/composer.json
+++ b/composer.json
@@ -22,9 +22,8 @@
     },
     "autoload": {
         "psr-4": {
-            "Drupal\\animatecss\\": "src/",
             "Drupal\\animatecss_ui\\": "animatecss_ui/src/"
         }
     },
-    "license": "GPL-2.0+"
+    "license": "GPL-2.0-or-later"
 }