diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index 63f5e32a1720..36445e20a123 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -276,13 +276,13 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
       <div class="pointer-events-none flex h-full w-full items-center justify-center">
         <div
           class={cn(
-            "modal rounded-double bg-bg text-text ring-sub-alt pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto p-4 ring-4 sm:p-8",
+            "modal rounded-double pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
             props.modalClass,
           )}
           ref={modalRef}
         >
           <Show when={props.title !== undefined && props.title !== ""}>
-            <div class="text-sub text-2xl">{props.title}</div>
+            <div class="text-2xl text-sub">{props.title}</div>
           </Show>
           {props.children}
         </div>
diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index f0d0c19abba9..1e713a4862b0 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -12,7 +12,7 @@ import { VersionButton } from "./VersionButton";
 export function Footer(): JSXElement {
   return (
     <footer
-      class={cn("text-sub relative text-xs", {
+      class={cn("relative text-xs text-sub", {
         "opacity-0": getIsScreenshotting(),
       })}
     >
@@ -24,7 +24,7 @@ export function Footer(): JSXElement {
           "opacity-0": getFocus(),
         }}
       >
-        <div class="xs:grid-cols-2 grid grid-cols-1 justify-items-start sm:grid-cols-4 lg:flex">
+        <div class="grid grid-cols-1 justify-items-start xs:grid-cols-2 sm:grid-cols-4 lg:flex">
           <Button
             type="text"
             text="contact"
diff --git a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
index 81aa3602c901..71219605b41e 100644
--- a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
+++ b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
@@ -25,7 +25,7 @@ export function ScrollToTop(): JSXElement {
   return (
     <div class="content-grid ScrollToTop pointer-events-none fixed top-0 left-0 z-999999 h-full w-full">
       <button
-        class="breakout bg-sub-alt text-sub ring-bg hover:text-bg hover:bg-text pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full text-[2rem] ring-8"
+        class="breakout pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full bg-sub-alt text-[2rem] text-sub ring-8 ring-bg hover:bg-text hover:text-bg"
         style={{
           "grid-column": "content-end/breakout-end",
         }}
diff --git a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
index 3be0b6f498f8..566e6e0c06ba 100644
--- a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
+++ b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
@@ -42,7 +42,7 @@ export function ThemeIndicator(): JSXElement {
     >
       <div class="relative">
         <Show when={getThemeIndicator().isFavorite}>
-          <div class="bg-bg absolute top-[-0.5em] right-[-0.5em] flex rounded-full p-[0.25em]">
+          <div class="absolute top-[-0.5em] right-[-0.5em] flex rounded-full bg-bg p-[0.25em]">
             <Fa icon="fa-star" size={0.5} />
           </div>
         </Show>
diff --git a/frontend/src/ts/components/layout/footer/VersionButton.tsx b/frontend/src/ts/components/layout/footer/VersionButton.tsx
index a390ec4e9c19..f8d4aeded4c4 100644
--- a/frontend/src/ts/components/layout/footer/VersionButton.tsx
+++ b/frontend/src/ts/components/layout/footer/VersionButton.tsx
@@ -50,7 +50,7 @@ export function VersionButton(): JSXElement {
       <div class="text">{getVersionText()}</div>
       <Show when={showNewIndicator()}>
         <div
-          class="rounded-half bg-main text-bg px-1"
+          class="rounded-half bg-main px-1 text-bg"
           onClick={handleIndicatorClick}
         >
           new
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 072c5308706e..b350ebfadd4f 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -27,7 +27,7 @@ function Banner(props: BannerType): JSXElement {
   return (
     <div
       class={cn(
-        "content-grid text-bg [&_a]:text-bg [&_a]:hover:text-text w-full [&_a]:underline",
+        "content-grid w-full text-bg [&_a]:text-bg [&_a]:underline [&_a]:hover:text-text",
         {
           "bg-error": props.level === "error",
           "bg-sub": props.level === "notice",
@@ -61,7 +61,7 @@ function Banner(props: BannerType): JSXElement {
           else={
             <button
               type="button"
-              class="text text-bg hover:text-text -mr-2 self-center"
+              class="text -mr-2 self-center text-bg hover:text-text"
               onClick={() => {
                 remove();
               }}
diff --git a/frontend/src/ts/components/layout/overlays/FpsCounter.tsx b/frontend/src/ts/components/layout/overlays/FpsCounter.tsx
index 9dbe20996ae5..70b71c7838b8 100644
--- a/frontend/src/ts/components/layout/overlays/FpsCounter.tsx
+++ b/frontend/src/ts/components/layout/overlays/FpsCounter.tsx
@@ -54,7 +54,7 @@ export function FpsCounter(): JSX.Element {
   return (
     <Show when={isVisible()}>
       <div
-        class={"bg-sub-alt fixed top-0 left-0 z-9999 px-2 py-1"}
+        class={"fixed top-0 left-0 z-9999 bg-sub-alt px-2 py-1"}
         style={{
           color: fpsColor(),
         }}
diff --git a/frontend/src/ts/components/layout/overlays/LoaderBar.tsx b/frontend/src/ts/components/layout/overlays/LoaderBar.tsx
index e43883302c3e..a20234bf0084 100644
--- a/frontend/src/ts/components/layout/overlays/LoaderBar.tsx
+++ b/frontend/src/ts/components/layout/overlays/LoaderBar.tsx
@@ -18,7 +18,7 @@ export function LoaderBar(): JSX.Element {
 
   return (
     <div
-      class="bg-main pointer-events-none fixed top-0 z-9999 hidden h-1 w-full animate-[loader]"
+      class="pointer-events-none fixed top-0 z-9999 hidden h-1 w-full animate-[loader] bg-main"
       style={{
         "animation-duration": "2s",
         "animation-iteration-count": "infinite",
diff --git a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
index 7a5fa96cb380..f91063a0be34 100644
--- a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
+++ b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
@@ -6,28 +6,28 @@ import { isDevEnvironment } from "../../../utils/misc";
 export function MediaQueryDebugger(): JSXElement {
   return (
     <Show when={isDevEnvironment()}>
-      <div class="text-text fixed top-2 z-999999999999999 flex flex-col gap-2 font-mono text-xs">
-        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+      <div class="fixed top-2 z-999999999999999 flex flex-col gap-2 font-mono text-xs text-text">
+        <div class="flex w-min rounded-r bg-sub-alt px-2 py-1">
           <div class="mr-2">OLD</div>
           <div class="hidden 2xl:block">red</div>
           <div class="hidden xl:block 2xl:hidden">orange</div>
           <div class="hidden lg:block xl:hidden">yellow</div>
           <div class="hidden md:block lg:hidden">green</div>
           <div class="hidden sm:block md:hidden">blue</div>
-          <div class="xs:block hidden sm:hidden">purple</div>
+          <div class="hidden xs:block sm:hidden">purple</div>
           <div class="xs:hidden">gray</div>
         </div>
-        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+        <div class="flex w-min rounded-r bg-sub-alt px-2 py-1">
           <div class="mr-2">CSS</div>
           <div class="hidden 2xl:block">2xl</div>
           <div class="hidden xl:block 2xl:hidden">xl</div>
           <div class="hidden lg:block xl:hidden">lg</div>
           <div class="hidden md:block lg:hidden">md</div>
           <div class="hidden sm:block md:hidden">sm</div>
-          <div class="xs:block hidden sm:hidden">xs</div>
+          <div class="hidden xs:block sm:hidden">xs</div>
           <div class="xs:hidden">xxs</div>
         </div>
-        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+        <div class="flex w-min rounded-r bg-sub-alt px-2 py-1">
           <div class="mr-2">JS</div>
           <Switch>
             <Match when={bp().xxl}>2xl</Match>
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
index 798c85e0d795..d6b28b46d091 100644
--- a/frontend/src/ts/components/layout/overlays/Overlays.tsx
+++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -19,7 +19,7 @@ export function Overlays(): JSXElement {
         type="button"
         id="commandLineMobileButton"
         class={cn(
-          "bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12",
+          "fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full bg-main text-center leading-12 text-bg",
           {
             "opacity-0": getIsScreenshotting(),
           },
diff --git a/frontend/src/ts/components/modals/SupportModal.tsx b/frontend/src/ts/components/modals/SupportModal.tsx
index 82349c3ee841..5987e86e732b 100644
--- a/frontend/src/ts/components/modals/SupportModal.tsx
+++ b/frontend/src/ts/components/modals/SupportModal.tsx
@@ -21,7 +21,7 @@ export function SupportModal(): JSXElement {
         not be possible without you and your continued support.{" "}
         <Fa icon="fa-heart" />
       </div>
-      <div class="xs:grid-cols-2 grid grid-cols-1 gap-4 md:grid-cols-4">
+      <div class="grid grid-cols-1 gap-4 xs:grid-cols-2 md:grid-cols-4">
         <Button
           type="button"
           onClick={() => {
diff --git a/frontend/src/ts/components/modals/VersionHistoryModal.tsx b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
index 86ba4875df6e..85556adceb27 100644
--- a/frontend/src/ts/components/modals/VersionHistoryModal.tsx
+++ b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
@@ -67,12 +67,12 @@ function ReleaseItem(props: {
   return (
     <div class="grid gap-4">
       <div class="flex place-items-center justify-between">
-        <div class="text-main text-4xl">{props.name}</div>
+        <div class="text-4xl text-main">{props.name}</div>
         <div class="text-sub">{props.publishedAt}</div>
       </div>
       {/* oxlint-disable-next-line solid/no-innerhtml */}
       <div innerHTML={props.bodyHTML}></div>
-      <div class="bg-sub-alt mt-4 mb-16 h-1 w-full rounded"></div>
+      <div class="mt-4 mb-16 h-1 w-full rounded bg-sub-alt"></div>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 664ff05aad48..683765cf6880 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -132,7 +132,7 @@ export function DataTable<TData, TValue = unknown>(
                             onClick={(e) => {
                               header.column.getToggleSortingHandler()?.(e);
                             }}
-                            class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap"
+                            class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
                             {...(header.column.columnDef.meta
                               ?.sortableHeaderMeta ?? {})}
                           >
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 1e1f5e762ae4..88f1abd7390f 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -28,7 +28,7 @@ const TableBody: Component<ComponentProps<"tbody">> = (props) => {
   return (
     <tbody
       class={cn(
-        "[&>tr]:odd:bg-sub-alt text-xs md:text-sm lg:text-base",
+        "text-xs md:text-sm lg:text-base [&>tr]:odd:bg-sub-alt",
         local.class,
       )}
       {...others}
@@ -57,7 +57,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
     <th
       aria-label={local["aria-label"]}
       class={cn(
-        "text-sub has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal",
+        "has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal text-sub",
         local.class,
       )}
       {...others}