diff --git a/.prettierrc b/.prettierrc
index f71a7a2de..ff119d5df 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -13,5 +13,19 @@
   "arrowParens": "avoid",
   "endOfLine": "crlf",
   "htmlWhitespaceSensitivity": "strict",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "./apps/deploy-web/**",
+      "options": {
+        "tailwindConfig": "./apps/deploy-web/tailwind.config.ts"
+      }
+    },
+    {
+      "files": "./apps/stats-web/**",
+      "options": {
+        "tailwindConfig": "./apps/stats-web/tailwind.config.ts"
+      }
+    }
+  ]
 }
diff --git a/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx b/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx
index d3d08db0a..95a8eb67c 100644
--- a/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx
+++ b/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx
@@ -117,7 +117,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
     >
       <form onSubmit={handleSubmit(onSubmit)} ref={formRef}>
         <Alert className="mb-4">
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             <LinkTo onClick={ev => handleDocClick(ev, "https://docs.cosmos.network/v0.46/modules/feegrant/")}>Authorized Fee Spend</LinkTo> allows users to
             authorize spend of a set number of tokens on fees from a source wallet to a destination, funded wallet.
           </p>
@@ -206,7 +206,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
 
         {!!amount && granteeAddress && (
           <Alert>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               This address will be able to spend up to {amount} AKT on <b>transaction fees</b> on your behalf ending on{" "}
               <FormattedDate value={expiration} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />.
             </p>
diff --git a/apps/deploy-web/src/components/authorizations/Authorizations.tsx b/apps/deploy-web/src/components/authorizations/Authorizations.tsx
index 48677f423..4f7f5fa47 100644
--- a/apps/deploy-web/src/components/authorizations/Authorizations.tsx
+++ b/apps/deploy-web/src/components/authorizations/Authorizations.tsx
@@ -135,7 +135,7 @@ export const Authorizations: React.FunctionComponent = () => {
           </div>
         }
       >
-        <h3 className="text-muted-foreground mb-4">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on deployments or deployment deposits using your funds. You can revoke these
           authorizations at any time.
         </h3>
@@ -164,7 +164,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No authorizations given.</p>
+                <p className="text-sm text-muted-foreground">No authorizations given.</p>
               )}
             </>
           )}
@@ -194,7 +194,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No authorizations received.</p>
+                <p className="text-sm text-muted-foreground">No authorizations received.</p>
               )}
             </>
           )}
@@ -208,7 +208,7 @@ export const Authorizations: React.FunctionComponent = () => {
           </Button>
         </div>
 
-        <h3 className="text-muted-foreground mb-4">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on transaction fees using your funds. You can revoke these authorizations at any
           time.
         </h3>
@@ -244,7 +244,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No allowances issued.</p>
+                <p className="text-sm text-muted-foreground">No allowances issued.</p>
               )}
             </>
           )}
@@ -275,7 +275,7 @@ export const Authorizations: React.FunctionComponent = () => {
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground text-sm">No allowances received.</p>
+                <p className="text-sm text-muted-foreground">No allowances received.</p>
               )}
             </>
           )}
diff --git a/apps/deploy-web/src/components/authorizations/GrantModal.tsx b/apps/deploy-web/src/components/authorizations/GrantModal.tsx
index 227881c1d..190e8326a 100644
--- a/apps/deploy-web/src/components/authorizations/GrantModal.tsx
+++ b/apps/deploy-web/src/components/authorizations/GrantModal.tsx
@@ -124,7 +124,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
           className="mb-4"
           // severity="info"
         >
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             <LinkTo onClick={ev => handleDocClick(ev, "https://akash.network/docs/network-features/authorized-spend/")}>Authorized Spend</LinkTo> allows users
             to authorize spend of a set number of tokens from a source wallet to a destination, funded wallet. The authorized spend is restricted to Akash
             deployment activities and the recipient of the tokens would not have access to those tokens for other operations.
@@ -235,7 +235,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
           <Alert
           // severity="info"
           >
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               This address will be able to spend up to {amount} {selectedToken?.label} on your behalf ending on{" "}
               <FormattedDate value={expiration} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />.
             </p>
diff --git a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
index 115cae3e1..dfefbaa55 100644
--- a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
+++ b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -167,7 +167,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
 
   return (
     <>
-      <TableRow className="hover:bg-muted-foreground/10 cursor-pointer [&>td]:p-2" onClick={() => viewDeployment()}>
+      <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" onClick={() => viewDeployment()}>
         <TableCell>
           <div className="flex items-center justify-center">
             <SpecDetailList
@@ -196,7 +196,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                     </>
                   }
                 >
-                  <WarningTriangle className="text-warning text-xs" />
+                  <WarningTriangle className="text-xs text-warning" />
                 </CustomTooltip>
               )}
             </div>
@@ -225,18 +225,18 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                       </strong>
                     </div>
                     <br />
-                    <p className="text-muted-foreground text-xs">
+                    <p className="text-xs text-muted-foreground">
                       The escrow account balance will be fully returned to your wallet balance when the deployment is closed.
                     </p>
                   </div>
                 }
               >
-                <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                <InfoCircle className="ml-2 text-xs text-muted-foreground" />
               </CustomTooltip>
 
               {escrowBalance <= 0 && (
                 <CustomTooltip title="Your deployment is out of funds and can be closed by your provider at any time now. You can add funds to keep active.">
-                  <WarningCircle className="text-destructive-foreground ml-2" />
+                  <WarningCircle className="ml-2 text-destructive-foreground" />
                 </CustomTooltip>
               )}
             </div>
@@ -255,7 +255,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                     </span>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
             </div>
diff --git a/apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx b/apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx
index 0bb87c563..d89e6239b 100644
--- a/apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx
+++ b/apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx
@@ -52,12 +52,12 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                   </>
                 }
               >
-                <InfoCircle className="text-muted-foreground text-xs" />
+                <InfoCircle className="text-xs text-muted-foreground" />
               </CustomTooltip>
 
               {isActive && hasActiveLeases && !!realTimeLeft && realTimeLeft.escrow <= 0 && (
                 <CustomTooltip title="Your deployment is out of funds and can be closed by your provider at any time now. You can add funds to keep active.">
-                  <WarningCircle className="text-destructive text-xs" />
+                  <WarningCircle className="text-xs text-destructive" />
                 </CustomTooltip>
               )}
             </div>
@@ -78,7 +78,7 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                     </span>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground text-xs" />
+                  <InfoCircle className="text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
             )
@@ -102,7 +102,7 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
                   </span>
                 }
               >
-                <InfoCircle className="text-muted-foreground text-xs" />
+                <InfoCircle className="text-xs text-muted-foreground" />
               </CustomTooltip>
             </div>
           }
diff --git a/apps/deploy-web/src/components/deployments/LeaseChip.tsx b/apps/deploy-web/src/components/deployments/LeaseChip.tsx
index 45a07cf31..34e2c86bd 100644
--- a/apps/deploy-web/src/components/deployments/LeaseChip.tsx
+++ b/apps/deploy-web/src/components/deployments/LeaseChip.tsx
@@ -34,7 +34,7 @@ export const LeaseChip: React.FunctionComponent<Props> = ({ lease, providers })
         event.stopPropagation();
       }}
     >
-      <Badge variant="outline" className="hover:bg-primary/20 whitespace-nowrap text-xs">
+      <Badge variant="outline" className="whitespace-nowrap text-xs hover:bg-primary/20">
         <span>
           {providerName?.length > 20 ? (
             <CustomTooltip title={providerName}>
diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx
index d2f9be6bc..480a77c46 100644
--- a/apps/deploy-web/src/components/deployments/LeaseRow.tsx
+++ b/apps/deploy-web/src/components/deployments/LeaseRow.tsx
@@ -151,11 +151,11 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
     <Card className="mb-4">
       <CardHeader className="bg-secondary py-2">
         <div className="flex items-center">
-          <div className="text-muted-foreground inline-flex items-center text-xs">
+          <div className="inline-flex items-center text-xs text-muted-foreground">
             <span>{lease.state}</span>
             <StatusPill state={lease.state} size="small" />
 
-            <span className="text-muted-foreground ml-4">GSEQ:</span>
+            <span className="ml-4 text-muted-foreground">GSEQ:</span>
             <span className="ml-1">{lease.gseq}</span>
 
             <span className="ml-4">OSEQ:</span>
@@ -274,7 +274,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                           </>
                         }
                       >
-                        <InfoCircle className="text-muted-foreground ml-2 text-xs" fontSize="small" />
+                        <InfoCircle className="ml-2 text-xs text-muted-foreground" fontSize="small" />
                       </CustomTooltip>
                     </div>
                   )}
@@ -292,19 +292,19 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                   })}
                 >
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Available:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Available:&nbsp;</span>
                     <Badge variant={service.available > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.available}</small>
                     </Badge>
                   </div>
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Ready Replicas:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Ready Replicas:&nbsp;</span>
                     <Badge variant={service.ready_replicas > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.ready_replicas}</small>
                     </Badge>
                   </div>
                   <div className="flex items-center space-x-1">
