From 58d66d3142950bb90a7d85511c034ac9fabba9ba Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 13 Feb 2023 10:04:24 +1300
Subject: [PATCH] chore(prettier): add tailwind prettier plugin [EE-4809]
 (#8221)

* add prettier plugin

* apply tailwind prettier formatting
---
 .../files-datatable/filesDatatable.html       |  8 ++--
 app/assets/css/app.css                        |  4 +-
 app/assets/css/bootstrap-override.css         |  2 +-
 app/assets/css/button.css                     | 42 +++++++++---------
 app/assets/css/icon.css                       |  2 +-
 .../css/react-datetime-picker-override.css    |  2 +-
 .../container-restart-policy.html             |  2 +-
 .../configs-datatable/configsDatatable.html   | 10 ++---
 .../containerNetworksDatatable.html           |  8 ++--
 .../containerProcessesDatatable.html          |  6 +--
 .../events-datatable/eventsDatatable.html     |  6 +--
 .../images-datatable/imagesDatatable.html     | 14 +++---
 .../macvlanNodesDatatable.html                |  6 +--
 .../networkRowContent.html                    |  2 +-
 .../networks-datatable/networksDatatable.html | 10 ++---
 .../nodeTasksDatatable.html                   |  6 +--
 .../nodes-datatable/nodesDatatable.html       |  6 +--
 .../secrets-datatable/secretsDatatable.html   | 10 ++---
 .../serviceTasksDatatable.html                |  6 +--
 .../services-datatable/servicesDatatable.html | 10 ++---
 .../tasks-datatable/tasksDatatable.html       |  8 ++--
 .../volumes-datatable/volumesDatatable.html   | 12 ++---
 .../devices-panel/devices-panel.html          |  4 +-
 .../disks-panel/disks-panel.html              |  4 +-
 .../engine-details-panel.html                 |  6 +--
 .../imageRegistry/por-image-registry.html     | 10 ++---
 .../volumesCIFSForm/volumesCifsForm.html      |  6 +--
 .../volumesNFSForm/volumesnfsForm.html        |  4 +-
 .../views/configs/create/createconfig.html    |  2 +-
 app/docker/views/configs/edit/config.html     |  2 +-
 app/docker/views/containers/console/exec.html |  4 +-
 .../containers/create/createcontainer.html    |  8 ++--
 .../views/containers/edit/container.html      |  8 ++--
 .../containers/inspect/containerinspect.html  |  2 +-
 app/docker/views/images/edit/image.html       |  4 +-
 .../views/secrets/create/createsecret.html    |  2 +-
 app/docker/views/secrets/edit/secret.html     |  2 +-
 .../views/services/edit/includes/configs.html |  2 +-
 .../views/services/edit/includes/logging.html |  2 +-
 .../views/services/edit/includes/secrets.html |  2 +-
 app/docker/views/services/edit/service.html   |  2 +-
 app/docker/views/swarm/swarm.html             |  2 +-
 .../swarm/visualizer/swarmvisualizer.html     |  4 +-
 app/docker/views/volumes/edit/volume.html     |  2 +-
 .../associatedEndpointsDatatable.html         |  6 +--
 .../components/edge-job-form/edgeJobForm.html |  2 +-
 .../edgeJobResultsDatatable.html              |  6 +--
 .../edgeJobsDatatable.html                    |  6 +--
 .../edgeStackEndpointsDatatable.html          |  6 +--
 .../edgeStacksDatatable.html                  |  6 +--
 .../editEdgeStackForm.html                    |  2 +-
 app/edge/components/group-form/groupForm.html |  2 +-
 .../groups-datatable/groupsDatatable.html     |  6 +--
 .../create-edge-stack-view.html               |  2 +-
 app/index.html                                |  4 +-
 .../containersDatatable.html                  |  8 ++--
 .../applications-datatable-details.html       |  2 +-
 .../applicationsDatatable.html                | 30 ++++++-------
 .../applicationsPortsDatatable.html           | 14 +++---
 .../applicationsStacksDatatable.html          | 22 +++++-----
 .../configurationsDatatable.html              | 22 +++++-----
 .../events-datatable/eventsDatatable.html     |  6 +--
 .../integratedApplicationsDatatable.html      |  8 ++--
 .../nodeApplicationsDatatable.html            |  8 ++--
 .../nodes-datatable/nodesDatatable.html       |  6 +--
 .../resourcePoolApplicationsDatatable.html    |  8 ++--
 .../resourcePoolsDatatable.html               | 18 ++++----
 .../volumes-datatable/volumesDatatable.html   | 16 +++----
 .../helm-templates-list.html                  |  8 ++--
 .../helm/helm-templates/helm-templates.html   |  8 ++--
 .../kube-services-item.html                   | 34 +++++++-------
 .../kube-services/kube-services.html          |  4 +-
 .../kubernetesConfigurationData.html          | 10 ++---
 .../create/createApplication.html             | 26 +++++------
 .../views/applications/edit/application.html  |  2 +-
 .../placements-datatable/template.html        |  8 ++--
 .../views/applications/helm/helm.html         |  4 +-
 .../views/applications/stats/stats.html       |  6 +--
 app/kubernetes/views/cluster/node/node.html   |  2 +-
 .../views/cluster/node/stats/stats.html       |  6 +--
 .../create/createConfiguration.html           |  6 +--
 .../configurations/edit/configuration.html    |  4 +-
 app/kubernetes/views/configure/configure.html | 26 +++++------
 app/kubernetes/views/dashboard/dashboard.html |  4 +-
 app/kubernetes/views/deploy/deploy.html       |  4 +-
 .../access/resourcePoolAccess.html            | 12 ++---
 .../create/createResourcePool.html            |  8 ++--
 .../ingresses-datatable/template.html         |  8 ++--
 .../resource-pools/edit/resourcePool.html     |  4 +-
 app/kubernetes/views/stacks/logs/logs.html    |  4 +-
 app/kubernetes/views/summary/summary.html     |  4 +-
 .../volumes-storages-datatable/template.html  | 10 ++---
 .../BEFeatureIndicator.html                   |  2 +-
 .../access-datatable/accessDatatable.html     |  8 ++--
 .../components/access-table/accessTable.html  |  8 ++--
 .../porAccessControlForm.html                 |  8 ++--
 .../customTemplateCommonFields.html           |  8 ++--
 .../customTemplatesList.html                  |  8 ++--
 .../access-tokens-datatable.html              |  4 +-
 .../endpointsDatatable.html                   |  6 +--
 .../groups-datatable/groupsDatatable.html     |  6 +--
 .../registriesDatatable.html                  | 10 ++---
 .../stacks-datatable/stacksDatatable.html     | 14 +++---
 .../strings-datatable/strings-datatable.html  |  6 +--
 .../tags-datatable/tagsDatatable.html         |  6 +--
 .../users-datatable/usersDatatable.html       | 10 ++---
 .../environment-variables-panel.html          |  2 +-
 ...nvironment-variables-simple-mode-item.html |  2 +-
 .../environment-variables-simple-mode.html    |  2 +-
 .../git-form-auth-fieldset.html               |  4 +-
 .../git-form-auto-update-fieldset.html        |  2 +-
 .../git-form-compose-path-field.html          |  2 +-
 .../git-form-url-field.html                   |  2 +-
 .../forms/group-form/groupForm.html           |  2 +-
 .../registry-form-ecr.html                    |  8 ++--
 .../registry-form-azure.html                  |  6 +--
 .../registry-form-custom.html                 |  8 ++--
 .../registry-form-dockerhub.html              |  6 +--
 .../gitlabProjectsDatatable.html              |  4 +-
 .../registry-form-gitlab.html                 | 12 ++---
 .../registry-form-proget.html                 |  6 +--
 .../registry-form-quay.html                   |  8 ++--
 .../groupAssociationTable.html                | 18 ++++----
 .../template-item/templateItem.html           |  6 +--
 .../template-list/templateList.html           | 10 ++---
 .../components/theme/theme-settings.html      |  2 +-
 .../access-viewer-datatable.html              |  6 +--
 .../roles-datatable/roles-datatable.html      |  6 +--
 app/portainer/services/codeMirrorDialog.css   | 14 +++---
 .../auto-user-provision-toggle.html           |  4 +-
 .../ldap-connectivity-check.html              |  2 +-
 .../ldap-custom-admin-group.html              |  8 ++--
 .../ldap-group-search-item.html               |  2 +-
 .../ldap-groups-datatable.html                |  6 +--
 .../ldap-settings-custom.html                 |  4 +-
 .../ldap-settings-openldap.html               |  2 +-
 .../ldap-users-datatable.html                 |  6 +--
 .../activity-logs-datatable.html              |  8 ++--
 .../auth-logs-datatable.html                  |  8 ++--
 app/portainer/views/account/account.html      |  6 +--
 app/portainer/views/auth/auth.html            |  6 +--
 app/portainer/views/init/admin/initAdmin.html |  2 +-
 app/portainer/views/logout/logout.html        |  2 +-
 .../views/registries/edit/registry.html       |  8 ++--
 app/portainer/views/settings/settings.html    |  6 +--
 app/portainer/views/tags/tags.html            |  2 +-
 app/portainer/views/templates/templates.html  |  8 ++--
 app/portainer/views/users/edit/user.html      |  6 +--
 app/portainer/views/users/users.html          |  6 +--
 app/react-table-config.d.ts                   |  5 +--
 app/react/components/Alert/Alert.tsx          |  4 +-
 .../BEFeatureIndicator/BEFeatureIndicator.tsx |  2 +-
 app/react/components/BadgeIcon/BadgeIcon.tsx  |  8 ++--
 .../BoxSelector/BoxOption.module.css          | 10 ++---
 .../components/BoxSelector/BoxOption.tsx      |  2 +-
 .../BoxSelector/BoxSelectorItem.tsx           |  4 +-
 .../BoxSelector/LimitedToBeIndicator.tsx      |  2 +-
 app/react/components/BoxSelector/LogoIcon.tsx |  4 +-
 .../DashboardItem/DashboardItem.tsx           | 12 ++---
 .../components/DetailsTable/DetailsRow.tsx    |  2 +-
 .../components/EnvironmentStatusBadgeItem.tsx |  2 +-
 app/react/components/LinkButton.tsx           |  2 +-
 .../PageHeader/Breadcrumbs/Breadcrumbs.tsx    |  4 +-
 .../PageHeader/ContextHelp/ContextHelp.tsx    |  2 +-
 .../components/PageHeader/HeaderTitle.tsx     |  2 +-
 .../PageHeader/NotificationsMenu.tsx          |  2 +-
 app/react/components/PageHeader/UserMenu.tsx  |  2 +-
 .../PaginationControls/PageInput.tsx          |  2 +-
 app/react/components/StatsItem.tsx            |  4 +-
 .../TooltipWithChildren.tsx                   |  2 +-
 .../components/ViewLoading/ViewLoading.tsx    |  2 +-
 .../components/buttons/LoadingButton.tsx      |  2 +-
 .../components/datatables/NestedTable.css     |  2 +-
 app/react/components/datatables/SearchBar.tsx |  2 +-
 app/react/components/datatables/Table.tsx     |  2 +-
 .../components/datatables/TableContent.tsx    |  2 +-
 .../components/datatables/TableHeaderCell.tsx |  8 ++--
 .../datatables/TableHeaderSortIcons.tsx       |  2 +-
 .../components/datatables/TableTitle.tsx      |  2 +-
 .../FormControl/FormControl.tsx               |  2 +-
 .../FormSection/FormSection.tsx               |  2 +-
 .../FormSectionTitle/FormSectionTitle.tsx     |  2 +-
 .../form-components/Slider/Slider.module.css  |  2 +-
 .../SwitchField/SwitchField.tsx               |  2 +-
 .../components/modals/Modal/CloseButton.tsx   |  2 +-
 app/react/components/modals/Modal/Modal.tsx   |  4 +-
 .../components/modals/Modal/ModalFooter.tsx   |  2 +-
 .../components/modals/Modal/ModalHeader.tsx   |  2 +-
 .../images/ItemView/DockerfileDetails.tsx     |  2 +-
 .../IngressClassDatatable.tsx                 |  4 +-
 .../CreateIngressView/Annotations/index.tsx   |  6 +--
 .../CreateIngressView/IngressForm.tsx         | 44 +++++++++----------
 .../IngressDatatable/columns/ingressRules.tsx |  2 +-
 .../NamespaceAccessUsersSelector.tsx          |  2 +-
 .../nomad/DashboardView/DashboardView.tsx     |  2 +-
 .../TasksDatatable/columns/actions.tsx        |  2 +-
 .../portainer/HomeView/EdgeLoadingSpinner.tsx |  2 +-
 .../AMTButton/AssociateAMTDialog.tsx          |  6 +--
 .../EnvironmentItem/EditButtons.tsx           |  6 +--
 .../EnvironmentBrowseButtons.tsx              | 22 +++++-----
 .../EnvironmentItem/EnvironmentItem.tsx       | 10 ++---
 .../EnvironmentItem/EnvironmentStats.tsx      |  2 +-
 .../EnvironmentList/EnvironmentList.tsx       | 10 ++---
 .../KubeconfigButton/KubeconfigPrompt.tsx     |  8 ++--
 .../EnvironmentList/SortbySelector.tsx        |  4 +-
 .../HomeView/EnvironmentList/UpdateBadge.tsx  | 10 ++---
 .../PorAccessManagementUsersSelector.tsx      |  2 +-
 .../WizardKubernetes/WizardKubernetes.tsx     |  2 +-
 .../shared/Hardware/GpusList.tsx              |  2 +-
 .../components/Option/Option.module.css       | 10 ++---
 .../wizard/components/Option/Option.tsx       |  4 +-
 app/react/sidebar/EnvironmentSidebar.tsx      | 10 ++---
 app/react/sidebar/Footer/Footer.tsx           |  2 +-
 app/react/sidebar/Header.tsx                  |  8 ++--
 app/react/sidebar/SettingsSidebar.tsx         |  2 +-
 app/react/sidebar/Sidebar.tsx                 |  4 +-
 app/react/sidebar/SidebarItem/Head.tsx        | 12 ++---
 app/react/sidebar/SidebarItem/Menu.tsx        |  6 +--
 app/react/sidebar/SidebarItem/Wrapper.tsx     |  2 +-
 app/react/sidebar/SidebarSection.tsx          |  2 +-
 .../sidebar/UpgradeBEBanner/LoadingDialog.tsx |  4 +-
 .../UpgradeBEBanner/NonAdminUpgradeDialog.tsx |  2 +-
 .../UpgradeBEBanner/UpgradeBEBanner.tsx       |  4 +-
 .../UpgradeBEBanner/UploadLicenseDialog.tsx   |  4 +-
 package.json                                  |  3 +-
 yarn.lock                                     | 13 ++++--
 226 files changed, 704 insertions(+), 699 deletions(-)

diff --git a/app/agent/components/files-datatable/filesDatatable.html b/app/agent/components/files-datatable/filesDatatable.html
index c082f229e..2dc712d0f 100644
--- a/app/agent/components/files-datatable/filesDatatable.html
+++ b/app/agent/components/files-datatable/filesDatatable.html
@@ -59,7 +59,7 @@
           <tbody>
             <tr ng-if="!$ctrl.isRoot">
               <td colspan="4">
-                <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ng-click="$ctrl.goToParent()"
+                <button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ng-click="$ctrl.goToParent()"
                   ><pr-icon icon="'corner-left-up'"></pr-icon>Go to parent</button
                 >
               </td>
@@ -78,7 +78,7 @@
                   <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><pr-icon icon="'check'"></pr-icon></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"
+                  <button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"
                     ><pr-icon icon="'folder'"></pr-icon>{{ item.Name }}</button
                   >
                 </span>
@@ -101,10 +101,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No files found.</td>
+              <td colspan="5" class="text-muted text-center">No files found.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 89de891aa..520f7bc83 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -148,7 +148,7 @@ input[type='checkbox'] {
 }
 
 .text-warning {
-  @apply text-warning-9 th-dark:text-warning-7 th-highcontrast:text-warning-1;
+  @apply text-warning-9 th-highcontrast:text-warning-1 th-dark:text-warning-7;
 }
 
 .widget .widget-body table tbody .image-tag {
@@ -778,5 +778,5 @@ input[style*='background-image: url("data:image/png'] {
 }
 
 input:-webkit-autofill {
-  @apply caret-[--grey-25] th-dark:caret-white th-highcontrast:caret-white;
+  @apply caret-[--grey-25] th-highcontrast:caret-white th-dark:caret-white;
 }
diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index c928ca696..3bdf61b0e 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -185,7 +185,7 @@ input:checked + .slider:before {
 /* Widget */
 
 .widget .widget-icon {
-  @apply text-lg !p-2 mr-1;
+  @apply mr-1 !p-2 text-lg;
   @apply bg-blue-3 text-blue-8;
   @apply th-dark:bg-gray-9 th-dark:text-blue-3;
 
diff --git a/app/assets/css/button.css b/app/assets/css/button.css
index ebfd25e04..dc3f82460 100644
--- a/app/assets/css/button.css
+++ b/app/assets/css/button.css
@@ -25,15 +25,15 @@ fieldset[disabled] .btn {
 }
 
 .btn.btn-primary {
-  @apply text-white bg-blue-8 border-blue-8;
-  @apply hover:text-white hover:bg-blue-9 hover:border-blue-9;
-  @apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7;
+  @apply border-blue-8 bg-blue-8 text-white;
+  @apply hover:border-blue-9 hover:bg-blue-9 hover:text-white;
+  @apply th-dark:hover:border-blue-7 th-dark:hover:bg-blue-7;
 }
 
 .btn.btn-primary:active,
 .btn.btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-  @apply bg-blue-9 border-blue-5;
+  @apply border-blue-5 bg-blue-9;
 }
 
 .nav-pills > li.active > a,
@@ -46,29 +46,29 @@ fieldset[disabled] .btn {
 .btn.btn-secondary {
   @apply border border-solid;
 
-  @apply text-blue-9 bg-blue-2 border-blue-8;
+  @apply border-blue-8 bg-blue-2 text-blue-9;
   @apply hover:bg-blue-3;
 
-  @apply th-dark:text-blue-3 th-dark:bg-gray-10 th-dark:border-blue-7;
+  @apply th-dark:border-blue-7 th-dark:bg-gray-10 th-dark:text-blue-3;
   @apply th-dark:hover:bg-blue-11;
 }
 
 .btn.btn-danger {
-  @apply bg-error-8 border-error-8;
-  @apply hover:bg-error-7 hover:border-error-7 hover:text-white;
+  @apply border-error-8 bg-error-8;
+  @apply hover:border-error-7 hover:bg-error-7 hover:text-white;
 }
 
 .btn.btn-danger:active,
 .btn.btn-danger.active,
 .open > .dropdown-toggle.btn-danger {
-  @apply bg-error-8 text-white border-blue-5;
+  @apply border-blue-5 bg-error-8 text-white;
 }
 
 .btn.btn-dangerlight {
   @apply text-error-9 th-dark:text-white;
   @apply bg-error-3 th-dark:bg-error-9;
   @apply hover:bg-error-2 th-dark:hover:bg-error-11;
-  @apply border-error-5 th-dark:border-error-7 th-highcontrast:border-error-7;
+  @apply border-error-5 th-highcontrast:border-error-7 th-dark:border-error-7;
   @apply border border-solid;
 }
 
@@ -83,15 +83,15 @@ fieldset[disabled] .btn {
 /* secondary-grey */
 .btn.btn-default,
 .btn.btn-light {
-  @apply bg-white border-gray-5 text-gray-9;
-  @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
+  @apply border-gray-5 bg-white text-gray-9;
+  @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10;
 
   /* dark mode */
-  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
-  @apply th-dark:hover:bg-gray-iron-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
+  @apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4;
+  @apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4;
 
-  @apply th-highcontrast:bg-black th-highcontrast:border-gray-2 th-highcontrast:text-white;
-  @apply th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-gray-warm-4;
+  @apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white;
+  @apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4;
 }
 
 .btn.btn-light:active,
@@ -112,8 +112,8 @@ fieldset[disabled] .btn {
 
 .input-group-btn .btn.active,
 .btn-group .btn.active {
-  @apply bg-blue-2 text-blue-10 border-blue-5;
-  @apply th-dark:bg-blue-11 th-dark:text-blue-2 th-dark:border-blue-9;
+  @apply border-blue-5 bg-blue-2 text-blue-10;
+  @apply th-dark:border-blue-9 th-dark:bg-blue-11 th-dark:text-blue-2;
 }
 
 /* focus */
@@ -149,14 +149,14 @@ fieldset[disabled] .btn {
 a.no-link,
 a[ng-click] {
   @apply text-current;
-  @apply hover:no-underline hover:text-current;
-  @apply focus:no-underline focus:text-current;
+  @apply hover:text-current hover:no-underline;
+  @apply focus:text-current focus:no-underline;
 }
 
 a,
 a.hyperlink {
   @apply text-blue-8 hover:text-blue-9;
-  @apply hover:underline cursor-pointer;
+  @apply cursor-pointer hover:underline;
 }
 
 a.no-decoration {
diff --git a/app/assets/css/icon.css b/app/assets/css/icon.css
index e7818b101..9880ca0b3 100644
--- a/app/assets/css/icon.css
+++ b/app/assets/css/icon.css
@@ -67,7 +67,7 @@ pr-icon {
 
 .icon-warning,
 .icon-orange {
-  @apply text-warning-9 th-dark:text-warning-7 th-highcontrast:text-warning-1;
+  @apply text-warning-9 th-highcontrast:text-warning-1 th-dark:text-warning-7;
 }
 
 .icon.icon-warning-alt {
diff --git a/app/assets/css/react-datetime-picker-override.css b/app/assets/css/react-datetime-picker-override.css
index ca2b8a303..f834265ce 100644
--- a/app/assets/css/react-datetime-picker-override.css
+++ b/app/assets/css/react-datetime-picker-override.css
@@ -42,7 +42,7 @@
 /* today's date tile */
 .react-datetime-picker .react-calendar__tile--now {
   /* use background color to avoid white on yellow in dark/high contrast modes */
-  @apply th-dark:text-[color:var(--bg-calendar-color)] th-highcontrast:text-[color:var(--bg-calendar-color)];
+  @apply th-highcontrast:text-[color:var(--bg-calendar-color)] th-dark:text-[color:var(--bg-calendar-color)];
 }
 .react-datetime-picker .react-calendar__tile--now:enabled:hover,
 .react-datetime-picker .react-calendar__tile--now:enabled:focus {
diff --git a/app/docker/components/container-restart-policy/container-restart-policy.html b/app/docker/components/container-restart-policy/container-restart-policy.html
index 844282c25..43444f6ad 100644
--- a/app/docker/components/container-restart-policy/container-restart-policy.html
+++ b/app/docker/components/container-restart-policy/container-restart-policy.html
@@ -1,5 +1,5 @@
 <div>
-  <table class="table table-bordered table-condensed">
+  <table class="table-bordered table-condensed table">
     <tr>
       <td class="col-md-3">
         <span>Name</span>
diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index fb096f62e..44336e121 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" authorization="DockerConfigDelete, DockerConfigCreate">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             authorization="DockerConfigDelete"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -34,7 +34,7 @@
           </button>
           <button
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.configs.new"
             authorization="DockerConfigCreate"
             data-cy="config-addConfigButton"
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -139,10 +139,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No config available.</td>
+              <td colspan="3" class="text-muted text-center">No config available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index dbd95dde1..55e4b7014 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -28,7 +28,7 @@
         </form>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>Network</th>
@@ -63,7 +63,7 @@
               <td authorization="DockerNetworkDisconnect">
                 <button
                   type="button"
-                  class="btn btn-xs btn-dangerlight h-fit vertical-center !ml-0"
+                  class="btn btn-xs btn-dangerlight vertical-center !ml-0 h-fit"
                   ng-disabled="$ctrl.leaveNetworkActionInProgress || $ctrl.container.IsPortainer"
                   button-spinner="$ctrl.leaveNetworkActionInProgress"
                   ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
@@ -87,10 +87,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.dataset.length === 0">
-              <td colspan="5" class="text-center text-muted">No network available.</td>
+              <td colspan="5" class="text-muted text-center">No network available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
index c4f39a3e3..d90ecaf0f 100644
--- a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
+++ b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th ng-repeat="header in $ctrl.headerset">
@@ -36,10 +36,10 @@
               <td ng-repeat="info in item track by $index">{{ info }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="{{ $ctrl.headerset.length }}" class="text-center text-muted">Loading...</td>
+              <td colspan="{{ $ctrl.headerset.length }}" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredProcesses.length === 0">
-              <td colspan="{{ $ctrl.headerset.length }}" class="text-center text-muted">No process available.</td>
+              <td colspan="{{ $ctrl.headerset.length }}" class="text-muted text-center">No process available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/events-datatable/eventsDatatable.html b/app/docker/components/datatables/events-datatable/eventsDatatable.html
index 4748328e9..a3b5a9ae2 100644
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -65,10 +65,10 @@
               <td>{{ item.Details }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No event available.</td>
+              <td colspan="3" class="text-muted text-center">No event available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html
index 6daf79b00..819db41a9 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@@ -25,7 +25,7 @@
           <div class="btn-group" authorization="DockerImageDelete">
             <button
               type="button"
-              class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+              class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
               authorization="DockerImageDelete"
               ng-disabled="$ctrl.state.selectedItemCount === 0"
               ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -77,7 +77,7 @@
 
           <button
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.images.build"
             authorization="DockerImageBuild"
             data-cy="image-buildImageButton"
@@ -123,11 +123,11 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters nowrap-cells">
+        <table class="table-hover table-filters nowrap-cells table">
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" popover-placement="bottom-left" is-open="$ctrl.filters.state.open">
-                <div class="flex gap-1 items-center">
+                <div class="flex items-center gap-1">
                   <span class="md-checkbox">
                     <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                     <label for="select_all"></label>
@@ -218,7 +218,7 @@
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate: 40 }}</a>
+                <a ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate : 40 }}</a>
                 <span style="margin-left: 10px" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
               </td>
               <td>
@@ -229,10 +229,10 @@
               <td ng-if="$ctrl.showHostColumn">{{ item.NodeName ? item.NodeName : '-' }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No image available.</td>
+              <td colspan="5" class="text-muted text-center">No image available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
index f6f8eae45..ebe8db2db 100644
--- a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
+++ b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
@@ -22,7 +22,7 @@
         />
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -99,10 +99,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="7" class="text-center text-muted">Loading...</td>
+              <td colspan="7" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="7" class="text-center text-muted">No node available.</td>
+              <td colspan="7" class="text-muted text-center">No node available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html b/app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html
index d335615a7..ca3842bd5 100644
--- a/app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html
+++ b/app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html
@@ -16,7 +16,7 @@
 </td>
 <td ng-if="!allowCheckbox"></td>
 <td>
-  <a ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate: 40 }}</a>
+  <a ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate : 40 }}</a>
   <span style="margin-left: 10px" class="label label-info image-tag space-left" ng-if="item.ResourceControl.System">System</span>
 </td>
 <td>{{ item.StackName ? item.StackName : '-' }}</td>
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index 5a2a167b5..785a63629 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" authorization="DockerNetworkDelete, DockerNetworkCreate">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             authorization="DockerNetworkDelete"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -34,7 +34,7 @@
           </button>
           <button
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.networks.new"
             authorization="DockerNetworkCreate"
             data-cy="network-addNetworkButton"
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th style="width: 55px">
@@ -207,10 +207,10 @@
             </tr>
             <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" class="datatable-highlighted" network-row-content item="it" parent-ctrl="$ctrl"> </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="9" class="text-center text-muted">Loading...</td>
+              <td colspan="9" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="9" class="text-center text-muted">No network available.</td>
+              <td colspan="9" class="text-muted text-center">No network available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
index 1439d6955..3e7274195 100644
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
@@ -22,7 +22,7 @@
         />
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -88,10 +88,10 @@
               <td>{{ item.Updated | getisodate }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No task available.</td>
+              <td colspan="5" class="text-muted text-center">No task available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
index 3306f69b0..645db63f8 100644
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@@ -59,7 +59,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -158,10 +158,10 @@
               >
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="7" class="text-center text-muted">Loading...</td>
+              <td colspan="7" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="7" class="text-center text-muted">No node available.</td>
+              <td colspan="7" class="text-muted text-center">No node available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index 90305ccc9..db5eee7c0 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" authorization="DockerSecretDelete, DockerSecretCreate">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             authorization="DockerSecretDelete"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -34,7 +34,7 @@
           </button>
           <button
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.secrets.new"
             authorization="DockerSecretCreate"
             data-cy="secret-addSecretButton"
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -139,10 +139,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No secret available.</td>
+              <td colspan="3" class="text-muted text-center">No secret available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
index 0bc6aaa4f..e98d84bea 100644
--- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
+++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
@@ -1,5 +1,5 @@
 <div class="inner-datatable">
-  <table class="table table-condensed table-hover nowrap-cells">
+  <table class="table-condensed table-hover nowrap-cells table">
     <thead>
       <tr>
         <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="w-[10%]">
@@ -98,11 +98,11 @@
           ></container-quick-actions>
         </td>
         <td>{{ item.Slot ? item.Slot : '-' }}</td>
-        <td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>
+        <td>{{ item.NodeId | tasknodename : $ctrl.nodes }}</td>
         <td>{{ item.Updated | getisodate }}</td>
       </tr>
       <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-        <td colspan="5" class="text-center text-muted">No task matching filter.</td>
+        <td colspan="5" class="text-muted text-center">No task matching filter.</td>
       </tr>
     </tbody>
   </table>
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index c49c60ea7..37c6e5737 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -67,7 +67,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th style="width: 55px">
@@ -161,7 +161,7 @@
                 <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" class-name="'mr-1'"></pr-icon>
               </td>
               <td>
-                <button type="button" class="btn btn-link hover:no-underline !ml-0 p-0" ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{
+                <button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{
                   item.Name
                 }}</button>
               </td>
@@ -169,7 +169,7 @@
               <td ng-show="$ctrl.columnVisibility.columns.image.display">{{ item.Image | hideshasum }}</td>
               <td ng-controller="ServicesDatatableActionsController as actionCtrl">
                 {{ item.Mode }}
-                <code>{{ item.Tasks | runningtaskscount }}</code> / <code>{{ item.Mode === 'replicated' ? item.Replicas : ($ctrl.nodes | availablenodecount: item) }}</code>
+                <code>{{ item.Tasks | runningtaskscount }}</code> / <code>{{ item.Mode === 'replicated' ? item.Replicas : ($ctrl.nodes | availablenodecount : item) }}</code>
                 <span ng-if="item.Mode === 'replicated' && !item.Scale" authorization="DockerServiceUpdate">
                   <a class="interactive vertical-center" ng-click="item.Scale = true; item.ReplicaCount = item.Replicas; $event.stopPropagation();">
                     <pr-icon icon="'minimize-2'"></pr-icon>
@@ -233,10 +233,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="8" class="text-center text-muted">Loading...</td>
+              <td colspan="8" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="8" class="text-center text-muted">No service available.</td>
+              <td colspan="8" class="text-muted text-center">No service available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 73371073d..7af8b6fd1 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -21,7 +21,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -105,14 +105,14 @@
                 ></container-quick-actions>
               </td>
               <td ng-if="$ctrl.showSlotColumn">{{ item.Slot ? item.Slot : '-' }}</td>
-              <td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>
+              <td>{{ item.NodeId | tasknodename : $ctrl.nodes }}</td>
               <td>{{ item.Updated | getisodate }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="6" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="6" class="text-center text-muted">No task available.</td>
+              <td colspan="6" class="text-muted text-center">No task available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index 7cd65c505..64787999d 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" authorization="DockerVolumeDelete, DockerVolumeCreate">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             authorization="DockerVolumeDelete"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -34,7 +34,7 @@
           </button>
           <button
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.volumes.new"
             authorization="DockerVolumeCreate"
             data-cy="volume-addVolumeButton"
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters nowrap-cells">
+        <table class="table-hover table-filters nowrap-cells table">
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="flex gap-1">
@@ -184,7 +184,7 @@
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate: 40 }}</a>
+                <a ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate : 40 }}</a>
 
                 <button
                   ng-if="$ctrl.showBrowseAction"
@@ -211,10 +211,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="6" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="6" class="text-center text-muted">No volume available.</td>
+              <td colspan="6" class="text-muted text-center">No volume available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/host-view-panels/devices-panel/devices-panel.html b/app/docker/components/host-view-panels/devices-panel/devices-panel.html
index 4f451c494..55e0ec291 100644
--- a/app/docker/components/host-view-panels/devices-panel/devices-panel.html
+++ b/app/docker/components/host-view-panels/devices-panel/devices-panel.html
@@ -16,10 +16,10 @@
               <td>{{ device.Vendor }}</td>
             </tr>
             <tr ng-if="!$ctrl.devices">
-              <td colspan="2" class="text-center text-muted">Loading...</td>
+              <td colspan="2" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.devices.length === 0">
-              <td colspan="2" class="text-center text-muted"> No device available. </td>
+              <td colspan="2" class="text-muted text-center"> No device available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/host-view-panels/disks-panel/disks-panel.html b/app/docker/components/host-view-panels/disks-panel/disks-panel.html
index 2096a1f44..6f1b2f06c 100644
--- a/app/docker/components/host-view-panels/disks-panel/disks-panel.html
+++ b/app/docker/components/host-view-panels/disks-panel/disks-panel.html
@@ -16,10 +16,10 @@
               <td>{{ disk.Size | humansize }}</td>
             </tr>
             <tr ng-if="!$ctrl.disks">
-              <td colspan="2" class="text-center text-muted">Loading...</td>
+              <td colspan="2" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.disks.length === 0">
-              <td colspan="2" class="text-center text-muted"> No disks available. </td>
+              <td colspan="2" class="text-muted text-center"> No disks available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html b/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
index 0ea5fd90a..b67837b81 100644
--- a/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
+++ b/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
@@ -25,15 +25,15 @@
             </tr>
             <tr>
               <td>Volume Plugins</td>
-              <td>{{ $ctrl.engine.volumePlugins | arraytostr: ', ' }}</td>
+              <td>{{ $ctrl.engine.volumePlugins | arraytostr : ', ' }}</td>
             </tr>
             <tr>
               <td>Network Plugins</td>
-              <td>{{ $ctrl.engine.networkPlugins | arraytostr: ', ' }}</td>
+              <td>{{ $ctrl.engine.networkPlugins | arraytostr : ', ' }}</td>
             </tr>
             <tr ng-if="$ctrl.engine.engineLabels.length">
               <td>Engine Labels</td>
-              <td>{{ $ctrl.engine.engineLabels | labelsToStr: ', ' }}</td>
+              <td>{{ $ctrl.engine.engineLabels | labelsToStr : ', ' }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index 4c079f8e4..7b1b5ddcb 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -1,7 +1,7 @@
 <!-- use registry -->
 <div class="row">
   <div class="form-group" ng-if="$ctrl.model.UseRegistry">
-    <label for="image_registry" class="control-label text-left col-sm-3 col-lg-2" ng-class="$ctrl.labelClass"> Registry </label>
+    <label for="image_registry" class="control-label col-sm-3 col-lg-2 text-left" ng-class="$ctrl.labelClass"> Registry </label>
     <div ng-class="$ctrl.inputClass" class="col-sm-8">
       <select
         ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Id"
@@ -13,7 +13,7 @@
     </div>
   </div>
   <div class="form-group" ng-if="$ctrl.model.UseRegistry">
-    <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image</label>
+    <label for="image_name" ng-class="$ctrl.labelClass" class="control-label col-sm-3 col-lg-2 required text-left">Image</label>
     <div ng-class="$ctrl.inputClass" class="col-sm-8">
       <div class="input-group">
         <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
@@ -49,7 +49,7 @@
       <span class="small">
         <p class="text-muted ml-4"> When using advanced mode, image and repository <b>must be</b> publicly available. </p>
       </span>
-      <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image </label>
+      <label for="image_name" ng-class="$ctrl.labelClass" class="control-label col-sm-3 col-lg-2 required text-left">Image </label>
       <div ng-class="$ctrl.inputClass" class="col-sm-8">
         <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
       </div>
@@ -71,10 +71,10 @@
   <!-- ! info message -->
   <div class="form-group">
     <div class="col-sm-12">
-      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
+      <button type="button" class="btn btn-link btn-sm vertical-center !ml-0 p-0 hover:no-underline" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
         <pr-icon icon="'database'"> </pr-icon> Simple mode
       </button>
-      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
+      <button type="button" class="btn btn-link btn-sm vertical-center !ml-0 p-0 hover:no-underline" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
         <pr-icon icon="'globe'"> </pr-icon> Advanced mode
       </button>
     </div>
diff --git a/app/docker/components/volumesCIFSForm/volumesCifsForm.html b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
index a887bae2d..01e82b3dc 100644
--- a/app/docker/components/volumesCIFSForm/volumesCifsForm.html
+++ b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
@@ -4,7 +4,7 @@
     <div class="col-sm-12 form-section-title"> CIFS Settings </div>
     <!-- address-input -->
     <div class="form-group col-md-12">
-      <label for="cifs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
+      <label for="cifs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="cifs_address" placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx" required />
       </div>
@@ -19,7 +19,7 @@
     <!-- !address-input -->
     <!-- mount-point-input -->
     <div class="form-group col-md-12">
-      <label for="cifs_share" class="col-sm-2 col-md-1 control-label text-left required">Share</label>
+      <label for="cifs_share" class="col-sm-2 col-md-1 control-label required text-left">Share</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required />
       </div>
@@ -49,7 +49,7 @@
     <!-- !version-input -->
     <!-- username -->
     <div class="form-group col-md-12">
-      <label for="cifs_username" class="col-sm-2 col-md-1 control-label text-left required">Username</label>
+      <label for="cifs_username" class="col-sm-2 col-md-1 control-label required text-left">Username</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required />
       </div>
diff --git a/app/docker/components/volumesNFSForm/volumesnfsForm.html b/app/docker/components/volumesNFSForm/volumesnfsForm.html
index ff061c3fe..ea143411b 100644
--- a/app/docker/components/volumesNFSForm/volumesnfsForm.html
+++ b/app/docker/components/volumesNFSForm/volumesnfsForm.html
@@ -4,7 +4,7 @@
     <div class="col-sm-12 form-section-title"> NFS Settings </div>
     <!-- address-input -->
     <div class="form-group col-md-12">
-      <label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
+      <label for="nfs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
       </div>
@@ -34,7 +34,7 @@
     <!-- !version-input -->
     <!-- mount-point-input -->
     <div class="form-group col-md-12">
-      <label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left required">Mount point</label>
+      <label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label required text-left">Mount point</label>
       <div class="col-sm-10 col-md-11">
         <input
           type="text"
diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index 645b9c0ac..557e84fee 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -29,7 +29,7 @@
           <!-- labels -->
           <div class="form-group">
             <div class="col-sm-12 mt-1">
-              <label class="control-label text-left space-right">Labels</label>
+              <label class="control-label space-right text-left">Labels</label>
               <span class="label label-default interactive vertical-center space-left" ng-click="ctrl.addLabel()"> <pr-icon icon="'plus'" mode="'alt'"></pr-icon> add label </span>
             </div>
             <!-- labels-input-list -->
diff --git a/app/docker/views/configs/edit/config.html b/app/docker/views/configs/edit/config.html
index 05b2c2857..8f41356b1 100644
--- a/app/docker/views/configs/edit/config.html
+++ b/app/docker/views/configs/edit/config.html
@@ -34,7 +34,7 @@
             <tr ng-if="!(config.Labels | emptyobject)">
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in config.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
diff --git a/app/docker/views/containers/console/exec.html b/app/docker/views/containers/console/exec.html
index e49168d12..da3779939 100644
--- a/app/docker/views/containers/console/exec.html
+++ b/app/docker/views/containers/console/exec.html
@@ -19,7 +19,7 @@
           <div ng-if="state === states.disconnected">
             <!-- command-list -->
             <div class="form-group">
-              <label for="command" class="col-lg-1 text-left col-sm-2 control-label">Command</label>
+              <label for="command" class="col-lg-1 col-sm-2 control-label text-left">Command</label>
               <div class="col-lg-11 col-sm-10">
                 <div class="input-group" ng-if="!formValues.isCustomCommand">
                   <span class="input-group-addon">
@@ -48,7 +48,7 @@
               ></por-switch-field>
             </div>
             <div class="form-group">
-              <label class="col-lg-1 text-left col-sm-2 control-label">
+              <label class="col-lg-1 col-sm-2 control-label text-left">
                 User
                 <portainer-tooltip message="'Format is one of: user, user:group, uid or uid:gid'"></portainer-tooltip>
               </label>
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index d4187dcd7..e46ee11e6 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -403,7 +403,7 @@
                         <span class="input-group-addon">volume</span>
                         <select class="form-control" ng-model="volume.name">
                           <option selected disabled hidden value="">Select a volume</option>
-                          <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name | truncate: 30 }} - {{ vol.Driver | truncate: 30 }}</option>
+                          <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name | truncate : 30 }} - {{ vol.Driver | truncate : 30 }}</option>
                         </select>
                       </div>
                       <!-- !volume -->
@@ -718,7 +718,7 @@
                 <div class="col-sm-12 form-section-title"> Resources </div>
                 <!-- memory-reservation-input -->
                 <div class="form-group flex">
-                  <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory reservation (MB) </label>
+                  <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label vertical-center text-left"> Memory reservation (MB) </label>
                   <div class="col-sm-6">
                     <slider
                       on-change="(handleResourceChange)"
@@ -755,7 +755,7 @@
                 <!-- !memory-reservation-input -->
                 <!-- memory-limit-input -->
                 <div class="form-group flex">
-                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory limit (MB) </label>
+                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label vertical-center text-left"> Memory limit (MB) </label>
                   <div class="col-sm-6">
                     <slider
                       on-change="(handleResourceChange)"
@@ -792,7 +792,7 @@
                 <!-- !memory-limit-input -->
                 <!-- cpu-limit-input -->
                 <div class="form-group flex">
-                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Maximum CPU usage </label>
+                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label vertical-center text-left"> Maximum CPU usage </label>
                   <div class="col-sm-8">
                     <slider
                       on-change="(handleResourceChange)"
diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html
index a62a443d2..dbfdebf7a 100644
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@@ -235,7 +235,7 @@
     <rd-widget>
       <rd-widget-header icon="list" title-text="Container details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
-        <table class="table container-details-table">
+        <table class="container-details-table table">
           <tbody>
             <tr>
               <td>Image</td>
@@ -268,7 +268,7 @@
             <tr>
               <td>ENV</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="var in container.Config.Env track by $index">
                     <td>{{ var|key: '=' }}</td>
                     <td>{{ var|value: '=' }}</td>
@@ -279,7 +279,7 @@
             <tr ng-if="!(container.Config.Labels | emptyobject)">
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in container.Config.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
@@ -302,7 +302,7 @@
             <tr ng-if="!(container.HostConfig.Sysctls | emptyobject)">
               <td>Sysctls</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in container.HostConfig.Sysctls">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
diff --git a/app/docker/views/containers/inspect/containerinspect.html b/app/docker/views/containers/inspect/containerinspect.html
index 1eba19ad4..6106476c9 100644
--- a/app/docker/views/containers/inspect/containerinspect.html
+++ b/app/docker/views/containers/inspect/containerinspect.html
@@ -20,7 +20,7 @@
         </span>
       </rd-widget-header>
       <rd-widget-body>
-        <pre ng-show="state.DisplayTextView">{{ containerInfo | json: 4 }}</pre>
+        <pre ng-show="state.DisplayTextView">{{ containerInfo | json : 4 }}</pre>
         <json-tree ng-hide="state.DisplayTextView" object="containerInfo" root-name="containerInfo.Id" start-expanded="true"></json-tree>
       </rd-widget-body>
     </rd-widget>
diff --git a/app/docker/views/images/edit/image.html b/app/docker/views/images/edit/image.html
index abd830616..48e86a9cd 100644
--- a/app/docker/views/images/edit/image.html
+++ b/app/docker/views/images/edit/image.html
@@ -143,7 +143,7 @@
             <tr ng-if="!(image.Labels | emptyobject)">
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in image.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
@@ -213,7 +213,7 @@
                     {{ layer.CreatedBy | imagelayercommand }}
                   </span>
                   <span id="layer-command-{{ $index }}-short">
-                    {{ layer.CreatedBy | imagelayercommand | truncate: 130 }}
+                    {{ layer.CreatedBy | imagelayercommand | truncate : 130 }}
                     <span ng-if="layer.CreatedBy.length > 130" class="ml-1">
                       <a id="layer-command-expander{{ $index }}" class="btn" ng-click="toggleLayerCommand($index)">
                         <pr-icon icon="'plus'" mode="'alt'"></pr-icon>
diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index a8216950f..1404683bc 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -37,7 +37,7 @@
           <!-- labels -->
           <div class="form-group">
             <div class="col-sm-12 mt-1">
-              <label class="control-label text-left space-right">Labels</label>
+              <label class="control-label space-right text-left">Labels</label>
               <span class="label label-default interactive vertical-center space-left" ng-click="addLabel()"> <pr-icon icon="'plus'" mode="'alt'"></pr-icon> add label </span>
             </div>
             <!-- labels-input-list -->
diff --git a/app/docker/views/secrets/edit/secret.html b/app/docker/views/secrets/edit/secret.html
index 93ceb89be..ec50f58ac 100644
--- a/app/docker/views/secrets/edit/secret.html
+++ b/app/docker/views/secrets/edit/secret.html
@@ -31,7 +31,7 @@
             <tr ng-if="!(secret.Labels | emptyobject)">
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in secret.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
diff --git a/app/docker/views/services/edit/includes/configs.html b/app/docker/views/services/edit/includes/configs.html
index 3a6300277..386652f2f 100644
--- a/app/docker/views/services/edit/includes/configs.html
+++ b/app/docker/views/services/edit/includes/configs.html
@@ -45,7 +45,7 @@
             </td>
           </tr>
           <tr ng-if="service.ServiceConfigs.length === 0">
-            <td colspan="6" class="text-center text-muted">No configs associated to this service.</td>
+            <td colspan="6" class="text-muted text-center">No configs associated to this service.</td>
           </tr>
         </tbody>
       </table>
diff --git a/app/docker/views/services/edit/includes/logging.html b/app/docker/views/services/edit/includes/logging.html
index e7599ce58..6ec1e0c47 100644
--- a/app/docker/views/services/edit/includes/logging.html
+++ b/app/docker/views/services/edit/includes/logging.html
@@ -49,7 +49,7 @@
             </td>
           </tr>
           <tr ng-if="service.LogDriverOpts.length === 0">
-            <td colspan="6" class="text-center text-muted">No options associated to this logging driver.</td>
+            <td colspan="6" class="text-muted text-center">No options associated to this logging driver.</td>
           </tr>
         </tbody>
       </table>
diff --git a/app/docker/views/services/edit/includes/secrets.html b/app/docker/views/services/edit/includes/secrets.html
index 7f5915c94..52c7190d8 100644
--- a/app/docker/views/services/edit/includes/secrets.html
+++ b/app/docker/views/services/edit/includes/secrets.html
@@ -44,7 +44,7 @@
             </td>
           </tr>
           <tr ng-if="service.ServiceSecrets.length === 0">
-            <td colspan="6" class="text-center text-muted">No secrets associated to this service.</td>
+            <td colspan="6" class="text-muted text-center">No secrets associated to this service.</td>
           </tr>
         </tbody>
       </table>
diff --git a/app/docker/views/services/edit/service.html b/app/docker/views/services/edit/service.html
index d8b340843..2cdea20d7 100644
--- a/app/docker/views/services/edit/service.html
+++ b/app/docker/views/services/edit/service.html
@@ -92,7 +92,7 @@
               <td colspan="2">
                 <p class="small text-muted" authorization="DockerServiceUpdate">
                   Note: you can only rollback one level of changes. Clicking the rollback button without making a new change will undo your previous rollback </p
-                ><div class="flex gap-x-2 gap-y-1 flex-wrap">
+                ><div class="flex flex-wrap gap-x-2 gap-y-1">
                   <a
                     authorization="DockerServiceLogs"
                     ng-if="applicationState.endpoint.apiVersion >= 1.3"
diff --git a/app/docker/views/swarm/swarm.html b/app/docker/views/swarm/swarm.html
index cc577b785..8eed2b237 100644
--- a/app/docker/views/swarm/swarm.html
+++ b/app/docker/views/swarm/swarm.html
@@ -21,7 +21,7 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td>{{ totalMemory | humansize: 2 }}</td>
+              <td>{{ totalMemory | humansize : 2 }}</td>
             </tr>
             <tr>
               <td colspan="2">
diff --git a/app/docker/views/swarm/visualizer/swarmvisualizer.html b/app/docker/views/swarm/visualizer/swarmvisualizer.html
index 42b9bc5c9..32247cf80 100644
--- a/app/docker/views/swarm/visualizer/swarmvisualizer.html
+++ b/app/docker/views/swarm/visualizer/swarmvisualizer.html
@@ -90,7 +90,7 @@
               </div>
               <div>{{ node.Role }}</div>
               <div>CPU: {{ node.CPUs / 1000000000 }}</div>
-              <div>Memory: {{ node.Memory | humansize: 2 }}</div>
+              <div>Memory: {{ node.Memory | humansize : 2 }}</div>
               <div
                 ><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div
               >
@@ -114,7 +114,7 @@
                 <div>Image: {{ task.Spec.ContainerSpec.Image | hideshasum }}</div>
                 <div>Status: {{ task.Status.State }}</div>
                 <div>Update: {{ task.Updated | getisodate }}</div>
-                <div ng-if="task.Spec.Resources.Limits.MemoryBytes">Memory limit: {{ task.Spec.Resources.Limits.MemoryBytes | humansize: 2:2 }}</div>
+                <div ng-if="task.Spec.Resources.Limits.MemoryBytes">Memory limit: {{ task.Spec.Resources.Limits.MemoryBytes | humansize : 2 : 2 }}</div>
                 <div ng-if="task.Spec.Resources.Limits.NanoCPUs">CPU limit: {{ task.Spec.Resources.Limits.NanoCPUs / 1000000000 }}</div>
               </div>
             </div>
diff --git a/app/docker/views/volumes/edit/volume.html b/app/docker/views/volumes/edit/volume.html
index 2619a3d76..e11b35001 100644
--- a/app/docker/views/volumes/edit/volume.html
+++ b/app/docker/views/volumes/edit/volume.html
@@ -31,7 +31,7 @@
             <tr ng-if="!(volume.Labels | emptyobject)">
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
+                <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in volume.Labels">
                     <td>{{ k }}</td>
                     <td>{{ v }}</td>
diff --git a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html b/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html
index 20c2acbfd..abff507bb 100644
--- a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html
+++ b/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html
@@ -22,7 +22,7 @@
         />
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -58,10 +58,10 @@
               <td>{{ item.GroupName }}</td>
             </tr>
             <tr ng-if="$ctrl.state.loading">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No environment available.</td>
+              <td colspan="5" class="text-muted text-center">No environment available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/components/edge-job-form/edgeJobForm.html b/app/edge/components/edge-job-form/edgeJobForm.html
index 1e10be760..a86357018 100644
--- a/app/edge/components/edge-job-form/edgeJobForm.html
+++ b/app/edge/components/edge-job-form/edgeJobForm.html
@@ -2,7 +2,7 @@
   <div class="col-sm-12 form-section-title"> Edge job configuration </div>
   <!-- name-input -->
   <div class="form-group mt-4">
-    <label for="edgejob_name" class="col-sm-2 control-label text-left required">Name </label>
+    <label for="edgejob_name" class="col-sm-2 control-label required text-left">Name </label>
     <div class="col-sm-10">
       <input
         type="text"
diff --git a/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html b/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
index 4322d1dd1..3313f55bc 100644
--- a/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
+++ b/app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html
@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters nowrap-cells">
+        <table class="table-hover table-filters nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -40,10 +40,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="9" class="text-center text-muted">Loading...</td>
+              <td colspan="9" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="9" class="text-center text-muted">No result available.</td>
+              <td colspan="9" class="text-muted text-center">No result available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html b/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
index 65582f52f..fe1f2ce29 100644
--- a/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
+++ b/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -71,10 +71,10 @@
               <td>{{ item.Created | getisodatefromtimestamp }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No Edge job available.</td>
+              <td colspan="3" class="text-muted text-center">No Edge job available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html b/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
index 69f33d0b9..831910a48 100644
--- a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
+++ b/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
@@ -17,7 +17,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -60,10 +60,10 @@
               <td>{{ $ctrl.endpointStatusError(item.Id) }}</td>
             </tr>
             <tr ng-if="$ctrl.state.loading">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No environment available.</td>
+              <td colspan="5" class="text-muted text-center">No environment available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html b/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
index 21f24c838..61af73451 100644
--- a/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
+++ b/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
@@ -69,7 +69,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="edgeStack-stackTable">
+        <table class="table-hover nowrap-cells table" data-cy="edgeStack-stackTable">
           <thead>
             <tr>
               <th>
@@ -142,10 +142,10 @@
               <td>{{ item.CreationDate | getisodatefromtimestamp }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset" data-cy="edgeStack-loadingRow">
-              <td colspan="6" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0" data-cy="edgeStack-noStackRow">
-              <td colspan="6" class="text-center text-muted"> No stack available. </td>
+              <td colspan="6" class="text-muted text-center"> No stack available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html b/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
index 7bb2d9cf0..942babdce 100644
--- a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
+++ b/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
@@ -24,7 +24,7 @@
     read-only="$ctrl.state.readOnlyCompose"
   ></edge-stack-deployment-type-selector>
 
-  <div class="flex gap-1 text-muted small" ng-show="!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint()">
+  <div class="text-muted small flex gap-1" ng-show="!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint()">
     <pr-icon icon="'alert-circle'" mode="'warning'" class-name="'!mt-1'"></pr-icon>
     <div>
       <p>
diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html
index f01bdac88..4837d3093 100644
--- a/app/edge/components/group-form/groupForm.html
+++ b/app/edge/components/group-form/groupForm.html
@@ -1,6 +1,6 @@
 <form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.formAction()">
   <div class="form-group">
-    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left required"> Name </label>
+    <label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left"> Name </label>
     <div class="col-sm-9 col-lg-10">
       <input
         type="text"
diff --git a/app/edge/components/groups-datatable/groupsDatatable.html b/app/edge/components/groups-datatable/groupsDatatable.html
index 38d9b18f7..e904abf2c 100644
--- a/app/edge/components/groups-datatable/groupsDatatable.html
+++ b/app/edge/components/groups-datatable/groupsDatatable.html
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="edgeGroup-edgeGroupTable">
+        <table class="table-hover nowrap-cells table" data-cy="edgeGroup-edgeGroupTable">
           <thead>
             <tr>
               <th class="flex">
@@ -90,10 +90,10 @@
               <td>{{ item.Dynamic ? 'Dynamic' : 'Static' }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-center text-muted">Loading...</td>
+              <td colspan="4" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-center text-muted"> No Edge group available. </td>
+              <td colspan="4" class="text-muted text-center"> No Edge group available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
index 96c86d0d9..1929f6fea 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
@@ -7,7 +7,7 @@
         <form class="form-horizontal" name="$ctrl.form">
           <!-- name-input -->
           <div class="form-group">
-            <label for="stack_name" class="col-sm-1 control-label text-left required"> Name </label>
+            <label for="stack_name" class="col-sm-1 control-label required text-left"> Name </label>
             <div class="col-sm-11">
               <input
                 type="text"
diff --git a/app/index.html b/app/index.html
index 3ccb4b0eb..f80e9dda0 100644
--- a/app/index.html
+++ b/app/index.html
@@ -53,7 +53,7 @@
         <div class="page-content">
           <div class="page-wrapper" ng-if="applicationState.loading">
             <!-- loading box -->
-            <div class="container simple-box">
+            <div class="simple-box container">
               <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
                 <!-- loading box logo -->
                 <div class="row">
@@ -75,7 +75,7 @@
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    class="inline animate-spin-slow !ml-1"
+                    class="!ml-1 inline animate-spin-slow"
                   >
                     <circle cx="12" cy="12" r="3"></circle>
                     <path
diff --git a/app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html b/app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html
index 4c293f09e..522560f91 100644
--- a/app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html
+++ b/app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html
@@ -57,7 +57,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="k8sAppDetail-containerTable">
+        <table class="table-hover nowrap-cells table" data-cy="k8sAppDetail-containerTable">
           <thead>
             <tr>
               <th ng-if="!$ctrl.isPod">
@@ -142,7 +142,7 @@
             >
               <td ng-if="!$ctrl.isPod">{{ item.PodName }}</td>
               <td>{{ item.Name }}</td>
-              <td title="{{ item.Image }}">{{ item.Image | truncate: 64 }}</td>
+              <td title="{{ item.Image }}">{{ item.Image | truncate : 64 }}</td>
               <td>{{ item.ImagePullPolicy }}</td>
               <td
                 ><span class="label label-{{ item.Status | kubernetesPodStatusColor }}">{{ item.Status }}</span></td
@@ -178,10 +178,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="7" class="text-center text-muted">Loading...</td>
+              <td colspan="7" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="7" class="text-center text-muted">No pod available.</td>
+              <td colspan="7" class="text-muted text-center">No pod available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.html b/app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.html
index d6aa0db70..f56be4059 100644
--- a/app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.html
+++ b/app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.html
@@ -1,4 +1,4 @@
-<div class="col-xs-12 text-[13px] !px-0 !py-1"> Secrets </div>
+<div class="col-xs-12 !px-0 !py-1 text-[13px]"> Secrets </div>
 <table style="width: 50%">
   <tbody>
     <tr>
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
index 99d999bff..7e75312f8 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <!-- toolbar header actions and settings -->
   <div ng-if="$ctrl.isPrimary" class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="'box'"></pr-icon>
@@ -21,11 +21,11 @@
           data-cy="k8sApp-searchApplicationsInput"
         />
       </div>
-      <div class="actionBar !gap-3 !mr-0">
+      <div class="actionBar !mr-0 !gap-3">
         <button
           ng-if="$ctrl.isPrimary"
           type="button"
-          class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+          class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
           ng-disabled="$ctrl.state.selectedItemCount === 0"
           ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
           data-cy="k8sApp-removeAppButton"
@@ -36,7 +36,7 @@
         <button
           ng-if="$ctrl.isPrimary"
           type="button"
-          class="btn btn-sm btn-secondary h-fit vertical-center !ml-0"
+          class="btn btn-sm btn-secondary vertical-center !ml-0 h-fit"
           ui-sref="kubernetes.applications.new"
           data-cy="k8sApp-addApplicationButton"
         >
@@ -45,7 +45,7 @@
         <button
           ng-if="$ctrl.isPrimary"
           type="button"
-          class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+          class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
           ui-sref="kubernetes.deploy"
           data-cy="k8sApp-deployFromManifestButton"
         >
@@ -105,8 +105,8 @@
         </span>
       </div>
     </div>
-    <div class="flex flex-row w-full" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
-      <span class="small text-muted mt-1 vertical-center">
+    <div class="flex w-full flex-row" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+      <span class="small text-muted vertical-center mt-1">
         <pr-icon icon="'info'" mode="'primary'" class="vertical-center"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
@@ -114,16 +114,16 @@
   </div>
   <!-- data table content -->
   <div ng-class="{ 'table-responsive': $ctrl.isPrimary, 'inner-datatable': !$ctrl.isPrimary }">
-    <table class="table table-hover table-filters nowrap-cells" data-cy="k8sApp-appTable">
+    <table class="table-hover table-filters nowrap-cells table" data-cy="k8sApp-appTable">
       <thead ng-class="{ 'secondary-heading': !$ctrl.isPrimary }">
         <tr role="row">
           <th role="columnheader" class="datatable-wide dropdown">
-            <div ng-if="$ctrl.isPrimary" class="flex no-wrap min-w-max">
+            <div ng-if="$ctrl.isPrimary" class="no-wrap flex min-w-max">
               <span class="md-checkbox vertical-center">
                 <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="k8sApp-selectAllCheckbox" />
                 <label for="select_all"></label>
               </span>
-              <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
+              <div class="vertical-center cursor-pointer" ng-click="$ctrl.expandAll()">
                 <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
                 <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
               </div>
@@ -166,7 +166,7 @@
             ></table-column-header>
           </th>
           <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
-            <div class="flex flex-row no-wrap gap-2">
+            <div class="no-wrap flex flex-row gap-2">
               <table-column-header
                 col-title="'Application Type'"
                 can-sort="true"
@@ -174,7 +174,7 @@
                 is-sorted-desc="$ctrl.state.orderBy === 'ApplicationType' && $ctrl.state.reverseOrder"
                 ng-click="$ctrl.changeOrderBy('ApplicationType')"
               ></table-column-header>
-              <div class="flex flex-row no-wrap gap-1 items-center" uib-dropdown-toggle>
+              <div class="no-wrap flex flex-row items-center gap-1" uib-dropdown-toggle>
                 <span class="table-filter">Filters</span>
                 <pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'"></pr-icon>
                 <pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'"></pr-icon>
@@ -260,7 +260,7 @@
             <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool })" ng-click="$event.stopPropagation()">{{ item.ResourcePool }}</a>
           </td>
           <td title="{{ item.Image }}"
-            >{{ item.Image | truncate: 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
+            >{{ item.Image | truncate : 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
           >
           <td>{{ item.ApplicationType | kubernetesApplicationTypeText }}</td>
           <td ng-if="item.ApplicationType !== $ctrl.KubernetesApplicationTypes.POD">
@@ -308,10 +308,10 @@
           </td>
         </tr>
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="8" class="text-center text-muted">Loading...</td>
+          <td colspan="8" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="8" class="text-center text-muted">No application available.</td>
+          <td colspan="8" class="text-muted text-center">No application available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
index 9b0cdf04c..0974a6928 100644
--- a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <!-- table title and action menu -->
   <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
       <!-- title -->
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
@@ -76,8 +76,8 @@
       </div>
     </div>
     <!-- info text -->
-    <div class="flex flex-row w-full">
-      <span class="small text-muted mt-1 vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+    <div class="flex w-full flex-row">
+      <span class="small text-muted vertical-center mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
         <pr-icon icon="'info'" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
@@ -85,11 +85,11 @@
   </div>
   <!-- table -->
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
           <th>
-            <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" class="flex no-wrap min-w-max">
+            <div class="vertical-center cursor-pointer" ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" class="no-wrap flex min-w-max">
               <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" class-name="'icon'"></pr-icon>
               <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" class-name="'icon'"></pr-icon>
             </div>
@@ -252,11 +252,11 @@
         <tr class="!h-0" dir-paginate-end></tr>
         <!-- no dataset -->
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="6" class="text-center text-muted">Loading...</td>
+          <td colspan="6" class="text-muted text-center">Loading...</td>
         </tr>
         <!-- no values in filtered dataset -->
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="6" class="text-center text-muted">No application port mapping available.</td>
+          <td colspan="6" class="text-muted text-center">No application port mapping available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
index cd2a3a125..7731d16d0 100644
--- a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
+++ b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <!-- table title and action menu -->
   <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
       <!-- title -->
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
@@ -22,10 +22,10 @@
           ng-model-options="{ debounce: 300 }"
         />
       </div>
-      <div class="actionBar !gap-3 !mr-0">
+      <div class="actionBar !mr-0 !gap-3">
         <button
           type="button"
-          class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+          class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
           ng-disabled="$ctrl.state.selectedItemCount === 0"
           ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
           data-cy="k8sApp-removeStackButton"
@@ -88,19 +88,19 @@
       </div>
     </div>
     <!-- info text -->
-    <div class="flex flex-row w-full">
-      <span class="small text-muted mt-1 vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+    <div class="flex w-full flex-row">
+      <span class="small text-muted vertical-center mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
         <pr-icon icon="'info'" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
     </div>
   </div>
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
-          <th class="w-20 dropdown">
-            <div class="flex no-wrap h-full items-center">
+          <th class="dropdown w-20">
+            <div class="no-wrap flex h-full items-center">
               <span class="md-checkbox">
                 <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                 <label for="select_all"></label>
@@ -151,7 +151,7 @@
           pagination-id="$ctrl.tableKey"
         >
           <td>
-            <div class="flex no-wrap items-center">
+            <div class="no-wrap flex items-center">
               <span class="md-checkbox">
                 <input
                   id="select_{{ $index }}"
@@ -198,10 +198,10 @@
           </td>
         </tr>
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="5" class="text-center text-muted">Loading...</td>
+          <td colspan="5" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="5" class="text-center text-muted">No stack available.</td>
+          <td colspan="5" class="text-muted text-center">No stack available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html b/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html
index 166fb954f..494a42e15 100644
--- a/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html
+++ b/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html
@@ -3,14 +3,14 @@
     <rd-widget-body classes="no-padding">
       <!-- table title and action menu -->
       <div class="toolBar !flex-col gap-1">
-        <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !px-0 !py-1 w-full">
+        <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !px-0 !py-1">
           <div class="toolBarTitle">
             <div class="widget-icon space-right">
               <pr-icon icon="'lock'"></pr-icon>
             </div>
             ConfigMaps & Secrets
           </div>
-          <div class="searchBar vertical-center w-72 !mr-0">
+          <div class="searchBar vertical-center !mr-0 w-72">
             <pr-icon icon="'search'" class-name="'icon !h-3'"></pr-icon>
             <input
               type="text"
@@ -24,20 +24,20 @@
             />
           </div>
           <!-- actions -->
-          <div class="actionBar !gap-3 !mr-0">
+          <div class="actionBar !mr-0 !gap-3">
             <button
               type="button"
-              class="btn btn-sm btn-dangerlight !ml-0 vertical-center"
+              class="btn btn-sm btn-dangerlight vertical-center !ml-0"
               ng-disabled="$ctrl.state.selectedItemCount === 0"
               ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
               data-cy="k8sConfig-removeConfigButton"
             >
               <pr-icon icon="'trash-2'"></pr-icon>Remove
             </button>
-            <button type="button" class="btn btn-sm btn-secondary !ml-0 vertical-center" ui-sref="kubernetes.configurations.new" data-cy="k8sConfig-addConfigWithFormButton">
+            <button type="button" class="btn btn-sm btn-secondary vertical-center !ml-0" ui-sref="kubernetes.configurations.new" data-cy="k8sConfig-addConfigWithFormButton">
               <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Add with form
             </button>
-            <button type="button" class="btn btn-sm btn-primary !ml-0 vertical-center" ui-sref="kubernetes.deploy" data-cy="k8sConfig-deployFromManifestButton">
+            <button type="button" class="btn btn-sm btn-primary vertical-center !ml-0" ui-sref="kubernetes.deploy" data-cy="k8sConfig-deployFromManifestButton">
               <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Create from manifest
             </button>
           </div>
@@ -88,15 +88,15 @@
             </span>
           </div>
         </div>
-        <div ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem" class="flex flex-row w-full">
-          <span class="small text-muted mt-1 vertical-center">
+        <div ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem" class="flex w-full flex-row">
+          <span class="small text-muted vertical-center mt-1">
             <pr-icon icon="'info'" mode="'primary'" class="vertical-center"></pr-icon>
             <div> System resources are hidden, this can be changed in the table settings. </div>
           </span>
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="k8sConfig-tableSettingsButtonconfigsTable">
+        <table class="table-hover nowrap-cells table" data-cy="k8sConfig-tableSettingsButtonconfigsTable">
           <thead>
             <tr>
               <th>
@@ -164,10 +164,10 @@
               <td>{{ item.CreationDate | getisodate }} {{ item.ConfigurationOwner ? 'by ' + item.ConfigurationOwner : '' }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-center text-muted">Loading...</td>
+              <td colspan="4" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-center text-muted">No configuration available.</td>
+              <td colspan="4" class="text-muted text-center">No configuration available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
index e7cb7fb4f..008111d98 100644
--- a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
@@ -55,7 +55,7 @@
     </div>
   </div>
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells" data-cy="k8sConfigDetail-eventsTable">
+    <table class="table-hover nowrap-cells table" data-cy="k8sConfigDetail-eventsTable">
       <thead>
         <tr>
           <th>
@@ -109,10 +109,10 @@
           <td>{{ item.Message }}</td>
         </tr>
         <tr ng-if="$ctrl.loading">
-          <td colspan="4" class="text-center text-muted">Loading...</td>
+          <td colspan="4" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
-          <td colspan="4" class="text-center text-muted">No event available.</td>
+          <td colspan="4" class="text-muted text-center">No event available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html b/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
index 484753bef..4f757f8f0 100644
--- a/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
+++ b/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
@@ -58,7 +58,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -98,13 +98,13 @@
                 ><a ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })">{{ item.Name }}</a></td
               >
               <td>{{ item.StackName || '-' }}</td>
-              <td title="{{ item.Image }}">{{ item.Image | truncate: 64 }}</td>
+              <td title="{{ item.Image }}">{{ item.Image | truncate : 64 }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No application available.</td>
+              <td colspan="3" class="text-muted text-center">No application available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html b/app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html
index 64b82baba..5cb84ca33 100644
--- a/app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html
+++ b/app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html
@@ -58,7 +58,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -131,16 +131,16 @@
                 <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool })">{{ item.ResourcePool }}</a>
               </td>
               <td title="{{ item.Image }}"
-                >{{ item.Image | truncate: 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
+                >{{ item.Image | truncate : 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
               >
               <td>{{ item.CPU | kubernetesApplicationCPUValue }}</td>
               <td>{{ item.Memory | humansize }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="6" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="6" class="text-center text-muted">No stack available.</td>
+              <td colspan="6" class="text-muted text-center">No stack available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html b/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
index d6e1cb042..ae41716a5 100644
--- a/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
@@ -65,7 +65,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -159,10 +159,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="7" class="text-center text-muted">Loading...</td>
+              <td colspan="7" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="7" class="text-center text-muted">No node available.</td>
+              <td colspan="7" class="text-muted text-center">No node available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html b/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
index aa676af62..7afee2b44 100644
--- a/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
+++ b/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
@@ -56,7 +56,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -116,16 +116,16 @@
               </td>
               <td>{{ item.StackName || '-' }}</td>
               <td title="{{ item.Image }}"
-                >{{ item.Image | truncate: 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
+                >{{ item.Image | truncate : 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
               >
               <td>{{ item.CPU | kubernetesApplicationCPUValue }}</td>
               <td>{{ item.Memory | humansize }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No application available.</td>
+              <td colspan="5" class="text-muted text-center">No application available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
index 47fb48d6b..cd3b03151 100644
--- a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
+++ b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
@@ -3,7 +3,7 @@
     <rd-widget-body classes="no-padding">
       <!-- toolbar header actions and settings -->
       <div class="toolBar !flex-col gap-1">
-        <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+        <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
           <div class="toolBarTitle vertical-center">
             <div class="widget-icon space-right">
               <pr-icon icon="'layers'"></pr-icon>
@@ -23,10 +23,10 @@
               data-cy="k8sNamespace-namespaceSearchInput"
             />
           </div>
-          <div class="actionBar !gap-3 !mr-0" ng-if="$ctrl.isAdmin">
+          <div class="actionBar !mr-0 !gap-3" ng-if="$ctrl.isAdmin">
             <button
               type="button"
-              class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+              class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
               ng-disabled="$ctrl.state.selectedItemCount === 0"
               ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
               data-cy="k8sNamespace-removeNamespaceButton"
@@ -82,8 +82,8 @@
           </div>
         </div>
 
-        <div class="flex flex-row w-full" ng-if="!$ctrl.settings.showSystem && $ctrl.isAdmin">
-          <span class="small text-muted mt-1 vertical-center">
+        <div class="flex w-full flex-row" ng-if="!$ctrl.settings.showSystem && $ctrl.isAdmin">
+          <span class="small text-muted vertical-center mt-1">
             <pr-icon icon="'info'" mode="'primary'" class="vertical-center"></pr-icon>
             <div> System resources are hidden, this can be changed in the table settings. </div>
           </span>
@@ -91,11 +91,11 @@
       </div>
 
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th class="dropdown">
-                <div class="flex flex-nowrap min-w-max vertical-center">
+                <div class="vertical-center flex min-w-max flex-nowrap">
                   <span ng-if="$ctrl.isAdmin" class="md-checkbox vertical-center">
                     <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                     <label for="select_all"></label>
@@ -171,10 +171,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-center text-muted">Loading...</td>
+              <td colspan="4" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-center text-muted">No namespace available.</td>
+              <td colspan="4" class="text-muted text-center">No namespace available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html b/app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html
index 6aae6afa6..7a02b8a67 100644
--- a/app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <!-- toolbar header actions and settings -->
   <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="'database'"></pr-icon>
@@ -20,7 +20,7 @@
           ng-model-options="{ debounce: 300 }"
         />
       </div>
-      <div class="actionBar !gap-3 !mr-0">
+      <div class="actionBar !mr-0 !gap-3">
         <button
           type="button"
           class="btn btn-sm btn-dangerlight vertical-center !ml-0"
@@ -84,19 +84,19 @@
         </span>
       </div>
     </div>
-    <div class="flex flex-row w-full" ng-if="!ctrl.isAdmin && !$ctrl.settings.showSystem">
-      <span class="small text-muted mt-1 vertical-center">
+    <div class="flex w-full flex-row" ng-if="!ctrl.isAdmin && !$ctrl.settings.showSystem">
+      <span class="small text-muted vertical-center mt-1">
         <pr-icon icon="'info'" mode="'primary'"></pr-icon>
         <span> System resources are hidden, this can be changed in the table settings. </span>
       </span>
     </div>
   </div>
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
           <th>
-            <div class="flex flex-no-wrap items-center">
+            <div class="flex-no-wrap flex items-center">
               <span class="md-checkbox vertical-center">
                 <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                 <label for="select_all"></label>
@@ -194,10 +194,10 @@
           </td>
         </tr>
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="6" class="text-center text-muted">Loading...</td>
+          <td colspan="6" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="6" class="text-center text-muted">No volume available.</td>
+          <td colspan="6" class="text-muted text-center">No volume available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
index aa1ce8bb6..95f192662 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
+      <div class="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="$ctrl.titleIcon"></pr-icon>
@@ -42,11 +42,11 @@
           on-select="($ctrl.selectAction)"
         >
         </helm-templates-list-item>
-        <div ng-if="$ctrl.loading" class="text-center text-muted">
+        <div ng-if="$ctrl.loading" class="text-muted text-center">
           Loading...
-          <div class="text-center text-muted"> Initial download of Helm Charts can take a few minutes </div>
+          <div class="text-muted text-center"> Initial download of Helm Charts can take a few minutes </div>
         </div>
-        <div ng-if="!$ctrl.loading && $ctrl.charts.length === 0" class="text-center text-muted"> No helm charts available. </div>
+        <div ng-if="!$ctrl.loading && $ctrl.charts.length === 0" class="text-muted text-center"> No helm charts available. </div>
       </div>
     </rd-widget-body>
   </rd-widget>
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.html b/app/kubernetes/components/helm/helm-templates/helm-templates.html
index 75899f961..14a37244b 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates.html
@@ -3,7 +3,7 @@
 <information-panel title-text="Information" ng-if="!$ctrl.state.chart">
   <span class="small text-muted">
     <p class="inline-flex flex-row items-center">
-      <pr-icon icon="'info'" class="mr-1 vertical-center" mode="'primary'"></pr-icon>
+      <pr-icon icon="'info'" class="vertical-center mr-1" mode="'primary'"></pr-icon>
       This is a first version for Helm charts, for more information see this&nbsp;<a
         class="hyperlink"
         href="https://www.portainer.io/blog/portainer-now-with-helm-support"
@@ -23,7 +23,7 @@
   <!-- helmchart-form -->
   <div class="col-sm-12" ng-if="$ctrl.state.chart">
     <rd-widget>
-      <div class="toolBarTitle vertical-center pt-5 px-5 text-muted">
+      <div class="toolBarTitle vertical-center text-muted px-5 pt-5">
         <fallback-image src="$ctrl.state.chart.icon" fallback-icon="'svg-helm'" class-name="'h-8 w-8'" size="'lg'"></fallback-image>
         {{ $ctrl.state.chart.name }}
       </div>
@@ -34,7 +34,7 @@
             <div class="col-sm-12 form-section-title"> Description </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <div class="text-xs text-muted" ng-bind-html="$ctrl.state.chart.description"></div>
+                <div class="text-muted text-xs" ng-bind-html="$ctrl.state.chart.description"></div>
               </div>
             </div>
           </div>
@@ -63,7 +63,7 @@
           <!-- !namespace-input -->
           <!-- name-input -->
           <div class="form-group mb-2">
-            <label for="release_name" class="col-sm-2 control-label text-left required">Name</label>
+            <label for="release_name" class="col-sm-2 control-label required text-left">Name</label>
             <div class="col-sm-10">
               <input
                 type="text"
diff --git a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
index d3dc60df3..dba01aa73 100644
--- a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
+++ b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html
@@ -1,12 +1,12 @@
 <ng-form name="serviceForm">
   <div ng-if="$ctrl.isAdmin()" class="small" ng-show="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
-    <p class="text-warning pt-2 vertical-center">
+    <p class="text-warning vertical-center pt-2">
       <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> No Load balancer is available in this cluster, click
       <a class="hyperlink" ui-sref="kubernetes.cluster.setup">here</a> to configure load balancer.
     </p>
   </div>
   <div ng-if="!$ctrl.isAdmin()" class="small" ng-show="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
-    <p class="text-warning pt-2 vertical-center">
+    <p class="text-warning vertical-center pt-2">
       <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> No Load balancer is available in this cluster, contact your administrator.
     </p>
   </div>
@@ -18,14 +18,14 @@
       $ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.NODE_PORT
     "
   >
-    <div ng-show="!$ctrl.multiItemDisable" class="mt-5 mb-5 vertical-center">
-      <label class="control-label text-left !pt-0">Published ports</label>
-      <span class="label label-default interactive ml-2.5 vertical-center" ng-click="$ctrl.addPort()" data-cy="k8sAppCreate-addNewPortButton">
+    <div ng-show="!$ctrl.multiItemDisable" class="vertical-center mt-5 mb-5">
+      <label class="control-label !pt-0 text-left">Published ports</label>
+      <span class="label label-default interactive vertical-center ml-2.5" ng-click="$ctrl.addPort()" data-cy="k8sAppCreate-addNewPortButton">
         <pr-icon icon="'plus'" mode="'alt'" size="'sm'"></pr-icon> publish a new port
       </span>
     </div>
-    <div ng-repeat="servicePort in $ctrl.service.Ports" class="mt-5 service-form row">
-      <div class="form-group !mx-0 !pl-0 col-sm-3">
+    <div ng-repeat="servicePort in $ctrl.service.Ports" class="service-form row mt-5">
+      <div class="form-group col-sm-3 !mx-0 !pl-0">
         <div class="input-group input-group-sm">
           <span class="input-group-addon required">Container port</span>
           <input
@@ -46,10 +46,10 @@
           />
         </div>
         <span>
-          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.targetPort.refs[$index] !== undefined">
+          <div class="small text-warning mt-1" ng-if="$ctrl.state.duplicates.targetPort.refs[$index] !== undefined">
             <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This container port is already used.
           </div>
-          <div class="small mt-1 text-warning" ng-messages="serviceForm['container_port_'+$index].$error">
+          <div class="small text-warning mt-1" ng-messages="serviceForm['container_port_'+$index].$error">
             <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Container port number is required.</p>
             <p class="vertical-center" ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Container port number must be inside the range 1-65535.</p>
             <p class="vertical-center" ng-message="max"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Container port number must be inside the range 1-65535.</p>
@@ -57,7 +57,7 @@
         </span>
       </div>
 
-      <div class="form-group !mx-0 !pl-0 col-sm-3">
+      <div class="form-group col-sm-3 !mx-0 !pl-0">
         <div class="input-group input-group-sm">
           <span class="input-group-addon required">Service port</span>
           <input
@@ -77,10 +77,10 @@
           />
         </div>
         <span>
-          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.servicePort.refs[$index] !== undefined">
+          <div class="small text-warning mt-1" ng-if="$ctrl.state.duplicates.servicePort.refs[$index] !== undefined">
             <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This service port is already used.
           </div>
-          <div class="small mt-1 text-warning">
+          <div class="small text-warning mt-1">
             <div ng-messages="serviceForm['service_port_'+$index].$error">
               <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Service port number is required.</p>
               <p class="vertical-center" ng-message="min"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Service port number must be inside the range 1-65535.</p>
@@ -90,7 +90,7 @@
         </span>
       </div>
 
-      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.NODE_PORT">
+      <div class="form-group col-sm-3 !mx-0 !pl-0" ng-if="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.NODE_PORT">
         <div class="input-group input-group-sm">
           <span class="input-group-addon required">Nodeport</span>
           <input
@@ -110,7 +110,7 @@
         </div>
         <div class="w-full">
           <span>
-            <div class="small mt-1 text-warning">
+            <div class="small text-warning mt-1">
               <div ng-messages="serviceForm['node_port_'+$index].$error">
                 <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Nodeport is required.</p>
                 <p class="vertical-center" ng-message="min"
@@ -119,7 +119,7 @@
                 <p class="vertical-center" ng-message="max"
                   ><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Nodeport number must be inside the range 30000-32767 or blank for system allocated.</p
                 >
-                <div class="mt-1 text-warning" ng-if="$ctrl.state.duplicates.nodePort.refs[$index] !== undefined">
+                <div class="text-warning mt-1" ng-if="$ctrl.state.duplicates.nodePort.refs[$index] !== undefined">
                   <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This node port is already used.
                 </div>
               </div>
@@ -127,7 +127,7 @@
           </span>
         </div>
       </div>
-      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER">
+      <div class="form-group col-sm-3 !mx-0 !pl-0" ng-if="$ctrl.service.Type === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER">
         <div class="input-group input-group-sm">
           <span class="input-group-addon">Loadbalancer port</span>
           <input
@@ -147,7 +147,7 @@
         </div>
       </div>
 
-      <div class="form-group !mx-0 !pl-0 col-sm-3">
+      <div class="form-group col-sm-3 !mx-0 !pl-0">
         <div class="input-group input-group-sm">
           <div class="btn-group btn-group-sm">
             <label
diff --git a/app/kubernetes/components/kube-services/kube-services.html b/app/kubernetes/components/kube-services/kube-services.html
index 9ddea5f3c..fc872e63d 100644
--- a/app/kubernetes/components/kube-services/kube-services.html
+++ b/app/kubernetes/components/kube-services/kube-services.html
@@ -67,13 +67,13 @@
         Ingress
       </div>
       <div ng-if="$ctrl.isAdmin()" class="small">
-        <p class="text-warning pt-2 vertical-center">
+        <p class="text-warning vertical-center pt-2">
           <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Ingress is not configured in this namespace, select another namespace or click
           <a ui-sref="kubernetes.cluster.setup">here</a> to configure ingress.
         </p>
       </div>
       <div ng-if="!$ctrl.isAdmin()" class="small">
-        <p class="text-warning pt-2 vertical-center">
+        <p class="text-warning vertical-center pt-2">
           <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Ingress is not configured in this namespace, select another namespace or contact your administrator.
         </p>
       </div>
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 4b2a38316..12d6253f6 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -3,10 +3,10 @@
 
   <div class="form-group" ng-if="$ctrl.isCreation">
     <div class="col-sm-12">
-      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
+      <button type="button" class="btn btn-link btn-sm !ml-0 p-0 hover:no-underline" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
         <pr-icon icon="'list'"></pr-icon> Advanced mode
       </button>
-      <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
+      <button type="button" class="btn btn-link btn-sm !ml-0 p-0 hover:no-underline" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
         <pr-icon icon="'edit'"></pr-icon> Simple mode
       </button>
     </div>
@@ -61,7 +61,7 @@
 
   <div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
     <div class="form-group">
-      <label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left required"
+      <label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label required text-left"
         >Key
         <portainer-tooltip message="'The key must consist of alphanumeric characters, \'-\', \'_\' or \'.\' and be up to 253 characters in length.'"></portainer-tooltip>
       </label>
@@ -103,7 +103,7 @@
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
-      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left required">Value</label>
+      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label required text-left">Value</label>
       <div class="col-sm-8 col-lg-9">
         <textarea
           class="form-control"
@@ -123,7 +123,7 @@
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary">
-      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left required">Value</label>
+      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label required text-left">Value</label>
       <div class="col-sm-8 control-label small text-muted text-left"
         >Binary data <portainer-tooltip message="'This key holds binary data and cannot be displayed.'"></portainer-tooltip
       ></div>
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 76870608c..c5044ab27 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -119,7 +119,7 @@
                 on-change="(ctrl.onChangeFileContent)"
               >
                 <editor-description>
-                  <div class="flex gap-1 text-muted small" ng-show="ctrl.stack.IsComposeFormat">
+                  <div class="text-muted small flex gap-1" ng-show="ctrl.stack.IsComposeFormat">
                     <pr-icon icon="'alert-circle'" mode="'warning'" class-name="'!mt-1'"></pr-icon>
                     <div>
                       <p>
@@ -154,7 +154,7 @@
                 <div class="col-sm-12 form-section-title"> Application </div>
                 <!-- #region NAME FIELD -->
                 <div class="form-group">
-                  <label for="application_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+                  <label for="application_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
                   <div class="col-sm-8">
                     <input
                       type="text"
@@ -245,7 +245,7 @@
                   <!-- #region ENVIRONMENT VARIABLES -->
                   <div class="form-group">
                     <div class="col-sm-12 vertical-center pt-2.5">
-                      <label class="control-label text-left !pt-0">Environment variables</label>
+                      <label class="control-label !pt-0 text-left">Environment variables</label>
                       <span
                         ng-if="ctrl.formValues.Containers.length <= 1"
                         class="label label-default interactive vertical-center"
@@ -350,7 +350,7 @@
                   <!-- #region CONFIGURATIONS -->
                   <div class="form-group">
                     <div class="col-sm-12 vertical-center pt-2.5">
-                      <label class="control-label text-left !pt-0">Configurations</label>
+                      <label class="control-label !pt-0 text-left">Configurations</label>
                       <span
                         class="label label-default interactive vertical-center"
                         style="margin-left: 10px"
@@ -507,7 +507,7 @@
 
                   <div class="form-group" ng-if="ctrl.storageClassAvailable()">
                     <div class="col-sm-12 vertical-center pt-2.5" style="margin-top: 5px" ng-if="!ctrl.allQuotasExhaustedAndNoVolumesAvailable()">
-                      <label class="control-label text-left !pt-0">Persisted folders</label>
+                      <label class="control-label !pt-0 text-left">Persisted folders</label>
                       <span
                         class="label label-default interactive vertical-center"
                         style="margin-left: 10px"
@@ -585,9 +585,9 @@
                             ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1"
                             ng-change="ctrl.onChangeVolumeRequestedSize()"
                           />
-                          <span class="input-group-addon !p-0 !rounded-r-[5px]">
+                          <span class="input-group-addon !rounded-r-[5px] !p-0">
                             <select
-                              class="form-control w-12 !h-[28px] !border-none !rounded-r-[5px] text-xs"
+                              class="form-control !h-[28px] w-12 !rounded-r-[5px] !border-none text-xs"
                               ng-model="persistedFolder.SizeUnit"
                               ng-style="{ height: '100%', cursor: ctrl.isEditAndExistingPersistedFolder($index) ? 'not-allowed' : 'auto' }"
                               ng-options="unit for unit in ctrl.state.availableSizeUnits"
@@ -775,7 +775,7 @@
                       (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                     "
                   >
-                    <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left flex flex-row items-center">
+                    <label for="memory-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                       Memory limit (MB)
                       <portainer-tooltip
                         message="'An instance of this application will reserve this amount of memory. If the instance memory usage exceeds the reservation, it might be subject to OOM.'"
@@ -818,7 +818,7 @@
                       (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                     "
                   >
-                    <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left flex flex-row items-center">
+                    <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                       CPU limit
                       <portainer-tooltip
                         message="'An instance of this application will reserve this amount of CPU. If the instance CPU usage exceeds the reservation, it might be subject to CPU throttling.'"
@@ -956,7 +956,7 @@
                   <div class="form-inline" ng-if="ctrl.formValues.DeploymentType !== ctrl.ApplicationDeploymentTypes.GLOBAL && ctrl.formValues.AutoScaler.IsUsed">
                     <div class="row">
                       <div class="col-sm-4 pl-0">
-                        <label class="control-label text-left pb-2" for="auto_scaler_min">Minimum instances</label>
+                        <label class="control-label pb-2 text-left" for="auto_scaler_min">Minimum instances</label>
                         <div class="input-group input-group-sm" style="width: 100%">
                           <input
                             type="number"
@@ -984,7 +984,7 @@
                         </span>
                       </div>
                       <div class="col-sm-4 pl-0">
-                        <label class="control-label text-left pb-2" for="auto_scaler_max">Maximum instances</label>
+                        <label class="control-label pb-2 text-left" for="auto_scaler_max">Maximum instances</label>
                         <div class="input-group input-group-sm" style="width: 100%">
                           <input
                             type="number"
@@ -1006,7 +1006,7 @@
                         </span>
                       </div>
                       <div class="col-sm-4 pl-0">
-                        <label class="control-label text-left pb-2" for="auto_scaler_cpu">
+                        <label class="control-label pb-2 text-left" for="auto_scaler_cpu">
                           Target CPU usage (<b>%</b>)
                           <portainer-tooltip message="'The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.'">
                           </portainer-tooltip>
@@ -1054,7 +1054,7 @@
                     <!-- #region PLACEMENTS -->
                     <div class="form-group">
                       <div class="col-sm-12 vertical-center pt-2.5">
-                        <label class="control-label text-left !pt-0">Placement rules</label>
+                        <label class="control-label !pt-0 text-left">Placement rules</label>
                         <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="ctrl.addPlacement()">
                           <pr-icon icon="'plus'" mode="'alt'" size="'sm'"></pr-icon> add rule
                         </span>
diff --git a/app/kubernetes/views/applications/edit/application.html b/app/kubernetes/views/applications/edit/application.html
index c8e49803f..4e2b21c70 100644
--- a/app/kubernetes/views/applications/edit/application.html
+++ b/app/kubernetes/views/applications/edit/application.html
@@ -79,7 +79,7 @@
                     <tr>
                       <td>Creation</td>
                       <td>
-                        <span ng-if="ctrl.application.ApplicationOwner" class="mr-1 vertical-center" data-cy="k8sAppDetail-owner">
+                        <span ng-if="ctrl.application.ApplicationOwner" class="vertical-center mr-1" data-cy="k8sAppDetail-owner">
                           <pr-icon icon="'user'"></pr-icon> {{ ctrl.application.ApplicationOwner }}
                         </span>
                         <span class="vertical-center"> <pr-icon icon="'clock'" mode="'alt'"></pr-icon> {{ ctrl.application.CreationDate | getisodate }} </span>
diff --git a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
index 1517b56a9..3ef0d33ef 100644
--- a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
+++ b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
@@ -56,7 +56,7 @@
     </div>
   </div>
   <div class="table-responsive border-none">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
           <th style="width: 2%">
@@ -155,17 +155,17 @@
           <td></td>
           <td>
             <code ng-repeat-start="term in aff track by $index">
-              {{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue: term.operator }}
+              {{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue : term.operator }}
             </code>
             <span ng-repeat-end>{{ $last ? '' : ' + ' }}</span>
           </td>
         </tr>
         <!-- ! ADMIN + UNMET NODE AFFINITIES -->
         <tr ng-if="$ctrl.loading">
-          <td colspan="2" class="text-center text-muted">Loading...</td>
+          <td colspan="2" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
-          <td colspan="2" class="text-center text-muted">No node available.</td>
+          <td colspan="2" class="text-muted text-center">No node available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/kubernetes/views/applications/helm/helm.html b/app/kubernetes/views/applications/helm/helm.html
index 21ca65b2d..d8e019f86 100644
--- a/app/kubernetes/views/applications/helm/helm.html
+++ b/app/kubernetes/views/applications/helm/helm.html
@@ -11,7 +11,7 @@
   <div class="row">
     <div class="col-sm-12">
       <rd-widget>
-        <div class="toolBar vertical-center !gap-x-5 !gap-y-1 p-5 flex-wrap w-full">
+        <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 p-5">
           <div class="toolBarTitle vertical-center">
             <div class="widget-icon space-right">
               <pr-icon icon="'svg-helm'"></pr-icon>
@@ -20,7 +20,7 @@
             Release
           </div>
         </div>
-        <div class="toolBarTitle text-muted small vertical-center px-5 !gap-0">
+        <div class="toolBarTitle text-muted small vertical-center !gap-0 px-5">
           <pr-icon icon="'info'" mode="'primary'" class-name="'!mr-1'" class="vertical-center"></pr-icon>
           This is a first version for Helm charts, for more information see this&nbsp;
           <a href="https://www.portainer.io/blog/portainer-now-with-helm-support" target="_blank" class="hyperlink">blog post</a>.
diff --git a/app/kubernetes/views/applications/stats/stats.html b/app/kubernetes/views/applications/stats/stats.html
index fd2dcc8fe..01b47510c 100644
--- a/app/kubernetes/views/applications/stats/stats.html
+++ b/app/kubernetes/views/applications/stats/stats.html
@@ -37,7 +37,7 @@
   <div class="row" ng-if="ctrl.state.getMetrics">
     <div class="col-md-12">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'info'"></pr-icon>
@@ -84,7 +84,7 @@
   <div class="row" ng-if="ctrl.state.getMetrics">
     <div class="col-lg-6 col-md-12 col-sm-12">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'svg-memory'"></pr-icon>
@@ -101,7 +101,7 @@
     </div>
     <div class="col-lg-6 col-md-12 col-sm-12" ng-if="!ctrl.state.networkStatsUnavailable">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'cpu'"></pr-icon>
diff --git a/app/kubernetes/views/cluster/node/node.html b/app/kubernetes/views/cluster/node/node.html
index d96741715..8a2e34e19 100644
--- a/app/kubernetes/views/cluster/node/node.html
+++ b/app/kubernetes/views/cluster/node/node.html
@@ -135,7 +135,7 @@
                         <span class="label label-info image-tag" ng-if="ctrl.isSystemLabel($index)" style="margin-left: 5px">system</span>
                       </div>
                     </div>
-                    <div class="small mt-2 text-warning" ng-show="kubernetesNodeUpdateForm['label_key_' + $index].$invalid || ctrl.state.duplicateLabelKeys[$index] !== undefined">
+                    <div class="small text-warning mt-2" ng-show="kubernetesNodeUpdateForm['label_key_' + $index].$invalid || ctrl.state.duplicateLabelKeys[$index] !== undefined">
                       <ng-messages for="kubernetesNodeUpdateForm['label_key_' + $index].$error">
                         <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Label key is required. </p>
                       </ng-messages>
diff --git a/app/kubernetes/views/cluster/node/stats/stats.html b/app/kubernetes/views/cluster/node/stats/stats.html
index e90e24efc..92bda8a04 100644
--- a/app/kubernetes/views/cluster/node/stats/stats.html
+++ b/app/kubernetes/views/cluster/node/stats/stats.html
@@ -25,7 +25,7 @@
   <div class="row" ng-if="ctrl.state.getMetrics">
     <div class="col-md-12">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'info'"></pr-icon>
@@ -64,7 +64,7 @@
   <div class="row" ng-show="ctrl.state.getMetrics">
     <div class="col-lg-6 col-md-12 col-sm-12">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'svg-memory'"></pr-icon>
@@ -81,7 +81,7 @@
     </div>
     <div class="col-lg-6 col-md-12 col-sm-12">
       <rd-widget>
-        <div class="toolBar pt-5 px-5">
+        <div class="toolBar px-5 pt-5">
           <div class="toolBarTitle flex">
             <div class="widget-icon space-right">
               <pr-icon icon="'cpu'"></pr-icon>
diff --git a/app/kubernetes/views/configurations/create/createConfiguration.html b/app/kubernetes/views/configurations/create/createConfiguration.html
index 1c7950657..4e19f6e79 100644
--- a/app/kubernetes/views/configurations/create/createConfiguration.html
+++ b/app/kubernetes/views/configurations/create/createConfiguration.html
@@ -15,7 +15,7 @@
           <form class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off">
             <!-- name -->
             <div class="form-group mb-0">
-              <label for="configuration_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+              <label for="configuration_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
               <div class="col-sm-8 col-lg-9 mb-0">
                 <input
                   type="text"
@@ -143,7 +143,7 @@
                   </div>
                 </div>
                 <div class="form-group" ng-if="ctrl.formValues.Type === ctrl.KubernetesSecretTypeOptions.CUSTOM.value">
-                  <label for="configuration_data_customtype" class="col-sm-3 col-lg-2 control-label text-left required">Custom Type</label>
+                  <label for="configuration_data_customtype" class="col-sm-3 col-lg-2 control-label required text-left">Custom Type</label>
                   <div class="col-sm-8 col-lg-9">
                     <input
                       type="text"
@@ -168,7 +168,7 @@
                   </div>
                 </div>
                 <div class="form-group" ng-if="ctrl.formValues.Type === ctrl.KubernetesSecretTypeOptions.SERVICEACCOUNTTOKEN.value">
-                  <label for="service_account" class="col-sm-3 col-lg-2 control-label text-left required">Service Account</label>
+                  <label for="service_account" class="col-sm-3 col-lg-2 control-label required text-left">Service Account</label>
                   <div class="col-sm-8 col-lg-9">
                     <select
                       class="form-control"
diff --git a/app/kubernetes/views/configurations/edit/configuration.html b/app/kubernetes/views/configurations/edit/configuration.html
index d83b29116..ecf7657b9 100644
--- a/app/kubernetes/views/configurations/edit/configuration.html
+++ b/app/kubernetes/views/configurations/edit/configuration.html
@@ -32,7 +32,7 @@
                 <table class="table" data-cy="k8sConfigDetail-configTable">
                   <tbody>
                     <tr>
-                      <td class="!pl-0 !border-none w-[40%]">Name</td>
+                      <td class="w-[40%] !border-none !pl-0">Name</td>
                       <td class="!border-none">
                         {{ ctrl.configuration.Name }}
                         <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
@@ -87,7 +87,7 @@
                 <pr-icon icon="'code'"></pr-icon>
                 YAML
               </uib-tab-heading>
-              <div class="!pt-5 px-5" ng-if="ctrl.state.showEditorTab">
+              <div class="px-5 !pt-5" ng-if="ctrl.state.showEditorTab">
                 <kubernetes-yaml-inspector key="configuration-yaml" data="ctrl.configuration.Yaml"> </kubernetes-yaml-inspector>
               </div>
             </uib-tab>
diff --git a/app/kubernetes/views/configure/configure.html b/app/kubernetes/views/configure/configure.html
index fe3471405..b259f46bd 100644
--- a/app/kubernetes/views/configure/configure.html
+++ b/app/kubernetes/views/configure/configure.html
@@ -27,14 +27,14 @@
             <div class="form-group">
               <div class="col-sm-12 text-muted small">
                 <p> Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider. </p>
-                <p class="mt-1 vertical-center">
+                <p class="vertical-center mt-1">
                   <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
                   Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
                 </p>
               </div>
 
               <div class="col-sm-12">
-                <label class="control-label text-left col-sm-5 col-lg-4 px-0"> Allow users to use external load balancer </label>
+                <label class="control-label col-sm-5 col-lg-4 px-0 text-left"> Allow users to use external load balancer </label>
                 <label class="switch col-sm-8 mb-0">
                   <input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><span class="slider round" data-cy="kubeSetup-loadBalancerToggle"></span>
                 </label>
@@ -51,11 +51,11 @@
               view="'cluster'"
             ></ingress-class-datatable>
 
-            <label htmlFor="foldingButtonIngControllerSettings" class="col-sm-12 form-section-title cursor-pointer flex items-center">
+            <label htmlFor="foldingButtonIngControllerSettings" class="col-sm-12 form-section-title flex cursor-pointer items-center">
               <button
                 id="foldingButtonIngControllerSettings"
                 type="button"
-                class="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2 !ml-0"
+                class="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
                 ng-click="ctrl.toggleAdvancedIngSettings()"
               >
                 <pr-icon ng-if="!ctrl.state.isIngToggleSectionExpanded" icon="'chevron-right'"></pr-icon>
@@ -120,7 +120,7 @@
 
             <div
               ng-if="!ctrl.isRBACEnabled"
-              class="mt-1 mb-6 p-4 w-full border border-solid bg-warning-2 border-warning-5 text-warning-8 th-dark:bg-yellow-11 th-dark:text-white th-highcontrast:bg-yellow-11 th-highcontrast:text-white small flex gap-1 rounded-lg"
+              class="small mt-1 mb-6 flex w-full gap-1 rounded-lg border border-solid border-warning-5 bg-warning-2 p-4 text-warning-8 th-highcontrast:bg-yellow-11 th-highcontrast:text-white th-dark:bg-yellow-11 th-dark:text-white"
             >
               <div class="mt-0.5">
                 <pr-icon icon="'alert-triangle'" feather="true" class-name="'text-warning-7 th-dark:text-white th-highcontrast:text-white'"></pr-icon>
@@ -130,13 +130,13 @@
                 <p> This means you can't use Portainer RBAC functionality to regulate access to environment resources based on user roles. </p>
                 <p class="mb-0">
                   To enable RBAC, start the&nbsp;<a
-                    class="th-dark:text-blue-7 th-highcontrast:text-blue-4"
+                    class="th-highcontrast:text-blue-4 th-dark:text-blue-7"
                     href="https://kubernetes.io/docs/concepts/overview/components/#kube-apiserver"
                     target="_blank"
                     >API server</a
-                  >&nbsp;with the&nbsp;<code class="box-decoration-clone bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">--authorization-mode</code>&nbsp;flag set to a
-                  comma-separated list that includes&nbsp;<code class="bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">RBAC</code>, for example:&nbsp;
-                  <code class="box-decoration-clone bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
+                  >&nbsp;with the&nbsp;<code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">--authorization-mode</code>&nbsp;flag set to a
+                  comma-separated list that includes&nbsp;<code class="bg-gray-4 th-highcontrast:bg-black th-dark:bg-black">RBAC</code>, for example:&nbsp;
+                  <code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
                 </p>
               </div>
             </div>
@@ -185,7 +185,7 @@
                   By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
                   deployment failures if there is insufficient resource to service demand.
                 </p>
-                <p class="mt-1 vertical-center">
+                <p class="vertical-center mt-1">
                   <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
                   By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
                   minus any system resource reservation.
@@ -218,7 +218,7 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <label class="control-label text-left col-sm-5 col-lg-4 px-0"> Enable features using the metrics API </label>
+                <label class="control-label col-sm-5 col-lg-4 px-0 text-left"> Enable features using the metrics API </label>
                 <label class="switch col-sm-8">
                   <input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" ng-change="ctrl.enableMetricsServer()" />
                   <span class="slider round" data-cy="kubeSetup-metricsToggle"></span>
@@ -275,7 +275,7 @@
                     </tr>
                     <tr ng-repeat="class in ctrl.StorageClasses">
                       <td>
-                        <div class="flex flex-row items-center h-full">
+                        <div class="flex h-full flex-row items-center">
                           <label class="switch mr-2 mb-0">
                             <input type="checkbox" ng-model="class.selected" /><span class="slider round" data-cy="kubeSetup-storageToggle{{ class.Name }}"></span>
                           </label>
@@ -291,7 +291,7 @@
                         ></storage-access-mode-selector>
                       </td>
                       <td>
-                        <div class="flex flex-row items-center h-full">
+                        <div class="flex h-full flex-row items-center">
                           <label class="switch mr-2 mb-0"
                             ><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><span
                               class="slider round"
diff --git a/app/kubernetes/views/dashboard/dashboard.html b/app/kubernetes/views/dashboard/dashboard.html
index 6bb6c78c4..a076c70a3 100644
--- a/app/kubernetes/views/dashboard/dashboard.html
+++ b/app/kubernetes/views/dashboard/dashboard.html
@@ -18,13 +18,13 @@
           <table class="table">
             <tbody>
               <tr>
-                <td class="!pl-0 !border-none">Environment</td>
+                <td class="!border-none !pl-0">Environment</td>
                 <td class="!border-none">
                   {{ ctrl.endpoint.Name }}
                 </td>
               </tr>
               <tr ng-if="ctrl.showEnvUrl">
-                <td class="!pl-0 !border-t">URL</td>
+                <td class="!border-t !pl-0">URL</td>
                 <td class="!border-t">{{ ctrl.endpoint.URL | stripprotocol }}</td>
               </tr>
               <tr>
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index efb179586..041745fff 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -48,7 +48,7 @@
                 </div>
 
                 <div class="form-group">
-                  <label for="stack_name" class="col-lg-2 col-sm-3 control-label text-left required">Name</label>
+                  <label for="stack_name" class="col-lg-2 col-sm-3 control-label required text-left">Name</label>
                   <div class="col-sm-8">
                     <input type="text" class="form-control" ng-model="ctrl.formValues.StackName" id="stack_name" placeholder="my-app" auto-focus />
                   </div>
@@ -139,7 +139,7 @@
                     <span class="col-sm-12 text-muted small"> Indicate the URL to the manifest. </span>
                   </div>
                   <div class="form-group">
-                    <label for="manifest_url" class="col-sm-3 col-lg-2 control-label text-left required">URL</label>
+                    <label for="manifest_url" class="col-sm-3 col-lg-2 control-label required text-left">URL</label>
                     <div class="col-sm-8">
                       <input
                         type="text"
diff --git a/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html b/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
index 778db99dd..693cbf7c3 100644
--- a/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
+++ b/app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
@@ -46,7 +46,7 @@
             <div class="form-group">
               <div
                 ng-if="!ctrl.isRBACEnabled"
-                class="mb-6 mx-[15px] p-4 border border-solid bg-warning-2 border-warning-5 text-warning-8 th-dark:bg-yellow-11 th-dark:text-white th-highcontrast:bg-yellow-11 th-highcontrast:text-white small flex gap-1 rounded-lg"
+                class="small mx-[15px] mb-6 flex gap-1 rounded-lg border border-solid border-warning-5 bg-warning-2 p-4 text-warning-8 th-highcontrast:bg-yellow-11 th-highcontrast:text-white th-dark:bg-yellow-11 th-dark:text-white"
               >
                 <div class="mt-0.5">
                   <pr-icon icon="'alert-triangle'" feather="true" class-name="'text-warning-7 th-dark:text-white th-highcontrast:text-white'"></pr-icon>
@@ -56,13 +56,13 @@
                   <p> This means you can't use Portainer RBAC functionality to regulate access to environment resources based on user roles. </p>
                   <p class="mb-0">
                     To enable RBAC, start the&nbsp;<a
-                      class="th-dark:text-blue-7 th-highcontrast:text-blue-4"
+                      class="th-highcontrast:text-blue-4 th-dark:text-blue-7"
                       href="https://kubernetes.io/docs/concepts/overview/components/#kube-apiserver"
                       target="_blank"
                       >API server</a
-                    >&nbsp;with the&nbsp;<code class="box-decoration-clone bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">--authorization-mode</code>&nbsp;flag set to a
-                    comma-separated list that includes&nbsp;<code class="bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">RBAC</code>, for example:&nbsp;
-                    <code class="box-decoration-clone bg-gray-4 th-dark:bg-black th-highcontrast:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
+                    >&nbsp;with the&nbsp;<code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">--authorization-mode</code>&nbsp;flag set to a
+                    comma-separated list that includes&nbsp;<code class="bg-gray-4 th-highcontrast:bg-black th-dark:bg-black">RBAC</code>, for example:&nbsp;
+                    <code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
                   </p>
                 </div>
               </div>
@@ -95,7 +95,7 @@
               <div class="col-sm-12">
                 <button
                   type="submit"
-                  class="btn btn-primary btn-sm !ml-0 vertical-center"
+                  class="btn btn-primary btn-sm vertical-center !ml-0"
                   ng-disabled="ctrl.formValues.multiselectOutput.length === 0 || ctrl.actionInProgress"
                   ng-click="ctrl.authorizeAccess()"
                   button-spinner="ctrl.actionInProgress"
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index a911c4133..f7773967e 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -15,7 +15,7 @@
           <form class="form-horizontal" autocomplete="off" name="resourcePoolCreationForm">
             <!-- #region NAME INPUT -->
             <div class="form-group">
-              <label for="pool_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+              <label for="pool_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
               <div class="col-sm-8">
                 <input
                   type="text"
@@ -89,7 +89,7 @@
                 </div>
 
                 <!-- memory-limit-input -->
-                <div class="form-group flex flex-row !mb-0">
+                <div class="form-group !mb-0 flex flex-row">
                   <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left"> Memory limit (MB) </label>
                   <div class="col-xs-6">
                     <por-slider
@@ -117,7 +117,7 @@
                     />
                   </div>
                 </div>
-                <div class="flex flex-row w-full">
+                <div class="flex w-full flex-row">
                   <span class="col-sm-3 col-lg-2"></span>
                   <span class="help-block col-sm-9 col-lg-10">
                     <div ng-show="resourcePoolCreationForm.memory_limit.$invalid">
@@ -205,7 +205,7 @@
             </div>
 
             <div class="form-group">
-              <label class="col-sm-3 col-lg-2 control-label text-left !pt-0" for="registries-selector"> Select registries </label>
+              <label class="col-sm-3 col-lg-2 control-label !pt-0 text-left" for="registries-selector"> Select registries </label>
               <div class="col-sm-8 col-lg-9">
                 <span class="small text-muted" ng-if="!$ctrl.registries.length && $ctrl.state.isAdmin">
                   No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
diff --git a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
index 2cc0d2715..84db9d3f8 100644
--- a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
+++ b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
@@ -57,11 +57,11 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th ng-if="$ctrl.hasExpandableItems()" class="datatable-wide dropdown">
-                <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
+                <div class="vertical-center cursor-pointer" ng-click="$ctrl.expandAll()">
                   <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
                   <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
                 </div>
@@ -111,10 +111,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-center text-muted">Loading...</td>
+              <td colspan="4" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-center text-muted">No ingresses available.</td>
+              <td colspan="4" class="text-muted text-center">No ingresses available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index 13edf2e75..dde251d99 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -78,7 +78,7 @@
                     </div>
                     <!-- memory-limit-input -->
                     <div class="form-group flex">
-                      <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory limit (MB) </label>
+                      <label for="memory-limit" class="col-sm-3 col-lg-2 control-label vertical-center text-left"> Memory limit (MB) </label>
                       <div class="col-sm-6">
                         <por-slider
                           min="ctrl.ResourceQuotaDefaults.MemoryLimit"
@@ -197,7 +197,7 @@
                       </div>
                     </div>
                     <div class="form-group">
-                      <label class="col-sm-3 col-lg-2 control-label text-left !pt-0" for="registries-selector"> Select registries </label>
+                      <label class="col-sm-3 col-lg-2 control-label !pt-0 text-left" for="registries-selector"> Select registries </label>
                       <div class="col-sm-9 col-lg-4">
                         <span class="small text-muted" ng-if="!ctrl.registries.length && ctrl.isAdmin">
                           No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
diff --git a/app/kubernetes/views/stacks/logs/logs.html b/app/kubernetes/views/stacks/logs/logs.html
index d5fb69e61..9d744d1cb 100644
--- a/app/kubernetes/views/stacks/logs/logs.html
+++ b/app/kubernetes/views/stacks/logs/logs.html
@@ -23,7 +23,7 @@ ctrl.state.transition.name,
             <div class="col-sm-12 form-section-title"> Actions </div>
             <!-- auto-refresh -->
             <div class="form-group">
-              <label class="control-label text-left col-sm-3 col-lg-2 vertical-center !py-2">
+              <label class="control-label col-sm-3 col-lg-2 vertical-center !py-2 text-left">
                 Auto-refresh
                 <portainer-tooltip message="'Automatically refresh logs every 30 seconds'"></portainer-tooltip>
               </label>
@@ -54,7 +54,7 @@ ctrl.state.transition.name,
             <!-- actions -->
             <div class="form-group">
               <div class="col-sm-12">
-                <button class="btn btn-primary btn-sm !ml-0 vertical-center" type="button" ng-click="ctrl.downloadLogs()">
+                <button class="btn btn-primary btn-sm vertical-center !ml-0" type="button" ng-click="ctrl.downloadLogs()">
                   <pr-icon icon="'download'"></pr-icon>
                   Download logs
                 </button>
diff --git a/app/kubernetes/views/summary/summary.html b/app/kubernetes/views/summary/summary.html
index 15393c9ec..06d6209ce 100644
--- a/app/kubernetes/views/summary/summary.html
+++ b/app/kubernetes/views/summary/summary.html
@@ -1,5 +1,5 @@
-<div class="flex justify-start items-center form-section-title interactive" ng-click="$ctrl.toggleSummary()" ng-if="$ctrl.state.resources.length > 0">
-  <pr-icon icon="$ctrl.state.expandedTemplate ? 'chevron-down' : 'chevron-right'" class="!mr-1 vertical-center"></pr-icon>
+<div class="form-section-title interactive flex items-center justify-start" ng-click="$ctrl.toggleSummary()" ng-if="$ctrl.state.resources.length > 0">
+  <pr-icon icon="$ctrl.state.expandedTemplate ? 'chevron-down' : 'chevron-right'" class="vertical-center !mr-1"></pr-icon>
   Summary
 </div>
 
diff --git a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
index 086ed9c63..1e9db8de7 100644
--- a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
+++ b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <!-- toolbar header actions and settings -->
   <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
+    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="'hard-drive'"></pr-icon>
@@ -59,11 +59,11 @@
     </div>
   </div>
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
           <th class="datatable-wide dropdown" ng-if="$ctrl.hasExpandableItems()">
-            <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
+            <div class="vertical-center cursor-pointer" ng-click="$ctrl.expandAll()">
               <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
               <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
             </div>
@@ -121,10 +121,10 @@
           </td>
         </tr>
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="5" class="text-center text-muted">Loading...</td>
+          <td colspan="5" class="text-muted text-center">Loading...</td>
         </tr>
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="5" class="text-center text-muted">No storage available.</td>
+          <td colspan="5" class="text-muted text-center">No storage available.</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
index 5d94ed49d..4637e8b3f 100644
--- a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
+++ b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
@@ -1,4 +1,4 @@
-<a class="ml-5 vertical-center be-indicator" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
+<a class="vertical-center be-indicator ml-5" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
   <ng-transclude></ng-transclude>
   <pr-icon icon="'briefcase'" class-name="'space-right be-indicator-icon'"></pr-icon>
   <span class="be-indicator-label">Business Edition Feature</span>
diff --git a/app/portainer/components/access-datatable/accessDatatable.html b/app/portainer/components/access-datatable/accessDatatable.html
index 25b580a79..c27ac60ff 100644
--- a/app/portainer/components/access-datatable/accessDatatable.html
+++ b/app/portainer/components/access-datatable/accessDatatable.html
@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div class="mx-4 mb-4 small text-muted">
+      <div class="small text-muted mx-4 mb-4">
         <div class="" ng-if="$ctrl.inheritFrom">
           Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
         </div>
@@ -40,7 +40,7 @@
       </div>
 
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -86,10 +86,10 @@
               <td>{{ item.Type }}</td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-center text-muted">Loading...</td>
+              <td colspan="4" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-center text-muted">No authorized users or teams.</td>
+              <td colspan="4" class="text-muted text-center">No authorized users or teams.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/access-table/accessTable.html b/app/portainer/components/access-table/accessTable.html
index c1f5d5fd4..640b9b80a 100644
--- a/app/portainer/components/access-table/accessTable.html
+++ b/app/portainer/components/access-table/accessTable.html
@@ -1,5 +1,5 @@
 <div class="datatable">
-  <table class="table table-hover">
+  <table class="table-hover table">
     <div class="col-sm-12">
       <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
       <input
@@ -47,15 +47,15 @@
         </td>
       </tr>
       <tr ng-if="!$ctrl.dataset">
-        <td colspan="2" class="text-center text-muted">Loading...</td>
+        <td colspan="2" class="text-muted text-center">Loading...</td>
       </tr>
       <tr
         ng-if="
           $ctrl.dataset.length === 0 ||
-          ($ctrl.dataset | filter: $ctrl.state.textFilter | orderBy: $ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit).length === 0
+          ($ctrl.dataset | filter : $ctrl.state.textFilter | orderBy : $ctrl.state.orderBy : $ctrl.state.reverseOrder | itemsPerPage : $ctrl.state.paginatedItemLimit).length === 0
         "
       >
-        <td colspan="2" class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
+        <td colspan="2" class="text-muted text-center">{{ $ctrl.emptyDatasetMessage }}</td>
       </tr>
     </tbody>
   </table>
diff --git a/app/portainer/components/accessControlForm/porAccessControlForm.html b/app/portainer/components/accessControlForm/porAccessControlForm.html
index 9d518313f..8a73a8121 100644
--- a/app/portainer/components/accessControlForm/porAccessControlForm.html
+++ b/app/portainer/components/accessControlForm/porAccessControlForm.html
@@ -31,8 +31,8 @@
     class="form-group mt-4"
     ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && ($ctrl.isAdmin || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1))"
   >
-    <div class="w-full vertical-center">
-      <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !pt-0">
+    <div class="vertical-center w-full">
+      <label for="group-access" class="control-label col-sm-3 col-lg-2 !pt-0 text-left">
         Authorized teams
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length > 0"
@@ -62,8 +62,8 @@
   <!-- !authorized-teams -->
   <!-- authorized-users -->
   <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && $ctrl.isAdmin">
-    <div class="w-full vertical-center">
-      <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !pt-0">
+    <div class="vertical-center w-full">
+      <label for="group-access" class="control-label col-sm-3 col-lg-2 !pt-0 text-left">
         Authorized users
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableUsers.length > 0"
diff --git a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
index 30410c333..f9561dd02 100644
--- a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
+++ b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
@@ -1,7 +1,7 @@
 <ng-form name="commonCustomTemplateForm">
   <!-- title-input -->
   <div class="form-group mb-0">
-    <label for="template_title" class="col-sm-3 col-lg-2 control-label text-left required"> Title </label>
+    <label for="template_title" class="col-sm-3 col-lg-2 control-label required text-left"> Title </label>
     <div class="col-sm-8">
       <input
         type="text"
@@ -16,7 +16,7 @@
       />
       <span class="help-block">
         <div ng-show="commonCustomTemplateForm.template_title.$invalid">
-          <div class="mt-2 small text-warning">
+          <div class="small text-warning mt-2">
             <div ng-messages="commonCustomTemplateForm.template_title.$error">
               <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Title is required. </p>
               <p class="vertical-center" ng-message="pattern">
@@ -33,11 +33,11 @@
 
   <!-- description-input -->
   <div class="form-group mb-0">
-    <label for="description" class="col-sm-3 col-lg-2 control-label text-left required">Description</label>
+    <label for="description" class="col-sm-3 col-lg-2 control-label required text-left">Description</label>
     <div class="col-sm-8">
       <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
       <span class="help-block">
-        <div class="mt-2 small text-warning">
+        <div class="small text-warning mt-2">
           <div ng-show="commonCustomTemplateForm.description.$invalid">
             <div ng-messages="commonCustomTemplateForm.description.$error">
               <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Description is required.</p>
diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html
index 1cc41b4d8..a43864243 100644
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+      <div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="$ctrl.titleIcon"></pr-icon>
@@ -28,7 +28,7 @@
         </div>
       </div>
 
-      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
+      <div class="blocklist gap-y-2 !px-[20px] !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter"
           model="template"
@@ -48,8 +48,8 @@
             </div>
           </template-item-actions>
         </template-item>
-        <div ng-if="!$ctrl.templates" class="text-center text-muted"> Loading... </div>
-        <div ng-if="($ctrl.templates | filter: $ctrl.state.textFilter).length === 0" class="text-center text-muted"> No templates available. </div>
+        <div ng-if="!$ctrl.templates" class="text-muted text-center"> Loading... </div>
+        <div ng-if="($ctrl.templates | filter : $ctrl.state.textFilter).length === 0" class="text-muted text-center"> No templates available. </div>
       </div>
     </rd-widget-body>
   </rd-widget>
diff --git a/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html b/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
index 364fde997..a02511b37 100644
--- a/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
+++ b/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -107,7 +107,7 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
index 827b34b43..fab2526d0 100644
--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@@ -40,7 +40,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="endpoint-endpointTable">
+        <table class="table-hover nowrap-cells table" data-cy="endpoint-endpointTable">
           <thead>
             <tr>
               <th>
@@ -122,10 +122,10 @@
               </td>
             </tr>
             <tr ng-if="$ctrl.state.loading">
-              <td colspan="5" class="text-center text-muted">Loading...</td>
+              <td colspan="5" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No environment available.</td>
+              <td colspan="5" class="text-muted text-center">No environment available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
index 75d2096a5..841e58f12 100644
--- a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
+++ b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="endpointGroup-endpointGroupTable">
+        <table class="table-hover nowrap-cells table" data-cy="endpointGroup-endpointGroupTable">
           <thead>
             <tr>
               <th>
@@ -83,10 +83,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No group available.</td>
+              <td colspan="3" class="text-muted text-center">No group available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index f06b0d142..f5c5ba9f3 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -25,20 +25,20 @@
           <button
             ng-if="!$ctrl.endpointType"
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="registry-removeRegistryButton"
           >
             <pr-icon icon="'trash-2'"></pr-icon>Remove
           </button>
-          <button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
+          <button type="button" class="btn btn-sm btn-primary vertical-center !ml-0 h-fit" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
             <pr-icon icon="'plus'"></pr-icon>Add registry
           </button>
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -103,7 +103,7 @@
               <td>
                 <button
                   type="button"
-                  class="btn btn-link hover:no-underline !ml-0 px-0 vertical-center"
+                  class="btn btn-link vertical-center !ml-0 px-0 hover:no-underline"
                   ng-if="$ctrl.canManageAccess(item)"
                   ng-click="$ctrl.redirectToManageAccess(item)"
                 >
@@ -117,7 +117,7 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
index 61b52d224..b30adf85d 100644
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding" ng-if="$ctrl.createEnabled">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+      <div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="'layers'"></pr-icon>
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" authorization="PortainerStackCreate, PortainerStackDelete">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             authorization="PortainerStackDelete"
             ng-disabled="!$ctrl.createEnabled || $ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
@@ -35,7 +35,7 @@
           <button
             ng-disabled="!$ctrl.createEnabled"
             type="button"
-            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
             ui-sref="docker.stacks.newstack"
             authorization="PortainerStackCreate"
             data-cy="stack-addStackButton"
@@ -87,11 +87,11 @@
       </div>
 
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="stack-stackTable">
+        <table class="table-hover nowrap-cells table" data-cy="stack-stackTable">
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
-                <div class="flex flex-row flex-no-wrap gap-1">
+                <div class="flex-no-wrap flex flex-row gap-1">
                   <span class="md-checkbox" authorization="PortainerStackCreate, PortainerStackDelete">
                     <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                     <label for="select_all"></label>
@@ -228,10 +228,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset" data-cy="stacks-loadingTableRow">
-              <td colspan="6" class="text-center text-muted">Loading...</td>
+              <td colspan="6" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0" data-cy="stacks-noStackTableRow">
-              <td colspan="6" class="text-center text-muted">No stack available.</td>
+              <td colspan="6" class="text-muted text-center">No stack available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/strings-datatable/strings-datatable.html b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
index 258b40d24..ca723b4e4 100644
--- a/app/portainer/components/datatables/strings-datatable/strings-datatable.html
+++ b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
@@ -1,6 +1,6 @@
 <div class="datatable">
   <rd-widget>
-    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
+    <div class="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="$ctrl.titleIcon"></pr-icon>
@@ -32,7 +32,7 @@
     </div>
     <rd-widget-body classes="no-padding">
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -73,7 +73,7 @@
               </td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
+              <td class="text-muted text-center">{{ $ctrl.emptyDatasetMessage }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
index 28582514c..cc53d049c 100644
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@@ -26,7 +26,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -60,10 +60,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="1" class="text-center text-muted">Loading...</td>
+              <td colspan="1" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="1" class="text-center text-muted">No tag available.</td>
+              <td colspan="1" class="text-muted text-center">No tag available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/datatables/users-datatable/usersDatatable.html b/app/portainer/components/datatables/users-datatable/usersDatatable.html
index 4f535c9e9..c29461894 100644
--- a/app/portainer/components/datatables/users-datatable/usersDatatable.html
+++ b/app/portainer/components/datatables/users-datatable/usersDatatable.html
@@ -1,7 +1,7 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+      <div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="$ctrl.titleIcon"></pr-icon>
@@ -24,7 +24,7 @@
         <div class="actionBar !gap-3" ng-show="$ctrl.isAdmin">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="user-removeUserButton"
@@ -35,7 +35,7 @@
       </div>
 
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells" data-cy="user-userTable">
+        <table class="table-hover nowrap-cells table" data-cy="user-userTable">
           <thead>
             <tr>
               <th>
@@ -101,10 +101,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No user available.</td>
+              <td colspan="3" class="text-muted text-center">No user available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-panel.html b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
index f42e44386..91b040262 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-panel.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
@@ -15,7 +15,7 @@
 
     <div ng-if="$ctrl.mode == 'advanced'" class="environment-variables-panel--advanced">
       <div class="col-sm-12 text-clickable">
-        <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0 vertical-center" ng-click="$ctrl.switchEnvMode()">
+        <button type="button" class="btn btn-link btn-sm vertical-center !ml-0 p-0 hover:no-underline" ng-click="$ctrl.switchEnvMode()">
           <pr-icon icon="'list'"></pr-icon> Simple mode
         </button>
       </div>
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
index b23aaa53a..0d37767df 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode-item/environment-variables-simple-mode-item.html
@@ -26,7 +26,7 @@
     </div>
   </div>
   <div class="col-sm-6">
-    <div class="w-full env-item-value">
+    <div class="env-item-value w-full">
       <div class="input-group input-group-sm">
         <span class="input-group-addon">value</span>
         <input
diff --git a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
index 007318718..0b2ba3753 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-simple-mode/environment-variables-simple-mode.html
@@ -1,6 +1,6 @@
 <div class="environment-variables-simple-mode">
   <div class="col-sm-12">
-    <button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-click="$ctrl.onSwitchModeClick()"> <pr-icon icon="'edit'"></pr-icon> Advanced mode </button>
+    <button type="button" class="btn btn-link btn-sm !ml-0 p-0 hover:no-underline" ng-click="$ctrl.onSwitchModeClick()"> <pr-icon icon="'edit'"></pr-icon> Advanced mode </button>
   </div>
   <div class="col-sm-12 small text-muted">
     <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
diff --git a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
index 48c8d6f3c..875d56010 100644
--- a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
+++ b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
@@ -17,7 +17,7 @@
 </div>
 <div ng-if="$ctrl.model.RepositoryAuthentication" class="row">
   <div class="form-group">
-    <label for="repository_username" class="col-lg-2 col-sm-3 control-label text-left required"> Username </label>
+    <label for="repository_username" class="col-lg-2 col-sm-3 control-label required text-left"> Username </label>
     <div class="col-sm-8">
       <input
         type="text"
@@ -31,7 +31,7 @@
     </div>
   </div>
   <div class="form-group flex">
-    <label for="repository_password" class="col-lg-2 col-sm-3 control-label text-left !pt-0">
+    <label for="repository_password" class="col-lg-2 col-sm-3 control-label !pt-0 text-left">
       <div class="required"> Personal Access Token </div>
       <portainer-tooltip message="'Provide a personal access token or password'"></portainer-tooltip>
     </label>
diff --git a/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html b/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
index eb8747b87..560427eac 100644
--- a/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
+++ b/app/portainer/components/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
@@ -61,7 +61,7 @@
     </div>
   </div>
   <div class="form-group" ng-if="$ctrl.model.RepositoryAutomaticUpdates && $ctrl.model.RepositoryMechanism === 'Interval'">
-    <label for="repository_fetch_interval" class="col-sm-3 col-lg-2 control-label text-left required">
+    <label for="repository_fetch_interval" class="col-sm-3 col-lg-2 control-label required text-left">
       Fetch interval
       <portainer-tooltip
         message="'Specify how frequently polling occurs using syntax such as, 5m = 5 minutes, 24h = 24 hours, 6h40m = 6 hours and 40 minutes.'"
diff --git a/app/portainer/components/forms/git-form/git-form-compose-path-field/git-form-compose-path-field.html b/app/portainer/components/forms/git-form/git-form-compose-path-field/git-form-compose-path-field.html
index 1635074c0..769e3c525 100644
--- a/app/portainer/components/forms/git-form/git-form-compose-path-field/git-form-compose-path-field.html
+++ b/app/portainer/components/forms/git-form/git-form-compose-path-field/git-form-compose-path-field.html
@@ -12,7 +12,7 @@
     </span>
   </div>
   <div class="form-group">
-    <label for="stack_repository_path" class="col-lg-2 col-sm-3 control-label text-left required">{{ $ctrl.deployMethod == 'compose' ? 'Compose' : 'Manifest' }} path</label>
+    <label for="stack_repository_path" class="col-lg-2 col-sm-3 control-label required text-left">{{ $ctrl.deployMethod == 'compose' ? 'Compose' : 'Manifest' }} path</label>
     <div class="col-sm-8">
       <input
         type="text"
diff --git a/app/portainer/components/forms/git-form/git-form-url-field/git-form-url-field.html b/app/portainer/components/forms/git-form/git-form-url-field/git-form-url-field.html
index 072eee36a..6e4eaeeb6 100644
--- a/app/portainer/components/forms/git-form/git-form-url-field/git-form-url-field.html
+++ b/app/portainer/components/forms/git-form/git-form-url-field/git-form-url-field.html
@@ -2,7 +2,7 @@
   <span class="col-sm-12 text-muted small"> You can use the URL of a git repository. </span>
 </div>
 <div class="form-group">
-  <label for="stack_repository_url" class="col-lg-2 col-sm-3 control-label text-left required">Repository URL</label>
+  <label for="stack_repository_url" class="col-lg-2 col-sm-3 control-label required text-left">Repository URL</label>
   <div class="col-sm-8">
     <input
       type="text"
diff --git a/app/portainer/components/forms/group-form/groupForm.html b/app/portainer/components/forms/group-form/groupForm.html
index 44a50b84e..f9351e1c6 100644
--- a/app/portainer/components/forms/group-form/groupForm.html
+++ b/app/portainer/components/forms/group-form/groupForm.html
@@ -1,7 +1,7 @@
 <form class="form-horizontal" name="endpointGroupForm">
   <!-- name-input -->
   <div class="form-group">
-    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus />
       <div class="help-block" ng-show="endpointGroupForm.group_name.$invalid">
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
index 917cd43ef..dc2dd92cb 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
@@ -11,7 +11,7 @@
 
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
       <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
@@ -81,7 +81,7 @@
   <div ng-if="$ctrl.model.Authentication">
     <!-- aws-access-key -->
     <div class="form-group">
-      <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Access Key</label>
+      <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label required text-left">AWS Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
         <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
@@ -100,7 +100,7 @@
 
     <!-- aws-secret-access-key -->
     <div class="form-group">
-      <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Secret Access Key</label>
+      <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label required text-left">AWS Secret Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_secret_access_key" name="registry_secret_access_key" ng-model="$ctrl.model.Password" required />
         <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_secret_access_key.$invalid">
@@ -119,7 +119,7 @@
 
     <!-- region -->
     <div class="form-group">
-      <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left required">Region</label>
+      <label for="registry_region" class="col-sm-3 col-lg-2 control-label required text-left">Region</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
         <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
diff --git a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
index 64af2b6a0..5d0438f29 100644
--- a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
+++ b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
@@ -2,7 +2,7 @@
   <div class="col-sm-12 form-section-title"> Azure registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
@@ -45,7 +45,7 @@
   <!-- url-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
@@ -63,7 +63,7 @@
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label required text-left">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_password.$invalid">
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
index 9fb06140c..483a57715 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
@@ -9,7 +9,7 @@
   <div class="col-sm-12 form-section-title"> Custom registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-custom-registry" required auto-focus />
       <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
@@ -31,7 +31,7 @@
   <!-- !name-input -->
   <!-- url-input -->
   <div class="form-group">
-    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left required">
+    <label for="registry_url" class="col-sm-3 col-lg-2 control-label required text-left">
       Registry URL
       <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present.'"></portainer-tooltip>
     </label>
@@ -68,7 +68,7 @@
   <div ng-if="$ctrl.model.Authentication">
     <!-- credentials-user -->
     <div class="form-group">
-      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
+      <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
         <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
@@ -86,7 +86,7 @@
     <!-- !credentials-user -->
     <!-- credentials-password -->
     <div class="form-group">
-      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
+      <label for="registry_password" class="col-sm-3 col-lg-2 control-label required text-left">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
         <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_password.$invalid">
diff --git a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
index 4d63e37ce..5e6a64e4d 100644
--- a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
+++ b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
@@ -11,7 +11,7 @@
   <div class="col-sm-12 form-section-title"> DockerHub account details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
       <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
@@ -33,7 +33,7 @@
   <!-- !name-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">DockerHub username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
       <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
@@ -51,7 +51,7 @@
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub access token</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label required text-left">DockerHub access token</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
       <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_password.$invalid">
diff --git a/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html b/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
index 2894e851a..7012a004d 100644
--- a/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
+++ b/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -76,7 +76,7 @@
               </td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No projects available.</td>
+              <td colspan="3" class="text-muted text-center">No projects available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
index 6bc8a7470..fa0fb88f8 100644
--- a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
+++ b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
@@ -11,7 +11,7 @@
   <div class="col-sm-12 form-section-title"> Gitlab registry connection details </div>
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
       <div class="help-block" ng-show="registryFormGitlab.registry_username.$invalid">
@@ -29,7 +29,7 @@
   <!-- !credentials-user -->
   <!-- credentials-pat -->
   <div class="form-group">
-    <label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left required">Personal Access Token </label>
+    <label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label required text-left">Personal Access Token </label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_perso_acc_token" name="registry_perso_acc_token" ng-model="$ctrl.model.Token" required />
       <div class="help-block" ng-show="registryFormGitlab.registry_perso_acc_token.$invalid">
@@ -50,7 +50,7 @@
     <div class="col-sm-12">
       <button
         type="button"
-        class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
+        class="btn btn-link btn-sm !ml-0 p-0 hover:no-underline"
         ng-if="!$ctrl.state.overrideConfiguration"
         ng-click="$ctrl.state.overrideConfiguration = true;"
       >
@@ -59,7 +59,7 @@
       </button>
       <button
         type="button"
-        class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
+        class="btn btn-link btn-sm !ml-0 p-0 hover:no-underline"
         ng-if="$ctrl.state.overrideConfiguration"
         ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()"
       >
@@ -71,7 +71,7 @@
 
   <!-- url-input -->
   <div class="form-group" ng-if="$ctrl.state.overrideConfiguration">
-    <label for="instance_url" class="col-sm-3 col-lg-2 control-label text-left required">
+    <label for="instance_url" class="col-sm-3 col-lg-2 control-label required text-left">
       Instance URL
       <portainer-tooltip message="'URL of Gitlab instance.'"></portainer-tooltip>
     </label>
@@ -92,7 +92,7 @@
   <!-- !url-input -->
   <!-- url-input -->
   <div class="form-group" ng-if="$ctrl.state.overrideConfiguration">
-    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left required">
+    <label for="registry_url" class="col-sm-3 col-lg-2 control-label required text-left">
       Registry URL
       <portainer-tooltip message="'URL of Gitlab registry instance.'"></portainer-tooltip>
     </label>
diff --git a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
index cd4abcd01..2df7e3986 100644
--- a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
+++ b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
@@ -9,7 +9,7 @@
   <div class="col-sm-12 form-section-title"> ProGet registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="proget-registry" required auto-focus />
       <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
@@ -74,7 +74,7 @@
   <div>
     <!-- credentials-user -->
     <div class="form-group">
-      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
+      <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
         <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
@@ -92,7 +92,7 @@
     <!-- !credentials-user -->
     <!-- credentials-password -->
     <div class="form-group">
-      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
+      <label for="registry_password" class="col-sm-3 col-lg-2 control-label required text-left">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
         <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_password.$invalid">
diff --git a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
index 21e72ba37..152fd7d52 100644
--- a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
+++ b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
@@ -2,7 +2,7 @@
   <div class="col-sm-12 form-section-title"> Quay account details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required />
       <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
@@ -24,7 +24,7 @@
   <!-- !name-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
       <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
@@ -42,7 +42,7 @@
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label required text-left">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
       <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_password.$invalid">
@@ -74,7 +74,7 @@
   <div ng-if="$ctrl.model.Quay.useOrganisation">
     <!-- organisation_name -->
     <div class="form-group">
-      <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left required">Organisation name</label>
+      <label for="organisation_name" class="col-sm-3 col-lg-2 control-label required text-left">Organisation name</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
         <div class="help-block" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
diff --git a/app/portainer/components/group-association-table/groupAssociationTable.html b/app/portainer/components/group-association-table/groupAssociationTable.html
index d0089116d..6386fac31 100644
--- a/app/portainer/components/group-association-table/groupAssociationTable.html
+++ b/app/portainer/components/group-association-table/groupAssociationTable.html
@@ -13,7 +13,7 @@
       />
     </div>
   </div>
-  <table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
+  <table class="table-hover table" data-cy="{{ $ctrl.cyValue }}">
     <thead>
       <tr>
         <th> Name </th>
@@ -30,13 +30,13 @@
         pagination-id="$ctrl.tableType"
       >
         <td>
-          {{ item.Name | truncate: 64 }}
+          {{ item.Name | truncate : 64 }}
         </td>
         <td ng-if="$ctrl.showGroups">
-          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
+          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate : 64 }}
         </td>
         <td ng-if="$ctrl.showTags">
-          {{ $ctrl.tagIdsToTagNames(item.TagIds) | arraytostr | truncate: 64 }}
+          {{ $ctrl.tagIdsToTagNames(item.TagIds) | arraytostr | truncate : 64 }}
         </td>
       </tr>
       <tr
@@ -48,21 +48,21 @@
         total-items="$ctrl.paginationState.totalCount"
       >
         <td>
-          {{ item.Name | truncate: 64 }}
+          {{ item.Name | truncate : 64 }}
         </td>
         <td ng-if="$ctrl.showGroups">
-          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
+          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate : 64 }}
         </td>
         <td ng-if="$ctrl.showTags">
-          {{ $ctrl.tagIdsToTagNames(item.TagIds) | truncate: 64 }}
+          {{ $ctrl.tagIdsToTagNames(item.TagIds) | truncate : 64 }}
         </td>
       </tr>
 
       <tr ng-if="!$ctrl.dataset">
-        <td colspan="3" class="text-center text-muted">Loading...</td>
+        <td colspan="3" class="text-muted text-center">Loading...</td>
       </tr>
       <tr ng-if="$ctrl.dataset.length === 0">
-        <td colspan="3" class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
+        <td colspan="3" class="text-muted text-center">{{ $ctrl.emptyDatasetMessage }}</td>
       </tr>
     </tbody>
   </table>
diff --git a/app/portainer/components/template-list/template-item/templateItem.html b/app/portainer/components/template-list/template-item/templateItem.html
index c5c6d183c..3a38ddfdf 100644
--- a/app/portainer/components/template-list/template-item/templateItem.html
+++ b/app/portainer/components/template-list/template-item/templateItem.html
@@ -1,8 +1,8 @@
 <!-- template -->
-<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item !mr-0 !my-0" ng-click="$ctrl.onSelect($ctrl.model)">
+<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item !my-0 !mr-0" ng-click="$ctrl.onSelect($ctrl.model)">
   <div class="blocklist-item-box">
     <!-- template-image -->
-    <div class="vertical-center justify-center min-w-[56px]">
+    <div class="vertical-center min-w-[56px] justify-center">
       <fallback-image src="$ctrl.model.Logo" fallback-icon="'rocket'" class-name="'blocklist-item-logo'" size="'3xl'"></fallback-image>
     </div>
     <!-- !template-image -->
@@ -13,7 +13,7 @@
         <span class="blocklist-item-title">
           {{ $ctrl.model.Title }}
         </span>
-        <div class="inline-flex items-center space-left blocklist-item-subtitle">
+        <div class="space-left blocklist-item-subtitle inline-flex items-center">
           <div ng-if="$ctrl.model.Type != 3" class="vertical-center">
             <pr-icon ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform" icon="'svg-linux'" class="mr-1"></pr-icon>
             <span ng-if="!$ctrl.model.Platform"> &amp; </span>
diff --git a/app/portainer/components/template-list/templateList.html b/app/portainer/components/template-list/templateList.html
index 20be85bc4..023389194 100644
--- a/app/portainer/components/template-list/templateList.html
+++ b/app/portainer/components/template-list/templateList.html
@@ -21,7 +21,7 @@
         />
       </div>
       <div class="actionBar !gap-3" ng-if="$ctrl.showAddAction">
-        <button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="docker.templates.new" data-cy="template-addTemplateButton">
+        <button type="button" class="btn btn-sm btn-primary vertical-center !ml-0 h-fit" ui-sref="docker.templates.new" data-cy="template-addTemplateButton">
           <pr-icon icon="'plus'"></pr-icon>Add template
         </button>
       </div>
@@ -58,7 +58,7 @@
           </div>
         </div>
       </div>
-      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
+      <div class="blocklist gap-y-2 !px-[20px] !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
           model="template"
@@ -69,10 +69,10 @@
             <button ng-click="$event.stopPropagation(); $ctrl.duplicateTemplate(template)" class="btn btn-primary btn-xs"> Copy as Custom </button>
           </template-item-actions>
         </template-item>
-        <div ng-if="!$ctrl.templates" class="text-center text-muted"> Loading... </div>
+        <div ng-if="!$ctrl.templates" class="text-muted text-center"> Loading... </div>
         <div
-          ng-if="($ctrl.templates | filter: $ctrl.filterByTemplateType | filter: $ctrl.filterByCategory | filter: $ctrl.state.textFilter).length === 0"
-          class="text-center text-muted"
+          ng-if="($ctrl.templates | filter : $ctrl.filterByTemplateType | filter : $ctrl.filterByCategory | filter : $ctrl.state.textFilter).length === 0"
+          class="text-muted text-center"
         >
           No templates available.
         </div>
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html
index 068d55559..ae9bde6ef 100644
--- a/app/portainer/components/theme/theme-settings.html
+++ b/app/portainer/components/theme/theme-settings.html
@@ -5,7 +5,7 @@
       <form class="form-horizontal">
         <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
       </form>
-      <p class="mt-2 vertical-center">
+      <p class="vertical-center mt-2">
         <pr-icon icon="'alert-circle'" class-name="'icon-primary'"></pr-icon>
         Dark and High-contrast theme are experimental. Some UI components might not display properly.
       </p>
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
index ebaeba789..1eec17532 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
@@ -22,7 +22,7 @@
     </div>
   </div>
   <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
+    <table class="table-hover nowrap-cells table">
       <thead>
         <tr>
           <th>
@@ -60,10 +60,10 @@
           </td>
         </tr>
         <tr ng-if="!$ctrl.dataset">
-          <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
+          <td colspan="3" class="text-muted text-center">Select a user to show associated access and role</td>
         </tr>
         <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="3" class="text-center text-muted">The selected user does not have access to any environment(s)</td>
+          <td colspan="3" class="text-muted text-center">The selected user does not have access to any environment(s)</td>
         </tr>
       </tbody>
     </table>
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.html b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
index bf8c356f6..688f83cf8 100644
--- a/app/portainer/rbac/components/roles-datatable/roles-datatable.html
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -61,10 +61,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">No role available.</td>
+              <td colspan="3" class="text-muted text-center">No role available.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/services/codeMirrorDialog.css b/app/portainer/services/codeMirrorDialog.css
index 58d3ebd14..64861e77a 100644
--- a/app/portainer/services/codeMirrorDialog.css
+++ b/app/portainer/services/codeMirrorDialog.css
@@ -32,17 +32,17 @@
 
 .CodeMirror-dialog button {
   /* apply styles from btn-default */
-  @apply bg-white border-gray-5 text-gray-9;
-  @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
+  @apply border-gray-5 bg-white text-gray-9;
+  @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10;
   /* dark mode */
-  @apply th-dark:bg-gray-warm-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
-  @apply th-dark:hover:bg-gray-warm-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
+  @apply th-dark:border-gray-warm-7 th-dark:bg-gray-warm-10 th-dark:text-gray-warm-4;
+  @apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-warm-9 th-dark:hover:text-gray-warm-4;
   /* highcontrast mode */
-  @apply th-highcontrast:bg-gray-warm-10 th-highcontrast:border-gray-warm-7 th-highcontrast:text-white;
-  @apply th-highcontrast:hover:bg-gray-warm-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-white;
+  @apply th-highcontrast:border-gray-warm-7 th-highcontrast:bg-gray-warm-10 th-highcontrast:text-white;
+  @apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-warm-9 th-highcontrast:hover:text-white;
 
   @apply font-sans;
-  @apply border-solid	border;
+  @apply border	border-solid;
   font-size: 85%;
   padding: 0px 8px;
   border-radius: 8px;
diff --git a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
index 184ea9007..28cdbfee6 100644
--- a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
+++ b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
@@ -4,8 +4,8 @@
 </div>
 <div class="form-group">
   <div class="col-sm-12 vertical-center">
-    <label for="tls" class="control-label text-left !pt-0"> Automatic user provisioning </label>
-    <label class="switch ml-6 my-0">
+    <label for="tls" class="control-label !pt-0 text-left"> Automatic user provisioning </label>
+    <label class="switch my-0 ml-6">
       <input type="checkbox" ng-model="$ctrl.ngModel" />
       <span class="slider round"></span>
     </label>
diff --git a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
index 26feebabd..e8535ae8f 100644
--- a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
+++ b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left vertical-center">
+  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label vertical-center text-left">
     Connectivity check
     <pr-icon icon="'check'" mode="'success'" ng-if="$ctrl.state.successfulConnectivityCheck"></pr-icon>
     <pr-icon icon="'x'" mode="'danger'" ng-if="$ctrl.state.failedConnectivityCheck"></pr-icon>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index 6106b9d02..7a32b3723 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
@@ -95,7 +95,7 @@
     >
       Fetch Admin Group(s)
     </button>
-    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-6 vertical-center">
+    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="vertical-center ml-6">
       <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
       No groups found
     </span>
@@ -104,10 +104,10 @@
 
 <div class="form-group">
   <div class="col-sm-12 vertical-center">
-    <label for="admin-auto-populate" class="control-label text-left text-muted !pt-0" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
+    <label for="admin-auto-populate" class="control-label text-muted !pt-0 text-left" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
       Assign admin rights to group(s)
     </label>
-    <label class="switch ml-7 my-0" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
+    <label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
       <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
       <span class="slider round before:content-['']"></span>
     </label>
@@ -115,7 +115,7 @@
 </div>
 
 <div class="form-group" ng-if="$ctrl.settings.AdminAutoPopulate && $ctrl.groups">
-  <label for="group-access" class="control-label text-left col-sm-2"> Select Group(s) </label>
+  <label for="group-access" class="control-label col-sm-2 text-left"> Select Group(s) </label>
   <div class="col-sm-8">
     <por-select
       data-cy="'group-access-selector'"
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
index 563c74e85..601149366 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
@@ -30,7 +30,7 @@
 
     <div class="form-group">
       <div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
-        <label class="control-label text-left !pt-0">Groups</label>
+        <label class="control-label !pt-0 text-left">Groups</label>
         <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
           <pr-icon icon="'plus-circle'"></pr-icon>
           add another group
diff --git a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
index 2cede6a77..5e0227ba6 100644
--- a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
+++ b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -50,10 +50,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No groups found.</td>
+              <td colspan="5" class="text-muted text-center">No groups found.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
index afeee5f96..8967197cf 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -18,7 +18,7 @@
 </div>
 
 <div class="form-group">
-  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left flex flex-wrap">
+  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left">
     LDAP Server
     <button
       type="button"
@@ -43,7 +43,7 @@
 </div>
 
 <div class="form-group">
-  <label for="anonymous_mode" class="control-label text-left col-sm-3 col-lg-2">
+  <label for="anonymous_mode" class="control-label col-sm-3 col-lg-2 text-left">
     Anonymous mode
     <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
   </label>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
index 74914072e..201a50aac 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -67,7 +67,7 @@
       <!-- Anonymous mode-->
       <div class="form-group">
         <div class="col-sm-12">
-          <label for="anonymous_mode" class="control-label text-left col-sm-3 col-lg-2">
+          <label for="anonymous_mode" class="control-label col-sm-3 col-lg-2 text-left">
             Anonymous mode
             <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
           </label>
diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
index b714318d3..793554ede 100644
--- a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
+++ b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -44,10 +44,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Loading...</td>
+              <td colspan="3" class="text-muted text-center">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-center text-muted">No users found.</td>
+              <td colspan="5" class="text-muted text-center">No users found.</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
index 145165b0a..330888e21 100644
--- a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
@@ -1,7 +1,7 @@
 <div class="datatable datatable-empty">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+      <div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="'history'"></pr-icon>
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table-hover table">
           <thead>
             <tr>
               <th class="small-column">
@@ -81,10 +81,10 @@
               </td>
             </tr>
             <tr ng-if="!$ctrl.logs">
-              <td class="text-center text-muted" colspan="5">Loading...</td>
+              <td class="text-muted text-center" colspan="5">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.logs.length === 0">
-              <td class="text-center text-muted" colspan="8"> No logs available. </td>
+              <td class="text-muted text-center" colspan="8"> No logs available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
index 9fc12799d..54a33aa2b 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
@@ -1,7 +1,7 @@
 <div class="datatable datatable-empty">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+      <div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
         <div class="toolBarTitle vertical-center">
           <div class="widget-icon space-right">
             <pr-icon icon="'history'"></pr-icon>
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table-hover nowrap-cells table">
           <thead>
             <tr>
               <th>
@@ -85,10 +85,10 @@
               <td></td>
             </tr>
             <tr ng-if="!$ctrl.logs">
-              <td class="text-center text-muted" colspan="5">Loading...</td>
+              <td class="text-muted text-center" colspan="5">Loading...</td>
             </tr>
             <tr ng-if="$ctrl.state.logs.length === 0">
-              <td class="text-center text-muted" colspan="8"> No logs available. </td>
+              <td class="text-muted text-center" colspan="8"> No logs available. </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html
index 2b0d469ae..e98fb076f 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -10,7 +10,7 @@
         <form name="form" class="form-horizontal" style="margin-top: 15px">
           <!-- current-password-input -->
           <div class="form-group">
-            <label for="current_password" class="col-sm-2 control-label text-left required">Current password</label>
+            <label for="current_password" class="col-sm-2 control-label required text-left">Current password</label>
             <div class="col-sm-8">
               <input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password" />
             </div>
@@ -18,7 +18,7 @@
           <!-- !current-password-input -->
           <!-- new-password-input -->
           <div class="form-group">
-            <label for="new_password" class="col-sm-2 control-label text-left required">New password</label>
+            <label for="new_password" class="col-sm-2 control-label required text-left">New password</label>
             <div class="col-sm-8">
               <input type="password" class="form-control" ng-model="formValues.newPassword" ng-minlength="requiredPasswordLength" id="new_password" name="new_password" />
             </div>
@@ -27,7 +27,7 @@
 
           <!-- confirm-password-input -->
           <div class="form-group">
-            <label for="confirm_password" class="col-sm-2 control-label text-left required">Confirm password</label>
+            <label for="confirm_password" class="col-sm-2 control-label required text-left">Confirm password</label>
             <div class="col-sm-8">
               <div class="input-group">
                 <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password" />
diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html
index 2582afeba..636a0bd3f 100644
--- a/app/portainer/views/auth/auth.html
+++ b/app/portainer/views/auth/auth.html
@@ -1,6 +1,6 @@
 <div class="page-wrapper">
   <!-- login box -->
-  <div class="container simple-box">
+  <div class="simple-box container">
     <div class="col-sm-4 col-sm-offset-4">
       <!-- login box logo -->
       <div class="row">
@@ -9,7 +9,7 @@
       </div>
       <!-- !login box logo -->
 
-      <div class="row text-center p-5">
+      <div class="row p-5 text-center">
         <p class="text-xl">Log in to your account</p>
         <p class="text-md text-muted fw-bold">Welcome back! Please enter your details</p>
       </div>
@@ -90,7 +90,7 @@
                   data-cy="auth-passwordInputToggle"
                   type="button"
                   ng-click="ctrl.toggleShowPassword()"
-                  class="absolute top-0 right-0 h-[34px] w-[50px] border-none flex justify-center items-center bg-transparent"
+                  class="absolute top-0 right-0 flex h-[34px] w-[50px] items-center justify-center border-none bg-transparent"
                   tooltip-append-to-body="true"
                   tooltip-placement="top"
                   tooltip-class="portainer-tooltip"
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index 0150534d5..1f6cc2ed3 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -1,6 +1,6 @@
 <div class="page-wrapper">
   <!-- simple box -->
-  <div class="container simple-box">
+  <div class="simple-box container">
     <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
       <!-- simple box logo -->
       <div class="row">
diff --git a/app/portainer/views/logout/logout.html b/app/portainer/views/logout/logout.html
index b9f16d7c2..fe9b2513d 100644
--- a/app/portainer/views/logout/logout.html
+++ b/app/portainer/views/logout/logout.html
@@ -1,6 +1,6 @@
 <div class="page-wrapper">
   <!-- login box -->
-  <div class="container simple-box">
+  <div class="simple-box container">
     <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
       <!-- login box logo -->
       <div class="row">
diff --git a/app/portainer/views/registries/edit/registry.html b/app/portainer/views/registries/edit/registry.html
index 20366638a..d355b0ad0 100644
--- a/app/portainer/views/registries/edit/registry.html
+++ b/app/portainer/views/registries/edit/registry.html
@@ -15,7 +15,7 @@
 
           <!-- name-input -->
           <div class="form-group">
-            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
+            <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
             <div class="col-sm-9 col-lg-10">
               <input
                 type="text"
@@ -137,7 +137,7 @@
           <div ng-if="$ctrl.registry.Authentication">
             <!-- credentials-user -->
             <div class="form-group">
-              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left required">
+              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label required text-left">
                 {{ $ctrl.registry.Type === $ctrl.RegistryTypes.ECR ? 'AWS Access Key' : 'Username' }}
               </label>
               <div class="col-sm-9 col-lg-10">
@@ -185,7 +185,7 @@
             <!-- region -->
             <div ng-if="$ctrl.registry.Type == $ctrl.RegistryTypes.ECR">
               <div class="form-group">
-                <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left required">Region</label>
+                <label for="registry_region" class="col-sm-3 col-lg-2 control-label required text-left">Region</label>
                 <div class="col-sm-9 col-lg-10">
                   <input type="text" class="form-control" id="registry_region" name="registry_region" ng-model="$ctrl.registry.Ecr.Region" placeholder="us-west-1" required />
                 </div>
@@ -222,7 +222,7 @@
             <div ng-if="$ctrl.registry.Quay.UseOrganisation">
               <!-- organisation_name -->
               <div class="form-group">
-                <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left required">Organisation name</label>
+                <label for="organisation_name" class="col-sm-3 col-lg-2 control-label required text-left">Organisation name</label>
                 <div class="col-sm-9 col-lg-10">
                   <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.registry.Quay.OrganisationName" required />
                 </div>
diff --git a/app/portainer/views/settings/settings.html b/app/portainer/views/settings/settings.html
index fad64ef59..ba35be009 100644
--- a/app/portainer/views/settings/settings.html
+++ b/app/portainer/views/settings/settings.html
@@ -234,7 +234,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12 table-responsive">
-              <table class="table table-hover">
+              <table class="table-hover table">
                 <thead>
                   <tr>
                     <th>Name</th>
@@ -254,10 +254,10 @@
                     </td>
                   </tr>
                   <tr ng-if="formValues.BlackListedLabels.length === 0">
-                    <td colspan="3" class="text-center text-muted">No filter available.</td>
+                    <td colspan="3" class="text-muted text-center">No filter available.</td>
                   </tr>
                   <tr ng-if="!formValues.BlackListedLabels">
-                    <td colspan="3" class="text-center text-muted">Loading...</td>
+                    <td colspan="3" class="text-muted text-center">Loading...</td>
                   </tr>
                 </tbody>
               </table>
diff --git a/app/portainer/views/tags/tags.html b/app/portainer/views/tags/tags.html
index 5a98447ef..7b1e3df37 100644
--- a/app/portainer/views/tags/tags.html
+++ b/app/portainer/views/tags/tags.html
@@ -8,7 +8,7 @@
         <form class="form-horizontal" name="tagCreationForm" ng-submit="createTag()">
           <!-- name-input -->
           <div class="form-group">
-            <label for="name" class="col-sm-2 control-label text-left required"> Name </label>
+            <label for="name" class="col-sm-2 control-label required text-left"> Name </label>
             <div class="col-sm-10">
               <input
                 type="text"
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index 713363433..5fc6c9ccf 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -106,7 +106,7 @@
                   </div>
                 </div>
                 <div class="col-sm-12">
-                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addPortBinding()">
+                  <span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addPortBinding()">
                     <pr-icon icon="'plus'"></pr-icon> Add map additional port
                   </span>
                 </div>
@@ -176,7 +176,7 @@
                   </div>
                 </div>
                 <div class="col-sm-12">
-                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addVolume()">
+                  <span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addVolume()">
                     <pr-icon icon="'plus'"></pr-icon> Add map additional volume
                   </span>
                 </div>
@@ -200,7 +200,7 @@
                   </div>
                 </div>
                 <div class="col-sm-12">
-                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addExtraHost()">
+                  <span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addExtraHost()">
                     <pr-icon icon="'plus'"></pr-icon> Add additional entry
                   </span>
                 </div>
@@ -229,7 +229,7 @@
                 </div>
                 <!-- !labels-input-list -->
                 <div class="col-sm-12">
-                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addLabel()"> <pr-icon icon="'plus'"></pr-icon> Add label </span>
+                  <span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addLabel()"> <pr-icon icon="'plus'"></pr-icon> Add label </span>
                 </div>
               </div>
             </div>
diff --git a/app/portainer/views/users/edit/user.html b/app/portainer/views/users/edit/user.html
index 788098efd..9e4b17ac4 100644
--- a/app/portainer/views/users/edit/user.html
+++ b/app/portainer/views/users/edit/user.html
@@ -7,7 +7,7 @@
       <rd-widget-body>
         <form class="form-horizontal" style="margin-top: 15px">
           <div class="form-group">
-            <label for="username_field" class="col-sm-2 control-label text-left required">Username</label>
+            <label for="username_field" class="col-sm-2 control-label required text-left">Username</label>
             <div class="col-sm-8">
               <input class="form-control" ng-model="formValues.username" id="username_field" />
             </div>
@@ -47,7 +47,7 @@
         <form name="form" class="form-horizontal" style="margin-top: 15px">
           <!-- new-password-input -->
           <div class="form-group">
-            <label for="new_password" class="col-sm-2 control-label text-left required">New password</label>
+            <label for="new_password" class="col-sm-2 control-label required text-left">New password</label>
             <div class="col-sm-8">
               <input type="password" class="form-control" ng-model="formValues.newPassword" id="new_password" name="new_password" ng-minlength="requiredPasswordLength" />
             </div>
@@ -55,7 +55,7 @@
           <!-- !new-password-input -->
           <!-- confirm-password-input -->
           <div class="form-group">
-            <label for="confirm_password" class="col-sm-2 control-label text-left required">Confirm password</label>
+            <label for="confirm_password" class="col-sm-2 control-label required text-left">Confirm password</label>
             <div class="col-sm-8">
               <div class="input-group">
                 <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password" />
diff --git a/app/portainer/views/users/users.html b/app/portainer/views/users/users.html
index 80dab3eb4..7043b51a9 100644
--- a/app/portainer/views/users/users.html
+++ b/app/portainer/views/users/users.html
@@ -8,7 +8,7 @@
         <form name="form" class="form-horizontal">
           <!-- name-input -->
           <div class="form-group">
-            <label for="username" class="col-sm-3 col-lg-2 control-label text-left required">
+            <label for="username" class="col-sm-3 col-lg-2 control-label required text-left">
               Username
               <portainer-tooltip ng-if="AuthenticationMethod === 2" message="'Username must exactly match username defined in external LDAP source.'"></portainer-tooltip>
             </label>
@@ -34,7 +34,7 @@
           <!-- !name-input -->
           <!-- new-password-input -->
           <div class="form-group" ng-if="AuthenticationMethod === 1">
-            <label for="password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
+            <label for="password" class="col-sm-3 col-lg-2 control-label required text-left">Password</label>
             <div class="col-sm-8">
               <input
                 type="password"
@@ -50,7 +50,7 @@
           <!-- !new-password-input -->
           <!-- confirm-password-input -->
           <div class="form-group" ng-if="AuthenticationMethod === 1">
-            <label for="confirm_password" class="col-sm-3 col-lg-2 control-label text-left required">Confirm password</label>
+            <label for="confirm_password" class="col-sm-3 col-lg-2 control-label required text-left">Confirm password</label>
             <div class="col-sm-8">
               <div class="input-group">
                 <input
diff --git a/app/react-table-config.d.ts b/app/react-table-config.d.ts
index f1b309993..f1a7d6381 100644
--- a/app/react-table-config.d.ts
+++ b/app/react-table-config.d.ts
@@ -52,9 +52,8 @@ import { UseSelectColumnTableOptions } from '@lineup-lite/hooks';
 declare module 'react-table' {
   // take this file as-is, or comment out the sections that don't apply to your plugin configuration
 
-  export interface TableOptions<
-    D extends Record<string, unknown>
-  > extends UseExpandedOptions<D>,
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
       UseFiltersOptions<D>,
       UseGlobalFiltersOptions<D>,
       UseGroupByOptions<D>,
diff --git a/app/react/components/Alert/Alert.tsx b/app/react/components/Alert/Alert.tsx
index e8993d973..46ea3b63c 100644
--- a/app/react/components/Alert/Alert.tsx
+++ b/app/react/components/Alert/Alert.tsx
@@ -56,7 +56,7 @@ function AlertContainer({
   children,
 }: PropsWithChildren<{ className?: string }>) {
   return (
-    <div className={clsx('border-2 border-solid rounded-md', 'p-3', className)}>
+    <div className={clsx('rounded-md border-2 border-solid', 'p-3', className)}>
       {children}
     </div>
   );
@@ -68,7 +68,7 @@ function AlertHeader({
 }: PropsWithChildren<{ className?: string }>) {
   return (
     <h4
-      className={clsx('text-base', 'flex gap-2 items-center !m-0', className)}
+      className={clsx('text-base', '!m-0 flex items-center gap-2', className)}
     >
       {children}
     </h4>
diff --git a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
index c65e2b44b..edd0043a2 100644
--- a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
+++ b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
@@ -35,7 +35,7 @@ export function BEFeatureIndicator({
       rel="noopener noreferrer"
     >
       {children}
-      {showIcon && <Icon icon={Briefcase} className="mr-1 be-indicator-icon" />}
+      {showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
       <span className="be-indicator-label break-words">
         Business Edition Feature
       </span>
diff --git a/app/react/components/BadgeIcon/BadgeIcon.tsx b/app/react/components/BadgeIcon/BadgeIcon.tsx
index b383c7cb5..191290704 100644
--- a/app/react/components/BadgeIcon/BadgeIcon.tsx
+++ b/app/react/components/BadgeIcon/BadgeIcon.tsx
@@ -15,10 +15,10 @@ export function BadgeIcon({ icon, size = '3xl' }: Props) {
       className={clsx(
         sizeClasses,
         `badge-icon
-      bg-blue-3 text-blue-8
-      th-dark:bg-gray-9 th-dark:text-blue-3
-      rounded-full
-      inline-flex items-center justify-center
+      inline-flex items-center
+      justify-center rounded-full
+      bg-blue-3
+      text-blue-8 th-dark:bg-gray-9 th-dark:text-blue-3
    `
       )}
     >
diff --git a/app/react/components/BoxSelector/BoxOption.module.css b/app/react/components/BoxSelector/BoxOption.module.css
index 12a9929ea..d58829cd8 100644
--- a/app/react/components/BoxSelector/BoxOption.module.css
+++ b/app/react/components/BoxSelector/BoxOption.module.css
@@ -4,8 +4,8 @@
 
 .root label {
   @apply border border-solid;
-  @apply bg-gray-2 border-gray-5 text-black;
-  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
+  @apply border-gray-5 bg-gray-2 text-black;
+  @apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
   @apply th-highcontrast:text-white;
 
   font-weight: normal;
@@ -42,9 +42,9 @@
 }
 
 .root input:checked + label {
-  @apply bg-blue-2 border-blue-6;
-  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
-  @apply th-highcontrast:bg-blue-10 th-highcontrast:border-blue-7;
+  @apply border-blue-6 bg-blue-2;
+  @apply th-dark:border-blue-7 th-dark:bg-blue-10;
+  @apply th-highcontrast:border-blue-7 th-highcontrast:bg-blue-10;
 
   border-radius: 8px;
   padding: 15px;
diff --git a/app/react/components/BoxSelector/BoxOption.tsx b/app/react/components/BoxSelector/BoxOption.tsx
index a380e5229..7e9066951 100644
--- a/app/react/components/BoxSelector/BoxOption.tsx
+++ b/app/react/components/BoxSelector/BoxOption.tsx
@@ -51,7 +51,7 @@ export function BoxOption<T extends Value>({
         {!disabled && (
           <div
             className={clsx(
-              'absolute top-4 right-4 h-4 w-4 rounded-full border border-solid border-blue-8 text-white font-bold flex items-center justify-center',
+              'absolute top-4 right-4 flex h-4 w-4 items-center justify-center rounded-full border border-solid border-blue-8 font-bold text-white',
               {
                 'bg-white': !selected,
                 'bg-blue-8': selected,
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.tsx b/app/react/components/BoxSelector/BoxSelectorItem.tsx
index 486fd0248..537f1bcb4 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.tsx
+++ b/app/react/components/BoxSelector/BoxSelectorItem.tsx
@@ -63,8 +63,8 @@ export function BoxSelectorItem<T extends Value>({
         <div
           className={clsx('flex gap-2', {
             'opacity-30': limitedToBE,
-            'flex-col justify-between h-full': !slim,
-            'items-center slim': slim,
+            'h-full flex-col justify-between': !slim,
+            'slim items-center': slim,
           })}
         >
           <div
diff --git a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
index abf695738..f0b850272 100644
--- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
+++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
@@ -16,7 +16,7 @@ export function LimitedToBeIndicator({ featureId, tooltipId }: Props) {
 
   return (
     <div className="absolute left-0 top-0 w-full">
-      <div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
+      <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm">
         <a href={url} target="_blank" rel="noopener noreferrer">
           <span className="text-warning-9">BE Feature</span>
         </a>
diff --git a/app/react/components/BoxSelector/LogoIcon.tsx b/app/react/components/BoxSelector/LogoIcon.tsx
index c781a5988..c94cd1a7c 100644
--- a/app/react/components/BoxSelector/LogoIcon.tsx
+++ b/app/react/components/BoxSelector/LogoIcon.tsx
@@ -6,8 +6,8 @@ export function LogoIcon({ icon }: Props) {
   return (
     <div
       className={`
-   text-6xl h-14 w-14
-   inline-flex items-center justify-center
+   inline-flex h-14 w-14
+   items-center justify-center text-6xl
 `}
     >
       <Icon icon={icon} className="!flex" />
diff --git a/app/react/components/DashboardItem/DashboardItem.tsx b/app/react/components/DashboardItem/DashboardItem.tsx
index 857c7aaa5..5a2492bbe 100644
--- a/app/react/components/DashboardItem/DashboardItem.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.tsx
@@ -14,16 +14,16 @@ export function DashboardItem({ value, icon, type, children }: Props) {
   return (
     <div
       className={clsx(
-        'border-solid rounded-lg border p-3',
-        'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
-        'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
-        'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
+        'rounded-lg border border-solid p-3',
+        'border-gray-5 bg-gray-2 hover:border-blue-7 hover:bg-blue-2',
+        'th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:hover:border-blue-8 th-dark:hover:bg-gray-10',
+        'th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:hover:border-blue-8 th-highcontrast:hover:bg-gray-11'
       )}
     >
       <div className="flex items-center" aria-label={type}>
         <div
           className={clsx(
-            'icon-badge text-2xl mr-4 !p-2',
+            'icon-badge mr-4 !p-2 text-2xl',
             'bg-blue-3 text-blue-8',
             'th-dark:bg-blue-3 th-dark:text-blue-8',
             'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
@@ -35,7 +35,7 @@ export function DashboardItem({ value, icon, type, children }: Props) {
         <div className="flex flex-col justify-around">
           <div
             className={clsx(
-              'font-medium text-2xl',
+              'text-2xl font-medium',
               'text-gray-9',
               'th-dark:text-white',
               'th-highcontrast:text-white'
diff --git a/app/react/components/DetailsTable/DetailsRow.tsx b/app/react/components/DetailsTable/DetailsRow.tsx
index 9aadcf95e..6e9968482 100644
--- a/app/react/components/DetailsTable/DetailsRow.tsx
+++ b/app/react/components/DetailsTable/DetailsRow.tsx
@@ -16,7 +16,7 @@ export function DetailsRow({
 }: Props) {
   return (
     <tr className={className}>
-      <td className={clsx(colClassName, '!break-normal min-w-[150px]')}>
+      <td className={clsx(colClassName, 'min-w-[150px] !break-normal')}>
         {label}
       </td>
       {children && (
diff --git a/app/react/components/EnvironmentStatusBadgeItem.tsx b/app/react/components/EnvironmentStatusBadgeItem.tsx
index 7c54fe161..5664f9ffd 100644
--- a/app/react/components/EnvironmentStatusBadgeItem.tsx
+++ b/app/react/components/EnvironmentStatusBadgeItem.tsx
@@ -20,7 +20,7 @@ export function EnvironmentStatusBadgeItem({
     <span
       className={clsx(
         'flex items-center gap-1',
-        'border-2 border-solid rounded',
+        'rounded border-2 border-solid',
         'w-fit py-px px-1',
         'text-xs font-semibold text-gray-7',
         {
diff --git a/app/react/components/LinkButton.tsx b/app/react/components/LinkButton.tsx
index 4d4818695..dd3ef7f4e 100644
--- a/app/react/components/LinkButton.tsx
+++ b/app/react/components/LinkButton.tsx
@@ -18,7 +18,7 @@ export function LinkButton({
       title={title}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
-      className={clsx(className, '!m-0 no-link')}
+      className={clsx(className, 'no-link !m-0')}
       disabled={disabled}
       as={disabled ? 'span' : Link}
       props={{
diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
index 09bdf8157..538ffa584 100644
--- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
+++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
@@ -17,7 +17,7 @@ export function Breadcrumbs({ breadcrumbs }: Props) {
     : [breadcrumbs];
 
   return (
-    <div className="text-xs font-medium text-gray-7 th-dark:text-gray-5 th-highcontrast:text-white space-x-2">
+    <div className="space-x-2 text-xs font-medium text-gray-7 th-highcontrast:text-white th-dark:text-gray-5">
       {breadcrumbsArray.map((crumb, index) => (
         <Fragment key={index}>
           <span>{renderCrumb(crumb)}</span>
@@ -42,7 +42,7 @@ function renderCrumb(crumb: Crumb | string) {
       <Link
         to={crumb.link}
         params={crumb.linkParams}
-        className="text-blue-9 hover:underline hover:text-blue-11 th-dark:text-blue-7 th-dark:hover:text-blue-9 th-highcontrast:text-blue-5"
+        className="text-blue-9 hover:text-blue-11 hover:underline th-highcontrast:text-blue-5 th-dark:text-blue-7 th-dark:hover:text-blue-9"
       >
         {crumb.label}
       </Link>
diff --git a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
index 75089724e..a173cc08d 100644
--- a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
+++ b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
@@ -18,7 +18,7 @@ export function ContextHelp() {
         className={clsx(
           headerStyles.menuIcon,
           'menu-icon',
-          'icon-badge text-lg !p-2 mr-1',
+          'icon-badge mr-1 !p-2 text-lg',
           'text-gray-8',
           'th-dark:text-gray-warm-7'
         )}
diff --git a/app/react/components/PageHeader/HeaderTitle.tsx b/app/react/components/PageHeader/HeaderTitle.tsx
index 3c0d4f50b..e5363d9fd 100644
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@@ -16,7 +16,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
   return (
     <div className="flex justify-between whitespace-normal pt-3">
       <div className="flex items-center gap-2">
-        <div className="font-medium text-2xl text-gray-11 th-dark:text-white th-highcontrast:text-white">
+        <div className="text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
           {title}
         </div>
         {children && <span>{children}</span>}
diff --git a/app/react/components/PageHeader/NotificationsMenu.tsx b/app/react/components/PageHeader/NotificationsMenu.tsx
index e3ad3cda2..c8ded766b 100644
--- a/app/react/components/PageHeader/NotificationsMenu.tsx
+++ b/app/react/components/PageHeader/NotificationsMenu.tsx
@@ -65,7 +65,7 @@ export function NotificationsMenu() {
         <div
           className={clsx(
             headerStyles.menuIcon,
-            'icon-badge text-lg !p-2 mr-1',
+            'icon-badge mr-1 !p-2 text-lg',
             'text-gray-8',
             'th-dark:text-gray-warm-7'
           )}
diff --git a/app/react/components/PageHeader/UserMenu.tsx b/app/react/components/PageHeader/UserMenu.tsx
index da76c01ed..b6e1de2a5 100644
--- a/app/react/components/PageHeader/UserMenu.tsx
+++ b/app/react/components/PageHeader/UserMenu.tsx
@@ -29,7 +29,7 @@ export function UserMenu() {
         <div
           className={clsx(
             styles.menuIcon,
-            'icon-badge text-lg !p-2 mr-1',
+            'icon-badge mr-1 !p-2 text-lg',
             'text-gray-8',
             'th-dark:text-gray-warm-7'
           )}
diff --git a/app/react/components/PaginationControls/PageInput.tsx b/app/react/components/PaginationControls/PageInput.tsx
index 82312c63e..a7f25aa29 100644
--- a/app/react/components/PaginationControls/PageInput.tsx
+++ b/app/react/components/PaginationControls/PageInput.tsx
@@ -25,7 +25,7 @@ export function PageInput({ onChange, totalPages }: Props) {
 
   return (
     <form className="mx-3" onSubmit={handleSubmit}>
-      <label className="m-0 mr-2 font-normal small" htmlFor="go-to-page-input">
+      <label className="small m-0 mr-2 font-normal" htmlFor="go-to-page-input">
         Go to page
       </label>
       <Input
diff --git a/app/react/components/StatsItem.tsx b/app/react/components/StatsItem.tsx
index 68f4861de..6e58535e2 100644
--- a/app/react/components/StatsItem.tsx
+++ b/app/react/components/StatsItem.tsx
@@ -16,11 +16,11 @@ export function StatsItem({
   iconClass,
 }: PropsWithChildren<Props>) {
   return (
-    <span className="flex gap-1 items-center">
+    <span className="flex items-center gap-1">
       <Icon className={clsx('icon icon-sm', iconClass)} icon={icon} />
       <span>{value}</span>
       {children && (
-        <span className="ml-1 flex gap-2 items-center">{children}</span>
+        <span className="ml-1 flex items-center gap-2">{children}</span>
       )}
     </span>
   );
diff --git a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
index 978224c6b..a39ee4fa0 100644
--- a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
+++ b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
@@ -40,7 +40,7 @@ export function TooltipWithChildren({
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div className={styles.tooltipContainer} onClick={onClickHandler}>
       {(heading || (BEFeatureID && limitedToBE)) && (
-        <div className="w-full mb-3 inline-flex justify-between">
+        <div className="mb-3 inline-flex w-full justify-between">
           <span>{heading}</span>
           {BEFeatureID && limitedToBE && (
             <a
diff --git a/app/react/components/ViewLoading/ViewLoading.tsx b/app/react/components/ViewLoading/ViewLoading.tsx
index a7983f671..5ade961bb 100644
--- a/app/react/components/ViewLoading/ViewLoading.tsx
+++ b/app/react/components/ViewLoading/ViewLoading.tsx
@@ -21,7 +21,7 @@ export function ViewLoading({ message }: Props) {
       {message && (
         <span className={styles.message}>
           {message}
-          <Icon icon={Settings} className="animate-spin-slow !ml-1" />
+          <Icon icon={Settings} className="!ml-1 animate-spin-slow" />
         </span>
       )}
     </div>
diff --git a/app/react/components/buttons/LoadingButton.tsx b/app/react/components/buttons/LoadingButton.tsx
index ab4e57a29..e45a54af0 100644
--- a/app/react/components/buttons/LoadingButton.tsx
+++ b/app/react/components/buttons/LoadingButton.tsx
@@ -39,7 +39,7 @@ function loadingButtonIcon(isLoading: boolean, defaultIcon: ReactNode) {
   return (
     <Icon
       icon={Loader2}
-      className="animate-spin-slow ml-1"
+      className="ml-1 animate-spin-slow"
       aria-label="loading"
     />
   );
diff --git a/app/react/components/datatables/NestedTable.css b/app/react/components/datatables/NestedTable.css
index 60d0d13fa..91d8dd28a 100644
--- a/app/react/components/datatables/NestedTable.css
+++ b/app/react/components/datatables/NestedTable.css
@@ -1,5 +1,5 @@
 .inner-datatable {
-  @apply border border-solid rounded-md border-gray-5 th-dark:border-gray-9;
+  @apply rounded-md border border-solid border-gray-5 th-dark:border-gray-9;
   overflow: hidden;
 }
 
diff --git a/app/react/components/datatables/SearchBar.tsx b/app/react/components/datatables/SearchBar.tsx
index 7370e9d1d..d6985324e 100644
--- a/app/react/components/datatables/SearchBar.tsx
+++ b/app/react/components/datatables/SearchBar.tsx
@@ -32,7 +32,7 @@ export function SearchBar({
 
   return (
     <div
-      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+      className={clsx('searchBar flex min-w-[90px] items-center', className)}
     >
       <Search className="searchIcon lucide shrink-0" />
       <input
diff --git a/app/react/components/datatables/Table.tsx b/app/react/components/datatables/Table.tsx
index 4ff490486..171f8a8f8 100644
--- a/app/react/components/datatables/Table.tsx
+++ b/app/react/components/datatables/Table.tsx
@@ -23,7 +23,7 @@ function MainComponent({
     <div className="table-responsive">
       <table
         className={clsx(
-          'table table-hover table-filters nowrap-cells',
+          'table-hover table-filters nowrap-cells table',
           className
         )}
         role={role}
diff --git a/app/react/components/datatables/TableContent.tsx b/app/react/components/datatables/TableContent.tsx
index 0813b2b48..5ae126bc2 100644
--- a/app/react/components/datatables/TableContent.tsx
+++ b/app/react/components/datatables/TableContent.tsx
@@ -41,7 +41,7 @@ function TableContentOneColumn({ children }: PropsWithChildren<unknown>) {
   // using MAX_SAFE_INTEGER to make sure the single column will be the size of the table
   return (
     <tr>
-      <td colSpan={Number.MAX_SAFE_INTEGER} className="text-center text-muted">
+      <td colSpan={Number.MAX_SAFE_INTEGER} className="text-muted text-center">
         {children}
       </td>
     </tr>
diff --git a/app/react/components/datatables/TableHeaderCell.tsx b/app/react/components/datatables/TableHeaderCell.tsx
index 5b06065ba..2039dd748 100644
--- a/app/react/components/datatables/TableHeaderCell.tsx
+++ b/app/react/components/datatables/TableHeaderCell.tsx
@@ -28,7 +28,7 @@ export function TableHeaderCell({
 }: Props) {
   return (
     <th role={role} style={style} className={className}>
-      <div className="flex flex-row flex-nowrap h-full items-center gap-1">
+      <div className="flex h-full flex-row flex-nowrap items-center gap-1">
         <SortWrapper
           canSort={canSort}
           onClick={onSortClick}
@@ -66,12 +66,12 @@ function SortWrapper({
       type="button"
       onClick={() => onClick(!isSortedDesc)}
       className={clsx(
-        '!bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
+        '!ml-0 h-full w-full border-none !bg-transparent !px-0 focus:border-none',
         styles.sortable,
         isSorted && styles.sortingActive
       )}
     >
-      <div className="flex flex-row justify-start items-center w-full h-full">
+      <div className="flex h-full w-full flex-row items-center justify-start">
         {children}
         <TableHeaderSortIcons
           sorted={isSorted}
@@ -97,7 +97,7 @@ export function TableColumnHeaderAngular({
   isSortedDesc = true,
 }: TableColumnHeaderAngularProps) {
   return (
-    <div className="flex flex-row flex-nowrap h-full">
+    <div className="flex h-full flex-row flex-nowrap">
       <SortWrapper
         canSort={canSort}
         isSorted={!!isSorted}
diff --git a/app/react/components/datatables/TableHeaderSortIcons.tsx b/app/react/components/datatables/TableHeaderSortIcons.tsx
index 78b1d1a51..0ce6a44c7 100644
--- a/app/react/components/datatables/TableHeaderSortIcons.tsx
+++ b/app/react/components/datatables/TableHeaderSortIcons.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export function TableHeaderSortIcons({ sorted, descending, className }: Props) {
   return (
-    <div className="flex flex-row no-wrap w-min-max align-middle">
+    <div className="no-wrap w-min-max flex flex-row align-middle">
       <SortDownIcon
         className={clsx(
           className,
diff --git a/app/react/components/datatables/TableTitle.tsx b/app/react/components/datatables/TableTitle.tsx
index a8de73758..c60ec13a5 100644
--- a/app/react/components/datatables/TableTitle.tsx
+++ b/app/react/components/datatables/TableTitle.tsx
@@ -19,7 +19,7 @@ export function TableTitle({
 }: PropsWithChildren<Props>) {
   return (
     <div className={clsx('toolBar flex-col', className)}>
-      <div className="flex gap-1 p-0 w-full items-center">
+      <div className="flex w-full items-center gap-1 p-0">
         <div className="toolBarTitle">
           {icon && (
             <div className="widget-icon">
diff --git a/app/react/components/form-components/FormControl/FormControl.tsx b/app/react/components/form-components/FormControl/FormControl.tsx
index c7cba6bdf..ae71c283c 100644
--- a/app/react/components/form-components/FormControl/FormControl.tsx
+++ b/app/react/components/form-components/FormControl/FormControl.tsx
@@ -32,7 +32,7 @@ export function FormControl({
     <div
       className={clsx(
         'form-group',
-        'after:content-[""] after:clear-both after:table' // to fix issues with float
+        'after:clear-both after:table after:content-[""]' // to fix issues with float
       )}
     >
       <label
diff --git a/app/react/components/form-components/FormSection/FormSection.tsx b/app/react/components/form-components/FormSection/FormSection.tsx
index 5f07b80a0..7c906712b 100644
--- a/app/react/components/form-components/FormSection/FormSection.tsx
+++ b/app/react/components/form-components/FormSection/FormSection.tsx
@@ -25,7 +25,7 @@ export function FormSection({
             id={`foldingButton${title}`}
             type="button"
             onClick={() => setIsExpanded(!isExpanded)}
-            className="border-0 mx-2 !ml-0 bg-transparent inline-flex justify-center items-center w-2"
+            className="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
           >
             <Icon
               icon={isExpanded ? ChevronDown : ChevronRight}
diff --git a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx b/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
index 55487751f..f4a56c21f 100644
--- a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
@@ -12,7 +12,7 @@ export function FormSectionTitle({
     return (
       <label
         htmlFor={htmlFor}
-        className="col-sm-12 form-section-title cursor-pointer flex items-center"
+        className="col-sm-12 form-section-title flex cursor-pointer items-center"
       >
         {children}
       </label>
diff --git a/app/react/components/form-components/Slider/Slider.module.css b/app/react/components/form-components/Slider/Slider.module.css
index fef6ae831..6e453bb08 100644
--- a/app/react/components/form-components/Slider/Slider.module.css
+++ b/app/react/components/form-components/Slider/Slider.module.css
@@ -7,7 +7,7 @@
 }
 
 .slider :global .rc-slider-handle {
-  @apply border-blue-8 border-2;
+  @apply border-2 border-blue-8;
   width: 24px;
   height: 24px;
   margin-top: -8px;
diff --git a/app/react/components/form-components/SwitchField/SwitchField.tsx b/app/react/components/form-components/SwitchField/SwitchField.tsx
index e9373e172..b2e958a8a 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@@ -42,7 +42,7 @@ export function SwitchField({
   return (
     <label className={clsx(styles.root, fieldClass)}>
       <span
-        className={clsx('text-left space-right control-label !p-0', labelClass)}
+        className={clsx('space-right control-label !p-0 text-left', labelClass)}
       >
         {label}
         {tooltip && (
diff --git a/app/react/components/modals/Modal/CloseButton.tsx b/app/react/components/modals/Modal/CloseButton.tsx
index 7b47cc2f2..8dcc8e617 100644
--- a/app/react/components/modals/Modal/CloseButton.tsx
+++ b/app/react/components/modals/Modal/CloseButton.tsx
@@ -15,7 +15,7 @@ export function CloseButton({
       className={clsx(
         styles.close,
         className,
-        'absolute top-4 right-5 close-button'
+        'close-button absolute top-4 right-5'
       )}
       onClick={() => onClose()}
     >
diff --git a/app/react/components/modals/Modal/Modal.tsx b/app/react/components/modals/Modal/Modal.tsx
index 18e6f2568..25f5a75aa 100644
--- a/app/react/components/modals/Modal/Modal.tsx
+++ b/app/react/components/modals/Modal/Modal.tsx
@@ -39,7 +39,7 @@ export function Modal({
         isOpen
         className={clsx(
           styles.overlay,
-          'flex items-center justify-center z-50'
+          'z-50 flex items-center justify-center'
         )}
         onDismiss={onDismiss}
         role="dialog"
@@ -47,7 +47,7 @@ export function Modal({
         <DialogContent
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
-          className={clsx(styles.modalDialog, 'p-0 bg-transparent', {
+          className={clsx(styles.modalDialog, 'bg-transparent p-0', {
             'w-[450px]': size === 'md',
             'w-[700px]': size === 'lg',
           })}
diff --git a/app/react/components/modals/Modal/ModalFooter.tsx b/app/react/components/modals/Modal/ModalFooter.tsx
index c2f953df3..66b0310c7 100644
--- a/app/react/components/modals/Modal/ModalFooter.tsx
+++ b/app/react/components/modals/Modal/ModalFooter.tsx
@@ -6,6 +6,6 @@ export function ModalFooter({ children }: PropsWithChildren<unknown>) {
   useModalContext();
 
   return (
-    <div className="flex justify-end gap-3 [&>*]:flex-1 pt-3">{children}</div>
+    <div className="flex justify-end gap-3 pt-3 [&>*]:flex-1">{children}</div>
   );
 }
diff --git a/app/react/components/modals/Modal/ModalHeader.tsx b/app/react/components/modals/Modal/ModalHeader.tsx
index 91cd638e8..89a035172 100644
--- a/app/react/components/modals/Modal/ModalHeader.tsx
+++ b/app/react/components/modals/Modal/ModalHeader.tsx
@@ -24,7 +24,7 @@ export function ModalHeader({ title, modalType }: Props) {
         />
       )}
       {typeof title === 'string' ? (
-        <h5 className="font-bold m-0">{title}</h5>
+        <h5 className="m-0 font-bold">{title}</h5>
       ) : (
         title
       )}
diff --git a/app/react/docker/images/ItemView/DockerfileDetails.tsx b/app/react/docker/images/ItemView/DockerfileDetails.tsx
index 25004ae47..4cd201735 100644
--- a/app/react/docker/images/ItemView/DockerfileDetails.tsx
+++ b/app/react/docker/images/ItemView/DockerfileDetails.tsx
@@ -61,7 +61,7 @@ export function DockerfileDetails({ image }: Props) {
 
         {image.Env.length > 0 && (
           <DetailsTable.Row label="ENV">
-            <table className="table table-bordered table-condensed">
+            <table className="table-bordered table-condensed table">
               <tbody>
                 {image.Env.map((variable) => (
                   <tr key={variable}>
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
index 69ac5e0bd..4cf6ea5ba 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
@@ -144,12 +144,12 @@ export function IngressClassDatatable({
 
   function renderIngressClassDescription() {
     return (
-      <div className="flex flex-col !text-xs text-muted w-full">
+      <div className="text-muted flex w-full flex-col !text-xs">
         <div className="mt-1">{description}</div>
         {ingressControllers &&
           ingControllerFormValues &&
           isUnsavedChanges(ingressControllers, ingControllerFormValues) && (
-            <span className="flex items-center text-warning mt-1">
+            <span className="text-warning mt-1 flex items-center">
               <Icon icon={AlertTriangle} className="!mr-1" />
               <span className="text-warning">Unsaved changes.</span>
             </span>
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx b/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
index 4be87f66d..c0524ab05 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
@@ -29,7 +29,7 @@ export function Annotations({
     <>
       {annotations.map((annotation, i) => (
         <div className="row" key={annotation.ID}>
-          <div className="form-group !pl-0 col-sm-4 !m-0">
+          <div className="form-group col-sm-4 !m-0 !pl-0">
             <div className="input-group input-group-sm">
               <span className="input-group-addon required">Key</span>
               <input
@@ -49,7 +49,7 @@ export function Annotations({
               </FormError>
             )}
           </div>
-          <div className="form-group !pl-0 col-sm-4 !m-0">
+          <div className="form-group col-sm-4 !m-0 !pl-0">
             <div className="input-group input-group-sm">
               <span className="input-group-addon required">Value</span>
               <input
@@ -69,7 +69,7 @@ export function Annotations({
               </FormError>
             )}
           </div>
-          <div className="col-sm-3 !pl-0 !m-0">
+          <div className="col-sm-3 !m-0 !pl-0">
             <Button
               size="small"
               color="dangerlight"
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
index c90b7c0d8..89b06a4ef 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@@ -164,7 +164,7 @@ export function IngressForm({
                     />
                   )}
                   {errors.ingressName && !isEdit && (
-                    <FormError className="mt-1 error-inline">
+                    <FormError className="error-inline mt-1">
                       {errors.ingressName}
                     </FormError>
                   )}
@@ -190,7 +190,7 @@ export function IngressForm({
                     options={ingressClassOptions}
                   />
                   {errors.className && (
-                    <FormError className="mt-1 error-inline">
+                    <FormError className="error-inline mt-1">
                       {errors.className}
                     </FormError>
                   )}
@@ -198,7 +198,7 @@ export function IngressForm({
               </div>
             </div>
 
-            <div className="col-sm-12 px-0 text-muted !mb-0">
+            <div className="col-sm-12 text-muted !mb-0 px-0">
               <div className="mb-2">Annotations</div>
               <p className="vertical-center text-muted small">
                 <Icon icon={Info} mode="primary" />
@@ -232,7 +232,7 @@ export function IngressForm({
               />
             )}
 
-            <div className="col-sm-12 p-0 anntation-actions">
+            <div className="col-sm-12 anntation-actions p-0">
               <Button
                 className="btn btn-sm btn-light mb-2 !ml-0"
                 onClick={() => addNewAnnotation()}
@@ -280,15 +280,15 @@ export function IngressForm({
               )}
             </div>
 
-            <div className="col-sm-12 px-0 text-muted">Rules</div>
+            <div className="col-sm-12 text-muted px-0">Rules</div>
           </div>
         )}
 
         {namespace &&
           rule?.Hosts?.map((host, hostIndex) => (
-            <div className="row mb-5 rule bordered" key={host.Key}>
+            <div className="row rule bordered mb-5" key={host.Key}>
               <div className="col-sm-12">
-                <div className="row mt-5 rule-actions">
+                <div className="row rule-actions mt-5">
                   <div className="col-sm-3 p-0">
                     {!host.NoHost ? 'Rule' : 'Fallback rule'}
                   </div>
@@ -318,7 +318,7 @@ export function IngressForm({
                 </div>
                 {!host.NoHost && (
                   <div className="row">
-                    <div className="form-group !pl-0 col-sm-6 col-lg-4 !pr-2">
+                    <div className="form-group col-sm-6 col-lg-4 !pl-0 !pr-2">
                       <div className="input-group input-group-sm">
                         <span className="input-group-addon required">
                           Hostname
@@ -341,7 +341,7 @@ export function IngressForm({
                       )}
                     </div>
 
-                    <div className="form-group !pr-0 col-sm-6 col-lg-4 !pl-2">
+                    <div className="form-group col-sm-6 col-lg-4 !pr-0 !pl-2">
                       <div className="input-group input-group-sm">
                         <span className="input-group-addon">TLS secret</span>
                         <Select
@@ -356,7 +356,7 @@ export function IngressForm({
                       </div>
                     </div>
 
-                    <p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
+                    <p className="vertical-center text-muted small col-sm-12 whitespace-nowrap !p-0">
                       <Icon icon={Info} mode="primary" size="md" />
                       <span>
                         Add a secret via{' '}
@@ -376,7 +376,7 @@ export function IngressForm({
                   </div>
                 )}
                 {host.NoHost && (
-                  <p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
+                  <p className="vertical-center text-muted small col-sm-12 whitespace-nowrap !p-0">
                     <Icon icon={Info} mode="primary" size="md" />A fallback rule
                     has no host specified. This rule only applies when an
                     inbound request has a hostname that does not match with any
@@ -385,16 +385,16 @@ export function IngressForm({
                 )}
 
                 <div className="row">
-                  <div className="col-sm-12 px-0 !mb-0 mt-2 text-muted">
+                  <div className="col-sm-12 text-muted !mb-0 mt-2 px-0">
                     Paths
                   </div>
                 </div>
                 {host.Paths.map((path, pathIndex) => (
                   <div
-                    className="mt-5 !mb-5 row path"
+                    className="row path mt-5 !mb-5"
                     key={`path_${path.Key}}`}
                   >
-                    <div className="form-group !pl-0 col-sm-3 col-xl-2 !m-0">
+                    <div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
                       <div className="input-group input-group-sm">
                         <span className="input-group-addon required">
                           Service
@@ -417,7 +417,7 @@ export function IngressForm({
                       {errors[
                         `hosts[${hostIndex}].paths[${pathIndex}].servicename`
                       ] && (
-                        <FormError className="mt-1 !mb-0 error-inline">
+                        <FormError className="error-inline mt-1 !mb-0">
                           {
                             errors[
                               `hosts[${hostIndex}].paths[${pathIndex}].servicename`
@@ -427,7 +427,7 @@ export function IngressForm({
                       )}
                     </div>
 
-                    <div className="form-group !pl-0 col-sm-2 col-xl-2 !m-0">
+                    <div className="form-group col-sm-2 col-xl-2 !m-0 !pl-0">
                       {servicePorts && (
                         <>
                           <div className="input-group input-group-sm">
@@ -474,7 +474,7 @@ export function IngressForm({
                       )}
                     </div>
 
-                    <div className="form-group !pl-0 col-sm-3 col-xl-2 !m-0">
+                    <div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
                       <div className="input-group input-group-sm">
                         <span className="input-group-addon required">
                           Path type
@@ -514,7 +514,7 @@ export function IngressForm({
                       )}
                     </div>
 
-                    <div className="form-group !pl-0 col-sm-3 col-xl-3 !m-0">
+                    <div className="form-group col-sm-3 col-xl-3 !m-0 !pl-0">
                       <div className="input-group input-group-sm">
                         <span className="input-group-addon required">Path</span>
                         <input
@@ -547,9 +547,9 @@ export function IngressForm({
                       )}
                     </div>
 
-                    <div className="form-group !pl-0 col-sm-1 !m-0">
+                    <div className="form-group col-sm-1 !m-0 !pl-0">
                       <Button
-                        className="btn btn-sm btn-only-icon !ml-0 vertical-center"
+                        className="btn btn-sm btn-only-icon vertical-center !ml-0"
                         color="dangerlight"
                         type="button"
                         data-cy={`k8sAppCreate-rmPortButton_${hostIndex}-${pathIndex}`}
@@ -576,8 +576,8 @@ export function IngressForm({
           ))}
 
         {namespace && (
-          <div className="row p-0 rules-action">
-            <div className="col-sm-12 p-0 vertical-center">
+          <div className="row rules-action p-0">
+            <div className="col-sm-12 vertical-center p-0">
               <Button
                 className="btn btn-sm btn-light !ml-0"
                 type="button"
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
index 7f4663b3c..9739f11b4 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
@@ -33,7 +33,7 @@ export const ingressRules: Column<Ingress> = {
       const isHttp = isHTTP(row.original.TLS || [], path.Host);
       return (
         <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
-          <span className="flex px-2 flex-nowrap items-center gap-1">
+          <span className="flex flex-nowrap items-center gap-1 px-2">
             {link(path.Host, path.Path, isHttp)}
             <Icon icon={ArrowRight} />
             {`${path.ServiceName}:${path.Port}`}
diff --git a/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx b/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
index f63b6ec08..ab0bc1648 100644
--- a/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
+++ b/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
@@ -72,7 +72,7 @@ function Label({ option }: { option: Option }) {
   const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
 
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex items-center gap-1">
       <Icon />
       <span>{option.Name}</span>
       <span>|</span>
diff --git a/app/react/nomad/DashboardView/DashboardView.tsx b/app/react/nomad/DashboardView/DashboardView.tsx
index 47f225366..8a992fc61 100644
--- a/app/react/nomad/DashboardView/DashboardView.tsx
+++ b/app/react/nomad/DashboardView/DashboardView.tsx
@@ -28,7 +28,7 @@ export function DashboardView() {
       {dashboardQuery.isLoading ? (
         <div className="text-center" style={{ marginTop: '30%' }}>
           Connecting to the Edge environment...
-          <Icon icon={Settings} className="animate-spin-slow !ml-1" />
+          <Icon icon={Settings} className="!ml-1 animate-spin-slow" />
         </div>
       ) : (
         <>
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
index 9cb53656e..fbc0693a6 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
@@ -27,7 +27,7 @@ export function ActionsCell({ row }: CellProps<Task>) {
   };
 
   return (
-    <div className="text-center vertical-center">
+    <div className="vertical-center text-center">
       {/* events */}
       <Link
         to="nomad.events"
diff --git a/app/react/portainer/HomeView/EdgeLoadingSpinner.tsx b/app/react/portainer/HomeView/EdgeLoadingSpinner.tsx
index 8ea68d678..b16b5eeb1 100644
--- a/app/react/portainer/HomeView/EdgeLoadingSpinner.tsx
+++ b/app/react/portainer/HomeView/EdgeLoadingSpinner.tsx
@@ -9,7 +9,7 @@ export function EdgeLoadingSpinner() {
   return (
     <div className={clsx('row', styles.root)}>
       Connecting to the Edge environment...
-      <Icon icon={Settings} className="animate-spin-slow !ml-1" />
+      <Icon icon={Settings} className="!ml-1 animate-spin-slow" />
     </div>
   );
 }
diff --git a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
index f5ba1371d..201cdc66b 100644
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
@@ -50,7 +50,7 @@ export function AssociateAMTDialog({
           Select the environments to add to associate to OpenAMT. You may select
           across multiple pages.
         </span>
-        <div className="h-8 flex items-center">
+        <div className="flex h-8 items-center">
           <Checkbox
             id="settings-container-truncate-name"
             label="Select all (in this page)"
@@ -63,7 +63,7 @@ export function AssociateAMTDialog({
             {environments.map((env) => (
               <div
                 key={env.Id}
-                className={clsx('h-8 flex items-center pt-1 pl-2')}
+                className={clsx('flex h-8 items-center pt-1 pl-2')}
               >
                 <Checkbox
                   id={`${env.Id}`}
@@ -76,7 +76,7 @@ export function AssociateAMTDialog({
               </div>
             ))}
           </div>
-          <div className="pt-3 flex justify-end w-full">
+          <div className="flex w-full justify-end pt-3">
             <PaginationControls
               showAll={totalCount <= 100}
               page={page}
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
index 1ff729431..9ede23238 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
@@ -27,7 +27,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
   );
 
   return (
-    <ButtonsGrid className="w-11 ml-3">
+    <ButtonsGrid className="ml-3 w-11">
       <LinkButton
         disabled={!isAdmin}
         to="portainer.endpoints.endpoint"
@@ -85,8 +85,8 @@ function ButtonsGrid({
   return (
     <div
       className={clsx(
-        'grid border border-solid rounded-r-lg',
-        'border-gray-5 th-dark:border-gray-9 th-highcontrast:border-white',
+        'grid rounded-r-lg border border-solid',
+        'border-gray-5 th-highcontrast:border-white th-dark:border-gray-9',
         'overflow-hidden',
         className
       )}
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
index 5d7db4ee3..04eeaba02 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
@@ -30,7 +30,7 @@ export function EnvironmentBrowseButtons({
 
   const dashboardRoute = getDashboardRoute(environment);
   return (
-    <div className="flex flex-col gap-2 justify-center [&>*]:h-1/3 h-24 w-full">
+    <div className="flex h-24 w-full flex-col justify-center gap-2 [&>*]:h-1/3">
       {isBE &&
         (browseStatus !== 'snapshot' ? (
           <LinkButton
@@ -42,7 +42,7 @@ export function EnvironmentBrowseButtons({
             }}
             size="medium"
             color="light"
-            className="w-full !py-0 !m-0"
+            className="!m-0 w-full !py-0"
             title={
               !isEdgeAsync
                 ? 'Browse snapshot is only available for async environments'
@@ -55,7 +55,7 @@ export function EnvironmentBrowseButtons({
           <Button
             icon={X}
             onClick={onClickDisconnect}
-            className="w-full !py-0 !m-0 opacity-60"
+            className="!m-0 w-full !py-0 opacity-60"
             size="medium"
             color="light"
           >
@@ -77,7 +77,7 @@ export function EnvironmentBrowseButtons({
           size="medium"
           onClick={onClickBrowse}
           color="primary"
-          className="w-full !py-0 !m-0"
+          className="!m-0 w-full !py-0"
         >
           Live connect
         </LinkButton>
@@ -85,7 +85,7 @@ export function EnvironmentBrowseButtons({
         <Button
           icon={WifiOff}
           onClick={onClickDisconnect}
-          className="w-full !py-0 !m-0 opacity-60"
+          className="!m-0 w-full !py-0 opacity-60"
           size="medium"
           color="primary"
         >
@@ -125,7 +125,7 @@ function BrowseStatusTag({ status }: { status: BrowseStatus }) {
 
 function Disconnected() {
   return (
-    <div className="flex items-center gap-2 justify-center">
+    <div className="flex items-center justify-center gap-2">
       <Icon icon={WifiOff} />
       Disconnected
     </div>
@@ -136,12 +136,12 @@ function Connected() {
   return (
     <div
       className={clsx(
-        'flex items-center gap-2 justify-center rounded-lg',
+        'flex items-center justify-center gap-2 rounded-lg',
         'text-green-8 th-dark:text-green-4',
         'bg-green-3 th-dark:bg-green-3/30'
       )}
     >
-      <div className="rounded-full h-2 w-2 bg-green-8 th-dark:bg-green-4" />
+      <div className="h-2 w-2 rounded-full bg-green-8 th-dark:bg-green-4" />
       Connected
     </div>
   );
@@ -151,12 +151,12 @@ function Snapshot() {
   return (
     <div
       className={clsx(
-        'flex items-center gap-2 justify-center rounded-lg',
+        'flex items-center justify-center gap-2 rounded-lg',
         'text-warning-7 th-dark:text-warning-4',
-        'bg-warning-3 th-dark:bg-warning-3/10 th-highcontrast:bg-warning-3/30'
+        'bg-warning-3 th-highcontrast:bg-warning-3/30 th-dark:bg-warning-3/10'
       )}
     >
-      <div className="rounded-full h-2 w-2 bg-warning-7" />
+      <div className="h-2 w-2 rounded-full bg-warning-7" />
       Browsing Snapshot
     </div>
   );
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
index 6e745be1e..53d838f95 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
@@ -59,14 +59,14 @@ export function EnvironmentItem({
         className="no-link"
       >
         <button
-          className="blocklist-item flex items-stretch overflow-hidden min-h-[110px] bg-transparent w-full !m-0 !pr-56"
+          className="blocklist-item !m-0 flex min-h-[110px] w-full items-stretch overflow-hidden bg-transparent !pr-56"
           onClick={onClickBrowse}
           type="button"
         >
-          <div className="ml-2 self-center flex justify-center">
+          <div className="ml-2 flex justify-center self-center">
             <EnvironmentIcon type={environment.Type} />
           </div>
-          <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
+          <div className="ml-3 mr-auto flex flex-col items-start justify-center gap-3">
             <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
               <span className="font-bold">{environment.Name}</span>
               {isEdge ? (
@@ -114,8 +114,8 @@ export function EnvironmentItem({
       Buttons are extracted out of the main button because it causes errors with react and accessibility issues
       see https://stackoverflow.com/questions/66409964/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a
       */}
-      <div className="absolute inset-y-0 right-0 flex justify-end w-56">
-        <div className="py-3 flex items-center flex-1">
+      <div className="absolute inset-y-0 right-0 flex w-56 justify-end">
+        <div className="flex flex-1 items-center py-3">
           <EnvironmentBrowseButtons
             environment={environment}
             onClickBrowse={onClickBrowse}
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
index 95c4b6f46..7d1c5f457 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
@@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
   const component = getComponent(platform, environment);
 
   return (
-    <span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
+    <span className="blocklist-item-desc flex flex-wrap items-center gap-x-10 gap-y-2">
       {component}
     </span>
   );
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
index d96a20d8f..2a452e446 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
@@ -153,9 +153,9 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
               </div>
             }
           >
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
               <SearchBar
-                className="!bg-transparent !m-0 !min-w-[350px]"
+                className="!m-0 !min-w-[350px] !bg-transparent"
                 value={searchBarValue}
                 onChange={setSearchBarValue}
                 placeholder="Search by name, group, tag, status, URL..."
@@ -209,7 +209,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
             />
           </div>
           <div
-            className="blocklist !p-0 mt-5 !space-y-2"
+            className="blocklist mt-5 !space-y-2 !p-0"
             data-cy="home-endpointList"
           >
             {renderItems(
@@ -389,7 +389,7 @@ function renderItems(
 ) {
   if (isLoading) {
     return (
-      <div className="text-center text-muted" data-cy="home-loadingEndpoints">
+      <div className="text-muted text-center" data-cy="home-loadingEndpoints">
         Loading...
       </div>
     );
@@ -397,7 +397,7 @@ function renderItems(
 
   if (!totalCount) {
     return (
-      <div className="text-center text-muted" data-cy="home-noEndpoints">
+      <div className="text-muted text-center" data-cy="home-noEndpoints">
         No environments available.
       </div>
     );
diff --git a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
index 903695b32..4e55d2beb 100644
--- a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
@@ -69,7 +69,7 @@ export function KubeconfigPrompt({
       role="dialog"
       onDismiss={onClose}
     >
-      <DialogContent className="p-0 bg-transparent modal-dialog">
+      <DialogContent className="modal-dialog bg-transparent p-0">
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
@@ -89,7 +89,7 @@ export function KubeconfigPrompt({
                 </div>
               </form>
               <br />
-              <div className="h-8 flex items-center">
+              <div className="flex h-8 items-center">
                 <Checkbox
                   id="settings-container-truncate-name"
                   label="Select all (in this page)"
@@ -106,7 +106,7 @@ export function KubeconfigPrompt({
                         key={env.Id}
                         className={clsx(
                           styles.checkbox,
-                          'h-8 flex items-center pt-1'
+                          'flex h-8 items-center pt-1'
                         )}
                       >
                         <Checkbox
@@ -120,7 +120,7 @@ export function KubeconfigPrompt({
                       </div>
                     ))}
                 </div>
-                <div className="pt-3 flex justify-end w-full">
+                <div className="flex w-full justify-end pt-3">
                   <PaginationControls
                     showAll={totalCount <= 100}
                     page={page}
diff --git a/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx b/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
index 200c1fa8c..5b6835aba 100644
--- a/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
@@ -27,7 +27,7 @@ export function SortbySelector({
 }: Props) {
   const sorted = sortByButton && !!value;
   return (
-    <div className="flex items-center gap-1 justify-end">
+    <div className="flex items-center justify-end gap-1">
       <Select
         placeholder={placeHolder}
         options={filterOptions}
@@ -37,7 +37,7 @@ export function SortbySelector({
       />
 
       <button
-        className={clsx(styles.sortButton, 'h-[34px] !m-0')}
+        className={clsx(styles.sortButton, '!m-0 h-[34px]')}
         type="button"
         disabled={!sorted}
         onClick={(e) => {
diff --git a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
index 6ee53c49f..c1d29be9f 100644
--- a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
@@ -11,22 +11,22 @@ export function UpdateBadge() {
   return (
     <span
       className={clsx(
-        'inline-flex items-center gap-2 p-1 font-normal border-solid border border-transparent rounded-3xl h-fit',
+        'inline-flex h-fit items-center gap-2 rounded-3xl border border-solid border-transparent p-1 font-normal',
         'bg-blue-3 text-blue-8',
         'th-dark:bg-blue-8 th-dark:text-white',
-        'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:border-white'
+        'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white'
       )}
     >
-      <span className="hidden 2xl:!inline text-sm">
+      <span className="hidden text-sm 2xl:!inline">
         Update Available: Edge Agent {version}
       </span>
       <Link
         to="portainer.endpoints.updateSchedules.create"
         className={clsx(
-          'badge font-normal border-solid border border-transparent',
+          'badge border border-solid border-transparent font-normal',
           'bg-blue-8 text-blue-3',
           'th-dark:bg-blue-3 th-dark:text-blue-8 th-dark:hover:bg-blue-5 th-dark:hover:text-blue-8',
-          'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white th-highcontrast:border-white'
+          'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white'
         )}
       >
         Schedule Update
diff --git a/app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx b/app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx
index 3433d439e..2151ee977 100644
--- a/app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx
+++ b/app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx
@@ -76,7 +76,7 @@ function Label({ option }: { option: Option }) {
   const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
 
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex items-center gap-1">
       <Icon />
       <span>{option.Name}</span>
     </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
index 81d02cb67..9b50c98ef 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
@@ -92,7 +92,7 @@ export function WizardKubernetes({ onCreate }: Props) {
         );
       case EnvironmentCreationTypes.KubeConfigEnvironment:
         return (
-          <div className="px-1 py-5 border border-solid border-orange-1">
+          <div className="border border-solid border-orange-1 px-1 py-5">
             <BEFeatureIndicator
               featureId={options.find((o) => o.value === type)?.feature}
             />
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx
index 4da184b70..738d9e3ca 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx
@@ -19,7 +19,7 @@ interface Props {
 
 function Item({ item, onChange }: ItemProps<Gpu>) {
   return (
-    <div className="flex gap-2 flex-grow">
+    <div className="flex flex-grow gap-2">
       <InputGroup size="small" className="flex-grow">
         <InputGroup.Addon>GPU Name</InputGroup.Addon>
         <InputGroup.Input
diff --git a/app/react/portainer/environments/wizard/components/Option/Option.module.css b/app/react/portainer/environments/wizard/components/Option/Option.module.css
index 4c08b33a6..37183c26b 100644
--- a/app/react/portainer/environments/wizard/components/Option/Option.module.css
+++ b/app/react/portainer/environments/wizard/components/Option/Option.module.css
@@ -1,9 +1,9 @@
 .root {
   --selected-item-color: var(--blue-2);
   @apply border border-solid;
-  @apply bg-gray-2 border-gray-5 text-black;
-  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
-  @apply th-highcontrast:bg-gray-iron-10 th-highcontrast:border-gray-neutral-8 th-highcontrast:text-white;
+  @apply border-gray-5 bg-gray-2 text-black;
+  @apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
+  @apply th-highcontrast:border-gray-neutral-8 th-highcontrast:bg-gray-iron-10 th-highcontrast:text-white;
 
   display: block;
   width: 200px;
@@ -36,8 +36,8 @@
 }
 
 .active {
-  @apply bg-blue-3 border-blue-6;
-  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
+  @apply border-blue-6 bg-blue-3;
+  @apply th-dark:border-blue-7 th-dark:bg-blue-10;
 
   box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
 }
diff --git a/app/react/portainer/environments/wizard/components/Option/Option.tsx b/app/react/portainer/environments/wizard/components/Option/Option.tsx
index 358a310a1..e3bd66aa4 100644
--- a/app/react/portainer/environments/wizard/components/Option/Option.tsx
+++ b/app/react/portainer/environments/wizard/components/Option/Option.tsx
@@ -44,11 +44,11 @@ export function Option({
       disabled={isLimited}
       onClick={onClick}
     >
-      <div className="flex items-end justify-center text-center mt-2">
+      <div className="mt-2 flex items-end justify-center text-center">
         <IconComponent selected={active} className={styles.iconComponent} />
       </div>
 
-      <div className="mt-3 text-center flex flex-col">
+      <div className="mt-3 flex flex-col text-center">
         <h3>{title}</h3>
         <h5>{description}</h5>
         {isLimited && (
diff --git a/app/react/sidebar/EnvironmentSidebar.tsx b/app/react/sidebar/EnvironmentSidebar.tsx
index ab921a721..c6586c6f7 100644
--- a/app/react/sidebar/EnvironmentSidebar.tsx
+++ b/app/react/sidebar/EnvironmentSidebar.tsx
@@ -46,7 +46,7 @@ export function EnvironmentSidebar() {
           <div className="flex items-center gap-1">
             <span>Environment:</span>
             <Icon icon={Slash} className="text-xl !text-gray-6" />
-            <span className="text-gray-6 text-sm">None selected</span>
+            <span className="text-sm text-gray-6">None selected</span>
           </div>
         </SidebarSectionTitle>
       )}
@@ -130,7 +130,7 @@ function Title({ environment, onClear }: TitleProps) {
 
   if (!isOpen) {
     return (
-      <div className="w-8 flex justify-center -ml-3" title={environment.Name}>
+      <div className="-ml-3 flex w-8 justify-center" title={environment.Name}>
         <EnvironmentIcon className="text-2xl" />
       </div>
     );
@@ -138,8 +138,8 @@ function Title({ environment, onClear }: TitleProps) {
 
   return (
     <div className="flex items-center">
-      <EnvironmentIcon className="text-2xl mr-3" />
-      <span className="text-white text-ellipsis overflow-hidden whitespace-nowrap">
+      <EnvironmentIcon className="mr-3 text-2xl" />
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
         {environment.Name}
       </span>
 
@@ -149,7 +149,7 @@ function Title({ environment, onClear }: TitleProps) {
         onClick={onClear}
         className={clsx(
           styles.closeBtn,
-          'flex items-center justify-center transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white'
+          'ml-auto mr-2 flex h-5 w-5 items-center justify-center rounded border-0 p-1 text-sm text-gray-5 transition-colors duration-200 hover:text-white be:text-gray-6 be:hover:text-white'
         )}
       >
         <X />
diff --git a/app/react/sidebar/Footer/Footer.tsx b/app/react/sidebar/Footer/Footer.tsx
index b441d798a..0c6636a3e 100644
--- a/app/react/sidebar/Footer/Footer.tsx
+++ b/app/react/sidebar/Footer/Footer.tsx
@@ -43,7 +43,7 @@ function BEFooter() {
 
 function FooterContent({ children }: PropsWithChildren<unknown>) {
   return (
-    <div className="text-[10px] space-x-1 text-gray-5 be:text-gray-6 flex items-center mx-auto justify-center">
+    <div className="mx-auto flex items-center justify-center space-x-1 text-[10px] text-gray-5 be:text-gray-6">
       {children}
     </div>
   );
diff --git a/app/react/sidebar/Header.tsx b/app/react/sidebar/Header.tsx
index 7962ff87a..60b24b883 100644
--- a/app/react/sidebar/Header.tsx
+++ b/app/react/sidebar/Header.tsx
@@ -24,14 +24,14 @@ export function Header({ logo: customLogo }: Props) {
         <Link
           to="portainer.home"
           data-cy="portainerSidebar-homeImage"
-          className="text-2xl text-white no-underline hover:no-underline hover:text-white focus:no-underline focus:text-white focus:outline-none"
+          className="text-2xl text-white no-underline hover:text-white hover:no-underline focus:text-white focus:no-underline focus:outline-none"
         >
           <Logo customLogo={customLogo} isOpen={isOpen} />
         </Link>
         {isOpen && customLogo && (
           <div
             className={clsx(
-              'uppercase text-[9.4px] space-x-1 tracking-[.28em] pt-3',
+              'space-x-1 pt-3 text-[9.4px] uppercase tracking-[.28em]',
               'text-gray-3',
               'th-dark:text-gray-warm-6'
             )}
@@ -62,9 +62,9 @@ export function Header({ logo: customLogo }: Props) {
         onClick={() => toggle()}
         className={clsx(
           styles.collapseBtn,
-          'w-6 h-6 flex justify-center items-center border-0 rounded',
+          'flex h-6 w-6 items-center justify-center rounded border-0',
           'transition-all duration-200',
-          'text-sm text-gray-4 be:text-gray-5 hover:text-white be:hover:text-white',
+          'text-sm text-gray-4 hover:text-white be:text-gray-5 be:hover:text-white',
           'bg-blue-11 be:bg-gray-10',
           'th-dark:bg-gray-warm-11',
           'absolute',
diff --git a/app/react/sidebar/SettingsSidebar.tsx b/app/react/sidebar/SettingsSidebar.tsx
index 968135f0f..6f3e27e9a 100644
--- a/app/react/sidebar/SettingsSidebar.tsx
+++ b/app/react/sidebar/SettingsSidebar.tsx
@@ -151,7 +151,7 @@ export function SettingsSidebar({ isAdmin, isTeamLeader }: Props) {
               }
               target="_blank"
               rel="noreferrer"
-              className="px-3 rounded flex h-8 items-center"
+              className="flex h-8 items-center rounded px-3"
             >
               Help / About
             </a>
diff --git a/app/react/sidebar/Sidebar.tsx b/app/react/sidebar/Sidebar.tsx
index 867f6403f..ad342d37f 100644
--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@@ -35,13 +35,13 @@ export function Sidebar() {
         <nav
           className={clsx(
             styles.nav,
-            'p-5 flex flex-col flex-1 overflow-y-auto'
+            'flex flex-1 flex-col overflow-y-auto p-5'
           )}
           aria-label="Main"
         >
           <Header logo={LogoURL} />
           {/* negative margin + padding -> scrollbar won't hide the content */}
-          <div className="mt-6 overflow-y-auto flex-1 -mr-4 pr-4">
+          <div className="mt-6 -mr-4 flex-1 overflow-y-auto pr-4">
             <ul className="space-y-9">
               <SidebarItem
                 to="portainer.home"
diff --git a/app/react/sidebar/SidebarItem/Head.tsx b/app/react/sidebar/SidebarItem/Head.tsx
index 0862e0f22..de85d3c02 100644
--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@@ -47,12 +47,12 @@ export function Head({
       onClick={anchorProps.onClick}
       className={clsx(
         anchorProps.className,
-        'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit',
-        'w-full flex-1 rounded-md flex items-center h-8 space-x-4 text-sm',
-        'hover:bg-blue-9 th-dark:hover:bg-gray-true-9 be:hover:bg-gray-9 transition-colors duration-200',
+        'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
+        'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
+        'transition-colors duration-200 hover:bg-blue-9 be:hover:bg-gray-9 th-dark:hover:bg-gray-true-9',
         {
-          'px-3 justify-start w-full': isOpen,
-          'justify-center w-8': !isOpen,
+          'w-full justify-start px-3': isOpen,
+          'w-8 justify-center': !isOpen,
         }
       )}
       data-cy={dataCy}
@@ -66,7 +66,7 @@ export function Head({
 
   return (
     <Tippy
-      className="!opacity-100 bg-blue-9 be:bg-gray-9 th-dark:bg-gray-true-9 !rounded-md !py-2 !px-3"
+      className="!rounded-md bg-blue-9 !py-2 !px-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
       content={label}
       delay={[0, 0]}
       duration={[0, 0]}
diff --git a/app/react/sidebar/SidebarItem/Menu.tsx b/app/react/sidebar/SidebarItem/Menu.tsx
index a954458ab..2d9668e8a 100644
--- a/app/react/sidebar/SidebarItem/Menu.tsx
+++ b/app/react/sidebar/SidebarItem/Menu.tsx
@@ -39,16 +39,16 @@ export function Menu({
 
   return (
     <div className="flex-1">
-      <div className="flex w-full justify-between items-center relative ">
+      <div className="relative flex w-full items-center justify-between ">
         {head}
         {isSidebarOpen && Children.count(children) > 0 && (
           <button
-            className="bg-transparent border-0 w-6 h-6 flex items-center justify-center absolute right-2 text-gray-5"
+            className="absolute right-2 flex h-6 w-6 items-center justify-center border-0 bg-transparent text-gray-5"
             onClick={handleClickArrow}
             type="button"
             aria-label="Collapse button"
           >
-            <CollapseButtonIcon className="w-4 h-4" />
+            <CollapseButtonIcon className="h-4 w-4" />
           </button>
         )}
       </div>
diff --git a/app/react/sidebar/SidebarItem/Wrapper.tsx b/app/react/sidebar/SidebarItem/Wrapper.tsx
index af852ca6f..c01aab749 100644
--- a/app/react/sidebar/SidebarItem/Wrapper.tsx
+++ b/app/react/sidebar/SidebarItem/Wrapper.tsx
@@ -17,7 +17,7 @@ export function Wrapper({
       className={clsx(
         'flex',
         className,
-        'text-gray-3 min-h-8 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
+        'min-h-8 text-gray-3 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
       )}
       aria-label={label}
       // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/app/react/sidebar/SidebarSection.tsx b/app/react/sidebar/SidebarSection.tsx
index 9de673618..f94fce945 100644
--- a/app/react/sidebar/SidebarSection.tsx
+++ b/app/react/sidebar/SidebarSection.tsx
@@ -45,7 +45,7 @@ export function SidebarSectionTitle({
   }
 
   return (
-    <li className="ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out">
+    <li className="ml-3 text-sm text-gray-3 transition-all duration-500 ease-in-out be:text-gray-6">
       {children}
     </li>
   );
diff --git a/app/react/sidebar/UpgradeBEBanner/LoadingDialog.tsx b/app/react/sidebar/UpgradeBEBanner/LoadingDialog.tsx
index dbed6aab7..b30e871e6 100644
--- a/app/react/sidebar/UpgradeBEBanner/LoadingDialog.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/LoadingDialog.tsx
@@ -12,7 +12,7 @@ export function LoadingDialog() {
   return (
     <Modal aria-label="Upgrade Portainer to Business Edition">
       <Modal.Body>
-        <div className="flex flex-col items-center justify-center w-full">
+        <div className="flex w-full flex-col items-center justify-center">
           <Icon
             icon={Loader2}
             className="animate-spin-slow !text-8xl !text-blue-8"
@@ -21,7 +21,7 @@ export function LoadingDialog() {
 
           <h1 className="!text-2xl">Upgrading Portainer...</h1>
 
-          <p className="text-center text-gray-6 text-xl">
+          <p className="text-center text-xl text-gray-6">
             Please wait while we upgrade your Portainer to Business Edition.
           </p>
         </div>
diff --git a/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx b/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
index 01f220303..eae07d6d9 100644
--- a/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
@@ -20,7 +20,7 @@ export function NonAdminUpgradeDialog({
         Edition.
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex gap-2 w-full">
+        <div className="flex w-full gap-2">
           <Button
             color="default"
             size="medium"
diff --git a/app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx b/app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx
index 7805a2fbc..54e80905f 100644
--- a/app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx
@@ -57,11 +57,11 @@ function UpgradeBEBanner() {
     <>
       <button
         type="button"
-        className="border-0 bg-warning-5 text-warning-9 w-full py-2 font-semibold flex justify-center items-center gap-3"
+        className="flex w-full items-center justify-center gap-3 border-0 bg-warning-5 py-2 font-semibold text-warning-9"
         onClick={handleClick}
       >
         {isSidebarOpen && <>Upgrade to Business Edition</>}
-        <ArrowRight className="text-lg lucide" />
+        <ArrowRight className="lucide text-lg" />
       </button>
 
       {isOpen && <UpgradeDialog onDismiss={() => setIsOpen(false)} />}
diff --git a/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx b/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
index c7fb409b0..df48bf3c6 100644
--- a/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
@@ -37,7 +37,7 @@ export function UploadLicenseDialog({
       aria-label="Upgrade Portainer to Business Edition"
     >
       <Modal.Header
-        title={<h4 className="font-medium text-xl">Upgrade Portainer</h4>}
+        title={<h4 className="text-xl font-medium">Upgrade Portainer</h4>}
       />
       <Formik
         initialValues={initialValues}
@@ -71,7 +71,7 @@ export function UploadLicenseDialog({
               </FormControl>
             </Modal.Body>
             <Modal.Footer>
-              <div className="flex gap-2 [&>*]:w-1/2 w-full">
+              <div className="flex w-full gap-2 [&>*]:w-1/2">
                 <Button
                   color="default"
                   size="medium"
diff --git a/package.json b/package.json
index c294844b1..fa8174382 100644
--- a/package.json
+++ b/package.json
@@ -232,7 +232,8 @@
     "plop": "^2.6.0",
     "postcss": "^8.4.14",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "react-test-renderer": "^17.0.2",
     "source-map-loader": "^3.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
diff --git a/yarn.lock b/yarn.lock
index 982ce7bd9..7fc471e3c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15167,15 +15167,20 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-plugin-tailwindcss@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz#989b35afd86c550cb671da69891aba4f4a051159"
+  integrity sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==
+
 "prettier@>=2.2.1 <=2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
   integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
-prettier@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
-  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+prettier@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
+  integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
 
 pretty-error@^2.1.1:
   version "2.1.2"