-                    <span className="text-muted-foreground text-xs">Total:&nbsp;</span>
+                    <span className="text-xs text-muted-foreground">Total:&nbsp;</span>
                     <Badge variant={service.total > 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3">
                       <small>{service.total}</small>
                     </Badge>
@@ -321,7 +321,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                             <div key={"port_" + p.externalPort}>
                               {p.host ? (
                                 <Link
-                                  className={cn({ ["text-muted-foreground cursor-none"]: p.available < 1 }, "inline-flex items-center space-x-2 text-sm")}
+                                  className={cn({ ["cursor-none text-muted-foreground"]: p.available < 1 }, "inline-flex items-center space-x-2 text-sm")}
                                   href={`http://${p.host}:${p.externalPort}`}
                                   target="_blank"
                                 >
@@ -405,7 +405,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
                         </>
                       }
                     >
-                      <InfoCircle className="text-muted-foreground text-xs" />
+                      <InfoCircle className="text-xs text-muted-foreground" />
                     </CustomTooltip>
                     <Button
                       size="icon"
diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx
index c3faeae71..bee9dabe0 100644
--- a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx
+++ b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx
@@ -205,7 +205,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                     </div>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground text-xs" />
+                  <InfoCircle className="text-xs text-muted-foreground" />
                 </CustomTooltip>
 
                 {!!deploymentVersion && deploymentVersion !== deployment.version && (
@@ -216,7 +216,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                       </Alert>
                     }
                   >
-                    <WarningCircle className="text-warning text-xs" />
+                    <WarningCircle className="text-xs text-warning" />
                   </CustomTooltip>
                 )}
               </div>
diff --git a/apps/deploy-web/src/components/deployments/ServiceSelect.tsx b/apps/deploy-web/src/components/deployments/ServiceSelect.tsx
index d59bc3558..b735ec781 100644
--- a/apps/deploy-web/src/components/deployments/ServiceSelect.tsx
+++ b/apps/deploy-web/src/components/deployments/ServiceSelect.tsx
@@ -31,7 +31,7 @@ export const ServiceSelect = ({ defaultValue, services, onSelectedChange }) => {
       >
         {services.map(service => (
           <MenuItem key={service} value={service} dense>
-            <span className="text-muted-foreground text-sm">{service}</span>
+            <span className="text-sm text-muted-foreground">{service}</span>
           </MenuItem>
         ))}
       </Select>
diff --git a/apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx b/apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx
index 1683e1c3a..091e2abb8 100644
--- a/apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx
+++ b/apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx
@@ -64,7 +64,7 @@ export const ShellDownloadModal = ({ selectedLease, onCloseClick, selectedServic
       onClose={onCloseClick}
       maxWidth="xs"
     >
-      <p className="text-muted-foreground text-xs">Enter the path of a file on the server to be downloaded to your computer. Example: /app/logs.txt</p>
+      <p className="text-xs text-muted-foreground">Enter the path of a file on the server to be downloaded to your computer. Example: /app/logs.txt</p>
       <Alert variant="warning" className="my-2 py-2">
         <p className="text-xs">This is an experimental feature and may not work reliably.</p>
       </Alert>
diff --git a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
index 049a1d8a3..81d8ac2ff 100644
--- a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
+++ b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -153,7 +153,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
           Docker container
         </StepLabel>
         <StepContent>
-          <p className="text-muted-foreground mb-2">
+          <p className="mb-2 text-muted-foreground">
             To deploy on Akash, you need a docker container image as everything runs within Kubernetes. You can make your own or browse through pre-made
             solutions in the marketplace.
           </p>
diff --git a/apps/deploy-web/src/components/graph/Graph.tsx b/apps/deploy-web/src/components/graph/Graph.tsx
index 0301dc967..5e4cd9f6c 100644
--- a/apps/deploy-web/src/components/graph/Graph.tsx
+++ b/apps/deploy-web/src/components/graph/Graph.tsx
@@ -81,7 +81,7 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ rangedData, snapshotMetad
         pointBorderWidth={graphMetadata.border}
         isInteractive={true}
         tooltip={props => (
-          <div className="bg-primary text-primary-foreground rounded-sm px-3 py-2 leading-4">
+          <div className="rounded-sm bg-primary px-3 py-2 leading-4 text-primary-foreground">
             <div className="mb-1 text-xs">
               <FormattedDate value={new Date(props.point.data.x)} day="numeric" month="long" timeZone="UTC" year="2-digit" />
             </div>
diff --git a/apps/deploy-web/src/components/home/WelcomePanel.tsx b/apps/deploy-web/src/components/home/WelcomePanel.tsx
index 9176ad11e..d6bb58254 100644
--- a/apps/deploy-web/src/components/home/WelcomePanel.tsx
+++ b/apps/deploy-web/src/components/home/WelcomePanel.tsx
@@ -38,7 +38,7 @@ export const WelcomePanel: React.FC = () => {
 
                 <div className="flex flex-col">
                   <Link href={UrlService.getStarted()}>Getting started with Akash Console</Link>
-                  <span className="text-muted-foreground text-sm">Learn how to deploy your first docker container on Akash in a few click using Console.</span>
+                  <span className="text-sm text-muted-foreground">Learn how to deploy your first docker container on Akash in a few click using Console.</span>
                 </div>
               </li>
 
@@ -51,7 +51,7 @@ export const WelcomePanel: React.FC = () => {
 
                 <div className="ml-4 flex flex-col">
                   <Link href={UrlService.templates()}>Explore the marketplace</Link>
-                  <span className="text-muted-foreground text-sm">
+                  <span className="text-sm text-muted-foreground">
                     Browse through the marketplace of pre-made solutions with categories like blogs, blockchain nodes and more!
                   </span>
                 </div>
@@ -68,7 +68,7 @@ export const WelcomePanel: React.FC = () => {
                   <Link href="https://akash.network/docs/" target="_blank">
                     Learn more about Akash
                   </Link>
-                  <span className="text-muted-foreground text-sm">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
+                  <span className="text-sm text-muted-foreground">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
                 </div>
               </li>
             </ul>
diff --git a/apps/deploy-web/src/components/home/YourAccount.tsx b/apps/deploy-web/src/components/home/YourAccount.tsx
index e2ad4f5b7..34d05eee8 100644
--- a/apps/deploy-web/src/components/home/YourAccount.tsx
+++ b/apps/deploy-web/src/components/home/YourAccount.tsx
@@ -207,7 +207,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
               {activeDeployments.length > 0 ? (
                 <>
                   <div className="mt-8">
-                    <p className="text-muted-foreground mb-4 text-sm">Total resources leased</p>
+                    <p className="mb-4 text-sm text-muted-foreground">Total resources leased</p>
 
                     <div className="flex flex-col items-start">
                       <LeaseSpecDetail type="cpu" value={totalCpu} />
@@ -218,7 +218,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
                   </div>
 
                   <div className="mt-8">
-                    <p className="text-muted-foreground mb-4 text-sm">Total cost</p>
+                    <p className="mb-4 text-sm text-muted-foreground">Total cost</p>
 
                     <div className="flex items-center">
                       <p>
@@ -236,7 +236,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
                   </div>
 
                   <div className="mt-8">
-                    <p className="text-muted-foreground mb-4 text-sm">Providers</p>
+                    <p className="mb-4 text-sm text-muted-foreground">Providers</p>
 
                     <div className="flex flex-wrap items-center gap-2">
                       {userProviders?.map(p => (
@@ -311,7 +311,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
                     </div>
                   </div>
 
-                  <div className="border-muted-foreground mb-2 mt-2 flex items-center border-t pt-2 text-sm leading-5 transition-opacity duration-200 ease-in-out">
+                  <div className="mb-2 mt-2 flex items-center border-t border-muted-foreground pt-2 text-sm leading-5 transition-opacity duration-200 ease-in-out">
                     <div className="h-4 w-4 rounded-lg" />
                     <div className="ml-4 w-[90px] font-bold"></div>
                     <div className="ml-4 w-[100px]"></div>
@@ -370,7 +370,7 @@ const BalancePie: React.FunctionComponent<BalancePieProps> = ({ label, data, get
           return `${udenomToDenom(value, 2)} ${label}`;
         }}
         tooltip={value => (
-          <div className="bg-muted flex items-center rounded px-2 py-1">
+          <div className="flex items-center rounded bg-muted px-2 py-1">
             <div className="h-2 w-2" style={{ backgroundColor: value.datum.color }} />
             <div className="ml-2">
               {value.datum.label}: {value.datum.formattedValue}
diff --git a/apps/deploy-web/src/components/layout/AccountMenu.tsx b/apps/deploy-web/src/components/layout/AccountMenu.tsx
index 003d0aebb..d6f92da39 100644
--- a/apps/deploy-web/src/components/layout/AccountMenu.tsx
+++ b/apps/deploy-web/src/components/layout/AccountMenu.tsx
@@ -90,7 +90,7 @@ export function AccountMenu() {
                     ) : (
                       <div>
                         <CustomDropdownLinkItem
-                          className="bg-primary hover:bg-primary/80 focus:bg-primary/80 !text-white hover:text-white"
+                          className="bg-primary !text-white hover:bg-primary/80 hover:text-white focus:bg-primary/80"
                           onClick={() => router.push(UrlService.signup())}
                         >
                           Sign up
diff --git a/apps/deploy-web/src/components/layout/Footer.tsx b/apps/deploy-web/src/components/layout/Footer.tsx
index 6d20ff9f1..d545e7b2c 100644
--- a/apps/deploy-web/src/components/layout/Footer.tsx
+++ b/apps/deploy-web/src/components/layout/Footer.tsx
@@ -32,7 +32,7 @@ export const Footer: React.FunctionComponent<IFooterProps> = () => {
                 href="https://discord.gg/akash"
                 target="_blank"
                 rel="noreferrer"
-                className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+                className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
               >
                 <Discord className="mx-auto block h-6 w-6 text-5xl" />
               </a>
@@ -42,7 +42,7 @@ export const Footer: React.FunctionComponent<IFooterProps> = () => {
                 href="https://twitter.com/akashnet_"
                 target="_blank"
                 rel="noreferrer"
-                className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+                className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
               >
                 <TwitterX className="mx-auto block h-6 w-6 text-5xl" />
               </a>
@@ -52,7 +52,7 @@ export const Footer: React.FunctionComponent<IFooterProps> = () => {
                 href="https://youtube.com/@AkashNetwork?si=cd2P3ZlAa4gNQw0X?sub_confirmation=1"
                 target="_blank"
                 rel="noreferrer"
-                className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+                className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
               >
                 <Youtube className="mx-auto block h-6 w-6 text-5xl" />
               </a>
@@ -62,7 +62,7 @@ export const Footer: React.FunctionComponent<IFooterProps> = () => {
                 href="https://github.com/akash-network/cloudmos"
                 target="_blank"
                 rel="noreferrer"
-                className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+                className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
               >
                 <Github className="mx-auto block h-6 w-6 text-5xl" />
               </a>
@@ -71,29 +71,29 @@ export const Footer: React.FunctionComponent<IFooterProps> = () => {
 
           <div className="mb-4 mt-2 flex items-center sm:mb-0 sm:mt-0">
             <Link href={UrlService.termsOfService()} className="text-current">
-              <p className="text-muted-foreground text-sm">Terms of Service</p>
+              <p className="text-sm text-muted-foreground">Terms of Service</p>
             </Link>
 
             <div className="ml-4">
               <Link href={UrlService.privacyPolicy()} className="text-current">
-                <p className="text-muted-foreground text-sm">Privacy Policy</p>
+                <p className="text-sm text-muted-foreground">Privacy Policy</p>
               </Link>
             </div>
 
             <div className="ml-4">
               <Link href={UrlService.faq()} className="text-current">
-                <p className="text-muted-foreground text-sm">FAQ</p>
+                <p className="text-sm text-muted-foreground">FAQ</p>
               </Link>
             </div>
 
             <div className="ml-4">
               <Link href={UrlService.contact()} className="text-current">
-                <p className="text-muted-foreground text-sm">Contact</p>
+                <p className="text-sm text-muted-foreground">Contact</p>
               </Link>
             </div>
           </div>
 
-          <p className="text-muted-foreground flex items-center text-balance text-center text-sm leading-loose md:text-left">
+          <p className="flex items-center text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
             <Copyright className="text-xs" />
             &nbsp;Akash Network {year}
           </p>
diff --git a/apps/deploy-web/src/components/layout/Nav.tsx b/apps/deploy-web/src/components/layout/Nav.tsx
index 6411a5c05..dff88c6a5 100644
--- a/apps/deploy-web/src/components/layout/Nav.tsx
+++ b/apps/deploy-web/src/components/layout/Nav.tsx
@@ -21,7 +21,7 @@ export const Nav = ({
   const theme = useCookieTheme();
 
   return (
-    <header className="border-border bg-popover dark:bg-background fixed top-0 z-50 w-full border-b">
+    <header className="fixed top-0 z-50 w-full border-b border-border bg-popover dark:bg-background">
       <div className="flex h-14 items-center justify-between pl-4 pr-4">
         {!!theme && (
           <Link className="flex items-center" href="/">
diff --git a/apps/deploy-web/src/components/layout/NodeStatusBar.tsx b/apps/deploy-web/src/components/layout/NodeStatusBar.tsx
index a22b8c7d7..78d345538 100644
--- a/apps/deploy-web/src/components/layout/NodeStatusBar.tsx
+++ b/apps/deploy-web/src/components/layout/NodeStatusBar.tsx
@@ -19,7 +19,7 @@ export const NodeStatusBar = () => {
   return (
     <div className="mb-4">
       <div className="text-center">
-        <span className="text-primary text-sm font-bold">{selectedNetwork.title}</span>
+        <span className="text-sm font-bold text-primary">{selectedNetwork.title}</span>
       </div>
 
       <LinearLoadingSkeleton isLoading={isRefreshingNodeStatus} />
diff --git a/apps/deploy-web/src/components/layout/Sidebar.tsx b/apps/deploy-web/src/components/layout/Sidebar.tsx
index ea16c8672..4c74115e9 100644
--- a/apps/deploy-web/src/components/layout/Sidebar.tsx
+++ b/apps/deploy-web/src/components/layout/Sidebar.tsx
@@ -148,7 +148,7 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
   const drawer = (
     <div
       style={{ width: _isNavOpen ? drawerWidth : closedDrawerWidth }}
-      className="border-muted-foreground/20 bg-popover dark:bg-background box-border flex h-full flex-shrink-0 flex-col items-center justify-between overflow-y-auto overflow-x-hidden border-r-[1px] transition-[width] duration-300 ease-in-out md:h-[calc(100%-57px)]"
+      className="box-border flex h-full flex-shrink-0 flex-col items-center justify-between overflow-y-auto overflow-x-hidden border-r-[1px] border-muted-foreground/20 bg-popover transition-[width] duration-300 ease-in-out md:h-[calc(100%-57px)] dark:bg-background"
     >
       <div className={cn("flex w-full flex-col items-center justify-between", { ["p-2"]: _isNavOpen, ["pb-2 pt-2"]: !_isNavOpen })}>
         <Link
@@ -219,7 +219,7 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
             </div>
 
             {publicRuntimeConfig?.version && _isNavOpen && (
-              <div className="text-muted-foreground flex flex-row items-center justify-center space-x-4 text-xs font-bold">
+              <div className="flex flex-row items-center justify-center space-x-4 text-xs font-bold text-muted-foreground">
                 <small>v{publicRuntimeConfig?.version}</small>
                 <Badge className="text-xs leading-3" variant="outline">
                   <small>Beta</small>
@@ -230,7 +230,7 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
         )}
 
         {!smallScreen && (
-          <div className="border-muted-foreground/20 flex items-center justify-between border-t px-3 py-1">
+          <div className="flex items-center justify-between border-t border-muted-foreground/20 px-3 py-1">
             <Button size="icon" variant="ghost" onClick={onToggleMenuClick}>
               {isNavOpen ? <MenuScale /> : <Menu />}
             </Button>
@@ -242,7 +242,7 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
 
   return (
     <nav
-      className={cn("ease bg-header/95 fixed z-[100] md:flex-shrink-0", {
+      className={cn("ease fixed z-[100] bg-header/95 md:flex-shrink-0", {
         ["md:w-[240px]"]: _isNavOpen || isHovering,
         ["md:w-[57px]"]: !(_isNavOpen || isHovering)
       })}
diff --git a/apps/deploy-web/src/components/layout/TransactionModal.tsx b/apps/deploy-web/src/components/layout/TransactionModal.tsx
index 52bb8c51a..8df723d38 100644
--- a/apps/deploy-web/src/components/layout/TransactionModal.tsx
+++ b/apps/deploy-web/src/components/layout/TransactionModal.tsx
@@ -31,7 +31,7 @@ export const TransactionModal: React.FunctionComponent<Props> = ({ state, open,
           <Spinner size="large" className="flex justify-center" />
         </div>
 
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
           {state === "waitingForApproval" ? "APPROVE OR REJECT TX TO CONTINUE..." : "BROADCASTING TRANSACTION..."}
         </div>
       </div>
diff --git a/apps/deploy-web/src/components/layout/WalletStatus.tsx b/apps/deploy-web/src/components/layout/WalletStatus.tsx
index e8f52d590..94a722ce8 100644
--- a/apps/deploy-web/src/components/layout/WalletStatus.tsx
+++ b/apps/deploy-web/src/components/layout/WalletStatus.tsx
@@ -73,7 +73,7 @@ export function WalletStatus() {
                 </div>
 
                 {walletBalances && (
-                  <div className="text-muted-foreground ml-2 flex items-center whitespace-nowrap font-bold">
+                  <div className="ml-2 flex items-center whitespace-nowrap font-bold text-muted-foreground">
                     <Tooltip>
                       <TooltipTrigger>
                         <Badge className="h-5 text-xs font-bold" variant="secondary">
diff --git a/apps/deploy-web/src/components/new-deployment/BidGroup.tsx b/apps/deploy-web/src/components/new-deployment/BidGroup.tsx
index 20e69f650..ac4bb1a62 100644
--- a/apps/deploy-web/src/components/new-deployment/BidGroup.tsx
+++ b/apps/deploy-web/src/components/new-deployment/BidGroup.tsx
@@ -63,7 +63,7 @@ export const BidGroup: React.FunctionComponent<Props> = ({
   }, [deploymentDetail, gseq]);
   return (
     <FormPaper className="mb-4 rounded-none" contentClassName="p-0">
-      <div className="bg-popover sticky top-0 z-[100] -mt-1 flex items-center justify-between border-b border-t px-4 py-2 leading-8">
+      <div className="sticky top-0 z-[100] -mt-1 flex items-center justify-between border-b border-t bg-popover px-4 py-2 leading-8">
         <div className="flex items-center">
           <h6 className="text-xs">
             <LabelValueOld label="GSEQ:" value={gseq} />
@@ -142,7 +142,7 @@ export const BidGroup: React.FunctionComponent<Props> = ({
       {isFilteringFavorites && fBids.length === 0 && (
         <div className="px-4 py-2">
           <Alert>
-            <span className="text-muted-foreground text-sm">There are no favorite providers for this group...</span>
+            <span className="text-sm text-muted-foreground">There are no favorite providers for this group...</span>
           </Alert>
         </div>
       )}
@@ -150,7 +150,7 @@ export const BidGroup: React.FunctionComponent<Props> = ({
       {isFilteringAudited && fBids.length === 0 && (
         <div className="px-4 py-2">
           <Alert>
-            <span className="text-muted-foreground text-sm">
+            <span className="text-sm text-muted-foreground">
               There are no audited providers for this group... Try unchecking the "Audited" flag or clearing the search.
             </span>
           </Alert>
diff --git a/apps/deploy-web/src/components/new-deployment/BidRow.tsx b/apps/deploy-web/src/components/new-deployment/BidRow.tsx
index a08568cb7..ed0e30d5a 100644
--- a/apps/deploy-web/src/components/new-deployment/BidRow.tsx
+++ b/apps/deploy-web/src/components/new-deployment/BidRow.tsx
@@ -72,7 +72,7 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
     <TableRow
       key={bid.id}
       className={cn("bid-list-row [&>td]:px-2 [&>td]:py-1", {
-        ["hover:bg-muted-foreground/10 cursor-pointer"]: bid.state === "open",
+        ["cursor-pointer hover:bg-muted-foreground/10"]: bid.state === "open",
         [`border bg-green-100 dark:bg-green-900`]: isCurrentBid
       })}
       onClick={onRowClick}
@@ -146,14 +146,14 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
       <TableCell align="center">
         {provider.isAudited ? (
           <div className="flex items-center justify-center">
-            <span className="text-muted-foreground text-sm">Yes</span>
+            <span className="text-sm text-muted-foreground">Yes</span>
             <div className="ml-1">
               <AuditorButton provider={provider} />
             </div>
           </div>
         ) : (
           <div className="flex items-center justify-center">
-            <span className="text-muted-foreground text-sm">No</span>
+            <span className="text-sm text-muted-foreground">No</span>
 
             <CustomTooltip title={<>This provider is not audited, which may result in a lesser quality experience.</>}>
               <WarningTriangle className="ml-2 text-sm text-orange-600" />
@@ -171,8 +171,8 @@ export const BidRow: React.FunctionComponent<Props> = ({ bid, selectedBid, handl
           )}
           {!isLoadingStatus && error && !isSendingManifest && (
             <div className="mt-2 flex items-center space-x-2">
-              <CloudXmark className="text-primary text-xs" />
-              <span className="text-muted-foreground text-sm">OFFLINE</span>
+              <CloudXmark className="text-xs text-primary" />
+              <span className="text-sm text-muted-foreground">OFFLINE</span>
             </div>
           )}
 
diff --git a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx
index 8efdd7055..99f7df010 100644
--- a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx
+++ b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx
@@ -346,7 +346,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
             {!maxRequestsReached && !isSendingManifest && (
               <div className="flex items-center self-start text-xs leading-4 sm:self-center">
-                <p className="text-muted-foreground text-xs">Waiting for more bids...</p>
+                <p className="text-xs text-muted-foreground">Waiting for more bids...</p>
                 <div className="ml-2">
                   <Spinner size="small" />
                 </div>
diff --git a/apps/deploy-web/src/components/new-deployment/DeployOptionBox.tsx b/apps/deploy-web/src/components/new-deployment/DeployOptionBox.tsx
index b9ff82e7f..53e5c61e2 100644
--- a/apps/deploy-web/src/components/new-deployment/DeployOptionBox.tsx
+++ b/apps/deploy-web/src/components/new-deployment/DeployOptionBox.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export const DeployOptionBox: React.FunctionComponent<Props> = ({ title, description, icon, imageUrl, onClick }) => {
   return (
-    <Card className="hover:bg-secondary/60 dark:hover:bg-secondary/30 min-h-[100px] cursor-pointer" onClick={onClick}>
+    <Card className="min-h-[100px] cursor-pointer hover:bg-secondary/60 dark:hover:bg-secondary/30" onClick={onClick}>
       <CardHeader>
         <div className="flex items-center">
           {icon ? (
@@ -35,7 +35,7 @@ export const DeployOptionBox: React.FunctionComponent<Props> = ({ title, descrip
         </div>
       </CardHeader>
       <CardContent className="pb-4 pt-0">
-        <p className="text-muted-foreground text-xs">{description}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
       </CardContent>
     </Card>
   );
diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
index c215ce431..20c963bab 100644
--- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
+++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -235,7 +235,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
                 </p>
               }
             >
-              <InfoCircle className="text-muted-foreground mr-4 text-sm md:ml-4" />
+              <InfoCircle className="mr-4 text-sm text-muted-foreground md:ml-4" />
             </CustomTooltip>
 
             <div className="flex-grow">
diff --git a/apps/deploy-web/src/components/new-deployment/Stepper.tsx b/apps/deploy-web/src/components/new-deployment/Stepper.tsx
index d699f2178..a71d6df0f 100644
--- a/apps/deploy-web/src/components/new-deployment/Stepper.tsx
+++ b/apps/deploy-web/src/components/new-deployment/Stepper.tsx
@@ -30,7 +30,7 @@ export const CustomizedSteppers = ({ activeStep }: React.PropsWithChildren<{ act
 
   return (
     <nav aria-label="Progress" className="w-full">
-      <ol role="list" className="divide-muted-foreground/20 border-muted-foreground/20 divide-y border md:flex md:divide-y-0">
+      <ol role="list" className="divide-y divide-muted-foreground/20 border border-muted-foreground/20 md:flex md:divide-y-0">
         {steps.map((step, stepIdx) => (
           <li key={step.name} className="relative md:flex md:flex-1">
             {step.id < activeStep ? (
@@ -40,7 +40,7 @@ export const CustomizedSteppers = ({ activeStep }: React.PropsWithChildren<{ act
                 onClick={ev => onChooseTemplateClick(ev, step)}
               >
                 <span className="flex items-center px-6 py-4 text-sm font-medium">
-                  <span className="bg-primary group-hover:bg-primary/80 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full">
+                  <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary group-hover:bg-primary/80">
                     <Check className="h-6 w-6 text-white" aria-hidden="true" />
                   </span>
                   <span className="ml-4 text-sm font-medium text-neutral-900 dark:text-neutral-500">{step.name}</span>
@@ -48,18 +48,18 @@ export const CustomizedSteppers = ({ activeStep }: React.PropsWithChildren<{ act
               </a>
             ) : step.id === activeStep ? (
               <div className="flex items-center px-6 py-4 text-sm font-medium" aria-current="step">
-                <span className="border-primary flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2">
-                  <span className="text-primary font-bold">{step.id + 1}</span>
+                <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary">
+                  <span className="font-bold text-primary">{step.id + 1}</span>
                 </span>
-                <span className="text-primary ml-4 text-sm font-bold">{step.name}</span>
+                <span className="ml-4 text-sm font-bold text-primary">{step.name}</span>
               </div>
             ) : (
               <div className="group flex items-center">
                 <span className="flex items-center px-6 py-4 text-sm font-medium">
-                  <span className="border-muted-foreground/20 group-hover:border-muted-foreground/30 dark:group-hover:border-muted-foreground/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2">
-                    <span className="text-muted-foreground dark:group-hover:text-muted-foreground/70 group-hover:text-neutral-600">{step.id + 1}</span>
+                  <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-muted-foreground/20 group-hover:border-muted-foreground/30 dark:group-hover:border-muted-foreground/20">
+                    <span className="text-muted-foreground group-hover:text-neutral-600 dark:group-hover:text-muted-foreground/70">{step.id + 1}</span>
                   </span>
-                  <span className="text-muted-foreground dark:group-hover:text-muted-foreground/70 ml-4 text-sm font-medium group-hover:text-neutral-600">
+                  <span className="ml-4 text-sm font-medium text-muted-foreground group-hover:text-neutral-600 dark:group-hover:text-muted-foreground/70">
                     {step.name}
                   </span>
                 </span>
diff --git a/apps/deploy-web/src/components/providers/ActiveLeasesGraph.tsx b/apps/deploy-web/src/components/providers/ActiveLeasesGraph.tsx
index 48d901f0c..109585c8b 100644
--- a/apps/deploy-web/src/components/providers/ActiveLeasesGraph.tsx
+++ b/apps/deploy-web/src/components/providers/ActiveLeasesGraph.tsx
@@ -36,7 +36,7 @@ export const ActiveLeasesGraph: React.FunctionComponent<IProps> = ({ provider })
       <div className="mb-1">
         <Title subTitle className="space-x-4 font-normal tracking-tight">
           <span>Active Leases</span>
-          {provider.name && <span className="text-muted-foreground text-sm">({provider.name})</span>}
+          {provider.name && <span className="text-sm text-muted-foreground">({provider.name})</span>}
         </Title>
       </div>
 
diff --git a/apps/deploy-web/src/components/providers/EditProviderContainer.tsx b/apps/deploy-web/src/components/providers/EditProviderContainer.tsx
index bbf2dc90c..cda7b2ac0 100644
--- a/apps/deploy-web/src/components/providers/EditProviderContainer.tsx
+++ b/apps/deploy-web/src/components/providers/EditProviderContainer.tsx
@@ -48,7 +48,7 @@ export const EditProviderContainer: React.FunctionComponent<Props> = ({ owner })
           </div>
 
           <div>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               This form is based on the provider attribute schema established here&nbsp;
               <a target="_blank" href="https://github.com/akash-network/cloudmos/blob/main/config/provider-attributes.json" rel="noreferrer noopener">
                 on github.
diff --git a/apps/deploy-web/src/components/providers/EditProviderForm.tsx b/apps/deploy-web/src/components/providers/EditProviderForm.tsx
index 34186fee8..47409952d 100644
--- a/apps/deploy-web/src/components/providers/EditProviderForm.tsx
+++ b/apps/deploy-web/src/components/providers/EditProviderForm.tsx
@@ -145,7 +145,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
   return (
     <form onSubmit={handleSubmit(onSubmit)} ref={formRef} autoComplete="off">
       <FormPaper className="mb-4">
-        <p className="text-primary mb-8 text-lg">General info</p>
+        <p className="mb-8 text-lg text-primary">General info</p>
 
         <Controller
           control={control}
@@ -169,7 +169,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
               onChange={event => field.onChange(event.target.value || "")}
               endIcon={
                 <CustomTooltip title="Host URI is the URI of the host that is running the provider. It is used to identify the provider.">
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               }
             />
@@ -301,7 +301,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
       </FormPaper>
 
       <FormPaper className="mb-4">
-        <p className="text-primary mb-8 text-lg">Hardware specifications</p>
+        <p className="mb-8 text-lg text-primary">Hardware specifications</p>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           {/** LEFT COLUMN */}
@@ -416,7 +416,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
       </FormPaper>
 
       <FormPaper className="mb-4">
-        <p className="text-primary mb-8 text-lg">Features</p>
+        <p className="mb-8 text-lg text-primary">Features</p>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           {/** LEFT COLUMN */}
@@ -464,7 +464,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
 
       <FormPaper className="mb-4">
         <div className="mb-8 flex items-center">
-          <p className="text-primary text-lg">Unknown attributes</p>
+          <p className="text-lg text-primary">Unknown attributes</p>
 
           <Button size="sm" color="secondary" className="ml-4" onClick={() => appendUnkownAttribute({ id: nanoid(), key: "", value: "" })}>
             Add attribute
@@ -532,7 +532,7 @@ export const EditProviderForm: React.FunctionComponent<Props> = ({ provider, pro
               );
             })
           ) : (
-            <p className="text-muted-foreground text-sm">None</p>
+            <p className="text-sm text-muted-foreground">None</p>
           )}
         </div>
       </FormPaper>
@@ -610,7 +610,7 @@ const ProviderTextField: React.FunctionComponent<ProviderTextFieldProps> = ({
                 </div>
               }
             >
-              <InfoCircle className="text-muted-foreground text-xs" />
+              <InfoCircle className="text-xs text-muted-foreground" />
             </CustomTooltip>
           }
         />
@@ -644,7 +644,7 @@ const ProviderCheckbox: React.FunctionComponent<ProviderCheckboxProps> = ({ cont
                 </div>
               }
             >
-              <InfoCircle className="text-muted-foreground text-xs" />
+              <InfoCircle className="text-xs text-muted-foreground" />
             </CustomTooltip>
           </div>
         </div>
@@ -696,7 +696,7 @@ const ProviderSelect: React.FunctionComponent<ProviderSelectProps> = ({
                 </div>
               }
             >
-              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
             </CustomTooltip>
           </Label>
           <Select value={(field.value as string) || ""} onValueChange={field.onChange}>
@@ -773,7 +773,7 @@ export const ProviderMultiSelect: React.FunctionComponent<ProviderMultiSelectPro
                 </div>
               }
             >
-              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
             </CustomTooltip>
           </Label>
           <MultipleSelector
diff --git a/apps/deploy-web/src/components/providers/NetworkCapacity.tsx b/apps/deploy-web/src/components/providers/NetworkCapacity.tsx
index 8d4ab5665..337e7badf 100644
--- a/apps/deploy-web/src/components/providers/NetworkCapacity.tsx
+++ b/apps/deploy-web/src/components/providers/NetworkCapacity.tsx
@@ -70,7 +70,7 @@ const NetworkCapacity: React.FunctionComponent<Props> = ({
     <div className="flex flex-col items-start md:flex-row md:items-center">
       <div className="basis-1/4">
         <p className="font-bold leading-4 tracking-tight">CPU</p>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           {Math.round(activeCPU + pendingCPU)}&nbsp;CPU&nbsp;/&nbsp;{Math.round(totalCPU)}&nbsp;CPU
         </p>
         <div className="flex h-[200px] w-[200px] items-center justify-center">
@@ -103,7 +103,7 @@ const NetworkCapacity: React.FunctionComponent<Props> = ({
 
       <div className="basis-1/4">
         <p className="font-bold leading-4 tracking-tight">GPU</p>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           {Math.round(activeGPU + pendingGPU)}&nbsp;GPU&nbsp;/&nbsp;{Math.round(totalGPU)}&nbsp;GPU
         </p>
         <div className="flex h-[200px] w-[200px] items-center justify-center">
@@ -135,7 +135,7 @@ const NetworkCapacity: React.FunctionComponent<Props> = ({
 
       <div className="basis-1/4">
         <p className="font-bold leading-4 tracking-tight">Memory</p>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           {`${roundDecimal(_activeMemory.value, 2)} ${_activeMemory.unit}`}&nbsp;/&nbsp;{`${roundDecimal(_totalMemory.value, 2)} ${_totalMemory.unit}`}
         </p>
         <div className="flex h-[200px] w-[200px] items-center justify-center">
@@ -166,7 +166,7 @@ const NetworkCapacity: React.FunctionComponent<Props> = ({
 
       <div className="basis-1/4">
         <p className="font-bold leading-4 tracking-tight">Storage</p>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           {`${roundDecimal(_activeStorage.value, 2)} ${_activeStorage.unit}`}&nbsp;/&nbsp;{`${roundDecimal(_totalStorage.value, 2)} ${_totalStorage.unit}`}
         </p>
         <div className="flex h-[200px] w-[200px] items-center justify-center">
diff --git a/apps/deploy-web/src/components/providers/ProviderDetail.tsx b/apps/deploy-web/src/components/providers/ProviderDetail.tsx
index a3b53f127..ddb90d507 100644
--- a/apps/deploy-web/src/components/providers/ProviderDetail.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderDetail.tsx
@@ -166,7 +166,7 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
                     </CustomNoDivTooltip>
                   ))}
                 </div>
-                <div className="text-muted-foreground mt-1 flex items-center justify-between text-xs">
+                <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
                   <span>24h ago</span>
                   <span>Now</span>
                 </div>
@@ -215,12 +215,12 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
                 <CardContent className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
                   <div>
                     <LabelValue label="Akash version" value={provider.akashVersion || "Unknown"} />
-                    <LabelValue label="IP Leases" value={provider.featEndpointIp && <Check className="text-primary ml-0 sm:ml-2" />} />
-                    <LabelValue label="Chia" value={provider.workloadSupportChia && <Check className="text-primary ml-0 sm:ml-2" />} />
+                    <LabelValue label="IP Leases" value={provider.featEndpointIp && <Check className="ml-0 text-primary sm:ml-2" />} />
+                    <LabelValue label="Chia" value={provider.workloadSupportChia && <Check className="ml-0 text-primary sm:ml-2" />} />
                   </div>
                   <div>
                     <LabelValue label="Kube version" value={provider.kube ? `${provider.kube?.major}.${provider.kube?.minor}` : "Unkown"} />
-                    <LabelValue label="Custom domain" value={provider.featEndpointCustomDomain && <Check className="text-primary ml-0 sm:ml-2" />} />
+                    <LabelValue label="Custom domain" value={provider.featEndpointCustomDomain && <Check className="ml-0 text-primary sm:ml-2" />} />
                     <LabelValue label="Chia capabilities" value={provider.workloadSupportChiaCapabilities} />
                   </div>
                 </CardContent>
diff --git a/apps/deploy-web/src/components/providers/ProviderList.tsx b/apps/deploy-web/src/components/providers/ProviderList.tsx
index c5cb0c1b0..ecd6b49b7 100644
--- a/apps/deploy-web/src/components/providers/ProviderList.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderList.tsx
@@ -174,8 +174,8 @@ export const ProviderList: React.FunctionComponent = () => {
       <Title>Network Capacity</Title>
 
       {providers && providers.length > 0 && (
-        <h3 className="text-muted-foreground mb-8 text-base">
-          <span className="text-primary text-2xl font-bold">{providers.filter(x => x.isOnline).length}</span> active providers on {selectedNetwork.title}
+        <h3 className="mb-8 text-base text-muted-foreground">
+          <span className="text-2xl font-bold text-primary">{providers.filter(x => x.isOnline).length}</span> active providers on {selectedNetwork.title}
         </h3>
       )}
 
@@ -270,7 +270,7 @@ export const ProviderList: React.FunctionComponent = () => {
                     <SelectGroup>
                       {sortOptions.map(l => (
                         <SelectItem key={l.id} value={l.id}>
-                          <span className="text-muted-foreground text-sm">{l.title}</span>
+                          <span className="text-sm text-muted-foreground">{l.title}</span>
                         </SelectItem>
                       ))}
                     </SelectGroup>
diff --git a/apps/deploy-web/src/components/providers/ProviderMap.tsx b/apps/deploy-web/src/components/providers/ProviderMap.tsx
index a2caea0b3..1a440fde6 100644
--- a/apps/deploy-web/src/components/providers/ProviderMap.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderMap.tsx
@@ -125,7 +125,7 @@ export const ProviderMap: React.FunctionComponent<Props> = ({ providers, initial
                       </div>
                     }
                   >
-                    <circle className="fill-primary cursor-pointer" stroke="#FFF" strokeWidth={dotSize.w} r={dotSize.r} />
+                    <circle className="cursor-pointer fill-primary" stroke="#FFF" strokeWidth={dotSize.w} r={dotSize.r} />
                   </CustomNoDivTooltip>
                 </Marker>
               </Link>
diff --git a/apps/deploy-web/src/components/providers/ProviderSpecs.tsx b/apps/deploy-web/src/components/providers/ProviderSpecs.tsx
index 91b48664c..3d4b1f1a8 100644
--- a/apps/deploy-web/src/components/providers/ProviderSpecs.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderSpecs.tsx
@@ -25,7 +25,7 @@ export const ProviderSpecs: React.FunctionComponent<Props> = ({ provider }) => {
           <LabelValue label="GPU" value={provider.hardwareGpuVendor || "Unknown"} />
           <LabelValue label="CPU" value={provider.hardwareCpu || "Unknown"} />
           <LabelValue label="Memory (RAM)" value={provider.hardwareMemory || "Unknown"} />
-          <LabelValue label="Persistent Storage" value={provider.featPersistentStorage && <Check className="text-primary ml-2" />} />
+          <LabelValue label="Persistent Storage" value={provider.featPersistentStorage && <Check className="ml-2 text-primary" />} />
           <LabelValue label="Download speed" value={provider.networkSpeedDown} />
           <LabelValue label="Network Provider" value={provider.networkProvider} />
         </div>
diff --git a/apps/deploy-web/src/components/providers/ProviderSummary.tsx b/apps/deploy-web/src/components/providers/ProviderSummary.tsx
index 52d8f501a..671da9d1e 100644
--- a/apps/deploy-web/src/components/providers/ProviderSummary.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderSummary.tsx
@@ -53,11 +53,11 @@ export const ProviderSummary: React.FunctionComponent<Props> = ({ provider }) =>
               value={
                 provider.isAudited ? (
                   <div className="inline-flex items-center space-x-2">
-                    <span className="text-muted-foreground text-sm">Yes</span>
+                    <span className="text-sm text-muted-foreground">Yes</span>
                     <AuditorButton provider={provider} />
                   </div>
                 ) : (
-                  <span className="text-muted-foreground text-sm">No</span>
+                  <span className="text-sm text-muted-foreground">No</span>
                 )
               }
             />
diff --git a/apps/deploy-web/src/components/providers/ProviderTable.tsx b/apps/deploy-web/src/components/providers/ProviderTable.tsx
index f98738ecc..98576a7ad 100644
--- a/apps/deploy-web/src/components/providers/ProviderTable.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderTable.tsx
@@ -20,9 +20,9 @@ export const ProviderTable: React.FunctionComponent<Props> = ({ providers, sortO
           <TableHead className="w-[10%]">Name</TableHead>
           <TableHead className="w-[10%] text-center">Location</TableHead>
           <TableHead className="w-[5%] text-center">Uptime (7d)</TableHead>
-          <TableHead className={cn("w-[5%] text-center", { ["text-primary font-bold"]: isSortingLeases })}>Active Leases</TableHead>
+          <TableHead className={cn("w-[5%] text-center", { ["font-bold text-primary"]: isSortingLeases })}>Active Leases</TableHead>
           <TableHead className="w-[15%]">CPU</TableHead>
-          <TableHead className={cn("w-[15%]", { ["text-primary font-bold"]: sortOption === "gpu-available-desc" })}>GPU</TableHead>
+          <TableHead className={cn("w-[15%]", { ["font-bold text-primary"]: sortOption === "gpu-available-desc" })}>GPU</TableHead>
           <TableHead className="w-[15%]">Memory</TableHead>
           <TableHead className="w-[15%]">Disk</TableHead>
           <TableHead className="w-[5%] text-center">Audited</TableHead>
diff --git a/apps/deploy-web/src/components/providers/ProviderTableRow.tsx b/apps/deploy-web/src/components/providers/ProviderTableRow.tsx
index 721049db7..3941165e2 100644
--- a/apps/deploy-web/src/components/providers/ProviderTableRow.tsx
+++ b/apps/deploy-web/src/components/providers/ProviderTableRow.tsx
@@ -58,7 +58,7 @@ export const ProviderListRow: React.FunctionComponent<Props> = ({ provider }) =>
   };
 
   return (
-    <TableRow className="provider-list-row hover:bg-muted-foreground/10 cursor-pointer [&>td]:px-2 [&>td]:py-1" onClick={onRowClick}>
+    <TableRow className="provider-list-row cursor-pointer hover:bg-muted-foreground/10 [&>td]:px-2 [&>td]:py-1" onClick={onRowClick}>
       {provider.isOnline ? (
         <TableCell>
           {provider.name?.length > 20 ? (
@@ -102,8 +102,8 @@ export const ProviderListRow: React.FunctionComponent<Props> = ({ provider }) =>
             <span>{provider.leaseCount}</span>
             {(provider.userActiveLeases || 0) > 0 && (
               <span
-                className={cn("text-muted-foreground text-xs", {
-                  ["text-primary font-bold"]: (provider.userActiveLeases || 0) > 0
+                className={cn("text-xs text-muted-foreground", {
+                  ["font-bold text-primary"]: (provider.userActiveLeases || 0) > 0
                 })}
               >
                 &nbsp;({provider.userActiveLeases})
@@ -208,8 +208,8 @@ export const ProviderListRow: React.FunctionComponent<Props> = ({ provider }) =>
             </>
           ) : (
             <>
-              <span className="text-muted-foreground text-xs">No</span>
-              <WarningCircle className="text-warning ml-2 text-xs" />
+              <span className="text-xs text-muted-foreground">No</span>
+              <WarningCircle className="ml-2 text-xs text-warning" />
             </>
           )}
         </div>
diff --git a/apps/deploy-web/src/components/sdl/AcceptFormControl.tsx b/apps/deploy-web/src/components/sdl/AcceptFormControl.tsx
index ff31af8d0..ddb516a92 100644
--- a/apps/deploy-web/src/components/sdl/AcceptFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/AcceptFormControl.tsx
@@ -50,7 +50,7 @@ export const AcceptFormControl = forwardRef<AcceptRefType, Props>(({ control, se
         <strong className="text-sm">Accept</strong>
 
         <CustomTooltip title={<>List of hosts/domains to accept connections for.</>}>
-          <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+          <InfoCircle className="ml-2 text-xs text-muted-foreground" />
         </CustomTooltip>
       </div>
 
diff --git a/apps/deploy-web/src/components/sdl/AdvancedConfig.tsx b/apps/deploy-web/src/components/sdl/AdvancedConfig.tsx
index 8e6919acd..bf06b9fc0 100644
--- a/apps/deploy-web/src/components/sdl/AdvancedConfig.tsx
+++ b/apps/deploy-web/src/components/sdl/AdvancedConfig.tsx
@@ -59,7 +59,7 @@ export const AdvancedConfig: React.FunctionComponent<Props> = ({ control, curren
             <Button
               size="lg"
               variant="ghost"
-              className={cn("flex w-full items-center justify-between p-4 normal-case", { "border-muted border-b": expanded })}
+              className={cn("flex w-full items-center justify-between p-4 normal-case", { "border-b border-muted": expanded })}
               type="button"
             >
               <div>
diff --git a/apps/deploy-web/src/components/sdl/AttributesFormControl.tsx b/apps/deploy-web/src/components/sdl/AttributesFormControl.tsx
index 6f34c9320..bf4e5fbd6 100644
--- a/apps/deploy-web/src/components/sdl/AttributesFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/AttributesFormControl.tsx
@@ -50,7 +50,7 @@ export const AttributesFormControl = forwardRef<AttributesRefType, Props>(({ con
           <strong className="text-sm">Attributes</strong>
 
           <CustomTooltip title={<>Filter providers that have these attributes.</>}>
-            <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+            <InfoCircle className="ml-2 text-sm text-muted-foreground" />
           </CustomTooltip>
         </div>
 
@@ -111,7 +111,7 @@ export const AttributesFormControl = forwardRef<AttributesRefType, Props>(({ con
           );
         })
       ) : (
-        <div className="text-muted-foreground mb-2 text-xs">None</div>
+        <div className="mb-2 text-xs text-muted-foreground">None</div>
       )}
     </FormPaper>
   );
diff --git a/apps/deploy-web/src/components/sdl/CommandList.tsx b/apps/deploy-web/src/components/sdl/CommandList.tsx
index 91a876123..9f46cdb4e 100644
--- a/apps/deploy-web/src/components/sdl/CommandList.tsx
+++ b/apps/deploy-web/src/components/sdl/CommandList.tsx
@@ -29,11 +29,11 @@ export const CommandList: React.FunctionComponent<Props> = ({ currentService, se
             </>
           }
         >
-          <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+          <InfoCircle className="ml-2 text-xs text-muted-foreground" />
         </CustomTooltip>
 
         <span
-          className="text-primary ml-4 cursor-pointer text-sm font-normal underline"
+          className="ml-4 cursor-pointer text-sm font-normal text-primary underline"
           onClick={() => setIsEditingCommands(serviceIndex !== undefined ? serviceIndex : true)}
         >
           Edit
@@ -46,7 +46,7 @@ export const CommandList: React.FunctionComponent<Props> = ({ currentService, se
           <div className="text-muted-foreground">{currentService.command?.arg}</div>
         </div>
       ) : (
-        <p className="text-muted-foreground text-xs">None</p>
+        <p className="text-xs text-muted-foreground">None</p>
       )}
     </FormPaper>
   );
diff --git a/apps/deploy-web/src/components/sdl/CpuFormControl.tsx b/apps/deploy-web/src/components/sdl/CpuFormControl.tsx
index e5197ce1e..ed8d57ffa 100644
--- a/apps/deploy-web/src/components/sdl/CpuFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/CpuFormControl.tsx
@@ -52,7 +52,7 @@ export const CpuFormControl: React.FunctionComponent<Props> = ({ control, servic
           >
             <div className="flex items-center">
               <div className="flex items-center">
-                <MdSpeed className="text-muted-foreground mr-2 text-2xl" />
+                <MdSpeed className="mr-2 text-2xl text-muted-foreground" />
                 <strong className="text-sm">CPU</strong>
 
                 <CustomTooltip
@@ -68,7 +68,7 @@ export const CpuFormControl: React.FunctionComponent<Props> = ({ control, servic
                     </>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
 
diff --git a/apps/deploy-web/src/components/sdl/EnvVarList.tsx b/apps/deploy-web/src/components/sdl/EnvVarList.tsx
index 5c0183882..833da9c11 100644
--- a/apps/deploy-web/src/components/sdl/EnvVarList.tsx
+++ b/apps/deploy-web/src/components/sdl/EnvVarList.tsx
@@ -31,11 +31,11 @@ export const EnvVarList: React.FunctionComponent<Props> = ({ currentService, set
             </>
           }
         >
-          <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+          <InfoCircle className="ml-2 text-xs text-muted-foreground" />
         </CustomTooltip>
 
         <span
-          className="text-primary ml-4 cursor-pointer text-sm font-normal underline"
+          className="ml-4 cursor-pointer text-sm font-normal text-primary underline"
           onClick={() => setIsEditingEnv(serviceIndex !== undefined ? serviceIndex : true)}
         >
           Edit
@@ -49,7 +49,7 @@ export const EnvVarList: React.FunctionComponent<Props> = ({ currentService, set
           </div>
         ))
       ) : (
-        <p className="text-muted-foreground text-xs">None</p>
+        <p className="text-xs text-muted-foreground">None</p>
       )}
     </FormPaper>
   );
diff --git a/apps/deploy-web/src/components/sdl/ExposeFormModal.tsx b/apps/deploy-web/src/components/sdl/ExposeFormModal.tsx
index 75f96a674..4771cc406 100644
--- a/apps/deploy-web/src/components/sdl/ExposeFormModal.tsx
+++ b/apps/deploy-web/src/components/sdl/ExposeFormModal.tsx
@@ -94,7 +94,7 @@ export const ExposeFormModal: React.FunctionComponent<Props> = ({ control, servi
               </>
             }
           >
-            <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+            <InfoCircle className="ml-2 text-xs text-muted-foreground" />
           </CustomTooltip>
         </div>
       }
@@ -137,7 +137,7 @@ export const ExposeFormModal: React.FunctionComponent<Props> = ({ control, servi
                           <div className="inline-flex items-center">
                             Port
                             <CustomTooltip title={<>Container port to expose.</>}>
-                              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                             </CustomTooltip>
                           </div>
                         }
@@ -163,7 +163,7 @@ export const ExposeFormModal: React.FunctionComponent<Props> = ({ control, servi
                           <div className="inline-flex items-center">
                             As
                             <CustomTooltip title={<>Port number to expose the container port as.</>}>
-                              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                             </CustomTooltip>
                           </div>
                         }
@@ -222,7 +222,7 @@ export const ExposeFormModal: React.FunctionComponent<Props> = ({ control, servi
                     />
 
                     <CustomTooltip title={<>Check if you want this service to be accessible from outside the datacenter.</>}>
-                      <InfoCircle className="text-muted-foreground ml-4 text-xs" />
+                      <InfoCircle className="ml-4 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 </div>
@@ -287,7 +287,7 @@ export const ExposeFormModal: React.FunctionComponent<Props> = ({ control, servi
                               </>
                             }
                           >
-                            <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                            <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                           </CustomTooltip>
                         </div>
                       }
diff --git a/apps/deploy-web/src/components/sdl/ExposeList.tsx b/apps/deploy-web/src/components/sdl/ExposeList.tsx
index f9801d2e2..386d1d2f1 100644
--- a/apps/deploy-web/src/components/sdl/ExposeList.tsx
+++ b/apps/deploy-web/src/components/sdl/ExposeList.tsx
@@ -32,11 +32,11 @@ export const ExposeList: React.FunctionComponent<Props> = ({ currentService, set
             </>
           }
         >
-          <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+          <InfoCircle className="ml-2 text-xs text-muted-foreground" />
         </CustomTooltip>
 
         <span
-          className="text-primary ml-4 cursor-pointer text-sm font-normal underline"
+          className="ml-4 cursor-pointer text-sm font-normal text-primary underline"
           onClick={() => setIsEditingExpose(serviceIndex !== undefined ? serviceIndex : true)}
         >
           Edit
diff --git a/apps/deploy-web/src/components/sdl/GpuFormControl.tsx b/apps/deploy-web/src/components/sdl/GpuFormControl.tsx
index 72030a9d3..74b82a622 100644
--- a/apps/deploy-web/src/components/sdl/GpuFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/GpuFormControl.tsx
@@ -77,7 +77,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
               <div className="flex items-center">
                 <div className="flex items-center">
                   <div className="flex items-center">
-                    <MdSpeed className="text-muted-foreground mr-2 text-2xl" />
+                    <MdSpeed className="mr-2 text-2xl text-muted-foreground" />
                     <strong>GPU</strong>
 
                     <CustomTooltip
@@ -96,7 +96,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
                         </>
                       }
                     >
-                      <InfoCircle className="text-muted-foreground ml-4 text-xs" />
+                      <InfoCircle className="ml-4 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
 
@@ -158,7 +158,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
       {hasGpu && (
         <>
           <div className="my-4">
-            <p className="text-muted-foreground text-xs">
+            <p className="text-xs text-muted-foreground">
               Picking specific GPU models below, filters out providers that don't have those GPUs and may reduce the number of bids you receive.
             </p>
           </div>
@@ -387,7 +387,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
                   ) : (
                     <div className="ml-4 flex items-center">
                       <Spinner />
-                      <span className="text-muted-foreground ml-2 whitespace-nowrap text-sm">Loading GPU models...</span>
+                      <span className="ml-2 whitespace-nowrap text-sm text-muted-foreground">Loading GPU models...</span>
                     </div>
                   )}
                 </div>
diff --git a/apps/deploy-web/src/components/sdl/HttpOptionsFormControl.tsx b/apps/deploy-web/src/components/sdl/HttpOptionsFormControl.tsx
index b636ec9f8..8dcbeb82a 100644
--- a/apps/deploy-web/src/components/sdl/HttpOptionsFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/HttpOptionsFormControl.tsx
@@ -45,7 +45,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
               </>
             }
           >
-            <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+            <InfoCircle className="ml-2 text-xs text-muted-foreground" />
           </CustomTooltip>
         </div>
 
@@ -80,7 +80,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                   <div className="inline-flex items-center">
                     Max Body Size
                     <CustomTooltip title="Sets the maximum size of an individual HTTP request body.">
-                      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 }
@@ -103,7 +103,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                   <div className="inline-flex items-center">
                     Read Timeout
                     <CustomTooltip title="Duration the proxy will wait for a response from the service.">
-                      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 }
@@ -126,7 +126,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                   <div className="inline-flex items-center">
                     Send Timeout
                     <CustomTooltip title="Duration the proxy will wait for the service to accept a request.">
-                      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 }
@@ -149,7 +149,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                   <div className="inline-flex items-center">
                     Next Tries
                     <CustomTooltip title="Number of attempts the proxy will attempt another replica.">
-                      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 }
@@ -172,7 +172,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                   <div className="inline-flex items-center">
                     Next Timeout
                     <CustomTooltip title="Duration the proxy will wait for the service to connect to another replica.">
-                      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                     </CustomTooltip>
                   </div>
                 }
@@ -194,7 +194,7 @@ export const HttpOptionsFormControl: React.FunctionComponent<Props> = ({ control
                 <Label className="inline-flex items-center">
                   Next Cases
                   <CustomTooltip title="Defines the cases where the proxy will try another replica in the service.  Reference the upcoming “Next Cases Attribute Usage” section for details pertaining to allowed values.">
-                    <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                    <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                   </CustomTooltip>
                 </Label>
                 <MultipleSelector
diff --git a/apps/deploy-web/src/components/sdl/ImageSelect.tsx b/apps/deploy-web/src/components/sdl/ImageSelect.tsx
index 40beddfee..3d38b5af4 100644
--- a/apps/deploy-web/src/components/sdl/ImageSelect.tsx
+++ b/apps/deploy-web/src/components/sdl/ImageSelect.tsx
@@ -209,7 +209,7 @@ export const ImageSelect: React.FunctionComponent<Props> = ({ control, currentSe
           </>
         }
       >
-        <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+        <InfoCircle className="ml-2 text-xs text-muted-foreground" />
       </CustomTooltip>
     </div>
   );
diff --git a/apps/deploy-web/src/components/sdl/ImportSdlModal.tsx b/apps/deploy-web/src/components/sdl/ImportSdlModal.tsx
index ab24de3e2..d39894e22 100644
--- a/apps/deploy-web/src/components/sdl/ImportSdlModal.tsx
+++ b/apps/deploy-web/src/components/sdl/ImportSdlModal.tsx
@@ -112,7 +112,7 @@ export const ImportSdlModal: React.FunctionComponent<Props> = ({ onClose, setVal
       maxWidth="md"
       enableCloseOnBackdropClick
     >
-      <h6 className="text-muted-foreground mb-4 flex items-center">
+      <h6 className="mb-4 flex items-center text-muted-foreground">
         Paste your sdl here to import <ArrowDown className="ml-4 text-sm" />
       </h6>
       <div className="mb-2">
diff --git a/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx b/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx
index c56367c89..1484d567c 100644
--- a/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx
@@ -54,7 +54,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
           >
             <div className="flex flex-col items-start sm:flex-row sm:items-center">
               <div className="flex items-center">
-                <MdMemory className="text-muted-foreground mr-2 text-2xl" />
+                <MdMemory className="mr-2 text-2xl text-muted-foreground" />
                 <strong className="text-sm">Memory</strong>
 
                 <CustomTooltip
@@ -70,7 +70,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
                     </>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
 
diff --git a/apps/deploy-web/src/components/sdl/PersistentStorage.tsx b/apps/deploy-web/src/components/sdl/PersistentStorage.tsx
index 5b230e763..33204f983 100644
--- a/apps/deploy-web/src/components/sdl/PersistentStorage.tsx
+++ b/apps/deploy-web/src/components/sdl/PersistentStorage.tsx
@@ -54,7 +54,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
             <div className="flex items-start justify-between sm:flex-row sm:items-center">
               <div className="flex items-center">
                 <div className="flex items-center">
-                  <MdStorage className="text-muted-foreground mr-2 text-2xl" />
+                  <MdStorage className="mr-2 text-2xl text-muted-foreground" />
                   <strong className="text-sm">Persistent Storage</strong>
 
                   <CustomTooltip
@@ -72,7 +72,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
                       </>
                     }
                   >
-                    <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                    <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                   </CustomTooltip>
                 </div>
 
@@ -182,7 +182,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
                           </>
                         }
                       >
-                        <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                        <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                       </CustomTooltip>
                     </div>
                   }
@@ -252,7 +252,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
                           </>
                         }
                       >
-                        <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                        <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                       </CustomTooltip>
                     </div>
                   }
diff --git a/apps/deploy-web/src/components/sdl/PlacementFormModal.tsx b/apps/deploy-web/src/components/sdl/PlacementFormModal.tsx
index b65e07479..8a5b894f8 100644
--- a/apps/deploy-web/src/components/sdl/PlacementFormModal.tsx
+++ b/apps/deploy-web/src/components/sdl/PlacementFormModal.tsx
@@ -116,7 +116,7 @@ export const PlacementFormModal: React.FunctionComponent<Props> = ({ control, se
                       <div className="flex items-center">
                         Name
                         <CustomTooltip title={<>The name of the placement.</>}>
-                          <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+                          <InfoCircle className="ml-2 text-sm text-muted-foreground" />
                         </CustomTooltip>
                       </div>
                     }
@@ -165,7 +165,7 @@ export const PlacementFormModal: React.FunctionComponent<Props> = ({ control, se
                               </>
                             }
                           >
-                            <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+                            <InfoCircle className="ml-2 text-sm text-muted-foreground" />
                           </CustomTooltip>
                         </div>
                       }
diff --git a/apps/deploy-web/src/components/sdl/RegionSelect.tsx b/apps/deploy-web/src/components/sdl/RegionSelect.tsx
index 199dba9c4..b4940c442 100644
--- a/apps/deploy-web/src/components/sdl/RegionSelect.tsx
+++ b/apps/deploy-web/src/components/sdl/RegionSelect.tsx
@@ -79,14 +79,14 @@ export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ contr
                   {...props}
                   className={cn(
                     "flex w-full items-center px-2 py-1",
-                    { ["text-muted pointer-events-none cursor-default"]: option.key !== "any" && option.providers?.length === 0 },
+                    { ["pointer-events-none cursor-default text-muted"]: option.key !== "any" && option.providers?.length === 0 },
                     props.className
                   )}
                 >
                   <span>{option.key}</span>
                   {option.key !== "any" && (
                     <small
-                      className={cn("ml-2", { ["text-primary font-bold"]: option.providers?.length > 0 })}
+                      className={cn("ml-2", { ["font-bold text-primary"]: option.providers?.length > 0 })}
                       // sx={{
                       //   marginLeft: ".5rem",
                       //   color: option.providers?.length === 0 ? "inherit" : theme.palette.secondary.main,
@@ -97,7 +97,7 @@ export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ contr
                     </small>
                   )}
                   <CustomTooltip title={option.description}>
-                    <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                    <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                   </CustomTooltip>
                 </li>
               );
diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
index 87c45eb80..49b835445 100644
--- a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
+++ b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -263,7 +263,7 @@ export const RentGpusForm: React.FunctionComponent = () => {
           denom={currentService?.placement?.pricing?.denom || sdlDenom}
           infoText={
             <Alert className="mb-4" variant="default">
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                 To create a deployment, you need to have at least <b>{minDeposit.akt} AKT</b> or <b>{minDeposit.usdc} USDC</b> in an escrow account.{" "}
                 <LinkTo onClick={ev => handleDocClick(ev, "https://akash.network/docs/getting-started/intro-to-akash/bids-and-leases/#escrow-accounts")}>
                   <strong>Learn more.</strong>
diff --git a/apps/deploy-web/src/components/sdl/SignedByFormControl.tsx b/apps/deploy-web/src/components/sdl/SignedByFormControl.tsx
index 3c54a8f6c..7aa373a87 100644
--- a/apps/deploy-web/src/components/sdl/SignedByFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/SignedByFormControl.tsx
@@ -82,7 +82,7 @@ export const SignedByFormControl = forwardRef<SignedByRefType, Props>(
               </>
             }
           >
-            <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+            <InfoCircle className="ml-2 text-sm text-muted-foreground" />
           </CustomTooltip>
         </div>
 
@@ -93,7 +93,7 @@ export const SignedByFormControl = forwardRef<SignedByRefType, Props>(
           <div className="flex items-center">
             <strong className="text-sm">Any of</strong>
             <CustomTooltip title={<>Filter providers that have been audited by ANY of these accounts.</>}>
-              <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+              <InfoCircle className="ml-2 text-sm text-muted-foreground" />
             </CustomTooltip>
           </div>
 
@@ -142,7 +142,7 @@ export const SignedByFormControl = forwardRef<SignedByRefType, Props>(
               );
             })
           ) : (
-            <div className="text-muted-foreground text-xs">None</div>
+            <div className="text-xs text-muted-foreground">None</div>
           )}
         </div>
 
@@ -150,7 +150,7 @@ export const SignedByFormControl = forwardRef<SignedByRefType, Props>(
           <div className="flex items-center">
             <strong className="text-sm">All of</strong>
             <CustomTooltip title={<>Filter providers that have been audited by ALL of these accounts.</>}>
-              <InfoCircle className="text-muted-foreground ml-2 text-sm" />
+              <InfoCircle className="ml-2 text-sm text-muted-foreground" />
             </CustomTooltip>
           </div>
 
@@ -185,7 +185,7 @@ export const SignedByFormControl = forwardRef<SignedByRefType, Props>(
             );
           })
         ) : (
-          <div className="text-muted-foreground text-xs">None</div>
+          <div className="text-xs text-muted-foreground">None</div>
         )}
       </FormPaper>
     );
diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
index d305271a1..a7db62fb4 100644
--- a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -85,7 +85,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
 
   return (
     <Collapsible open={expanded} onOpenChange={onExpandClick}>
-      <Card className="border-muted-foreground/20 mt-4 rounded-sm border">
+      <Card className="mt-4 rounded-sm border border-muted-foreground/20">
         <CardContent className="p-0">
           {/** Edit Environment Variables */}
           {_isEditingEnv && (
@@ -120,7 +120,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
             />
           )}
 
-          <div className={cn("flex items-end justify-between p-4", { ["border-muted-foreground/20 border-b"]: expanded })}>
+          <div className={cn("flex items-end justify-between p-4", { ["border-b border-muted-foreground/20"]: expanded })}>
             <Controller
               control={control}
               name={`services.${serviceIndex}.title`}
@@ -160,7 +160,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                           </>
                         }
                       >
-                        <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                        <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                       </CustomTooltip>
                     </div>
                   }
@@ -238,7 +238,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                                     </>
                                   }
                                 >
-                                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                                 </CustomTooltip>
                               </div>
                             }
@@ -341,7 +341,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                                   </>
                                 }
                               >
-                                <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                                <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                               </CustomTooltip>
                             </div>
                           }
@@ -393,10 +393,10 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                             </>
                           }
                         >
-                          <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                          <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                         </CustomTooltip>
 
-                        <span className="text-primary ml-4 cursor-pointer text-sm underline" onClick={() => setIsEditingPlacement(serviceIndex)}>
+                        <span className="ml-4 cursor-pointer text-sm text-primary underline" onClick={() => setIsEditingPlacement(serviceIndex)}>
                           Edit
                         </span>
                       </div>
@@ -408,7 +408,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                         </div>
                         <div>
                           <strong>Pricing</strong>&nbsp;&nbsp;
-                          <span className="text-muted-foreground inline-flex items-center">
+                          <span className="inline-flex items-center text-muted-foreground">
                             Max {udenomToDenom(currentService.placement.pricing.amount, 6)} AKT per block
                             <CustomTooltip
                               title={
@@ -429,7 +429,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                                 </>
                               }
                             >
-                              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                             </CustomTooltip>
                           </span>
                         </div>
diff --git a/apps/deploy-web/src/components/sdl/StorageFormControl.tsx b/apps/deploy-web/src/components/sdl/StorageFormControl.tsx
index 5fcd99767..4b0ed3f3d 100644
--- a/apps/deploy-web/src/components/sdl/StorageFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/StorageFormControl.tsx
@@ -52,7 +52,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
           >
             <div className="flex flex-col items-start sm:flex-row sm:items-center">
               <div className="flex items-center">
-                <MdStorage className="text-muted-foreground mr-2 text-2xl" />
+                <MdStorage className="mr-2 text-2xl text-muted-foreground" />
                 <strong className="text-sm">Ephemeral Storage</strong>
 
                 <CustomTooltip
@@ -71,7 +71,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
                     </>
                   }
                 >
-                  <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
                 </CustomTooltip>
               </div>
 
diff --git a/apps/deploy-web/src/components/sdl/ToFormControl.tsx b/apps/deploy-web/src/components/sdl/ToFormControl.tsx
index c1220bc3d..28121c091 100644
--- a/apps/deploy-web/src/components/sdl/ToFormControl.tsx
+++ b/apps/deploy-web/src/components/sdl/ToFormControl.tsx
@@ -68,7 +68,7 @@ export const ToFormControl = forwardRef<ToRefType, Props>(({ control, serviceInd
                 </>
               }
             >
-              <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+              <InfoCircle className="ml-2 text-xs text-muted-foreground" />
             </CustomTooltip>
           </div>
         </div>
@@ -112,7 +112,7 @@ export const ToFormControl = forwardRef<ToRefType, Props>(({ control, serviceInd
           );
         })}
 
-        {otherServices.length === 0 && <div className="text-muted-foreground mb-4 text-xs">There's no other service to expose to.</div>}
+        {otherServices.length === 0 && <div className="mb-4 text-xs text-muted-foreground">There's no other service to expose to.</div>}
       </div>
 
       <div className="flex items-center">
diff --git a/apps/deploy-web/src/components/settings/CertificateDisplay.tsx b/apps/deploy-web/src/components/settings/CertificateDisplay.tsx
index 2d2e354ee..410383a33 100644
--- a/apps/deploy-web/src/components/settings/CertificateDisplay.tsx
+++ b/apps/deploy-web/src/components/settings/CertificateDisplay.tsx
@@ -45,7 +45,7 @@ export function CertificateDisplay() {
               {selectedCertificate ? (
                 <span>
                   Current certificate:{" "}
-                  <span className="text-primary inline-flex items-center text-xs font-bold">
+                  <span className="inline-flex items-center text-xs font-bold text-primary">
                     {selectedCertificate.serial} <Check color="secondary" className="ml-2" />
                   </span>
                 </span>
@@ -56,7 +56,7 @@ export function CertificateDisplay() {
 
             {selectedCertificate && !isLocalCertMatching && (
               <CustomTooltip title="The local certificate doesn't match the one on the blockchain. You can revoke it and create a new one.">
-                <WarningTriangle className="text-destructive ml-2 text-sm" />
+                <WarningTriangle className="ml-2 text-sm text-destructive" />
               </CustomTooltip>
             )}
           </div>
diff --git a/apps/deploy-web/src/components/settings/CertificateList.tsx b/apps/deploy-web/src/components/settings/CertificateList.tsx
index fe7a22447..b1ad01202 100644
--- a/apps/deploy-web/src/components/settings/CertificateList.tsx
+++ b/apps/deploy-web/src/components/settings/CertificateList.tsx
@@ -52,7 +52,7 @@ export const CertificateList: React.FunctionComponent = () => {
                       <FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                     </TableCell>
                     <TableCell align="center">
-                      <p className="text-muted-foreground text-sm">{cert.serial}</p>
+                      <p className="text-sm text-muted-foreground">{cert.serial}</p>
                     </TableCell>
                     <TableCell align="center">
                       <Button
diff --git a/apps/deploy-web/src/components/settings/SelectNetworkModal.tsx b/apps/deploy-web/src/components/settings/SelectNetworkModal.tsx
index badfa6360..a250e2fa1 100644
--- a/apps/deploy-web/src/components/settings/SelectNetworkModal.tsx
+++ b/apps/deploy-web/src/components/settings/SelectNetworkModal.tsx
@@ -64,7 +64,7 @@ export const SelectNetworkModal = ({ onClose }) => {
                 onClick={() => handleSelectNetwork(network)}
                 className={cn(
                   buttonVariants({ variant: "text" }),
-                  { ["text-muted-foreground pointer-events-none"]: !network.enabled },
+                  { ["pointer-events-none text-muted-foreground"]: !network.enabled },
                   "flex h-auto cursor-pointer items-center justify-start"
                 )}
               >
@@ -76,7 +76,7 @@ export const SelectNetworkModal = ({ onClose }) => {
                     <span>
                       <strong>{network.title}</strong>
                       {" - "}
-                      <span className="text-muted-foreground text-xs">{network.version}</span>
+                      <span className="text-xs text-muted-foreground">{network.version}</span>
                     </span>
                     {network.id !== mainnetId && (
                       <Badge className={cn("ml-4 h-4 text-xs font-bold", { ["bg-primary/30"]: !network.enabled })}>Experimental</Badge>
diff --git a/apps/deploy-web/src/components/shared/Address.tsx b/apps/deploy-web/src/components/shared/Address.tsx
index 04497e765..27f97981b 100644
--- a/apps/deploy-web/src/components/shared/Address.tsx
+++ b/apps/deploy-web/src/components/shared/Address.tsx
@@ -37,7 +37,7 @@ export const Address: React.FunctionComponent<Props> = ({ address, isCopyable, d
 
   const content = (
     <span
-      className={cn("text-primary inline-flex items-center transition-all hover:underline", { ["cursor-pointer"]: isCopyable })}
+      className={cn("inline-flex items-center text-primary transition-all hover:underline", { ["cursor-pointer"]: isCopyable })}
       onClick={onClick}
       onMouseOver={() => setIsOver(true)}
       onMouseOut={() => setIsOver(false)}
diff --git a/apps/deploy-web/src/components/shared/CodeSnippet.tsx b/apps/deploy-web/src/components/shared/CodeSnippet.tsx
index 48969870a..b00dc51b5 100644
--- a/apps/deploy-web/src/components/shared/CodeSnippet.tsx
+++ b/apps/deploy-web/src/components/shared/CodeSnippet.tsx
@@ -22,7 +22,7 @@ export const CodeSnippet = ({ code }: React.PropsWithChildren<{ code: string }>)
   };
 
   return (
-    <pre className="bg-popover relative rounded-sm p-4 pt-6 text-sm">
+    <pre className="relative rounded-sm bg-popover p-4 pt-6 text-sm">
       <div className="absolute left-0 top-0 flex w-full justify-end p-2">
         <Button aria-label="copy" aria-haspopup="true" onClick={onCopyClick} size="icon" variant="ghost">
           <Copy />
diff --git a/apps/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx b/apps/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
index 4cbe55a9c..7baede801 100644
--- a/apps/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
+++ b/apps/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
@@ -15,7 +15,7 @@ export const CustomDropdownLinkItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuIconItem> & Props
 >(({ onClick, icon, children, className = "" }, ref) => {
   return (
-    <DropdownMenuIconItem className={cn("hover:text-primary cursor-pointer", className)} onClick={onClick} icon={icon} ref={ref}>
+    <DropdownMenuIconItem className={cn("cursor-pointer hover:text-primary", className)} onClick={onClick} icon={icon} ref={ref}>
       {children}
     </DropdownMenuIconItem>
   );
diff --git a/apps/deploy-web/src/components/shared/DynamicJsonView.tsx b/apps/deploy-web/src/components/shared/DynamicJsonView.tsx
index 615923e3a..5800153ea 100644
--- a/apps/deploy-web/src/components/shared/DynamicJsonView.tsx
+++ b/apps/deploy-web/src/components/shared/DynamicJsonView.tsx
@@ -7,7 +7,7 @@ import Spinner from "./Spinner";
 const _DynamicReactJson = dynamic(() => import("@textea/json-viewer").then(module => module.JsonViewer), {
   ssr: false,
   loading: () => (
-    <div className="text-muted-foreground flex items-center text-sm">
+    <div className="flex items-center text-sm text-muted-foreground">
       Loading... <Spinner size="small" className="ml-2" />
     </div>
   )
diff --git a/apps/deploy-web/src/components/shared/FavoriteButton.tsx b/apps/deploy-web/src/components/shared/FavoriteButton.tsx
index 47584de14..3c67468e3 100644
--- a/apps/deploy-web/src/components/shared/FavoriteButton.tsx
+++ b/apps/deploy-web/src/components/shared/FavoriteButton.tsx
@@ -6,7 +6,7 @@ import { Button } from "../ui/button";
 export const FavoriteButton = ({ onClick, isFavorite }) => {
   return (
     <Button onClick={onClick} size="icon" className="h-8 w-8 rounded-full" variant="ghost">
-      {isFavorite ? <StarSolid className="text-primary text-xs" /> : <Star className="text-muted-foreground text-xs" />}
+      {isFavorite ? <StarSolid className="text-xs text-primary" /> : <Star className="text-xs text-muted-foreground" />}
     </Button>
   );
 };
diff --git a/apps/deploy-web/src/components/shared/FormattedDecimal.tsx b/apps/deploy-web/src/components/shared/FormattedDecimal.tsx
index d79e223da..1fdcf257a 100644
--- a/apps/deploy-web/src/components/shared/FormattedDecimal.tsx
+++ b/apps/deploy-web/src/components/shared/FormattedDecimal.tsx
@@ -23,7 +23,7 @@ export const FormattedDecimal: React.FunctionComponent<Props> = ({ value, precis
               case "decimal":
               case "fraction":
                 return (
-                  <small key={i} className="text-muted-foreground text-xs">
+                  <small key={i} className="text-xs text-muted-foreground">
                     {part.value}
                   </small>
                 );
diff --git a/apps/deploy-web/src/components/shared/LabelValue.tsx b/apps/deploy-web/src/components/shared/LabelValue.tsx
index 086fb0ec9..9ebc2d3da 100644
--- a/apps/deploy-web/src/components/shared/LabelValue.tsx
+++ b/apps/deploy-web/src/components/shared/LabelValue.tsx
@@ -12,7 +12,7 @@ export const LabelValue: React.FunctionComponent<LabelValueProps> = ({ label, va
   return (
     <div className={cn(className, "mb-4 flex flex-col items-start last:mb-0 sm:flex-row sm:items-center")}>
       {label && (
-        <div className="text-muted-foreground flex shrink-0 items-center break-all pr-2 font-bold" style={{ width: labelWidth }}>
+        <div className="flex shrink-0 items-center break-all pr-2 font-bold text-muted-foreground" style={{ width: labelWidth }}>
           {label}
         </div>
       )}
diff --git a/apps/deploy-web/src/components/shared/LeaseSpecDetail.tsx b/apps/deploy-web/src/components/shared/LeaseSpecDetail.tsx
index a4d26b87b..0bab714b4 100644
--- a/apps/deploy-web/src/components/shared/LeaseSpecDetail.tsx
+++ b/apps/deploy-web/src/components/shared/LeaseSpecDetail.tsx
@@ -24,8 +24,8 @@ export const LeaseSpecDetail: React.FunctionComponent<Props> = ({ value, type, c
       </div>
 
       <div className="ml-1">{typeof value === "string" ? value : <FormattedNumber value={value} />}</div>
-      <div className="text-muted-foreground ml-1">
-        <span className="text-muted-foreground text-xs">
+      <div className="ml-1 text-muted-foreground">
+        <span className="text-xs text-muted-foreground">
           {type === "cpu" && "CPU"}
           {type === "gpu" && "GPU"}
           {type === "ram" && "RAM"}
diff --git a/apps/deploy-web/src/components/shared/LinkTo.tsx b/apps/deploy-web/src/components/shared/LinkTo.tsx
index 5c8f43be3..30b426f70 100644
--- a/apps/deploy-web/src/components/shared/LinkTo.tsx
+++ b/apps/deploy-web/src/components/shared/LinkTo.tsx
@@ -10,7 +10,7 @@ export function LinkTo({ children, className = "", ...rest }: React.PropsWithChi
       {...rest}
       className={cn(
         className,
-        "text-primary visited:text-primary-visited m-0 inline-flex cursor-pointer border-0 bg-transparent p-0 underline disabled:cursor-default disabled:text-gray-500"
+        "m-0 inline-flex cursor-pointer border-0 bg-transparent p-0 text-primary underline visited:text-primary-visited disabled:cursor-default disabled:text-gray-500"
       )}
     >
       {children}
diff --git a/apps/deploy-web/src/components/shared/PrerequisiteList.tsx b/apps/deploy-web/src/components/shared/PrerequisiteList.tsx
index 79f1f7718..0d393107c 100644
--- a/apps/deploy-web/src/components/shared/PrerequisiteList.tsx
+++ b/apps/deploy-web/src/components/shared/PrerequisiteList.tsx
@@ -89,7 +89,7 @@ export const PrerequisiteList: React.FunctionComponent<Props> = ({ onClose, onCo
                   <Title subTitle className="!text-lg">
                     Wallet Balance
                   </Title>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                     The balance of the wallet needs to be of at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC. If you do not have {minDeposit.akt} AKT or{" "}
                     {minDeposit.usdc} USDC, you will need to specify an authorized depositor.
                   </p>
diff --git a/apps/deploy-web/src/components/shared/PriceEstimateTooltip.tsx b/apps/deploy-web/src/components/shared/PriceEstimateTooltip.tsx
index 46dda77aa..3d282b403 100644
--- a/apps/deploy-web/src/components/shared/PriceEstimateTooltip.tsx
+++ b/apps/deploy-web/src/components/shared/PriceEstimateTooltip.tsx
@@ -25,7 +25,7 @@ export const PriceEstimateTooltip: React.FunctionComponent<Props> = ({ value, de
     <CustomTooltip
       title={
         <div>
-          <span className="text-muted-foreground text-sm">Price estimation:</span>
+          <span className="text-sm text-muted-foreground">Price estimation:</span>
           <div>
             <strong>
               <PriceValue value={_value} denom={denom} />
@@ -51,7 +51,7 @@ export const PriceEstimateTooltip: React.FunctionComponent<Props> = ({ value, de
         </div>
       }
     >
-      <InfoCircle className="text-muted-foreground ml-2 text-xs" />
+      <InfoCircle className="ml-2 text-xs text-muted-foreground" />
     </CustomTooltip>
   );
 };
diff --git a/apps/deploy-web/src/components/shared/SpecDetailList.tsx b/apps/deploy-web/src/components/shared/SpecDetailList.tsx
index e24cd03f5..b348c62ab 100644
--- a/apps/deploy-web/src/components/shared/SpecDetailList.tsx
+++ b/apps/deploy-web/src/components/shared/SpecDetailList.tsx
@@ -18,7 +18,7 @@ export function SpecDetailList({ cpuAmount, memoryAmount, storageAmount, gpuAmou
   const specDetailClasses = "flex-grow text-left text-xs leading-3 whitespace-nowrap";
 
   return (
-    <div className="bg-popover inline-flex flex-col flex-nowrap items-center divide-y overflow-hidden rounded-md border p-0">
+    <div className="inline-flex flex-col flex-nowrap items-center divide-y overflow-hidden rounded-md border bg-popover p-0">
       {isActive && <LinearProgress className="h-[2px] w-full opacity-30" />}
 
       <div className={cn(serverRowClasses, defaultColorClasses, { [activeColorClasses]: isActive })}>
diff --git a/apps/deploy-web/src/components/shared/TemplateGridButton.tsx b/apps/deploy-web/src/components/shared/TemplateGridButton.tsx
index f1f81b874..9655fc9cc 100644
--- a/apps/deploy-web/src/components/shared/TemplateGridButton.tsx
+++ b/apps/deploy-web/src/components/shared/TemplateGridButton.tsx
@@ -15,7 +15,7 @@ type Props = {
 export const TemplateGridButton: React.FunctionComponent<Props> = ({ template, onClick }) => {
   return (
     <Link
-      className={cn(cardClasses, "hover:bg-secondary/60 dark:hover:bg-secondary/30 min-h-[100px] cursor-pointer !no-underline")}
+      className={cn(cardClasses, "min-h-[100px] cursor-pointer !no-underline hover:bg-secondary/60 dark:hover:bg-secondary/30")}
       href={UrlService.template(template.id as string)}
       onClick={onClick}
     >
@@ -25,7 +25,7 @@ export const TemplateGridButton: React.FunctionComponent<Props> = ({ template, o
         </div>
       </CardHeader>
       <CardContent className="pb-4 pt-0">
-        <p className="text-muted-foreground text-sm">{getShortText(template.description || "", 50)}</p>
+        <p className="text-sm text-muted-foreground">{getShortText(template.description || "", 50)}</p>
       </CardContent>
     </Link>
   );
diff --git a/apps/deploy-web/src/components/table/data-table-column-header.tsx b/apps/deploy-web/src/components/table/data-table-column-header.tsx
index 13d3ed940..845e1f197 100644
--- a/apps/deploy-web/src/components/table/data-table-column-header.tsx
+++ b/apps/deploy-web/src/components/table/data-table-column-header.tsx
@@ -19,7 +19,7 @@ export function DataTableColumnHeader<TData, TValue>({ column, title, className
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+          <Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
               <ArrowDownIcon className="ml-2 h-4 w-4" />
@@ -32,16 +32,16 @@ export function DataTableColumnHeader<TData, TValue>({ column, title, className
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/deploy-web/src/components/table/data-table-faceted-filter.tsx b/apps/deploy-web/src/components/table/data-table-faceted-filter.tsx
index d74cfbac6..6fbdbcaaf 100644
--- a/apps/deploy-web/src/components/table/data-table-faceted-filter.tsx
+++ b/apps/deploy-web/src/components/table/data-table-faceted-filter.tsx
@@ -84,13 +84,13 @@ export function DataTableFacetedFilter<TData, TValue>({ column, title, options }
                   >
                     <div
                       className={cn(
-                        "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                         isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                       )}
                     >
                       <CheckIcon className={cn("h-4 w-4")} />
                     </div>
-                    {option.icon && <option.icon className="text-muted-foreground mr-2 h-4 w-4" />}
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
                     <span>{option.label}</span>
                     {/* {facets?.get(option.value) && (
                       <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">{facets.get(option.value)}</span>
diff --git a/apps/deploy-web/src/components/table/data-table-pagination.tsx b/apps/deploy-web/src/components/table/data-table-pagination.tsx
index b4608e786..c35be407b 100644
--- a/apps/deploy-web/src/components/table/data-table-pagination.tsx
+++ b/apps/deploy-web/src/components/table/data-table-pagination.tsx
@@ -12,7 +12,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({ table, hasRowSelection }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex flex-col items-center justify-between px-2 sm:flex-row">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex-1 text-sm text-muted-foreground">
         {hasRowSelection && (
           <>
             {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
diff --git a/apps/deploy-web/src/components/table/data-table-row-actions.tsx b/apps/deploy-web/src/components/table/data-table-row-actions.tsx
index 9d98972c0..680b518aa 100644
--- a/apps/deploy-web/src/components/table/data-table-row-actions.tsx
+++ b/apps/deploy-web/src/components/table/data-table-row-actions.tsx
@@ -9,7 +9,7 @@ export function DataTableRowActions() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="data-[state=open]:bg-muted flex h-8 w-8 p-0">
+        <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted">
           <DotsHorizontalIcon className="h-4 w-4" />
           <span className="sr-only">Open menu</span>
         </Button>
diff --git a/apps/deploy-web/src/components/templates/TemplateBox.tsx b/apps/deploy-web/src/components/templates/TemplateBox.tsx
index 7eab1e045..0c5e21955 100644
--- a/apps/deploy-web/src/components/templates/TemplateBox.tsx
+++ b/apps/deploy-web/src/components/templates/TemplateBox.tsx
@@ -18,7 +18,7 @@ type Props = {
 export const TemplateBox: React.FunctionComponent<Props> = ({ template, linkHref }) => {
   return (
     <Link
-      className={cn(cardClasses, "hover:bg-secondary/60 dark:hover:bg-secondary/30 min-h-[100px] cursor-pointer !no-underline")}
+      className={cn(cardClasses, "min-h-[100px] cursor-pointer !no-underline hover:bg-secondary/60 dark:hover:bg-secondary/30")}
       href={linkHref ? linkHref : UrlService.templateDetails(template.id as string)}
     >
       <CardHeader>
@@ -34,7 +34,7 @@ export const TemplateBox: React.FunctionComponent<Props> = ({ template, linkHref
         </div>
       </CardHeader>
       <CardContent className="pb-4 pt-0">
-        <p className="text-muted-foreground text-xs">{getShortText(template.summary, 128)}</p>
+        <p className="text-xs text-muted-foreground">{getShortText(template.summary, 128)}</p>
       </CardContent>
     </Link>
   );
diff --git a/apps/deploy-web/src/components/templates/TemplateGallery.tsx b/apps/deploy-web/src/components/templates/TemplateGallery.tsx
index 672fda28f..5c0bdc4a6 100644
--- a/apps/deploy-web/src/components/templates/TemplateGallery.tsx
+++ b/apps/deploy-web/src/components/templates/TemplateGallery.tsx
@@ -127,7 +127,7 @@ export const TemplateGallery: React.FunctionComponent = () => {
       <div className="mb-6 text-center sm:mb-8 md:mb-12">
         <Title className="mb-2 text-2xl font-bold sm:text-3xl md:text-4xl">Find your Template</Title>
 
-        <Title subTitle className="text-muted-foreground text-base font-normal sm:text-lg">
+        <Title subTitle className="text-base font-normal text-muted-foreground sm:text-lg">
           Jumpstart your app development process with our pre-built solutions.
         </Title>
       </div>
@@ -170,7 +170,7 @@ export const TemplateGallery: React.FunctionComponent = () => {
                 >
                   All{" "}
                   <span className="text-xs">
-                    <small className="text-muted-foreground ml-2">({templates.length - 1})</small>
+                    <small className="ml-2 text-muted-foreground">({templates.length - 1})</small>
                   </span>
                 </li>
               )}
@@ -189,7 +189,7 @@ export const TemplateGallery: React.FunctionComponent = () => {
                   >
                     {category.title}{" "}
                     <span className="text-xs">
-                      <small className="text-muted-foreground ml-2">({category.templates.length})</small>
+                      <small className="ml-2 text-muted-foreground">({category.templates.length})</small>
                     </span>
                   </li>
                 ))}
@@ -223,7 +223,7 @@ export const TemplateGallery: React.FunctionComponent = () => {
           )}
 
           {!isLoadingTemplates && categories.length > 0 && shownTemplates.length === 0 && (!!searchTerms || !!selectedCategoryTitle) && (
-            <div className="border-muted-foreground flex h-[200px] flex-col items-center justify-center border">
+            <div className="flex h-[200px] flex-col items-center justify-center border border-muted-foreground">
               <MdSearchOff className="mb-4 text-6xl" />
               <p>No search result found. Try adjusting your filters.</p>
             </div>
diff --git a/apps/deploy-web/src/components/templates/UserTemplate.tsx b/apps/deploy-web/src/components/templates/UserTemplate.tsx
index 6ffe54f24..c9e6af601 100644
--- a/apps/deploy-web/src/components/templates/UserTemplate.tsx
+++ b/apps/deploy-web/src/components/templates/UserTemplate.tsx
@@ -200,7 +200,7 @@ export const UserTemplate: React.FunctionComponent<Props> = ({ id, template }) =
               </div>
             )}
 
-            {description ? description : <p className="text-muted-foreground text-sm">No description...</p>}
+            {description ? description : <p className="text-sm text-muted-foreground">No description...</p>}
           </CardContent>
         </Card>
       )}
diff --git a/apps/deploy-web/src/components/ui/avatar.tsx b/apps/deploy-web/src/components/ui/avatar.tsx
index 64bf20809..ad4aca4eb 100644
--- a/apps/deploy-web/src/components/ui/avatar.tsx
+++ b/apps/deploy-web/src/components/ui/avatar.tsx
@@ -20,7 +20,7 @@ const AvatarFallback = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.
   ({ className, ...props }, ref) => (
     <AvatarPrimitive.Fallback
       ref={ref}
-      className={cn("bg-muted-foreground/10 flex h-full w-full items-center justify-center rounded-full", className)}
+      className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted-foreground/10", className)}
       {...props}
     />
   )
diff --git a/apps/deploy-web/src/components/ui/breadcrumb.tsx b/apps/deploy-web/src/components/ui/breadcrumb.tsx
index 81cb17474..c513bf157 100644
--- a/apps/deploy-web/src/components/ui/breadcrumb.tsx
+++ b/apps/deploy-web/src/components/ui/breadcrumb.tsx
@@ -13,7 +13,7 @@ const Breadcrumb = React.forwardRef<
 Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(({ className, ...props }, ref) => (
-  <ol ref={ref} className={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5", className)} {...props} />
+  <ol ref={ref} className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)} {...props} />
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
 
@@ -30,12 +30,12 @@ const BreadcrumbLink = React.forwardRef<
 >(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
 
-  return <Comp ref={ref} className={cn("hover:text-foreground transition-colors", className)} {...props} />;
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(({ className, ...props }, ref) => (
-  <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props} />
+  <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props} />
 ));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
diff --git a/apps/deploy-web/src/components/ui/card.tsx b/apps/deploy-web/src/components/ui/card.tsx
index 5dd5f19f0..70ef87f4a 100644
--- a/apps/deploy-web/src/components/ui/card.tsx
+++ b/apps/deploy-web/src/components/ui/card.tsx
@@ -20,7 +20,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
diff --git a/apps/deploy-web/src/components/ui/checkbox.tsx b/apps/deploy-web/src/components/ui/checkbox.tsx
index d75e79927..8745e2e14 100644
--- a/apps/deploy-web/src/components/ui/checkbox.tsx
+++ b/apps/deploy-web/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/deploy-web/src/components/ui/command.tsx b/apps/deploy-web/src/components/ui/command.tsx
index fb3bd324d..8fa395379 100644
--- a/apps/deploy-web/src/components/ui/command.tsx
+++ b/apps/deploy-web/src/components/ui/command.tsx
@@ -11,7 +11,7 @@ const Command = React.forwardRef<React.ElementRef<typeof CommandPrimitive>, Reac
   ({ className, ...props }, ref) => (
     <CommandPrimitive
       ref={ref}
-      className={cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+      className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)}
       {...props}
     />
   )
@@ -24,7 +24,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -39,7 +39,7 @@ const CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.I
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -67,7 +67,7 @@ const CommandGroup = React.forwardRef<React.ElementRef<typeof CommandPrimitive.G
     <CommandPrimitive.Group
       ref={ref}
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => <CommandPrimitive.Separator ref={ref} className={cn("bg-border -mx-1 h-px", className)} {...props} />);
+>(({ className, ...props }, ref) => <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>>(
@@ -88,7 +88,7 @@ const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.It
     <CommandPrimitive.Item
       ref={ref}
       className={cn(
-        "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
       {...props}
@@ -99,7 +99,7 @@ const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.It
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
 };
 CommandShortcut.displayName = "CommandShortcut";
 
diff --git a/apps/deploy-web/src/components/ui/dialog.tsx b/apps/deploy-web/src/components/ui/dialog.tsx
index 858a278a3..b47ad1b6a 100644
--- a/apps/deploy-web/src/components/ui/dialog.tsx
+++ b/apps/deploy-web/src/components/ui/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.O
     <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
-        "bg-background/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[750] backdrop-blur-sm",
+        "fixed inset-0 z-[750] bg-background/20 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-[751] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-[751] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -46,7 +46,7 @@ const DialogContent = React.forwardRef<
       {children}
 
       {!hideCloseButton && (
-        <DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -76,7 +76,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />);
+>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
diff --git a/apps/deploy-web/src/components/ui/drawer.tsx b/apps/deploy-web/src/components/ui/drawer.tsx
index 01a2e07ea..1cdd6b6e0 100644
--- a/apps/deploy-web/src/components/ui/drawer.tsx
+++ b/apps/deploy-web/src/components/ui/drawer.tsx
@@ -26,10 +26,10 @@ const DrawerContent = React.forwardRef<React.ElementRef<typeof DrawerPrimitive.C
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
-        className={cn("bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border", className)}
+        className={cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className)}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -57,7 +57,7 @@ DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => <DrawerPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />);
+>(({ className, ...props }, ref) => <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };
diff --git a/apps/deploy-web/src/components/ui/dropdown-menu.tsx b/apps/deploy-web/src/components/ui/dropdown-menu.tsx
index a2a6e1123..4f4c11de8 100644
--- a/apps/deploy-web/src/components/ui/dropdown-menu.tsx
+++ b/apps/deploy-web/src/components/ui/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "data-[state=open]:bg-accent focus:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
       inset && "pl-8",
       className
     )}
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       className
     )}
     checked={checked}
@@ -121,7 +121,7 @@ const DropdownMenuIconItem = React.forwardRef<
   <DropdownMenuPrimitive.DropdownMenuItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       className
     )}
     {...props}
@@ -139,7 +139,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       className
     )}
     {...props}
@@ -167,7 +167,7 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />);
+>(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
diff --git a/apps/deploy-web/src/components/ui/form.tsx b/apps/deploy-web/src/components/ui/form.tsx
index ab350534b..32971d407 100644
--- a/apps/deploy-web/src/components/ui/form.tsx
+++ b/apps/deploy-web/src/components/ui/form.tsx
@@ -91,7 +91,7 @@ FormControl.displayName = "FormControl";
 const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
 
-  return <p ref={ref} id={formDescriptionId} className={cn("text-muted-foreground text-sm", className)} {...props} />;
+  return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
 });
 FormDescription.displayName = "FormDescription";
 
@@ -104,7 +104,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
   }
 
   return (
-    <p ref={ref} id={formMessageId} className={cn("text-destructive text-sm font-medium", className)} {...props}>
+    <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
       {body}
     </p>
   );
diff --git a/apps/deploy-web/src/components/ui/input.tsx b/apps/deploy-web/src/components/ui/input.tsx
index 813cece15..a13086def 100644
--- a/apps/deploy-web/src/components/ui/input.tsx
+++ b/apps/deploy-web/src/components/ui/input.tsx
@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        "border-input bg-popover ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md border border-input bg-popover px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
@@ -35,7 +35,7 @@ const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(({ classNam
       <input
         type={type}
         className={cn(
-          "border-input bg-popover ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-popover px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
@@ -64,13 +64,13 @@ const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIconProps>(
     return (
       <div className={className}>
         {label && <Label htmlFor={`${id}-input`}>{label}</Label>}
-        <div className="border-input bg-popover ring-offset-background focus:ring-ring flex h-10 w-full items-center rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+        <div className="flex h-10 w-full items-center rounded-md border border-input bg-popover px-3 py-2 text-sm shadow-sm ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
           {startIcon && <div className="inset-y-0 left-0 flex items-center">{startIcon}</div>}
           <input
             id={`${id}-input`}
             type={type}
             className={cn(
-              "placeholder:text-muted-foreground flex-grow file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none",
+              "flex-grow file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none",
               // "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
               inputClassName,
               { ["pl-4"]: !!startIcon, ["pr-4"]: !!endIcon }
@@ -112,7 +112,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
   return (
     <textarea
       className={cn(
-        "border-input bg-popover ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full resize-y rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full resize-y rounded-md border border-input bg-popover px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={textAreaRef}
diff --git a/apps/deploy-web/src/components/ui/multiple-selector.tsx b/apps/deploy-web/src/components/ui/multiple-selector.tsx
index 64841d500..a99443fae 100644
--- a/apps/deploy-web/src/components/ui/multiple-selector.tsx
+++ b/apps/deploy-web/src/components/ui/multiple-selector.tsx
@@ -311,7 +311,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
       >
         <div
           className={cn(
-            "border-input bg-popover ring-offset-background focus-within:ring-ring group rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-offset-2",
+            "group rounded-md border border-input bg-popover px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
             className
           )}
         >
@@ -331,7 +331,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                   {option.label}
                   <button
                     className={cn(
-                      "ring-offset-background focus:ring-ring ml-1 rounded-full outline-none focus:ring-2 focus:ring-offset-2",
+                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       (disabled || option.fixed) && "hidden"
                     )}
                     onKeyDown={e => {
@@ -370,13 +370,13 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                 inputProps?.onFocus?.(event);
               }}
               placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? "" : placeholder}
-              className={cn("placeholder:text-muted-foreground ml-2 flex-1 bg-transparent outline-none", inputProps?.className)}
+              className={cn("ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", inputProps?.className)}
             />
           </div>
         </div>
         <div className="relative">
           {open && (
-            <CommandList className="bg-popover text-popover-foreground animate-in absolute top-2 z-10 w-full rounded-md border shadow-md outline-none">
+            <CommandList className="absolute top-2 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
               {isLoading ? (
                 <>{loadingIndicator}</>
               ) : (
@@ -407,7 +407,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                                 setSelected(newOptions);
                                 onChange?.(newOptions);
                               }}
-                              className={cn("cursor-pointer", option.disable && "text-muted-foreground cursor-default")}
+                              className={cn("cursor-pointer", option.disable && "cursor-default text-muted-foreground")}
                             >
                               {option.label}
                             </CommandItem>
diff --git a/apps/deploy-web/src/components/ui/navigation-menu.tsx b/apps/deploy-web/src/components/ui/navigation-menu.tsx
index 755771e35..c63575c98 100644
--- a/apps/deploy-web/src/components/ui/navigation-menu.tsx
+++ b/apps/deploy-web/src/components/ui/navigation-menu.tsx
@@ -48,7 +48,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
       ref={ref}
@@ -82,12 +82,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className
     )}
     {...props}
   >
-    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
diff --git a/apps/deploy-web/src/components/ui/popover.tsx b/apps/deploy-web/src/components/ui/popover.tsx
index cf2f7cc69..749489cc2 100644
--- a/apps/deploy-web/src/components/ui/popover.tsx
+++ b/apps/deploy-web/src/components/ui/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
diff --git a/apps/deploy-web/src/components/ui/progress.tsx b/apps/deploy-web/src/components/ui/progress.tsx
index caf7ef7ac..3a13d06fa 100644
--- a/apps/deploy-web/src/components/ui/progress.tsx
+++ b/apps/deploy-web/src/components/ui/progress.tsx
@@ -7,8 +7,8 @@ import { cn } from "@src/utils/styleUtils";
 
 const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>>(
   ({ className, value, ...props }, ref) => (
-    <ProgressPrimitive.Root ref={ref} className={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)} {...props}>
-      <ProgressPrimitive.Indicator className="bg-primary h-full w-full flex-1 transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+    <ProgressPrimitive.Root ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props}>
+      <ProgressPrimitive.Indicator className="h-full w-full flex-1 bg-primary transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
     </ProgressPrimitive.Root>
   )
 );
diff --git a/apps/deploy-web/src/components/ui/radio-group.tsx b/apps/deploy-web/src/components/ui/radio-group.tsx
index 74998f923..a847999b7 100644
--- a/apps/deploy-web/src/components/ui/radio-group.tsx
+++ b/apps/deploy-web/src/components/ui/radio-group.tsx
@@ -19,7 +19,7 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
       <RadioGroupPrimitive.Item
         ref={ref}
         className={cn(
-          "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
diff --git a/apps/deploy-web/src/components/ui/scroll-area.tsx b/apps/deploy-web/src/components/ui/scroll-area.tsx
index 8849b00dc..bd397323d 100644
--- a/apps/deploy-web/src/components/ui/scroll-area.tsx
+++ b/apps/deploy-web/src/components/ui/scroll-area.tsx
@@ -31,7 +31,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/apps/deploy-web/src/components/ui/select.tsx b/apps/deploy-web/src/components/ui/select.tsx
index ddc5a81e6..98a966699 100644
--- a/apps/deploy-web/src/components/ui/select.tsx
+++ b/apps/deploy-web/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "border-input bg-popover ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-popover px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.C
       <SelectPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -93,7 +93,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
         className
       )}
       {...props}
@@ -111,7 +111,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>>(
-  ({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
 );
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
diff --git a/apps/deploy-web/src/components/ui/separator.tsx b/apps/deploy-web/src/components/ui/separator.tsx
index 3507c2bdf..3a280092b 100644
--- a/apps/deploy-web/src/components/ui/separator.tsx
+++ b/apps/deploy-web/src/components/ui/separator.tsx
@@ -10,7 +10,7 @@ const Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive.Ro
       ref={ref}
       decorative={decorative}
       orientation={orientation}
-      className={cn("bg-border shrink-0", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+      className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
       {...props}
     />
   )
diff --git a/apps/deploy-web/src/components/ui/slider.tsx b/apps/deploy-web/src/components/ui/slider.tsx
index f420e95b3..00d1e0a4e 100644
--- a/apps/deploy-web/src/components/ui/slider.tsx
+++ b/apps/deploy-web/src/components/ui/slider.tsx
@@ -8,10 +8,10 @@ import { cn } from "@src/utils/styleUtils";
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>>(
   ({ className, ...props }, ref) => (
     <SliderPrimitive.Root ref={ref} className={cn("relative flex w-full touch-none select-none items-center", className)} {...props}>
-      <SliderPrimitive.Track className="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
-        <SliderPrimitive.Range className="bg-primary absolute h-full" />
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className="border-primary bg-background ring-offset-background focus-visible:ring-ring block h-5 w-5 cursor-pointer rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+      <SliderPrimitive.Thumb className="block h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
     </SliderPrimitive.Root>
   )
 );
diff --git a/apps/deploy-web/src/components/ui/switch.tsx b/apps/deploy-web/src/components/ui/switch.tsx
index 380ef1f57..f50aaedd0 100644
--- a/apps/deploy-web/src/components/ui/switch.tsx
+++ b/apps/deploy-web/src/components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>,
   ({ className, ...props }, ref) => (
     <SwitchPrimitives.Root
       className={cn(
-        "aria-[checked=true]:bg-primary aria-[checked=false]:bg-input focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors aria-[checked=false]:bg-input aria-[checked=true]:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -18,7 +18,7 @@ const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>,
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          "bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitives.Root>
diff --git a/apps/deploy-web/src/components/ui/table.tsx b/apps/deploy-web/src/components/ui/table.tsx
index b30a52ce0..986124493 100644
--- a/apps/deploy-web/src/components/ui/table.tsx
+++ b/apps/deploy-web/src/components/ui/table.tsx
@@ -21,21 +21,21 @@ const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes
 TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
 ));
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn("border-b-muted-foreground/20 hover:bg-muted/100 data-[state=selected]:bg-muted border-b transition-colors", className)}
+    className={cn("border-b border-b-muted-foreground/20 transition-colors data-[state=selected]:bg-muted hover:bg-muted/100", className)}
     {...props}
   />
 ));
 TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
-  <th ref={ref} className={cn("text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  <th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
 ));
 TableHead.displayName = "TableHead";
 
@@ -45,7 +45,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 
diff --git a/apps/deploy-web/src/components/ui/tabs.tsx b/apps/deploy-web/src/components/ui/tabs.tsx
index 5b8d11e6d..f951fefa6 100644
--- a/apps/deploy-web/src/components/ui/tabs.tsx
+++ b/apps/deploy-web/src/components/ui/tabs.tsx
@@ -10,7 +10,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, R
   ({ className, ...props }, ref) => (
     <TabsPrimitive.List
       ref={ref}
-      className={cn("bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1", className)}
+      className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}
       {...props}
     />
   )
@@ -22,7 +22,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-popover data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-popover data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Conte
     <TabsPrimitive.Content
       ref={ref}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       )}
       {...props}
diff --git a/apps/deploy-web/src/components/ui/tooltip.tsx b/apps/deploy-web/src/components/ui/tooltip.tsx
index 1bbfd98d9..1e1b9a462 100644
--- a/apps/deploy-web/src/components/ui/tooltip.tsx
+++ b/apps/deploy-web/src/components/ui/tooltip.tsx
@@ -34,7 +34,7 @@ const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/apps/deploy-web/src/components/user/UserProfile.tsx b/apps/deploy-web/src/components/user/UserProfile.tsx
index 48e7c8dcf..f87a4dcc4 100644
--- a/apps/deploy-web/src/components/user/UserProfile.tsx
+++ b/apps/deploy-web/src/components/user/UserProfile.tsx
@@ -35,7 +35,7 @@ export const UserProfile: React.FunctionComponent<Props> = ({ username, user })
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
           {!isLoadingTemplates && userTemplates?.length === 0 && (
             <div className="p-4">
-              <p className="text-muted-foreground text-sm">No public templates.</p>
+              <p className="text-sm text-muted-foreground">No public templates.</p>
 
               {username === _user?.username && (
                 <Link
diff --git a/apps/deploy-web/src/pages/_app.tsx b/apps/deploy-web/src/pages/_app.tsx
index 98dfa851e..28cf49cd1 100644
--- a/apps/deploy-web/src/pages/_app.tsx
+++ b/apps/deploy-web/src/pages/_app.tsx
@@ -48,7 +48,7 @@ Router.events.on("routeChangeError", () => NProgress.done());
 const App: React.FunctionComponent<Props> = props => {
   const { Component, pageProps } = props;
   return (
-    <main className={cn("bg-background h-full font-sans tracking-wide antialiased", GeistSans.variable)}>
+    <main className={cn("h-full bg-background font-sans tracking-wide antialiased", GeistSans.variable)}>
       <PageHead />
 
       <AppCacheProvider {...props}>
diff --git a/apps/deploy-web/src/pages/contact.tsx b/apps/deploy-web/src/pages/contact.tsx
index 819e9b0de..d8761e63f 100644
--- a/apps/deploy-web/src/pages/contact.tsx
+++ b/apps/deploy-web/src/pages/contact.tsx
@@ -24,7 +24,7 @@ const ContactPage: React.FunctionComponent = () => {
             <a
               href="https://discord.gg/akash"
               target="_blank"
-              className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+              className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
             >
               <Discord className="mx-auto block h-6 w-6 text-5xl" />
             </a>
@@ -33,7 +33,7 @@ const ContactPage: React.FunctionComponent = () => {
             <a
               href="https://youtube.com/@AkashNetwork?si=cd2P3ZlAa4gNQw0X?sub_confirmation=1"
               target="_blank"
-              className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+              className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
             >
               <Youtube className="mx-auto block h-6 w-6 text-5xl" />
             </a>
@@ -42,7 +42,7 @@ const ContactPage: React.FunctionComponent = () => {
             <a
               href="https://twitter.com/akashnet_"
               target="_blank"
-              className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+              className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
             >
               <TwitterX className="mx-auto block h-6 w-6 text-5xl" />
             </a>
@@ -51,7 +51,7 @@ const ContactPage: React.FunctionComponent = () => {
             <a
               href="https://github.com/akash-network/cloudmos"
               target="_blank"
-              className="hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary block px-4 py-2 text-current transition-all duration-300"
+              className="block px-4 py-2 text-current transition-all duration-300 hover:text-primary [&>path]:fill-muted-foreground/20 hover:[&>path]:fill-primary"
             >
               <Github className="mx-auto block h-6 w-6 text-5xl" />
             </a>
diff --git a/apps/deploy-web/src/pages/get-started/wallet.tsx b/apps/deploy-web/src/pages/get-started/wallet.tsx
index f07d238ec..45a3ed330 100644
--- a/apps/deploy-web/src/pages/get-started/wallet.tsx
+++ b/apps/deploy-web/src/pages/get-started/wallet.tsx
@@ -68,9 +68,9 @@ const GetStartedWallet: React.FunctionComponent = () => {
         <CardContent className="mt-4 space-y-4">
           {!currentSection &&
             sections.map((section, index) => (
-              <Link className="hover:bg-muted block px-4 py-2 hover:no-underline" key={index} href={UrlService.getStartedWallet(section.id)}>
-                <p className="text-secondary-foreground font-bold">{section.title}</p>
-                <p className="text-muted-foreground text-sm">{section.description}</p>
+              <Link className="block px-4 py-2 hover:bg-muted hover:no-underline" key={index} href={UrlService.getStartedWallet(section.id)}>
+                <p className="font-bold text-secondary-foreground">{section.title}</p>
+                <p className="text-sm text-muted-foreground">{section.description}</p>
               </Link>
             ))}
 
diff --git a/apps/deploy-web/src/pages/maintenance.tsx b/apps/deploy-web/src/pages/maintenance.tsx
index f729f45a3..c72e7d548 100644
--- a/apps/deploy-web/src/pages/maintenance.tsx
+++ b/apps/deploy-web/src/pages/maintenance.tsx
@@ -18,7 +18,7 @@ const Maintenance: React.FunctionComponent = () => {
           </Title>
 
           <div className="flex items-center justify-center pt-8">
-            <Tools className="text-primary text-4xl" />
+            <Tools className="text-4xl text-primary" />
           </div>
         </div>
       </div>
diff --git a/apps/deploy-web/src/pages/rent-gpu/index.tsx b/apps/deploy-web/src/pages/rent-gpu/index.tsx
index 7c9f2b0fc..41ae82d25 100644
--- a/apps/deploy-web/src/pages/rent-gpu/index.tsx
+++ b/apps/deploy-web/src/pages/rent-gpu/index.tsx
@@ -17,7 +17,7 @@ function RentGpuPage() {
 
       <Title>Rent GPUs</Title>
 
-      <p className="text-muted-foreground mb-8">
+      <p className="mb-8 text-muted-foreground">
         Deploy any AI workload on a wide variety of Nvidia GPU models. Select from one of the available templates or input your own docker container image to
         deploy on one of the providers available worldwide on the network.
       </p>
diff --git a/apps/stats-web/src/app/(home)/Dashboard.tsx b/apps/stats-web/src/app/(home)/Dashboard.tsx
index 4f74ee1f8..b22562d24 100644
--- a/apps/stats-web/src/app/(home)/Dashboard.tsx
+++ b/apps/stats-web/src/app/(home)/Dashboard.tsx
@@ -329,7 +329,7 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({ dashboardD
             <>
               <FormattedNumber value={udenomToDenom(dashboardData.chainStats.bondedTokens)} notation="compact" maximumFractionDigits={2} /> /{" "}
               <FormattedNumber value={udenomToDenom(dashboardData.chainStats.totalSupply)} notation="compact" maximumFractionDigits={2} />
-              <span className="text-muted-foreground ml-4 text-sm">
+              <span className="ml-4 text-sm text-muted-foreground">
                 <FormattedNumber
                   value={udenomToDenom(dashboardData.chainStats.bondedTokens) / udenomToDenom(dashboardData.chainStats.totalSupply)}
                   style="percent"
diff --git a/apps/stats-web/src/app/(home)/DashboardContainer.tsx b/apps/stats-web/src/app/(home)/DashboardContainer.tsx
index 7047b108d..dcfd7596f 100644
--- a/apps/stats-web/src/app/(home)/DashboardContainer.tsx
+++ b/apps/stats-web/src/app/(home)/DashboardContainer.tsx
@@ -22,7 +22,7 @@ export const DashboardContainer: React.FunctionComponent = () => {
           <Title className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">Akash Network {selectedNetwork.title} Dashboard</Title>
 
           <div className="mb-8">
-            <p className="text-italic text-muted-foreground text-sm italic">
+            <p className="text-italic text-sm italic text-muted-foreground">
               Last updated: <FormattedDate value={dashboardData.now.date} /> <FormattedTime value={dashboardData.now.date} />
             </p>
           </div>
diff --git a/apps/stats-web/src/app/(home)/StatsCard.tsx b/apps/stats-web/src/app/(home)/StatsCard.tsx
index 5cd585ffa..32d3be5b3 100644
--- a/apps/stats-web/src/app/(home)/StatsCard.tsx
+++ b/apps/stats-web/src/app/(home)/StatsCard.tsx
@@ -27,7 +27,7 @@ export const StatsCard: React.FunctionComponent<IStatsCardProps> = ({ number, te
         {tooltip && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <HelpCircle className="text-muted-foreground ml-2 text-xs" />
+              <HelpCircle className="ml-2 text-xs text-muted-foreground" />
             </TooltipTrigger>
             <TooltipContent>{tooltip}</TooltipContent>
           </Tooltip>
diff --git a/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/DeploymentInfo.tsx b/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/DeploymentInfo.tsx
index b95592a10..d9c9c401e 100644
--- a/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/DeploymentInfo.tsx
+++ b/apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/DeploymentInfo.tsx
@@ -58,7 +58,7 @@ export function DeploymentInfo({ deployment }: IProps) {
                       <PriceValue value={udenomToDenom(deployment.totalMonthlyCostUDenom)} denom={deployment.denom} />
                     </span>
                     {deployment.denom === "uakt" && (
-                      <span className="text-muted-foreground ml-2 text-xs">
+                      <span className="ml-2 text-xs text-muted-foreground">
                         <FormattedNumber value={udenomToDenom(deployment.totalMonthlyCostUDenom)} /> $AKT per month
                       </span>
                     )}
@@ -126,7 +126,7 @@ export function DeploymentInfo({ deployment }: IProps) {
                         <PriceValue value={udenomToDenom(lease.monthlyCostUDenom)} denom={deployment.denom} /> per month
                       </span>
                       {deployment.denom === "uakt" && (
-                        <span className="text-muted-foreground ml-2 text-xs">
+                        <span className="ml-2 text-xs text-muted-foreground">
                           <FormattedNumber value={lease.monthlyCostUDenom} /> $AKT per month
                         </span>
                       )}
diff --git a/apps/stats-web/src/app/addresses/[address]/transactions/TransactionTypeCell.tsx b/apps/stats-web/src/app/addresses/[address]/transactions/TransactionTypeCell.tsx
index 5478ea9cf..44dc2e39f 100644
--- a/apps/stats-web/src/app/addresses/[address]/transactions/TransactionTypeCell.tsx
+++ b/apps/stats-web/src/app/addresses/[address]/transactions/TransactionTypeCell.tsx
@@ -14,7 +14,7 @@ export const TransactionTypeCell = ({
 
   return (
     <>
-      <Badge className="bg-primary h-4 max-w-[120px]">
+      <Badge className="h-4 max-w-[120px] bg-primary">
         <span className="truncate">{firstMessageType}</span>
       </Badge>
       <span className="text-xs">{row.original.messages.length > 1 ? " +" + (row.original.messages.length - 1) : ""}</span>
diff --git a/apps/stats-web/src/app/layout.tsx b/apps/stats-web/src/app/layout.tsx
index 26d3eeac1..17b25e350 100644
--- a/apps/stats-web/src/app/layout.tsx
+++ b/apps/stats-web/src/app/layout.tsx
@@ -98,7 +98,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" className={theme} style={{ colorScheme: theme }} suppressHydrationWarning>
       <GoogleAnalytics />
 
-      <body className={cn("bg-background min-h-screen font-sans tracking-wide antialiased", GeistSans.variable)}>
+      <body className={cn("min-h-screen bg-background font-sans tracking-wide antialiased", GeistSans.variable)}>
         <Providers>
           <Nav />
           <div className="flex min-h-[calc(100vh-60px)] flex-col justify-between">
diff --git a/apps/stats-web/src/components/AKTAmount.tsx b/apps/stats-web/src/components/AKTAmount.tsx
index aa8eef733..ea990bc66 100644
--- a/apps/stats-web/src/components/AKTAmount.tsx
+++ b/apps/stats-web/src/components/AKTAmount.tsx
@@ -47,7 +47,7 @@ export const AKTAmount = ({ uakt, showUSD, showAKTLabel, digits = 6, notation }:
       </FormattedNumberParts>
       {showAKTLabel && <AKTLabel />}
       {isPriceLoaded && showUSD && aktAmount > 0 && (
-        <small className="text-muted-foreground text-sm">
+        <small className="text-sm text-muted-foreground">
           &nbsp;(
           <FormattedNumber style="currency" currency="USD" value={aktToUSD(aktAmount)} notation="compact" />)
         </small>
diff --git a/apps/stats-web/src/components/Address.tsx b/apps/stats-web/src/components/Address.tsx
index b1eadad7b..5e756bbd2 100644
--- a/apps/stats-web/src/components/Address.tsx
+++ b/apps/stats-web/src/components/Address.tsx
@@ -36,7 +36,7 @@ export const Address: React.FunctionComponent<Props> = ({ address, isCopyable, d
 
   const content = (
     <span
-      className={cn("text-primary inline-flex items-center transition-all hover:underline", { ["cursor-pointer"]: isCopyable })}
+      className={cn("inline-flex items-center text-primary transition-all hover:underline", { ["cursor-pointer"]: isCopyable })}
       onClick={onClick}
       onMouseOver={() => setIsOver(true)}
       onMouseOut={() => setIsOver(false)}
diff --git a/apps/stats-web/src/components/DynamicJsonView.tsx b/apps/stats-web/src/components/DynamicJsonView.tsx
index baf338975..6d4086e5e 100644
--- a/apps/stats-web/src/components/DynamicJsonView.tsx
+++ b/apps/stats-web/src/components/DynamicJsonView.tsx
@@ -6,7 +6,7 @@ import Spinner from "./Spinner";
 const _DynamicReactJson = dynamic(() => import("@textea/json-viewer").then(module => module.JsonViewer), {
   ssr: false,
   loading: () => (
-    <div className="text-muted-foreground flex items-center text-sm">
+    <div className="flex items-center text-sm text-muted-foreground">
       Loading... <Spinner size="small" className="ml-2" />
     </div>
   )
diff --git a/apps/stats-web/src/components/LabelValue.tsx b/apps/stats-web/src/components/LabelValue.tsx
index 2f1430ad2..f2c869630 100644
--- a/apps/stats-web/src/components/LabelValue.tsx
+++ b/apps/stats-web/src/components/LabelValue.tsx
@@ -14,7 +14,7 @@ type LabelValueProps = {
 export const LabelValue: React.FunctionComponent<LabelValueProps> = ({ label, value, labelWidth = "15rem", className = "", ...rest }) => {
   return (
     <div className={cn(className, "mb-4 flex flex-col items-start last:mb-0 sm:flex-row sm:items-center")} {...rest}>
-      <div className="text-muted-foreground flex shrink-0 items-center break-all pr-2 font-bold" style={{ width: labelWidth }}>
+      <div className="flex shrink-0 items-center break-all pr-2 font-bold text-muted-foreground" style={{ width: labelWidth }}>
         {label}
       </div>
       {value !== undefined && <div className="w-full flex-grow break-all [overflow-wrap:anywhere] sm:w-auto">{value}</div>}
diff --git a/apps/stats-web/src/components/LeaseSpecDetail.tsx b/apps/stats-web/src/components/LeaseSpecDetail.tsx
index 482552cf7..92c10ecb4 100644
--- a/apps/stats-web/src/components/LeaseSpecDetail.tsx
+++ b/apps/stats-web/src/components/LeaseSpecDetail.tsx
@@ -26,8 +26,8 @@ export const LeaseSpecDetail: React.FunctionComponent<Props> = ({ value, type, c
       {type === "storage" && <MdStorage fontSize={iconSize} />}
 
       <div className="ml-1">{typeof value === "string" ? value : <FormattedNumber value={value} />}</div>
-      <div className="text-muted-foreground ml-1">
-        <span className="text-muted-foreground text-xs">
+      <div className="ml-1 text-muted-foreground">
+        <span className="text-xs text-muted-foreground">
           {type === "cpu" && "CPU"}
           {type === "gpu" && "GPU"}
           {type === "ram" && "RAM"}
diff --git a/apps/stats-web/src/components/blockchain/TransactionRow.tsx b/apps/stats-web/src/components/blockchain/TransactionRow.tsx
index 84bc3e0fe..f2f572dea 100644
--- a/apps/stats-web/src/components/blockchain/TransactionRow.tsx
+++ b/apps/stats-web/src/components/blockchain/TransactionRow.tsx
@@ -30,7 +30,7 @@ export const TransactionRow: React.FunctionComponent<Props> = ({ transaction, bl
         </Link>
       </TableCell>
       <TableCell align="center">
-        <Badge className="bg-primary h-4 max-w-[120px]">
+        <Badge className="h-4 max-w-[120px] bg-primary">
           <span className="truncate">{firstMessageType}</span>
         </Badge>
         <span className="text-xs">{transaction.messages.length > 1 ? " +" + (transaction.messages.length - 1) : ""}</span>
diff --git a/apps/stats-web/src/components/graph/Graph.tsx b/apps/stats-web/src/components/graph/Graph.tsx
index 51b216db4..9af5de3ec 100644
--- a/apps/stats-web/src/components/graph/Graph.tsx
+++ b/apps/stats-web/src/components/graph/Graph.tsx
@@ -49,7 +49,7 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ rangedData, snapshotMetad
   return (
     <div className="relative h-[400px]">
       <div className="absolute left-1/2 top-1 -translate-x-1/2">
-        <span className="text-md text-muted-foreground font-bold tracking-wide opacity-40">stats.akash.network</span>
+        <span className="text-md font-bold tracking-wide text-muted-foreground opacity-40">stats.akash.network</span>
       </div>
       <ResponsiveLineCanvas
         theme={graphTheme}
@@ -83,7 +83,7 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ rangedData, snapshotMetad
         pointBorderWidth={graphMetadata.border}
         isInteractive={true}
         tooltip={props => (
-          <div className="bg-primary text-primary-foreground rounded-sm px-3 py-2 leading-4">
+          <div className="rounded-sm bg-primary px-3 py-2 leading-4 text-primary-foreground">
             <div className="mb-1 text-xs">
               <FormattedDate value={new Date(props.point.data.x)} day="numeric" month="long" timeZone="UTC" year="2-digit" />
             </div>
diff --git a/apps/stats-web/src/components/layout/Footer.tsx b/apps/stats-web/src/components/layout/Footer.tsx
index 502d18983..c992ecc80 100644
--- a/apps/stats-web/src/components/layout/Footer.tsx
+++ b/apps/stats-web/src/components/layout/Footer.tsx
@@ -7,7 +7,7 @@ export function Footer({ version }: { version: string }) {
   return (
     <footer className="py-6 md:px-8 md:py-0">
       <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <p className="text-muted-foreground flex items-center text-balance text-center text-sm leading-loose md:text-left">
+        <p className="flex items-center text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
           <Copyright className="text-xs" />
           &nbsp;Akash Network {year}
         </p>
diff --git a/apps/stats-web/src/components/layout/Nav.tsx b/apps/stats-web/src/components/layout/Nav.tsx
index 85bd46b3b..f9df018c0 100644
--- a/apps/stats-web/src/components/layout/Nav.tsx
+++ b/apps/stats-web/src/components/layout/Nav.tsx
@@ -14,7 +14,7 @@ export const Nav = () => {
   const theme = useCookieTheme();
 
   return (
-    <header className="bg-header/95 supports-[backdrop-filter]:bg-header/60 sticky top-0 z-50 w-full border-b backdrop-blur">
+    <header className="sticky top-0 z-50 w-full border-b bg-header/95 backdrop-blur supports-[backdrop-filter]:bg-header/60">
       <div className="container flex h-14 items-center">
         <div className="mr-4 flex">
           {!!theme && (
@@ -57,7 +57,7 @@ export const Nav = () => {
 
             <ModeToggle />
 
-            <Link rel="noreferrer" href="https://akash.network" passHref target="_blank" className="text-foreground ml-4">
+            <Link rel="noreferrer" href="https://akash.network" passHref target="_blank" className="ml-4 text-foreground">
               <Button variant="outline" size="sm" className="h-[30px]">
                 akash.network
               </Button>
diff --git a/apps/stats-web/src/components/layout/NetworkSelect.tsx b/apps/stats-web/src/components/layout/NetworkSelect.tsx
index 7d32a83cb..60f197251 100644
--- a/apps/stats-web/src/components/layout/NetworkSelect.tsx
+++ b/apps/stats-web/src/components/layout/NetworkSelect.tsx
@@ -57,7 +57,7 @@ const NetworkSelect: React.FC<NetworkSelectProps> = ({ className }) => {
                   <span>
                     {network.title}
                     {" - "}
-                    <span className="text-muted-foreground text-xs">{network.version}</span>
+                    <span className="text-xs text-muted-foreground">{network.version}</span>
                   </span>
                 </div>
               </SelectItem>
diff --git a/apps/stats-web/src/components/table/data-table-column-header.tsx b/apps/stats-web/src/components/table/data-table-column-header.tsx
index f27861b60..9c68c6f9e 100644
--- a/apps/stats-web/src/components/table/data-table-column-header.tsx
+++ b/apps/stats-web/src/components/table/data-table-column-header.tsx
@@ -20,7 +20,7 @@ export function DataTableColumnHeader<TData, TValue>({ column, title, className
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+          <Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
               <ArrowDownIcon className="ml-2 h-4 w-4" />
@@ -33,16 +33,16 @@ export function DataTableColumnHeader<TData, TValue>({ column, title, className
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/stats-web/src/components/table/data-table-faceted-filter.tsx b/apps/stats-web/src/components/table/data-table-faceted-filter.tsx
index 897ac2780..4f673a405 100644
--- a/apps/stats-web/src/components/table/data-table-faceted-filter.tsx
+++ b/apps/stats-web/src/components/table/data-table-faceted-filter.tsx
@@ -85,13 +85,13 @@ export function DataTableFacetedFilter<TData, TValue>({ column, title, options }
                   >
                     <div
                       className={cn(
-                        "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                         isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                       )}
                     >
                       <CheckIcon className={cn("h-4 w-4")} />
                     </div>
-                    {option.icon && <option.icon className="text-muted-foreground mr-2 h-4 w-4" />}
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
                     <span>{option.label}</span>
                     {/* {facets?.get(option.value) && (
                       <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">{facets.get(option.value)}</span>
diff --git a/apps/stats-web/src/components/table/data-table-pagination.tsx b/apps/stats-web/src/components/table/data-table-pagination.tsx
index b4608e786..c35be407b 100644
--- a/apps/stats-web/src/components/table/data-table-pagination.tsx
+++ b/apps/stats-web/src/components/table/data-table-pagination.tsx
@@ -12,7 +12,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({ table, hasRowSelection }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex flex-col items-center justify-between px-2 sm:flex-row">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex-1 text-sm text-muted-foreground">
         {hasRowSelection && (
           <>
             {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
diff --git a/apps/stats-web/src/components/table/data-table-row-actions.tsx b/apps/stats-web/src/components/table/data-table-row-actions.tsx
index 9d98972c0..680b518aa 100644
--- a/apps/stats-web/src/components/table/data-table-row-actions.tsx
+++ b/apps/stats-web/src/components/table/data-table-row-actions.tsx
@@ -9,7 +9,7 @@ export function DataTableRowActions() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="data-[state=open]:bg-muted flex h-8 w-8 p-0">
+        <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted">
           <DotsHorizontalIcon className="h-4 w-4" />
           <span className="sr-only">Open menu</span>
         </Button>
diff --git a/apps/stats-web/src/components/transactions/TxMessageRow.tsx b/apps/stats-web/src/components/transactions/TxMessageRow.tsx
index f4234f5e7..ea1b401a6 100644
--- a/apps/stats-web/src/components/transactions/TxMessageRow.tsx
+++ b/apps/stats-web/src/components/transactions/TxMessageRow.tsx
@@ -113,7 +113,7 @@ export const TxMessageRow: React.FunctionComponent<Props> = ({ message }) => {
 
   return (
     <div>
-      <div className="border-b-muted-foreground/10 text-muted-foreground mb-4 border-b p-4">{friendlyType}</div>
+      <div className="mb-4 border-b border-b-muted-foreground/10 p-4 text-muted-foreground">{friendlyType}</div>
 
       <div className="break-all px-4 pb-4 pt-0">
         <TxMessage message={message} />
diff --git a/apps/stats-web/src/components/transactions/generic/MsgMultiSend.tsx b/apps/stats-web/src/components/transactions/generic/MsgMultiSend.tsx
index e1970681d..b2c100a89 100644
--- a/apps/stats-web/src/components/transactions/generic/MsgMultiSend.tsx
+++ b/apps/stats-web/src/components/transactions/generic/MsgMultiSend.tsx
@@ -14,7 +14,7 @@ export const MsgMultiSend: React.FunctionComponent<TxMessageProps> = ({ message
     <div key={input.address}>
       <AddressLink address={input.address} />
       &nbsp;
-      <span className="text-muted-foreground text-xs">
+      <span className="text-xs text-muted-foreground">
         (<AKTAmount uakt={coinsToAmount(input.coins, "uakt")} showAKTLabel />
       </span>
     </div>
@@ -23,7 +23,7 @@ export const MsgMultiSend: React.FunctionComponent<TxMessageProps> = ({ message
     <div key={output.address}>
       <AddressLink address={output.address} />
       &nbsp;
-      <span className="text-muted-foreground text-xs">
+      <span className="text-xs text-muted-foreground">
         (<AKTAmount uakt={coinsToAmount(output.coins, "uakt")} showAKTLabel />)
       </span>
     </div>
diff --git a/apps/stats-web/src/components/ui/avatar.tsx b/apps/stats-web/src/components/ui/avatar.tsx
index 32e63896b..4f0025050 100644
--- a/apps/stats-web/src/components/ui/avatar.tsx
+++ b/apps/stats-web/src/components/ui/avatar.tsx
@@ -18,7 +18,7 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Fallback>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>>(
   ({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback ref={ref} className={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)} {...props} />
+    <AvatarPrimitive.Fallback ref={ref} className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)} {...props} />
   )
 );
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
diff --git a/apps/stats-web/src/components/ui/card.tsx b/apps/stats-web/src/components/ui/card.tsx
index a84f2c9fa..d18d8488e 100644
--- a/apps/stats-web/src/components/ui/card.tsx
+++ b/apps/stats-web/src/components/ui/card.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)} {...props} />
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
 ));
 Card.displayName = "Card";
 
@@ -19,7 +19,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
diff --git a/apps/stats-web/src/components/ui/checkbox.tsx b/apps/stats-web/src/components/ui/checkbox.tsx
index 45b8378fb..989214b0d 100644
--- a/apps/stats-web/src/components/ui/checkbox.tsx
+++ b/apps/stats-web/src/components/ui/checkbox.tsx
@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
         className
       )}
       {...props}
diff --git a/apps/stats-web/src/components/ui/command.tsx b/apps/stats-web/src/components/ui/command.tsx
index 281e71994..8ef7845b0 100644
--- a/apps/stats-web/src/components/ui/command.tsx
+++ b/apps/stats-web/src/components/ui/command.tsx
@@ -11,7 +11,7 @@ const Command = React.forwardRef<React.ElementRef<typeof CommandPrimitive>, Reac
   ({ className, ...props }, ref) => (
     <CommandPrimitive
       ref={ref}
-      className={cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+      className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)}
       {...props}
     />
   )
@@ -24,7 +24,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -39,7 +39,7 @@ const CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.I
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -67,7 +67,7 @@ const CommandGroup = React.forwardRef<React.ElementRef<typeof CommandPrimitive.G
     <CommandPrimitive.Group
       ref={ref}
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => <CommandPrimitive.Separator ref={ref} className={cn("bg-border -mx-1 h-px", className)} {...props} />);
+>(({ className, ...props }, ref) => <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>>(
@@ -88,7 +88,7 @@ const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.It
     <CommandPrimitive.Item
       ref={ref}
       className={cn(
-        "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
       {...props}
@@ -99,7 +99,7 @@ const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.It
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
 };
 CommandShortcut.displayName = "CommandShortcut";
 
diff --git a/apps/stats-web/src/components/ui/dialog.tsx b/apps/stats-web/src/components/ui/dialog.tsx
index 84d99612e..b0bf663fe 100644
--- a/apps/stats-web/src/components/ui/dialog.tsx
+++ b/apps/stats-web/src/components/ui/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.O
     <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
-        "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+        "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -34,13 +34,13 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -70,7 +70,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />);
+>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
diff --git a/apps/stats-web/src/components/ui/drawer.tsx b/apps/stats-web/src/components/ui/drawer.tsx
index 3c5d1d367..7a78ba3b8 100644
--- a/apps/stats-web/src/components/ui/drawer.tsx
+++ b/apps/stats-web/src/components/ui/drawer.tsx
@@ -26,10 +26,10 @@ const DrawerContent = React.forwardRef<React.ElementRef<typeof DrawerPrimitive.C
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
-        className={cn("bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border", className)}
+        className={cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className)}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -57,7 +57,7 @@ DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => <DrawerPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />);
+>(({ className, ...props }, ref) => <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };
diff --git a/apps/stats-web/src/components/ui/dropdown-menu.tsx b/apps/stats-web/src/components/ui/dropdown-menu.tsx
index 9af013e71..0612247fb 100644
--- a/apps/stats-web/src/components/ui/dropdown-menu.tsx
+++ b/apps/stats-web/src/components/ui/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className
     )}
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -147,7 +147,7 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />);
+>(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
diff --git a/apps/stats-web/src/components/ui/input.tsx b/apps/stats-web/src/components/ui/input.tsx
index 5d609b2f9..fe08c29c6 100644
--- a/apps/stats-web/src/components/ui/input.tsx
+++ b/apps/stats-web/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/apps/stats-web/src/components/ui/navigation-menu.tsx b/apps/stats-web/src/components/ui/navigation-menu.tsx
index a48861f88..803db5012 100644
--- a/apps/stats-web/src/components/ui/navigation-menu.tsx
+++ b/apps/stats-web/src/components/ui/navigation-menu.tsx
@@ -48,7 +48,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
       ref={ref}
@@ -82,12 +82,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className
     )}
     {...props}
   >
-    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
diff --git a/apps/stats-web/src/components/ui/popover.tsx b/apps/stats-web/src/components/ui/popover.tsx
index e7c9a4964..3c9e0849c 100644
--- a/apps/stats-web/src/components/ui/popover.tsx
+++ b/apps/stats-web/src/components/ui/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
diff --git a/apps/stats-web/src/components/ui/select.tsx b/apps/stats-web/src/components/ui/select.tsx
index ebf5e7759..184ef2932 100644
--- a/apps/stats-web/src/components/ui/select.tsx
+++ b/apps/stats-web/src/components/ui/select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.T
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.C
       <SelectPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -87,7 +87,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
       {...props}
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>>(
-  ({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
 );
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
diff --git a/apps/stats-web/src/components/ui/separator.tsx b/apps/stats-web/src/components/ui/separator.tsx
index f6515d33e..4c3d59dac 100644
--- a/apps/stats-web/src/components/ui/separator.tsx
+++ b/apps/stats-web/src/components/ui/separator.tsx
@@ -10,7 +10,7 @@ const Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive.Ro
       ref={ref}
       decorative={decorative}
       orientation={orientation}
-      className={cn("bg-border shrink-0", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+      className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
       {...props}
     />
   )
diff --git a/apps/stats-web/src/components/ui/table.tsx b/apps/stats-web/src/components/ui/table.tsx
index 286c4ff03..2e19983f5 100644
--- a/apps/stats-web/src/components/ui/table.tsx
+++ b/apps/stats-web/src/components/ui/table.tsx
@@ -21,21 +21,21 @@ const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes
 TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
 ));
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn("border-b-muted-foreground/20 hover:bg-muted/100 data-[state=selected]:bg-muted border-b transition-colors", className)}
+    className={cn("border-b border-b-muted-foreground/20 transition-colors hover:bg-muted/100 data-[state=selected]:bg-muted", className)}
     {...props}
   />
 ));
 TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
-  <th ref={ref} className={cn("text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  <th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
 ));
 TableHead.displayName = "TableHead";
 
@@ -45,7 +45,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 
diff --git a/apps/stats-web/src/components/ui/tabs.tsx b/apps/stats-web/src/components/ui/tabs.tsx
index fbf6b5ece..46b1d9ae8 100644
--- a/apps/stats-web/src/components/ui/tabs.tsx
+++ b/apps/stats-web/src/components/ui/tabs.tsx
@@ -10,7 +10,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, R
   ({ className, ...props }, ref) => (
     <TabsPrimitive.List
       ref={ref}
-      className={cn("bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1", className)}
+      className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}
       {...props}
     />
   )
@@ -22,7 +22,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Conte
     <TabsPrimitive.Content
       ref={ref}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       )}
       {...props}
diff --git a/apps/stats-web/src/components/ui/toast.tsx b/apps/stats-web/src/components/ui/toast.tsx
index 45d7a1aa5..92cb3dca2 100644
--- a/apps/stats-web/src/components/ui/toast.tsx
+++ b/apps/stats-web/src/components/ui/toast.tsx
@@ -51,7 +51,7 @@ const ToastAction = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Act
     <ToastPrimitives.Action
       ref={ref}
       className={cn(
-        "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
         className
       )}
       {...props}
@@ -65,7 +65,7 @@ const ToastClose = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Clos
     <ToastPrimitives.Close
       ref={ref}
       className={cn(
-        "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
         className
       )}
       toast-close=""
diff --git a/apps/stats-web/src/components/ui/tooltip.tsx b/apps/stats-web/src/components/ui/tooltip.tsx
index 03cb95c48..d91467923 100644
--- a/apps/stats-web/src/components/ui/tooltip.tsx
+++ b/apps/stats-web/src/components/ui/tooltip.tsx
@@ -34,7 +34,7 @@ const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}