diff --git a/backend/src/ee/services/license/license-fns.ts b/backend/src/ee/services/license/license-fns.ts
index 2a3cf82cc..5da5d0c6c 100644
--- a/backend/src/ee/services/license/license-fns.ts
+++ b/backend/src/ee/services/license/license-fns.ts
@@ -23,29 +23,29 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   identitiesUsed: 0,
   dynamicSecret: false,
   secretVersioning: true,
-  pitRecovery: false,
+  pitRecovery: true,
   ipAllowlisting: false,
-  rbac: false,
+  rbac: true,
   githubOrgSync: false,
   customRateLimits: false,
   customAlerts: false,
   secretAccessInsights: false,
-  auditLogs: false,
-  auditLogsRetentionDays: 0,
+  auditLogs: true,
+  auditLogsRetentionDays: 30,
   auditLogStreams: false,
   auditLogStreamLimit: 3,
-  samlSSO: false,
+  samlSSO: true,
   enforceGoogleSSO: false,
   hsm: false,
-  oidcSSO: false,
-  scim: false,
-  ldap: false,
-  groups: false,
+  oidcSSO: true,
+  scim: true,
+  ldap: true,
+  groups: true,
   status: null,
   trial_end: null,
   has_used_trial: true,
-  secretApproval: false,
-  secretRotation: false,
+  secretApproval: true,
+  secretRotation: true,
   caCrl: false,
   instanceUserManagement: false,
   externalKms: false,
@@ -57,17 +57,17 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   pkiEst: false,
   enforceMfa: false,
   projectTemplates: false,
-  kmip: false,
-  gateway: false,
-  sshHostGroups: false,
-  secretScanning: false,
+  kmip: true,
+  gateway: true,
+  sshHostGroups: true,
+  secretScanning: true,
   enterpriseSecretSyncs: false,
   enterpriseCertificateSyncs: false,
   enterpriseAppConnections: false,
   fips: false,
-  eventSubscriptions: false,
-  machineIdentityAuthTemplates: false,
-  pam: false
+  eventSubscriptions: true,
+  machineIdentityAuthTemplates: true,
+  pam: true
 });
 
 export const setupLicenseRequestWithStore = (
diff --git a/frontend/src/components/app-connections/AppConnectionOption.tsx b/frontend/src/components/app-connections/AppConnectionOption.tsx
index 30a37425c..cce6d2d37 100644
--- a/frontend/src/components/app-connections/AppConnectionOption.tsx
+++ b/frontend/src/components/app-connections/AppConnectionOption.tsx
@@ -17,7 +17,7 @@ export const AppConnectionOption = ({
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         {isCreateOption ? (
-          <div className="flex items-center gap-x-1 text-mineshaft-400">
+          <div className="text-mineshaft-400 flex items-center gap-x-1">
             <FontAwesomeIcon icon={faPlus} size="sm" />
             <span className="mr-auto">Create New Connection</span>
           </div>
@@ -26,8 +26,8 @@ export const AppConnectionOption = ({
             <p className="truncate">{children}</p>
             {!props.data.projectId && (
               <Tooltip content="This connection belongs to your organization.">
-                <div className="mr-auto ml-2">
-                  <Badge className="flex h-5 w-min items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300 hover:text-bunker-300">
+                <div className="ml-2 mr-auto">
+                  <Badge className="bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300 flex h-5 w-min items-center gap-1 whitespace-nowrap">
                     <FontAwesomeIcon icon={faBuilding} size="sm" />
                     Organization
                   </Badge>
@@ -35,7 +35,7 @@ export const AppConnectionOption = ({
               </Tooltip>
             )}
             {isSelected && (
-              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+              <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
             )}
           </>
         )}
diff --git a/frontend/src/components/auth/CodeInputStep.tsx b/frontend/src/components/auth/CodeInputStep.tsx
index 297a9f883..c11b8ca47 100644
--- a/frontend/src/components/auth/CodeInputStep.tsx
+++ b/frontend/src/components/auth/CodeInputStep.tsx
@@ -90,8 +90,8 @@ export default function CodeInputStep({
 
   return (
     <div className="mx-auto h-full w-full pb-4 md:px-8">
-      <p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
-      <p className="text-md my-1 flex justify-center font-medium text-bunker-200">{email} </p>
+      <p className="text-md text-bunker-200 flex justify-center">{t("signup.step2-message")}</p>
+      <p className="text-md text-bunker-200 my-1 flex justify-center font-medium">{email} </p>
       <div className="mx-auto hidden w-max min-w-[20rem] md:block">
         <ReactCodeInput
           name=""
@@ -100,7 +100,7 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...props}
-          className="mt-6 mb-2"
+          className="mb-2 mt-6"
         />
       </div>
       <div className="mx-auto mt-4 block w-max md:hidden">
@@ -111,11 +111,11 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...propsPhone}
-          className="mt-2 mb-2"
+          className="mb-2 mt-2"
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}
-      <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
         <div className="text-l w-full py-1 text-lg">
           <Button
             type="submit"
@@ -135,9 +135,9 @@ export default function CodeInputStep({
       <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-          <div className="text-md mt-2 flex flex-row text-bunker-400">
+          <div className="text-md text-bunker-400 mt-2 flex flex-row">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
                 {isResendingVerificationEmail
                   ? t("signup.step2-resend-progress")
                   : t("signup.step2-resend-submit")}
@@ -145,7 +145,7 @@ export default function CodeInputStep({
             </button>
           </div>
         </div>
-        <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
+        <p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
       </div>
     </div>
   );
diff --git a/frontend/src/components/auth/EnterEmailStep.tsx b/frontend/src/components/auth/EnterEmailStep.tsx
index 01b7006d3..809114dea 100644
--- a/frontend/src/components/auth/EnterEmailStep.tsx
+++ b/frontend/src/components/auth/EnterEmailStep.tsx
@@ -55,7 +55,7 @@ export default function EnterEmailStep({
   return (
     <div>
       <div className="mx-auto w-full md:px-6">
-        <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
+        <p className="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-xl font-medium text-transparent">
           {t("signup.step1-start")}
         </p>
         <div className="m-auto mt-8 flex w-1/4 min-w-[20rem] flex-col items-center justify-center rounded-lg lg:w-1/6">
@@ -68,12 +68,12 @@ export default function EnterEmailStep({
             className="h-12"
           />
           {emailError && (
-            <p className="mt-1.5 ml-1.5 w-full text-left text-xs text-red-600">
+            <p className="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
               Please enter a valid email.
             </p>
           )}
         </div>
-        <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
           <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
@@ -92,10 +92,10 @@ export default function EnterEmailStep({
           </div>
         </div>
       </div>
-      <div className="mx-auto mt-2 mb-48 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
+      <div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
         <Link to="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            <span className="text-mineshaft-400 hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4">
               {t("signup.already-have-account")}
             </span>
           </button>
diff --git a/frontend/src/components/auth/InitialSignupStep.tsx b/frontend/src/components/auth/InitialSignupStep.tsx
index 91a597f07..f86243052 100644
--- a/frontend/src/components/auth/InitialSignupStep.tsx
+++ b/frontend/src/components/auth/InitialSignupStep.tsx
@@ -23,7 +23,7 @@ export default function InitialSignupStep({
 
   return (
     <div className="mx-auto flex w-full flex-col items-center justify-center">
-      <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
         {t("signup.initial-title")}
       </h1>
       <RegionSelect />
@@ -90,12 +90,12 @@ export default function InitialSignupStep({
           </Button>
         </div>
       )}
-      <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
+      <div className="text-bunker-400 mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs lg:w-1/6">
         {t("signup.create-policy")}
       </div>
-      <div className="mt-2 flex flex-row text-xs text-bunker-400">
+      <div className="text-bunker-400 mt-2 flex flex-row text-xs">
         <Link to="/login">
-          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+          <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
             {t("signup.already-have-account")}
           </span>
         </Link>
diff --git a/frontend/src/components/auth/Mfa.tsx b/frontend/src/components/auth/Mfa.tsx
index 4577f4ece..cc77c0a02 100644
--- a/frontend/src/components/auth/Mfa.tsx
+++ b/frontend/src/components/auth/Mfa.tsx
@@ -159,7 +159,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         <div className="mb-6 text-center text-lg font-bold text-white">
           Your organization requires mobile authentication to be configured.
         </div>
-        <div className="mx-auto w-max pt-4 pb-4 md:mb-16 md:px-8">
+        <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
           <TotpRegistration
             shouldCenterQr
             onComplete={async () => {
@@ -173,7 +173,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
   }
 
   return (
-    <div className="mx-auto w-max pt-6 pb-6 md:mb-16 md:px-8">
+    <div className="mx-auto w-max pb-6 pt-6 md:mb-16 md:px-8">
       {!hideLogo && (
         <Link to="/">
           <div className="mb-4 flex justify-center">
@@ -183,14 +183,14 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
       )}
       {method === MfaMethod.EMAIL && (
         <>
-          <p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</p>
-          <p className="text-l my-1 flex justify-center font-medium text-bunker-300">{email}</p>
+          <p className="text-l text-bunker-300 flex justify-center">{t("mfa.step2-message")}</p>
+          <p className="text-l text-bunker-300 my-1 flex justify-center font-medium">{email}</p>
         </>
       )}
       {method === MfaMethod.TOTP && (
         <div className="mb-8 text-center">
-          <h2 className="mb-3 text-xl font-medium text-bunker-100">Two-Factor Authentication</h2>
-          <p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300">
+          <h2 className="text-bunker-100 mb-3 text-xl font-medium">Two-Factor Authentication</h2>
+          <p className="text-bunker-300 mx-auto max-w-md text-sm leading-relaxed">
             {showRecoveryCodeInput
               ? "Enter one of your backup recovery codes"
               : "Enter the verification code from your authenticator app"}
@@ -207,13 +207,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 type="text"
                 fields={6}
                 onChange={setMfaCode}
-                className="mt-6 mb-2"
+                className="mb-2 mt-6"
                 {...codeInputProps}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mt-8 mb-6 flex justify-center">
+            <div className="mb-6 mt-8 flex justify-center">
               <ReactCodeInput
                 key={showRecoveryCodeInput ? "recovery" : "totp"}
                 name=""
@@ -236,13 +236,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 type="text"
                 fields={6}
                 onChange={setMfaCode}
-                className="mt-2 mb-2"
+                className="mb-2 mt-2"
                 {...codeInputPropsPhone}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mt-4 mb-6 flex justify-center">
+            <div className="mb-6 mt-4 flex justify-center">
               <ReactCodeInput
                 key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"}
                 name=""
@@ -264,7 +264,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
             size="md"
             type="submit"
             isFullWidth
-            className="h-11 rounded-lg font-medium shadow-xs transition-all duration-200 hover:shadow-md"
+            className="shadow-xs h-11 rounded-lg font-medium transition-all duration-200 hover:shadow-md"
             colorSchema="primary"
             variant="outline_bg"
             isLoading={isLoading}
@@ -282,7 +282,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
               setShowRecoveryCodeInput(!showRecoveryCodeInput);
               setMfaCode("");
             }}
-            className="text-bunker-400 transition-colors duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+            className="text-bunker-400 hover:text-bunker-200 hover:decoration-primary-700 transition-colors duration-200 hover:underline hover:underline-offset-4"
           >
             {showRecoveryCodeInput ? "Use authenticator code" : "Use a recovery code"}
           </button>
@@ -311,7 +311,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 </div>
               }
             >
-              <span className="cursor-help text-bunker-400 transition-colors duration-200 hover:text-bunker-200">
+              <span className="text-bunker-400 hover:text-bunker-200 cursor-help transition-colors duration-200">
                 Lost your recovery codes?
               </span>
             </Tooltip>
@@ -322,9 +322,9 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
           <div className="flex flex-row items-baseline gap-1 text-sm">
             <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-            <div className="text-md mt-2 flex flex-row text-bunker-400">
+            <div className="text-md text-bunker-400 mt-2 flex flex-row">
               <button disabled={isLoadingResend} onClick={handleResendMfaCode} type="button">
-                <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+                <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
                   {isLoadingResend
                     ? t("signup.step2-resend-progress")
                     : t("signup.step2-resend-submit")}
@@ -332,7 +332,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
               </button>
             </div>
           </div>
-          <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
+          <p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/auth/TeamInviteStep.tsx b/frontend/src/components/auth/TeamInviteStep.tsx
index ccb1e6f57..7a108a41a 100644
--- a/frontend/src/components/auth/TeamInviteStep.tsx
+++ b/frontend/src/components/auth/TeamInviteStep.tsx
@@ -41,26 +41,26 @@ export default function TeamInviteStep(): JSX.Element {
   };
 
   return (
-    <div className="mx-auto mb-64 h-full w-max min-w-lg px-8 pb-4 md:mb-32">
-      <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-2xl font-medium text-transparent">
+    <div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32">
+      <p className="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-2xl font-medium text-transparent">
         {t("signup.step5-invite-team")}
       </p>
-      <p className="mt-4 mb-6 flex justify-center text-center text-bunker-400 md:mx-8">
+      <p className="text-bunker-400 mb-6 mt-4 flex justify-center text-center md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
+      <div className="border-mineshaft-500 bg-mineshaft-800 mx-auto mb-6 w-max rounded-xl border px-8 pb-4 pt-6 drop-shadow-xl">
         <div>
-          <div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
+          <div className="text-bunker-300 pb-1 pl-1 text-sm font-medium">
             <span>Emails</span>
           </div>
           <textarea
-            className="ring-opacity-70 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 focus:ring-2"
+            className="min-w-120 border-mineshaft-500 bg-mineshaft-900/70 text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 h-20 w-full rounded-md border px-2 py-1 text-sm ring-opacity-70 focus:ring-2"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:max-w-md md:min-w-120">
+        <div className="md:min-w-120 mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 md:max-w-md">
           <Button
             onClick={() => {
               if (serverDetails?.emailConfigured) {
@@ -84,7 +84,7 @@ export default function TeamInviteStep(): JSX.Element {
           onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
         />
       </div>
-      <div className="mx-auto mt-4 mb-2 flex max-h-24 max-w-max min-w-[20rem] flex-row items-center justify-center px-4 text-lg md:p-2">
+      <div className="mx-auto mb-2 mt-4 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
         <Button
           onClick={redirectToHome}
           size="sm"
diff --git a/frontend/src/components/auth/UserInfoStep.tsx b/frontend/src/components/auth/UserInfoStep.tsx
index 021a7c231..4d117234d 100644
--- a/frontend/src/components/auth/UserInfoStep.tsx
+++ b/frontend/src/components/auth/UserInfoStep.tsx
@@ -139,12 +139,12 @@ export default function UserInfoStep({
 
   return (
     <div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
-      <p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
+      <p className="text-medium bg-linear-to-b to-bunker-200 mx-8 mb-6 flex justify-center from-white bg-clip-text text-xl font-bold text-transparent md:mx-16">
         {t("signup.step3-message")}
       </p>
-      <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
+      <div className="md:border-mineshaft-600 md:bg-mineshaft-800 mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:px-8">
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
             Your Name
           </p>
           <Input
@@ -156,13 +156,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {nameError && (
-            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
               Please, specify your name
             </p>
           )}
         </div>
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
             Organization Name
           </p>
           <Input
@@ -174,13 +174,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {organizationNameError && (
-            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
               Please, specify your organization name
             </p>
           )}
         </div>
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
             Where did you hear about us? <span className="font-light">(optional)</span>
           </p>
           <Input
@@ -219,7 +219,7 @@ export default function UserInfoStep({
                       <div>
                         <FontAwesomeIcon
                           icon={faXmark}
-                          className="text-md mr-2.5 ml-0.5 text-red"
+                          className="text-md text-red ml-0.5 mr-2.5"
                         />
                       </div>
                       <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
@@ -232,7 +232,7 @@ export default function UserInfoStep({
             </div>
           )}
         </div>
-        <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
           <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
diff --git a/frontend/src/components/basic/Error.tsx b/frontend/src/components/basic/Error.tsx
index 1ef937e4a..573179f60 100644
--- a/frontend/src/components/basic/Error.tsx
+++ b/frontend/src/components/basic/Error.tsx
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const Error = ({ text }: { text: string }): JSX.Element => {
   return (
     <div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
-      <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
-      {text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
+      <FontAwesomeIcon icon={faExclamationTriangle} className="text-red mx-2 mb-2 mt-1.5" />
+      {text && <p className="text-red relative top-0 mr-2 py-1 text-sm">{text}</p>}
     </div>
   );
 };
diff --git a/frontend/src/components/basic/InputField.tsx b/frontend/src/components/basic/InputField.tsx
index c6580199b..e6eef1354 100644
--- a/frontend/src/components/basic/InputField.tsx
+++ b/frontend/src/components/basic/InputField.tsx
@@ -48,7 +48,7 @@ const InputField = ({
           placeholder={placeholder}
           value={value}
           required={isRequired}
-          className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-hidden"
+          className="text-md bg-bunker-800 outline-hidden w-full min-w-16 rounded-md border border-gray-600 p-2 text-gray-400"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -59,7 +59,7 @@ const InputField = ({
   }
   return (
     <div className="w-full flex-col">
-      <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
+      <div className="text-mineshaft-300 mb-0.5 flex flex-row items-center">
         <p className="mr-1 text-sm font-medium">{label}</p>
       </div>
       <div
@@ -75,11 +75,11 @@ const InputField = ({
           required={isRequired}
           className={`${
             blurred
-              ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
+              ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-hidden duration-200 focus:ring-4`}
+          } text-md bg-mineshaft-900 outline-hidden peer relative w-full min-w-16 rounded-md p-2 text-gray-400 duration-200 focus:ring-4`}
           name={name}
           spellCheck="false"
           autoComplete={autoComplete}
@@ -101,7 +101,7 @@ const InputField = ({
           </button>
         )}
         {blurred && (
-          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden rounded-md text-clip text-gray-400/50 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
+          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden text-clip rounded-md text-gray-400/50 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
             <p className="ml-2" />
             {value
               .split("")
@@ -121,7 +121,7 @@ const InputField = ({
 						</div>
 					)} */}
       </div>
-      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
+      {error && <p className="text-red mx-0 mb-2 mt-0.5 max-w-xs text-xs">{errorText}</p>}
     </div>
   );
 };
diff --git a/frontend/src/components/features/TtlFormLabel.tsx b/frontend/src/components/features/TtlFormLabel.tsx
index 83f058c7a..52fd0c7f2 100644
--- a/frontend/src/components/features/TtlFormLabel.tsx
+++ b/frontend/src/components/features/TtlFormLabel.tsx
@@ -29,7 +29,7 @@ export const TtlFormLabel = ({ label }: { label: string }) => (
           <FontAwesomeIcon
             icon={faQuestionCircle}
             size="sm"
-            className="relative right-1 mt-0.5 text-mineshaft-300"
+            className="text-mineshaft-300 relative right-1 mt-0.5"
           />
         </Tooltip>
       }
diff --git a/frontend/src/components/features/WishForm.tsx b/frontend/src/components/features/WishForm.tsx
index fc38d0731..702600b5c 100644
--- a/frontend/src/components/features/WishForm.tsx
+++ b/frontend/src/components/features/WishForm.tsx
@@ -63,7 +63,7 @@ export const WishForm = () => {
       open={isOpen}
     >
       <PopoverTrigger asChild>
-        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+        <div className="text-md hover:text-mineshaft-200 mb-3 w-full pl-5 duration-200">
           <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
           Request a feature
         </div>
@@ -72,7 +72,7 @@ export const WishForm = () => {
         hideCloseBtn
         align="start"
         alignOffset={20}
-        className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
+        className="border-mineshaft-600 bg-mineshaft-900 mb-1 w-auto border p-4 drop-shadow-2xl"
         sticky="always"
       >
         <form onSubmit={handleSubmit(createWish)}>
@@ -82,7 +82,7 @@ export const WishForm = () => {
             errorText={errors?.text?.message}
           >
             <TextArea
-              className="border border-mineshaft-600 bg-black/10 text-sm focus:ring-0"
+              className="border-mineshaft-600 border bg-black/10 text-sm focus:ring-0"
               variant="outline"
               placeholder="Wish for anything! Help us improve the platform."
               reSize="none"
diff --git a/frontend/src/components/integrations/NoEnvironmentsBanner.tsx b/frontend/src/components/integrations/NoEnvironmentsBanner.tsx
index 6df1b535b..83689211f 100644
--- a/frontend/src/components/integrations/NoEnvironmentsBanner.tsx
+++ b/frontend/src/components/integrations/NoEnvironmentsBanner.tsx
@@ -10,7 +10,7 @@ export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
   const navigate = useNavigate();
 
   return (
-    <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+    <div className="border-primary-600/70 bg-primary/[.07] mt-4 flex w-full flex-row items-center rounded-md border p-4 text-base text-white">
       <div className="flex w-full flex-col text-sm">
         <span className="mb-2 text-lg font-medium">No environments in your project was found</span>
         <p>
diff --git a/frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx b/frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
index 17c0777f1..60e5754fe 100644
--- a/frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
+++ b/frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
@@ -44,7 +44,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent title="Unleash Infisical's Full Power">
-        <p className="mb-2 text-bunker-300">{text}</p>
+        <p className="text-bunker-300 mb-2">{text}</p>
         <p className="text-bunker-300">
           Upgrade and get access to this, as well as to other powerful enhancements.
         </p>
diff --git a/frontend/src/components/mfa/RecoveryCodesDownload.tsx b/frontend/src/components/mfa/RecoveryCodesDownload.tsx
index db779bd94..9a049ed2b 100644
--- a/frontend/src/components/mfa/RecoveryCodesDownload.tsx
+++ b/frontend/src/components/mfa/RecoveryCodesDownload.tsx
@@ -58,15 +58,15 @@ export const RecoveryCodesDownload = ({
     <Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
       <ModalContent title="Recovery Codes" className="max-w-md">
         <div className="space-y-4">
-          <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
+          <div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
             Save these codes securely. Each can only be used once.
           </div>
 
-          <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
             <div className="grid grid-cols-2 gap-x-6 gap-y-2 font-mono text-sm">
               {recoveryCodes.map((code, index) => (
-                <div key={code} className="flex items-center text-mineshaft-200">
-                  <span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
+                <div key={code} className="text-mineshaft-200 flex items-center">
+                  <span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
                   <span className="pl-2">{code}</span>
                 </div>
               ))}
@@ -96,11 +96,11 @@ export const RecoveryCodesDownload = ({
           </div>
 
           {hasDownloaded ? (
-            <p className="text-center text-xs text-mineshaft-400">
+            <p className="text-mineshaft-400 text-center text-xs">
               Recovery codes downloaded. You can now close this modal.
             </p>
           ) : (
-            <p className="text-center text-xs text-mineshaft-400">
+            <p className="text-mineshaft-400 text-center text-xs">
               Download the recovery codes to continue.
             </p>
           )}
diff --git a/frontend/src/components/mfa/TotpRegistration.tsx b/frontend/src/components/mfa/TotpRegistration.tsx
index 0b79bfd98..1f295ad01 100644
--- a/frontend/src/components/mfa/TotpRegistration.tsx
+++ b/frontend/src/components/mfa/TotpRegistration.tsx
@@ -73,7 +73,7 @@ const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
 
   return (
     <>
-      <div className="flex max-w-lg flex-col text-bunker-200">
+      <div className="text-bunker-200 flex max-w-lg flex-col">
         <div className="mb-8">
           1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
           code.
diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index a912980f1..bf6acd083 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -66,33 +66,33 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
+      <div className="bg-primary mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
         to="/organization/projects"
-        className="truncate pl-0.5 text-sm font-medium text-primary/80 hover:text-primary"
+        className="text-primary/80 hover:text-primary truncate pl-0.5 text-sm font-medium"
       >
         {currentOrg?.name}
       </Link>
       {isProjectRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
-          <div className="truncate text-sm font-medium text-bunker-300">{currentProject?.name}</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <div className="text-bunker-300 truncate text-sm font-medium">{currentProject?.name}</div>
         </>
       )}
       {isOrganizationRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
-          <div className="text-sm font-medium text-bunker-300">Organization Settings</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <div className="text-bunker-300 text-sm font-medium">Organization Settings</div>
         </>
       )}
-      <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-sm text-gray-400" />
+      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
       {pageName === "Secrets" ? (
         <Link
           to="/projects/secret-management/$projectId/overview"
           params={{ projectId: currentProject.id }}
-          className="text-sm font-medium text-primary/80 hover:text-primary"
+          className="text-primary/80 hover:text-primary text-sm font-medium"
         >
           {pageName}
         </Link>
@@ -101,15 +101,15 @@ export default function NavHeader({
       )}
       {currentEnv && secretPath === "/" && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
-          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+          <div className="hover:bg-bunker-100/10 rounded-md pl-3">
             <Tooltip content="Select environment">
               <Select
                 value={currentEnv}
                 onValueChange={(value) => {
                   if (value && onEnvChange) onEnvChange(value);
                 }}
-                className="border-none bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
+                className="text-primary/80 hover:text-primary border-none bg-transparent pl-0 text-sm font-medium"
                 dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
               >
                 {userAvailableEnvs?.map(({ name, slug }) => (
@@ -124,11 +124,11 @@ export default function NavHeader({
       )}
       {isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && (
         <div className="flex items-center space-x-3">
-          <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
           <Link
             to="/projects/secret-management/$projectId/secrets/$envSlug"
             params={{ projectId: currentProject.id, envSlug: routerEnvSlug }}
-            className="text-sm font-medium text-primary/80 hover:text-primary"
+            className="text-primary/80 hover:text-primary text-sm font-medium"
           >
             {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
           </Link>
@@ -143,7 +143,7 @@ export default function NavHeader({
               className="flex items-center space-x-3"
               key={`breadcrumb-secret-path-${folderName}`}
             >
-              <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
+              <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
               {index + 1 === secretPathSegments?.length ? (
                 <div className="flex items-center space-x-2">
                   <span
@@ -195,7 +195,7 @@ export default function NavHeader({
                   }}
                   search={(query) => ({ ...query, secretPath: newSecretPath })}
                   className={twMerge(
-                    "text-sm transition-all hover:text-primary",
+                    "hover:text-primary text-sm transition-all",
                     isHoveringCopyButton ? "text-primary" : "text-primary/80"
                   )}
                 >
@@ -207,7 +207,7 @@ export default function NavHeader({
         })}
       {isProtectedBranch && (
         <Tooltip content={`Protected by policy ${protectionPolicyName}`}>
-          <FontAwesomeIcon icon={faLock} className="ml-2 text-primary" />
+          <FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
         </Tooltip>
       )}
     </div>
diff --git a/frontend/src/components/navigation/RegionSelect.tsx b/frontend/src/components/navigation/RegionSelect.tsx
index 68a0d4568..164e2546a 100644
--- a/frontend/src/components/navigation/RegionSelect.tsx
+++ b/frontend/src/components/navigation/RegionSelect.tsx
@@ -108,7 +108,7 @@ export const RegionSelect = () => {
       </Select>
       <Modal>
         <ModalTrigger asChild>
-          <button type="button" className="mt-1 text-right text-xs text-mineshaft-400 underline">
+          <button type="button" className="text-mineshaft-400 mt-1 text-right text-xs underline">
             Help me pick a data region
           </button>
         </ModalTrigger>
@@ -122,17 +122,17 @@ export const RegionSelect = () => {
                 <span className="mr-2 inline-block w-4">{flag}</span>
                 {value.toUpperCase()} Region
               </p>
-              <ul className="mt-2 ml-6 flex flex-col gap-1">
+              <ul className="ml-6 mt-2 flex flex-col gap-1">
                 <li>
-                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Fastest
+                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Fastest
                   option if you are based in {value === Region.US ? "the" : ""} {label}
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Data
+                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Data
                   storage compliance for this region
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Hosted
+                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Hosted
                   in {regionLocation}
                 </li>
               </ul>
diff --git a/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx b/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
index 98baf90de..d5ca0dd4f 100644
--- a/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
+++ b/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
@@ -57,7 +57,7 @@ export const SecretDashboardPathBreadcrumb = ({
                   type: "info"
                 });
               }}
-              className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
+              className="hover:bg-bunker-100/10 opacity-0 transition duration-75 group-hover:opacity-100"
             >
               <FontAwesomeIcon
                 icon={!isCopying ? faCopy : faCheck}
@@ -76,7 +76,7 @@ export const SecretDashboardPathBreadcrumb = ({
           }}
           search={(query) => ({ ...query, secretPath: newSecretPath })}
           className={twMerge(
-            "text-sm transition-all hover:text-primary",
+            "hover:text-primary text-sm transition-all",
             isCopying && "text-primary"
           )}
         >
diff --git a/frontend/src/components/notifications/Notifications.tsx b/frontend/src/components/notifications/Notifications.tsx
index 22f47fa17..8c180306f 100644
--- a/frontend/src/components/notifications/Notifications.tsx
+++ b/frontend/src/components/notifications/Notifications.tsx
@@ -38,7 +38,7 @@ export const NotificationContent = ({
               {copyActions.map((action) => (
                 <div className="flex flex-row items-center gap-2" key={`copy-${action.name}`}>
                   {action.label && (
-                    <span className="ml-2 text-xs text-mineshaft-400">{action.label}</span>
+                    <span className="text-mineshaft-400 ml-2 text-xs">{action.label}</span>
                   )}
                   <CopyButton
                     value={action.value}
diff --git a/frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx b/frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx
index 75236406f..0e780cb5f 100644
--- a/frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx
+++ b/frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx
@@ -9,11 +9,11 @@ type Props = {
 
 export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props) => (
   <div>
-    <div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
+    <div className="border-mineshaft-600 mb-2 flex items-center gap-2 border-b pb-1">
       <div className="font-medium">Last Login</div>
     </div>
     <div className="mb-2 flex items-center gap-2 text-sm">
-      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
+      <div className="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
         <FontAwesomeIcon icon={faShield} className="h-4 w-4" />
       </div>
       <div className="flex flex-col">
@@ -22,7 +22,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
       </div>
     </div>
     <div className="flex items-center gap-2 text-sm">
-      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
+      <div className="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
         <FontAwesomeIcon icon={faClock} className="h-4 w-4" />
       </div>
       <div className="flex flex-col">
diff --git a/frontend/src/components/permissions/AccessTree/AccessTree.tsx b/frontend/src/components/permissions/AccessTree/AccessTree.tsx
index 963e99cd5..56881cd9b 100644
--- a/frontend/src/components/permissions/AccessTree/AccessTree.tsx
+++ b/frontend/src/components/permissions/AccessTree/AccessTree.tsx
@@ -107,20 +107,20 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
         "mt-4 w-full",
         viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
         viewMode === ViewMode.Undocked &&
-          "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
+          "min-w-lg fixed bottom-4 left-20 z-50 h-[40%] w-[38%] lg:w-[34%]"
       )}
     >
       <div
         className={twMerge(
-          "mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
+          "border-mineshaft-600 bg-mineshaft-900 mb-4 h-full w-full rounded-lg border transition-transform duration-500",
           viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
         )}
       >
         {viewMode === ViewMode.Docked && (
-          <div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
+          <div className="border-mineshaft-400 mb-4 flex items-start justify-between border-b pb-4">
             <div>
-              <h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
-              <p className="text-sm leading-3 text-mineshaft-400">
+              <h3 className="text-mineshaft-100 text-lg font-medium">Access Tree</h3>
+              <p className="text-mineshaft-400 text-sm leading-3">
                 Visual access policies for the configured role.
               </p>
             </div>
@@ -129,7 +129,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                 variant="outline_bg"
                 colorSchema="secondary"
                 type="submit"
-                className="h-10 rounded-r-none bg-mineshaft-700"
+                className="bg-mineshaft-700 h-10 rounded-r-none"
                 leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
                 onClick={handleToggleView}
               >
@@ -139,7 +139,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                 variant="outline_bg"
                 colorSchema="secondary"
                 type="submit"
-                className="h-10 rounded-l-none bg-mineshaft-600"
+                className="bg-mineshaft-600 h-10 rounded-l-none"
                 leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
                 onClick={handleToggleModalView}
               >
@@ -156,7 +156,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
         >
           <div className="h-full w-full">
             <ReactFlow
-              className="rounded-md border border-mineshaft"
+              className="border-mineshaft rounded-md border"
               nodes={nodes}
               edges={edges}
               edgeTypes={EdgeTypes}
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                       <SelectItem
                         key={env.slug}
                         value={env.slug}
-                        className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                        className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                       >
                         <div className="ml-3 truncate font-medium">{env.name}</div>
                       </SelectItem>
diff --git a/frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx b/frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx
index e17bd21e5..405ad01ca 100644
--- a/frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx
+++ b/frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx
@@ -39,12 +39,12 @@ const ErrorDisplay = ({
 
   return (
     <div className="flex h-full w-full flex-col gap-2">
-      <div className="flex items-center gap-2 text-mineshaft-100">
+      <div className="text-mineshaft-100 flex items-center gap-2">
         <FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
         <p>
           Error displaying access tree. Please contact{" "}
           <a
-            className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
+            className="text-mineshaft-200 decoration-primary-500 hover:text-mineshaft-100 inline cursor-pointer underline underline-offset-4 duration-200"
             target="_blank"
             rel="noopener noreferrer"
             href="mailto:support@infisical.com"
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
         </p>
       </div>
       <div className="relative flex flex-1 flex-col overflow-hidden">
-        <pre className="thin-scrollbar w-full flex-1 overflow-y-auto rounded-sm bg-mineshaft-700 p-2 text-xs whitespace-pre-wrap text-mineshaft-100">
+        <pre className="thin-scrollbar bg-mineshaft-700 text-mineshaft-100 w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded-sm p-2 text-xs">
           {display}
         </pre>
         <IconButton
           variant="plain"
           colorSchema="secondary"
-          className="absolute top-2 right-4"
+          className="absolute right-4 top-2"
           ariaLabel="Copy secret value"
           onClick={copyToClipboard}
         >
diff --git a/frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx b/frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx
index 661fa7914..c4c9bc502 100644
--- a/frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx
+++ b/frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx
@@ -51,7 +51,7 @@ export const PermissionSimulation = ({
           onClick={handlePermissionSimulation}
           rightIcon={
             <FontAwesomeIcon
-              className="pl-1 text-sm text-bunker-300 hover:text-primary hover:opacity-80"
+              className="text-bunker-300 hover:text-primary pl-1 text-sm hover:opacity-80"
               icon={faChevronDown}
             />
           }
@@ -65,9 +65,9 @@ export const PermissionSimulation = ({
     <Panel
       onClick={handlePermissionSimulation}
       position="top-left"
-      className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
+      className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
     >
-      <div className="flex w-[20rem] flex-col gap-1.5 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
+      <div className="border-mineshaft-600 bg-mineshaft-800 font-inter flex w-[20rem] flex-col gap-1.5 rounded-sm border p-2 text-gray-200">
         <div>
           <div className="flex w-full items-center justify-between">
             <span className="text-sm">Permission Simulation</span>
@@ -83,7 +83,7 @@ export const PermissionSimulation = ({
             </IconButton>
           </div>
           {expand && (
-            <p className="mt-1 mb-2 text-xs text-mineshaft-400">
+            <p className="text-mineshaft-400 mb-2 mt-1 text-xs">
               Evaluate conditional policies to see what permissions will be granted given a secret
               name or tags
             </p>
@@ -96,7 +96,7 @@ export const PermissionSimulation = ({
               <Select
                 value={subject}
                 onValueChange={(value) => setSubject(value as ProjectPermissionSub)}
-                className="w-full border border-mineshaft-500 capitalize"
+                className="border-mineshaft-500 w-full border capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -119,7 +119,7 @@ export const PermissionSimulation = ({
               <Select
                 value={environment}
                 onValueChange={setEnvironment}
-                className="w-full border border-mineshaft-500 capitalize"
+                className="border-mineshaft-500 w-full border capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-76"
               >
diff --git a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx
index 78da6b138..5003dfa3a 100644
--- a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx
+++ b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx
@@ -32,17 +32,17 @@ export const FolderNode = ({
     <>
       <Handle
         type="target"
-        className="pointer-events-none cursor-pointer! opacity-0"
+        className="cursor-pointer! pointer-events-none opacity-0"
         position={Position.Top}
       />
       <div
-        className={`flex ${hasMinimalAccess ? "" : "opacity-40"} h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500`}
+        className={`flex ${hasMinimalAccess ? "" : "opacity-40"} border-mineshaft bg-mineshaft-800 font-inter h-full w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500`}
       >
-        <div className="flex items-center space-x-2 text-xs text-mineshaft-100">
-          <FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
+        <div className="text-mineshaft-100 flex items-center space-x-2 text-xs">
+          <FontAwesomeIcon className="text-yellow mb-0.5 font-medium" icon={faFolder} />
           <span>{parentId ? `/${name}` : "/"}</span>
         </div>
-        <div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm bg-mineshaft-600 px-2 py-1 text-xs">
+        <div className="bg-mineshaft-600 mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm px-2 py-1 text-xs">
           {Object.entries(actions).map(([action, access]) => {
             const { className, icon } = AccessMap[access];
 
@@ -70,7 +70,7 @@ export const FolderNode = ({
       </div>
       <Handle
         type="source"
-        className="pointer-events-none cursor-pointer! opacity-0"
+        className="cursor-pointer! pointer-events-none opacity-0"
         position={Position.Bottom}
       />
     </>
diff --git a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx
index 7946ee8c9..27ee173b8 100644
--- a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx
+++ b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx
@@ -68,7 +68,7 @@ export const AccessTreeSecretPathInput = ({
       >
         {isExpanded ? (
           <div
-            className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
+            className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
             onClick={toggleSearch}
             role="button"
             tabIndex={0}
@@ -83,7 +83,7 @@ export const AccessTreeSecretPathInput = ({
         ) : (
           <Tooltip position="bottom" content="Search Paths">
             <div
-              className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
+              className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
               onClick={toggleSearch}
               role="button"
               tabIndex={0}
diff --git a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx
index cd1ff2295..f9f81e1d5 100644
--- a/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx
+++ b/frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx
@@ -26,11 +26,11 @@ type ConditionDisplayProps = {
 const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
   return (
     <li>
-      <span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
+      <span className="text-mineshaft-100 font-medium capitalize">{camelCaseToSpaces(key)}</span>{" "}
       <span className="text-mineshaft-200">
         {formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
       </span>{" "}
-      <span className="rounded-sm bg-mineshaft-600 p-0.5 font-mono">
+      <span className="bg-mineshaft-600 rounded-sm p-0.5 font-mono">
         {typeof value === "string" ? value : value.join(", ")}
       </span>
       .
@@ -45,13 +45,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.Full:
       component = (
         <>
-          <div className="flex items-center gap-1.5 text-green capitalize">
+          <div className="text-green flex items-center gap-1.5 capitalize">
             <FontAwesomeIcon icon={faCheckCircle} size="xs" />
             <span>Full {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy grants unconditional{" "}
-            <span className="font-medium text-mineshaft-100">
+            <span className="text-mineshaft-100 font-medium">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -62,13 +62,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.Partial:
       component = (
         <>
-          <div className="flex items-center gap-1.5 text-yellow capitalize">
+          <div className="text-yellow flex items-center gap-1.5 capitalize">
             <FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
             <span>Conditional {formatActionName(action)} Permissions</span>
           </div>
-          <p className="mb-1 text-mineshaft-200">
+          <p className="text-mineshaft-200 mb-1">
             Policy conditionally allows{" "}
-            <span className="font-medium text-mineshaft-100">
+            <span className="text-mineshaft-100 font-medium">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -137,13 +137,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.None:
       component = (
         <>
-          <div className="flex items-center gap-1.5 text-red capitalize">
+          <div className="text-red flex items-center gap-1.5 capitalize">
             <FontAwesomeIcon icon={faCircleXmark} size="xs" />
             <span>No {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy always forbids{" "}
-            <span className="font-medium text-mineshaft-100">
+            <span className="text-mineshaft-100 font-medium">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -157,7 +157,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
 
   return (
     <NodeToolbar
-      className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
+      className="border-mineshaft-600 bg-mineshaft-800 text-bunker-100 rounded-md border px-4 py-2 text-sm font-light"
       isVisible
       position={Position.Bottom}
     >
diff --git a/frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx b/frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx
index 0eee65a93..1cef4ca59 100644
--- a/frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx
+++ b/frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx
@@ -11,7 +11,7 @@ import { createRoleNode } from "../utils";
 const getSubjectIcon = (subject: ProjectPermissionSub) => {
   switch (subject) {
     case ProjectPermissionSub.Secrets:
-      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
+      return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
     case ProjectPermissionSub.SecretFolders:
       return <FontAwesomeIcon icon={faFolder} className="h-4 w-4 text-yellow-700" />;
     case ProjectPermissionSub.DynamicSecrets:
@@ -19,7 +19,7 @@ const getSubjectIcon = (subject: ProjectPermissionSub) => {
     case ProjectPermissionSub.SecretImports:
       return <FontAwesomeIcon icon={faFileImport} className="h-4 w-4 text-green-700" />;
     default:
-      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
+      return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
   }
 };
 
@@ -40,18 +40,18 @@ export const RoleNode = ({
     <>
       <Handle
         type="target"
-        className="pointer-events-none cursor-pointer! opacity-0"
+        className="cursor-pointer! pointer-events-none opacity-0"
         position={Position.Top}
       />
-      <div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
-        <div className="flex items-center space-x-2 text-mineshaft-100">
+      <div className="border-mineshaft bg-mineshaft-800 font-inter flex h-14 w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500">
+        <div className="text-mineshaft-100 flex items-center space-x-2">
           {getSubjectIcon(subject)}
           <span className="text-sm">{formatLabel(subject)} Access</span>
         </div>
       </div>
       <Handle
         type="source"
-        className="pointer-events-none cursor-pointer! opacity-0"
+        className="cursor-pointer! pointer-events-none opacity-0"
         position={Position.Bottom}
       />
     </>
diff --git a/frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx b/frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx
index 6c707c211..447500f11 100644
--- a/frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx
+++ b/frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx
@@ -12,10 +12,10 @@ export const ShowMoreButtonNode = ({
   const tooltipText = `${remaining} ${remaining === 1 ? "folder is" : "folders are"} hidden. Click to show ${remaining > 10 ? "10 more" : ""}`;
 
   return (
-    <div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
+    <div className="border-mineshaft-600 bg-mineshaft-800 flex h-full w-full items-center justify-center rounded-md border p-2">
       <Handle
         type="target"
-        className="pointer-events-none cursor-pointer! opacity-0"
+        className="cursor-pointer! pointer-events-none opacity-0"
         position={Position.Top}
       />
 
diff --git a/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx b/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx
index 33b06dbe4..6d273ff0c 100644
--- a/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx
@@ -51,11 +51,11 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
         handleTriggerImportCertificates();
       }}
     >
-      <p className="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         Are you sure you want to import certificates from this {destinationName} destination into
         Infisical?
       </p>
-      <p className="mb-6 text-xs text-bunker-300">
+      <p className="text-bunker-300 mb-6 text-xs">
         This operation will retrieve certificates from {destinationName} and make them available in
         your PKI subscriber. Only certificates that are not already imported will be processed.
       </p>
diff --git a/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx b/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx
index d5b3119d0..176e9a96e 100644
--- a/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx
@@ -69,16 +69,16 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
       label = "Failed to Import Certificates";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx b/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx
index 0e18959dc..a22e3e683 100644
--- a/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx
@@ -17,10 +17,10 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {destinationDetails.name} Certificate Sync
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConfigured
             ? `Edit ${destinationDetails.name} Certificate Sync`
             : `Sync certificates to ${destinationDetails.name}`}
diff --git a/frontend/src/components/pki-syncs/PkiSyncRemoveCertificatesModal.tsx b/frontend/src/components/pki-syncs/PkiSyncRemoveCertificatesModal.tsx
index f17855289..e151357ee 100644
--- a/frontend/src/components/pki-syncs/PkiSyncRemoveCertificatesModal.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncRemoveCertificatesModal.tsx
@@ -51,7 +51,7 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
         handleTriggerRemoveCertificates();
       }}
     >
-      <p className="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         Are you sure you want to remove certificates synced by Infisical from this {destinationName}{" "}
         destination?
       </p>
diff --git a/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx b/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx
index 3e898ba42..7861a1c60 100644
--- a/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx
@@ -69,16 +69,16 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
       label = "Failed to Remove Certificates";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/pki-syncs/PkiSyncSelect.tsx b/frontend/src/components/pki-syncs/PkiSyncSelect.tsx
index 667332c75..e504e39c8 100644
--- a/frontend/src/components/pki-syncs/PkiSyncSelect.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncSelect.tsx
@@ -46,7 +46,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -60,7 +60,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
           const { image, name } = PKI_SYNC_MAP[destination];
           return (
@@ -72,7 +72,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(destination)
               }
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -109,7 +109,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -118,7 +118,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -129,7 +129,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>
diff --git a/frontend/src/components/pki-syncs/PkiSyncTable.tsx b/frontend/src/components/pki-syncs/PkiSyncTable.tsx
index 983e4687c..a51305237 100644
--- a/frontend/src/components/pki-syncs/PkiSyncTable.tsx
+++ b/frontend/src/components/pki-syncs/PkiSyncTable.tsx
@@ -65,7 +65,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) =
           {pkiSyncs.map((pkiSync) => (
             <Tr
               key={pkiSync.id}
-              className="cursor-pointer hover:bg-mineshaft-700"
+              className="hover:bg-mineshaft-700 cursor-pointer"
               onClick={() => onEdit(pkiSync)}
             >
               <Td>{pkiSync.name}</Td>
diff --git a/frontend/src/components/pki-syncs/forms/AwsCertificateManagerPkiSyncFields.tsx b/frontend/src/components/pki-syncs/forms/AwsCertificateManagerPkiSyncFields.tsx
index 83d85a35f..481d5f323 100644
--- a/frontend/src/components/pki-syncs/forms/AwsCertificateManagerPkiSyncFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/AwsCertificateManagerPkiSyncFields.tsx
@@ -32,7 +32,7 @@ export const AwsCertificateManagerPkiSyncFields = () => {
             <Select
               value={field.value}
               onValueChange={field.onChange}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select an AWS region"
             >
diff --git a/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx b/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
index 8b302e6d1..5bf7ab779 100644
--- a/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
+++ b/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
@@ -124,12 +124,12 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
   if (showConfirmation)
     return (
       <>
-        <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
+        <div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 px-4 py-3">
           <div className="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
             Certificate Sync Behavior
           </div>
-          <p className="mt-1 text-sm text-bunker-200">
+          <p className="text-bunker-200 mt-1 text-sm">
             Only certificates managed by Infisical will be affected during sync operations.
             Certificates not created or managed by Infisical will remain untouched, and changes made
             to Infisical-managed certificates directly in the destination service may be overwritten
@@ -162,7 +162,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -171,9 +171,9 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                     selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                       : "text-bunker-300"
                   }`
                 }
@@ -207,7 +207,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                         id="auto-sync-enabled"
                         thumbClassName="bg-mineshaft-800"
                         onCheckedChange={onChange}
diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx
index 445f9169d..51e7c752f 100644
--- a/frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx
@@ -40,7 +40,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Specify the {appName} Connection to use to connect to {connectionName} and configure
         destination parameters.
       </p>
@@ -69,7 +69,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
         name="connection"
       />
       {availableConnections?.length === 0 && (
-        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           {canCreateConnection ? (
             <>
diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx
index 4a7af22bf..76cf2bbc5 100644
--- a/frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx
@@ -9,7 +9,7 @@ export const PkiSyncDetailsFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Provide a name and description for this Certificate Sync.
       </p>
       <Controller
diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx
index ce581bb88..64819ef18 100644
--- a/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx
@@ -18,7 +18,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">Configure how certificates should be synced.</p>
+      <p className="text-bunker-300 mb-4 text-sm">Configure how certificates should be synced.</p>
       {/*
       TODO: Re-enable this when we have a way to import certificates
       <Controller
@@ -64,7 +64,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl isError={Boolean(error)} errorText={error?.message}>
             <Switch
-              className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+              className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
               id="can-remove-certificates"
               thumbClassName="bg-mineshaft-800"
               onCheckedChange={onChange}
@@ -121,7 +121,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
                     <span className="text-yellow">
                       Character restrictions for {syncOption.name}:
                     </span>
-                    <div className="text-xs text-bunker-300">
+                    <div className="text-bunker-300 text-xs">
                       The following characters are not allowed:{" "}
                       {syncOption.forbiddenCharacters.split("").join(" ")}
                     </div>
diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx
index be6b91948..c3159ce57 100644
--- a/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx
@@ -34,8 +34,8 @@ export const PkiSyncReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Source</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="PKI Subscriber">
@@ -44,8 +44,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Destination</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Destination</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Connection">{connection?.name}</GenericFieldLabel>
@@ -58,8 +58,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Sync Options</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
@@ -86,8 +86,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Details</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
diff --git a/frontend/src/components/pki-syncs/forms/PkiSyncSourceFields.tsx b/frontend/src/components/pki-syncs/forms/PkiSyncSourceFields.tsx
index ea856cfb4..b057b88d5 100644
--- a/frontend/src/components/pki-syncs/forms/PkiSyncSourceFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncSourceFields.tsx
@@ -16,7 +16,7 @@ export const PkiSyncSourceFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Specify the PKI subscriber where you would like to sync certificates from.
       </p>
 
diff --git a/frontend/src/components/project/ProjectOverviewChangeSection.tsx b/frontend/src/components/project/ProjectOverviewChangeSection.tsx
index 548fbd1e3..d4299120c 100644
--- a/frontend/src/components/project/ProjectOverviewChangeSection.tsx
+++ b/frontend/src/components/project/ProjectOverviewChangeSection.tsx
@@ -83,9 +83,9 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
+        <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Project Overview</h2>
         <div className="space-x-2">
           <Button
             variant="outline_bg"
@@ -200,7 +200,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
                           placeholder="Project description"
                           {...field}
                           rows={3}
-                          className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
+                          className="thin-scrollbar resize-none! bg-mineshaft-800 max-w-md"
                           isDisabled={!isAllowed}
                         />
                       </FormControl>
diff --git a/frontend/src/components/projects/NewProjectModal.tsx b/frontend/src/components/projects/NewProjectModal.tsx
index d71e7b957..df9d5d69e 100644
--- a/frontend/src/components/projects/NewProjectModal.tsx
+++ b/frontend/src/components/projects/NewProjectModal.tsx
@@ -202,7 +202,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                   <div
                     key={el.value}
                     className={twMerge(
-                      "flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
+                      "border-mineshaft-600 hover:border-primary-400 hover:bg-mineshaft-600 flex cursor-pointer flex-col items-center gap-2 rounded-sm border px-2 py-4 opacity-75 transition-all",
                       field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
                     )}
                     onClick={() => field.onChange(el.value)}
@@ -238,7 +238,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                 placeholder="Project description"
                 {...field}
                 rows={3}
-                className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
+                className="thin-scrollbar resize-none! bg-mineshaft-900 w-full"
               />
             </FormControl>
           )}
@@ -311,7 +311,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                       onValueChange={(e) => {
                         onChange(e);
                       }}
-                      className="mb-12 w-full bg-mineshaft-600"
+                      className="bg-mineshaft-600 mb-12 w-full"
                       position="popper"
                       dropdownContainerClassName="max-w-none -top-1"
                       side="top"
@@ -333,7 +333,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
+        <div className="absolute bottom-0 right-0 mb-6 mr-6 flex items-start justify-end">
           <ModalClose>
             <Button colorSchema="secondary" variant="plain" className="py-2">
               Cancel
diff --git a/frontend/src/components/roles/RoleOption.tsx b/frontend/src/components/roles/RoleOption.tsx
index 857a13c4c..67f9c665c 100644
--- a/frontend/src/components/roles/RoleOption.tsx
+++ b/frontend/src/components/roles/RoleOption.tsx
@@ -13,15 +13,15 @@ export const RoleOption = ({
         <div>
           <p className="truncate">{children}</p>
           {props.data.description ? (
-            <p className="truncate text-xs leading-4 text-mineshaft-400">
+            <p className="text-mineshaft-400 truncate text-xs leading-4">
               {props.data.description}
             </p>
           ) : (
-            <p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
+            <p className="text-mineshaft-400/50 text-xs leading-4">No Description</p>
           )}
         </div>
         {isSelected && (
-          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>
diff --git a/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx b/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx
index ad02e1706..b2e2de3f7 100644
--- a/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx
+++ b/frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx
@@ -115,7 +115,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
           selectedRotation ? (
             <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="text-mineshaft-300 flex items-center">
               Add Secret Rotation
               <a
                 target="_blank"
@@ -123,8 +123,8 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
                 className="mb-1 ml-1"
                 rel="noopener noreferrer"
               >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+                <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
                   <span>Docs</span>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx b/frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx
index 20b08eb49..d0f305ed2 100644
--- a/frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx
+++ b/frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx
@@ -72,7 +72,7 @@ export const DeleteSecretRotationV2Modal = ({
     >
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
         thumbClassName="bg-mineshaft-800"
         isChecked={revokeGeneratedCredentials}
         onCheckedChange={setRevokeGeneratedCredentials}
@@ -80,13 +80,13 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Revoke Credentials
       </Switch>
-      <p className="mt-1 font-inter text-sm text-mineshaft-400">
+      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
         Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
         {revokeGeneratedCredentials ? "" : " and remain active"}.
       </p>
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
         thumbClassName="bg-mineshaft-800"
         isChecked={deleteSecrets}
         onCheckedChange={setDeleteSecrets}
@@ -94,7 +94,7 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Delete Secrets
       </Switch>
-      <p className="mt-1 font-inter text-sm text-mineshaft-400">
+      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
         Rotation secrets will {deleteSecrets ? "" : "not"} be removed from your project on deletion.
       </p>
     </DeleteActionModal>
diff --git a/frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx b/frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx
index e2c931d49..cb46eac12 100644
--- a/frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx
+++ b/frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx
@@ -48,7 +48,7 @@ const Content = ({ secretRotation, onComplete }: ContentProps) => {
 
   return (
     <div>
-      <p className="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         Are you sure you want to rotate the secrets for this {rotationType} Rotation?
       </p>
       <div className="mt-8 flex w-full items-center justify-between gap-2">
diff --git a/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx b/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx
index d44d08046..d23966055 100644
--- a/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx
+++ b/frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx
@@ -17,10 +17,10 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {destinationDetails.name} Rotation
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConfigured
             ? `Edit ${destinationDetails.name} Rotation`
             : `Rotate ${destinationDetails.name}`}
diff --git a/frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx b/frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx
index 5679940fd..48c4448db 100644
--- a/frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx
+++ b/frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx
@@ -16,7 +16,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -31,7 +31,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -56,7 +56,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="underline hover:text-mineshaft-300"
+                className="hover:text-mineshaft-300 underline"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -65,7 +65,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="underline hover:text-mineshaft-300"
+                className="hover:text-mineshaft-300 underline"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -76,7 +76,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
           </>
         }
       >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
+        <div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
           <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
           <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
             Coming Soon
diff --git a/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx b/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx
index c3b38f7a7..e44a6ac8b 100644
--- a/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx
+++ b/frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx
@@ -31,18 +31,18 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
         position="left"
         className="max-w-sm select-text"
         content={
-          <div className="flex flex-col gap-2 py-1 whitespace-normal">
+          <div className="flex flex-col gap-2 whitespace-normal py-1">
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                 {errorMessage}
               </div>
             </div>
             {nextRotationAt && (
-              <span className="text-xs text-mineshaft-300">
+              <span className="text-mineshaft-300 text-xs">
                 Next rotation attempt on {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
                 {format(nextRotationAt, "h:mm aa")}.
               </span>
@@ -67,7 +67,7 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
     return (
       <Badge
         className={twMerge(
-          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
+          "bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
           className
         )}
       >
diff --git a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx
index e8553f6d9..db95a7cfc 100644
--- a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx
+++ b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx
@@ -48,7 +48,7 @@ const Content = ({ secretRotation }: ContentProps) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading generated credentials...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading generated credentials...</p>
       </div>
     );
   }
@@ -56,7 +56,7 @@ const Content = ({ secretRotation }: ContentProps) => {
   if (!generatedCredentialsResponse) {
     return (
       <div className="flex w-full justify-center">
-        <p className="text-sm text-red">No generated credentials found for this rotation.</p>
+        <p className="text-red text-sm">No generated credentials found for this rotation.</p>
       </div>
     );
   }
@@ -126,14 +126,14 @@ const Content = ({ secretRotation }: ContentProps) => {
       {Component}
       {!IS_ROTATION_DUAL_CREDENTIALS[type] && (
         <NoticeBannerV2 title={`${appName} Retired Credentials Behavior`}>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Due to {SECRET_ROTATION_MAP[type].name} Rotations utilizing a single credential set,
             retired credentials will not be able to authenticate with {appName} during their{" "}
             <a
               target="_blank"
               href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
               rel="noopener noreferrer"
-              className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+              className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
             >
               inactive period
             </a>
@@ -142,7 +142,7 @@ const Content = ({ secretRotation }: ContentProps) => {
         </NoticeBannerV2>
       )}
       {nextRotationAt && (
-        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
+        <div className="text-mineshaft-200 flex items-center gap-x-1.5 text-sm">
           <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
           <span>
             Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
diff --git a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx
index 783510336..4e7984ffd 100644
--- a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx
+++ b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx
@@ -21,7 +21,7 @@ export const CredentialDisplay = ({ children, label, isSensitive }: Props) => {
   return (
     <GenericFieldLabel label={label}>
       {children ? (
-        <div className="flex w-full items-center gap-1 text-mineshaft-100">
+        <div className="text-mineshaft-100 flex w-full items-center gap-1">
           {showCredential ? children : "****************************"}
           <Tooltip content={`Copy ${label}`}>
             <IconButton
diff --git a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx
index 74aa5fbe0..cd73e83b6 100644
--- a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx
+++ b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx
@@ -14,31 +14,31 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
   return (
     <>
       <div className="flex flex-col gap-2">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-100">
-            <FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-100 text-sm">
+            <FontAwesomeIcon icon={faCheck} className="text-green mr-1.5" />
             Current Credentials
           </span>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           The active credential set currently mapped to the rotation secrets.
         </p>
-        <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
+        <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
           {activeCredentials}
         </div>
       </div>
       {inactiveCredentials && (
         <div className="flex flex-col gap-2">
-          <div className="w-full border-b border-mineshaft-600">
-            <span className="text-sm text-mineshaft-100">
-              <FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
+          <div className="border-mineshaft-600 w-full border-b">
+            <span className="text-mineshaft-100 text-sm">
+              <FontAwesomeIcon icon={faClockRotateLeft} className="text-yellow mr-1.5" />
               Retired Credentials
             </span>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             The retired credential set that will be revoked during the next rotation cycle.
           </p>
-          <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
+          <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
             {inactiveCredentials}
           </div>
         </div>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx
index aaabe0f72..0ba687e5b 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx
@@ -26,7 +26,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Configure the connection rotation strategy for this Secret Rotation.
       </p>
       {!isUpdate && environments && (
@@ -90,7 +90,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
                     });
                   }
                 }}
-                className="bg-mineshaft-700 text-white scheme-dark"
+                className="bg-mineshaft-700 scheme-dark text-white"
               />
             </FormControl>
           );
@@ -113,7 +113,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
               errorText={error?.message}
             >
               <Switch
-                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                 id="auto-rotation-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}
@@ -126,7 +126,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
         }}
       />
       {!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
-        <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
+        <div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
           <FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
           {SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation
           may result in service interruptions. If you need to ensure service continuity, we
@@ -135,7 +135,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
             href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
             target="_blank"
             rel="noopener noreferrer"
-            className="underline decoration-yellow underline-offset-2 hover:text-mineshaft-200"
+            className="decoration-yellow hover:text-mineshaft-200 underline underline-offset-2"
           >
             Read more
           </a>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx
index c2064071f..f3023c5c4 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx
@@ -105,7 +105,7 @@ export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }
         name="connection"
       />
       {!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {appName} Connections. Contact an admin to create one.
         </p>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx
index 988b266b9..f09b1688f 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx
@@ -9,7 +9,7 @@ export const SecretRotationV2DetailsFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Provide a name and description for this Secret Rotation.
       </p>
       <Controller
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx
index ef870a2ca..0b27793c9 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx
@@ -183,7 +183,7 @@ export const SecretRotationV2Form = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -192,9 +192,9 @@ export const SecretRotationV2Form = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                     selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                       : "text-bunker-300"
                   }`
                 }
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx
index 21aac90b4..d959b32e0 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx
@@ -27,7 +27,7 @@ export const LdapPasswordRotationParametersFields = () => {
             tooltipText={
               <>
                 <span>Determines how the rotation will be performed:</span>
-                <ul className="mt-2 ml-4 flex list-disc flex-col gap-2">
+                <ul className="ml-4 mt-2 flex list-disc flex-col gap-2">
                   <li>
                     <span className="font-medium">Connection Principal</span> - The Connection
                     principal will rotate the target principal&#39;s password.
@@ -66,7 +66,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 );
                 onChange(val);
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
             >
@@ -127,10 +127,10 @@ export const LdapPasswordRotationParametersFields = () => {
         )}
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Password Requirements</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
         </div>
-        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
+        <div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border px-3 pt-3">
           <Controller
             control={control}
             name="parameters.passwordRequirements.length"
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx
index b65467e5d..db7b96eb5 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx
@@ -31,7 +31,7 @@ export const RedisCredentialsRotationParametersFields = () => {
                   </p>
                   <p>
                     The default value is{" "}
-                    <code className="rounded-sm bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
+                    <code className="bg-mineshaft-700 text-bunker-300 rounded-sm px-1 py-0.5 font-mono font-medium">
                       ~* +@all
                     </code>
                     . You can modify it to suit your needs.
@@ -39,7 +39,7 @@ export const RedisCredentialsRotationParametersFields = () => {
                   <p>
                     For more information, please refer to the{" "}
                     <a
-                      className="font-medium text-primary-500 underline hover:text-primary-600"
+                      className="text-primary-500 hover:text-primary-600 font-medium underline"
                       href="https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -61,10 +61,10 @@ export const RedisCredentialsRotationParametersFields = () => {
       </div>
 
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Password Requirements</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
         </div>
-        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
+        <div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border px-3 pt-3">
           <Controller
             control={control}
             name="parameters.passwordRequirements.length"
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx
index f24bec716..beb1b7e20 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx
@@ -33,7 +33,7 @@ export const SecretRotationV2ParametersFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Configure the required parameters for this Secret Rotation.
       </p>
       <Component />
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx
index 8d6f3797d..f70658b64 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx
@@ -62,19 +62,19 @@ export const SqlCredentialsRotationParametersFields = () => {
         name="parameters.username2"
       />
       <NoticeBannerV2 title="Example Create User Statement">
-        <p className="mb-3 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 mb-3 text-sm">
           Infisical requires two database users to be created for rotation.
         </p>
-        <p className="mb-3 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 mb-3 text-sm">
           These users are intended to be solely managed by Infisical. Altering their login after
           rotation may cause unexpected failure.
         </p>
-        <p className="mb-3 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 mb-3 text-sm">
           Below is an example statement for creating the required users. You may need to modify it
           to suit your needs.
         </p>
         <p className="mb-3 text-sm">
-          <pre className="max-h-40 overflow-y-auto rounded-sm border border-mineshaft-700 bg-mineshaft-800 p-2 whitespace-pre-wrap text-mineshaft-300">
+          <pre className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 max-h-40 overflow-y-auto whitespace-pre-wrap rounded-sm border p-2">
             {rotationOption!.template.createUserStatement}
           </pre>
         </p>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx
index e484a64b1..fc64ea828 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx
@@ -46,8 +46,8 @@ export const SecretRotationV2ReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Configuration</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Configuration</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
@@ -63,8 +63,8 @@ export const SecretRotationV2ReviewFields = () => {
       </div>
       <Component />
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Details</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx
index fdff4af5c..5c0811f56 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx
@@ -8,8 +8,8 @@ type Props = {
 export const SecretRotationReviewSection = ({ label, children }: Props) => {
   return (
     <div className="flex flex-col gap-3">
-      <div className="w-full border-b border-mineshaft-600">
-        <span className="text-sm text-mineshaft-300">{label}</span>
+      <div className="border-mineshaft-600 w-full border-b">
+        <span className="text-mineshaft-300 text-sm">{label}</span>
       </div>
       <div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
     </div>
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx
index e05fd31f5..972551fcc 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx
@@ -33,7 +33,7 @@ export const SecretRotationV2SecretsMappingFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Map the rotated credentials to secrets in your Infisical project.
       </p>
       <Component />
diff --git a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx
index a012cb392..4df8da53a 100644
--- a/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx
+++ b/frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx
@@ -32,13 +32,13 @@ export const SecretsMappingTable = ({ items }: Props) => {
             <tr key={name}>
               <td className="whitespace-nowrap">
                 <div className="mb-4 flex h-full items-start justify-center">
-                  <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
+                  <Badge className="border-mineshaft-600 bg-mineshaft-600 text-bunker-200 pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border">
                     <FontAwesomeIcon icon={faKey} />
                     <span>{name}</span>
                   </Badge>
                 </div>
               </td>
-              <td className="pr-5 pl-5 whitespace-nowrap">
+              <td className="whitespace-nowrap pl-5 pr-5">
                 <div className="mb-4 flex items-center justify-center">
                   <FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
                 </div>
diff --git a/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx b/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx
index e4390024b..c2635294c 100644
--- a/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx
+++ b/frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx
@@ -108,7 +108,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
           selectedDataSource ? (
             <SecretScanningDataSourceModalHeader isConfigured={false} type={selectedDataSource} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="text-mineshaft-300 flex items-center">
               Add Data Source
               <a
                 target="_blank"
@@ -116,8 +116,8 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
                 className="mb-1 ml-1"
                 rel="noopener noreferrer"
               >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+                <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
                   <span>Docs</span>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/components/secret-scanning/DeleteSecretScanningDataSourceModal.tsx b/frontend/src/components/secret-scanning/DeleteSecretScanningDataSourceModal.tsx
index 9cf918dfb..ef3bdaad0 100644
--- a/frontend/src/components/secret-scanning/DeleteSecretScanningDataSourceModal.tsx
+++ b/frontend/src/components/secret-scanning/DeleteSecretScanningDataSourceModal.tsx
@@ -58,7 +58,7 @@ export const DeleteSecretScanningDataSourceModal = ({
       deleteKey={name}
       onDeleteApproved={handleDeleteDataSource}
     >
-      <p className="mt-1 font-inter text-sm text-mineshaft-400">
+      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
         Findings associated with this data source will be preserved.
       </p>
     </DeleteActionModal>
diff --git a/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx b/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx
index da964d6b6..28d9e4cda 100644
--- a/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx
+++ b/frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx
@@ -17,10 +17,10 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
       <img
         alt={`${dataSourceDetails.name} logo`}
         src={`/images/integrations/${dataSourceDetails.image}`}
-        className="h-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {dataSourceDetails.name} Data Source
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source
         </p>
       </div>
diff --git a/frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx b/frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx
index c507a6ef3..4b9d3a3e0 100644
--- a/frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx
+++ b/frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx
@@ -19,7 +19,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -34,7 +34,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -59,7 +59,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="underline hover:text-mineshaft-300"
+                className="hover:text-mineshaft-300 underline"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -68,7 +68,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="underline hover:text-mineshaft-300"
+                className="hover:text-mineshaft-300 underline"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
           </>
         }
       >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
+        <div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
           <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
           <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
             Coming Soon
diff --git a/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx b/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx
index a02e050f0..8cc6b812b 100644
--- a/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx
+++ b/frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx
@@ -34,17 +34,17 @@ export const SecretScanningScanStatusBadge = ({
         position="left"
         className="max-w-sm select-text"
         content={
-          <div className="flex flex-col gap-2 py-1 whitespace-normal">
+          <div className="flex flex-col gap-2 whitespace-normal py-1">
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                 {errorMessage}
               </div>
               {scannedAt && (
-                <div className="mt-1 text-xs text-mineshaft-400">
+                <div className="text-mineshaft-400 mt-1 text-xs">
                   Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })}
                 </div>
               )}
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/BitbucketDataSourceConfigFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/BitbucketDataSourceConfigFields.tsx
index 092e7d623..32a1a15a5 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/BitbucketDataSourceConfigFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/BitbucketDataSourceConfigFields.tsx
@@ -110,7 +110,7 @@ export const BitbucketDataSourceConfigFields = () => {
           onValueChange={(val) => {
             setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
           }}
-          className="w-full border border-mineshaft-500 capitalize"
+          className="border-mineshaft-500 w-full border capitalize"
           position="popper"
           dropdownContainerClassName="max-w-none"
           isDisabled={!connectionId}
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitHubDataSourceConfigFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitHubDataSourceConfigFields.tsx
index be369bd07..bf9655486 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitHubDataSourceConfigFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitHubDataSourceConfigFields.tsx
@@ -61,7 +61,7 @@ export const GitHubDataSourceConfigFields = () => {
           onValueChange={(val) => {
             setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
           }}
-          className="w-full border border-mineshaft-500 capitalize"
+          className="border-mineshaft-500 w-full border capitalize"
           position="popper"
           dropdownContainerClassName="max-w-none"
           isDisabled={!connectionId}
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx
index d36f0553d..3b4d05973 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx
@@ -85,13 +85,13 @@ export const GitLabDataSourceConfigFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">Project</span>: Scan an
+                      <span className="text-bunker-200 font-medium">Project</span>: Scan an
                       individual GitLab project.
                     </p>
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">Group</span>: Scan one or more
+                      <span className="text-bunker-200 font-medium">Group</span>: Scan one or more
                       projects belonging to a GitLab group.
                     </p>
                   </li>
@@ -105,7 +105,7 @@ export const GitLabDataSourceConfigFields = () => {
                 onChange(v);
                 clearAllFields();
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               isDisabled={isUpdate}
               dropdownContainerClassName="max-w-none"
@@ -207,7 +207,7 @@ export const GitLabDataSourceConfigFields = () => {
               onValueChange={(val) => {
                 setValue("config.includeProjects", val === ScanMethod.AllProjects ? ["*"] : []);
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
               isDisabled={!connectionId}
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx
index c4334c29a..dba27c357 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx
@@ -25,7 +25,7 @@ export const SecretScanningDataSourceConfigFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">Connect and configure your Data Source.</p>
+      <p className="text-bunker-300 mb-4 text-sm">Connect and configure your Data Source.</p>
       <Component />
       <Controller
         control={control}
@@ -42,7 +42,7 @@ export const SecretScanningDataSourceConfigFields = () => {
               errorText={error?.message}
             >
               <Switch
-                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                 id="auto-scan-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.tsx
index 2e9e4a2a5..cdc12c51e 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.tsx
@@ -106,7 +106,7 @@ export const SecretScanningDataSourceConnectionField = ({
         name="connection"
       />
       {!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {connectionName} Connections. Contact an admin to create
           one.
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx
index 868114c07..cd67cb239 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx
@@ -9,7 +9,7 @@ export const SecretScanningDataSourceDetailsFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Provide a name and description for this Data Source.
       </p>
       <Controller
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx
index 84c02395e..31e0adcfc 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx
@@ -136,7 +136,7 @@ export const SecretScanningDataSourceForm = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -145,9 +145,9 @@ export const SecretScanningDataSourceForm = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                     selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                       : "text-bunker-300"
                   }`
                 }
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx
index 69d630e8a..c87d94fa9 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx
@@ -25,8 +25,8 @@ export const SecretScanningDataSourceReviewFields = () => {
     <div className="mb-4 flex flex-col gap-6">
       <Component />
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Details</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
diff --git a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx
index c2613f85d..506c5134c 100644
--- a/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx
+++ b/frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx
@@ -7,8 +7,8 @@ type Props = {
 export const SecretScanningDataSourceConfigReviewSection = ({ children }: Props) => {
   return (
     <div className="flex flex-col gap-3">
-      <div className="w-full border-b border-mineshaft-600">
-        <span className="text-sm text-mineshaft-300">Configuration</span>
+      <div className="border-mineshaft-600 w-full border-b">
+        <span className="text-mineshaft-300 text-sm">Configuration</span>
       </div>
       <div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
     </div>
diff --git a/frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx b/frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx
index 2b3903a9b..5c1729f64 100644
--- a/frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx
+++ b/frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx
@@ -58,7 +58,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
     >
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
         thumbClassName="bg-mineshaft-800"
         isChecked={removeSecrets}
         onCheckedChange={setRemoveSecrets}
diff --git a/frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx b/frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx
index c1b21a771..3ad96ebf7 100644
--- a/frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx
@@ -77,7 +77,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
 
   return (
     <form onSubmit={handleSubmit(handleTriggerImportSecrets)}>
-      <p className="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         Are you sure you want to import secrets from this {destinationName} destination into
         Infiscal?
       </p>
@@ -100,7 +100,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -115,7 +115,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               position="popper"
               placeholder="Select an option..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx b/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx
index 54cfcd588..b7b6768bb 100644
--- a/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx
@@ -69,16 +69,16 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
       label = "Failed to Import Secrets";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx b/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
index 7257b3d04..8f018ecda 100644
--- a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
@@ -17,10 +17,10 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {destinationDetails.name} Sync
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConfigured
             ? `Edit ${destinationDetails.name} Sync`
             : `Sync secrets to ${destinationDetails.name}`}
diff --git a/frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx b/frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx
index 718392b92..c0c7b9213 100644
--- a/frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx
@@ -46,7 +46,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
 
   return (
     <>
-      <p className="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         Are you sure you want to remove synced secrets from this {destinationName} destination?
       </p>
       <div className="mt-8 flex w-full items-center justify-between gap-2">
diff --git a/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx b/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx
index abbd78838..d8a82ce65 100644
--- a/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx
@@ -69,16 +69,16 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
       label = "Failed to Remove Secrets";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/secret-syncs/SecretSyncSelect.tsx b/frontend/src/components/secret-syncs/SecretSyncSelect.tsx
index 0c0fdd67b..3541b8529 100644
--- a/frontend/src/components/secret-syncs/SecretSyncSelect.tsx
+++ b/frontend/src/components/secret-syncs/SecretSyncSelect.tsx
@@ -44,7 +44,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
           const { image, name } = SECRET_SYNC_MAP[destination];
           return (
@@ -70,7 +70,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(destination)
               }
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -107,7 +107,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -116,7 +116,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -127,7 +127,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>
diff --git a/frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx b/frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx
index 58dcacd50..19db346f9 100644
--- a/frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx
+++ b/frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx
@@ -138,12 +138,12 @@ export const CreateSecretSyncForm = ({
   if (showConfirmation)
     return (
       <>
-        <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
+        <div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 px-4 py-3">
           <div className="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
             Secret Sync Behavior
           </div>
-          <p className="mt-1 text-sm text-bunker-200">
+          <p className="text-bunker-200 mt-1 text-sm">
             Secret Syncs are the source of truth for connected third-party services. Any secret,
             including associated data, not present or imported in Infisical before syncing will be
             overwritten, and changes made directly in the connected service outside of infisical may
@@ -176,7 +176,7 @@ export const CreateSecretSyncForm = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -185,9 +185,9 @@ export const CreateSecretSyncForm = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                     selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                       : "text-bunker-300"
                   }`
                 }
@@ -221,7 +221,7 @@ export const CreateSecretSyncForm = ({
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                         id="auto-sync-enabled"
                         thumbClassName="bg-mineshaft-800"
                         onCheckedChange={onChange}
diff --git a/frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx b/frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx
index d80dbc640..5580be42b 100644
--- a/frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx
+++ b/frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx
@@ -24,9 +24,9 @@ export const DuplicateDestinationConfirmationModal = ({
             destination. Proceeding may cause conflicts or overwrite existing data.
           </p>
           {duplicateProjectId && (
-            <p className="mt-2 text-xs text-mineshaft-400">
+            <p className="text-mineshaft-400 mt-2 text-xs">
               Duplicate found in project ID:{" "}
-              <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
+              <code className="bg-mineshaft-600 text-mineshaft-200 rounded-sm px-1 py-0.5">
                 {duplicateProjectId}
               </code>
             </p>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx
index 62542a570..2cda6310c 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx
@@ -46,7 +46,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Specify the {appName} Connection to use to connect to {connectionName} and configure
         destination parameters.
       </p>
@@ -89,7 +89,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
         name="connection"
       />
       {!isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {appName} Connections. Contact an admin to create one.
         </p>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx
index dc35c1f0e..fda69c08c 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx
@@ -38,15 +38,15 @@ export const AwsParameterStoreSyncFields = () => {
               <>
                 The path is required and will be prepended to the key schema. For example, if you
                 have a path of{" "}
-                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   /demo/path/
                 </code>{" "}
                 and a key schema of{" "}
-                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   INFISICAL_{"{{secretKey}}"}
                 </code>
                 , then the result will be{" "}
-                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   /demo/path/INFISICAL_{"{{secretKey}}"}
                 </code>
               </>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsSecretsManagerSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsSecretsManagerSyncFields.tsx
index fe1a4c287..5db19faa3 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsSecretsManagerSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsSecretsManagerSyncFields.tsx
@@ -40,13 +40,13 @@ export const AwsSecretsManagerSyncFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">One-To-One</span>: Each
+                      <span className="text-bunker-200 font-medium">One-To-One</span>: Each
                       Infisical secret will be mapped to a separate AWS Secrets Manager secret.
                     </p>
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">Many-To-One</span>: All
+                      <span className="text-bunker-200 font-medium">Many-To-One</span>: All
                       Infisical secrets will be mapped to a single AWS Secrets Manager secret.
                     </p>
                   </li>
@@ -63,7 +63,7 @@ export const AwsSecretsManagerSyncFields = () => {
                 onChange(val);
                 setValue("syncOptions.syncSecretMetadataAsTags", false);
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select an option..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx
index eb196c9a4..8d8e17e20 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx
@@ -76,7 +76,7 @@ export const CloudflarePagesSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select an environment..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx
index e7d988f46..7c34bcbfa 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx
@@ -119,7 +119,7 @@ export const GcpSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -133,7 +133,7 @@ export const GcpSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
               isDisabled={!projectId}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitHubSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitHubSyncFields.tsx
index cabda1e66..9a5f5ddc5 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitHubSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitHubSyncFields.tsx
@@ -79,7 +79,7 @@ export const GitHubSyncFields = () => {
               onValueChange={(val) => {
                 onChange(val);
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
@@ -131,7 +131,7 @@ export const GitHubSyncFields = () => {
                     onChange(val);
                     setValue("destinationConfig.selectedRepositoryIds", undefined);
                   }}
-                  className="w-full border border-mineshaft-500 capitalize"
+                  className="border-mineshaft-500 w-full border capitalize"
                   position="popper"
                   placeholder="Select visibility..."
                   dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitLabSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitLabSyncFields.tsx
index fe73ea5d5..702f57c7d 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitLabSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitLabSyncFields.tsx
@@ -41,7 +41,7 @@ const SecretProtectionOption = ({
 }) => {
   return (
     <Switch
-      className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+      className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
       id={id}
       thumbClassName="bg-mineshaft-800"
       onCheckedChange={onChange}
@@ -108,7 +108,7 @@ export const GitLabSyncFields = () => {
                 setValue("destinationConfig.groupId", "");
                 setValue("destinationConfig.groupName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx
index 229f54b01..4e1d4c1eb 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx
@@ -135,7 +135,7 @@ export const HumanitecSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -150,7 +150,7 @@ export const HumanitecSyncFields = () => {
                 onChange(val);
                 setValue("destinationConfig.env", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx
index b88e0d6e6..9260a2b65 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx
@@ -66,7 +66,7 @@ export const RenderSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -78,7 +78,7 @@ export const RenderSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TeamCitySyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TeamCitySyncFields.tsx
index 4f2718089..3ae3643bb 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TeamCitySyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TeamCitySyncFields.tsx
@@ -120,7 +120,7 @@ export const TeamCitySyncFields = () => {
         )}
       />
 
-      <span className="text-sm text-bunker-300">
+      <span className="text-bunker-300 text-sm">
         Not selecting a Build Configuration will sync your secrets to the entire project.
       </span>
     </>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TerraformCloudSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TerraformCloudSyncFields.tsx
index 70394cc76..725759215 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TerraformCloudSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TerraformCloudSyncFields.tsx
@@ -90,7 +90,7 @@ export const TerraformCloudSyncFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">
+                      <span className="text-bunker-200 font-medium">
                         Environment variables configure Terraform&apos;s behavior (e.g.,
                         credentials).
                       </span>
@@ -98,7 +98,7 @@ export const TerraformCloudSyncFields = () => {
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">
+                      <span className="text-bunker-200 font-medium">
                         Terraform variables are used as input values in your configuration.
                       </span>
                     </p>
@@ -110,7 +110,7 @@ export const TerraformCloudSyncFields = () => {
             <Select
               value={value}
               onValueChange={onChange}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               defaultValue={TerraformCloudSyncCategory.Environment}
               placeholder="Select category..."
@@ -146,7 +146,7 @@ export const TerraformCloudSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -164,7 +164,7 @@ export const TerraformCloudSyncFields = () => {
                 setValue("destinationConfig.variableSetName", "");
                 setValue("destinationConfig.workspaceName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/WindmillSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/WindmillSyncFields.tsx
index 8578fa63c..4dc364171 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/WindmillSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/WindmillSyncFields.tsx
@@ -85,7 +85,7 @@ export const WindmillSyncFields = () => {
                   rel="noopener noreferrer"
                   href="https://www.windmill.dev/docs/core_concepts/roles_and_permissions#path"
                 >
-                  <span className="cursor-pointer underline decoration-primary underline-offset-2 hover:text-mineshaft-200">
+                  <span className="decoration-primary hover:text-mineshaft-200 cursor-pointer underline underline-offset-2">
                     owner path convention
                   </span>
                   .
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ZabbixSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ZabbixSyncFields.tsx
index e00100284..2ca1bbffa 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ZabbixSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ZabbixSyncFields.tsx
@@ -58,7 +58,7 @@ export const ZabbixSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -74,7 +74,7 @@ export const ZabbixSyncFields = () => {
                 setValue("destinationConfig.hostId", "");
                 setValue("destinationConfig.hostName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
@@ -127,7 +127,7 @@ export const ZabbixSyncFields = () => {
             <Select
               value={String(value)}
               onValueChange={(val) => onChange(parseInt(val, 10))}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a macro type..."
               dropdownContainerClassName="max-w-none"
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx
index 6b1894626..89dd4e2ac 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx
@@ -10,11 +10,11 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
-        <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
+        <Badge variant="success" className="ml-1 mr-auto cursor-pointer">
           {props.data.slug}
         </Badge>
         {isSelected && (
-          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx
index 0631a160e..414c3e35e 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx
@@ -9,7 +9,7 @@ export const SecretSyncDetailsFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Provide a name and description for this Secret Sync.
       </p>
       <Controller
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx
index f6ff23552..63a4a1953 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx
@@ -33,12 +33,12 @@ const AwsTagsSection = () => {
   });
 
   return (
-    <div className="mt-2 mb-4 flex flex-col pl-2">
+    <div className="mb-4 mt-2 flex flex-col pl-2">
       <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
         {tagFields.fields.map(({ id: tagFieldId }, i) => (
           <Fragment key={tagFieldId}>
             <div className="col-span-5">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
               <Controller
                 control={control}
                 name={`syncOptions.tags.${i}.key`}
@@ -55,7 +55,7 @@ const AwsTagsSection = () => {
             </div>
             <div className="col-span-6">
               {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
               )}
               <Controller
                 control={control}
@@ -143,19 +143,19 @@ export const AwsParameterStoreSyncOptionsFields = () => {
                   <p>
                     To configure a KMS key, ensure the following permissions are present on the
                     selected IAM role:{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -173,7 +173,7 @@ export const AwsParameterStoreSyncOptionsFields = () => {
         )}
       />
       <Switch
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
         id="overwrite-tags"
         thumbClassName="bg-mineshaft-800"
         isChecked={Array.isArray(watchedTags)}
@@ -212,7 +212,7 @@ export const AwsParameterStoreSyncOptionsFields = () => {
             errorText={error?.message}
           >
             <Switch
-              className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+              className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
               id="overwrite-existing-secrets"
               thumbClassName="bg-mineshaft-800"
               isChecked={value}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx
index 66212c097..25ba9da18 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx
@@ -34,12 +34,12 @@ const AwsTagsSection = () => {
   });
 
   return (
-    <div className="mt-2 mb-4 flex flex-col pl-2">
+    <div className="mb-4 mt-2 flex flex-col pl-2">
       <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
         {tagFields.fields.map(({ id: tagFieldId }, i) => (
           <Fragment key={tagFieldId}>
             <div className="col-span-5">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
               <Controller
                 control={control}
                 name={`syncOptions.tags.${i}.key`}
@@ -56,7 +56,7 @@ const AwsTagsSection = () => {
             </div>
             <div className="col-span-6">
               {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
               )}
               <Controller
                 control={control}
@@ -145,19 +145,19 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
                   <p>
                     To configure a KMS key, ensure the following permissions are present on the
                     selected IAM role:{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -178,7 +178,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
       />
 
       <Switch
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
         id="overwrite-tags"
         thumbClassName="bg-mineshaft-800"
         isChecked={Array.isArray(watchedTags)}
@@ -218,7 +218,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
               className="mt-4"
             >
               <Switch
-                className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                 id="sync-metadata-as-tags"
                 thumbClassName="bg-mineshaft-800"
                 isChecked={value}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/RenderSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/RenderSyncOptionsFields.tsx
index 6d4173bd0..b1ea76e4e 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/RenderSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/RenderSyncOptionsFields.tsx
@@ -17,7 +17,7 @@ export const RenderSyncOptionsFields = () => {
       render={({ field: { value, onChange }, fieldState: { error } }) => (
         <FormControl className="mt-4" isError={Boolean(error?.message)} errorText={error?.message}>
           <Switch
-            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+            className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
             id="auto-redeploy-services"
             thumbClassName="bg-mineshaft-800"
             isChecked={value}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
index 4fe457179..b834c4103 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
@@ -77,7 +77,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">Configure how secrets should be synced.</p>
+      <p className="text-bunker-300 mb-4 text-sm">Configure how secrets should be synced.</p>
       {!hideInitialSync && (
         <>
           <Controller
@@ -100,7 +100,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                           return (
                             <li key={name}>
                               <p className="text-mineshaft-300">
-                                <span className="font-medium text-bunker-200">{name}</span>:{" "}
+                                <span className="text-bunker-200 font-medium">{name}</span>:{" "}
                                 {description}
                               </p>
                             </li>
@@ -118,7 +118,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                   isDisabled={!syncOption?.canImportSecrets}
                   value={value}
                   onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   position="popper"
                   placeholder="Select an option..."
                   dropdownContainerClassName="max-w-none"
@@ -137,7 +137,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
             )}
           />
           {!syncOption?.canImportSecrets && (
-            <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+            <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
               <FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} />
               {destinationName} only supports overwriting destination secrets.{" "}
               {!currentSyncOption.disableSecretDeletion &&
@@ -218,7 +218,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
           return (
             <FormControl isError={Boolean(error)} errorText={error?.message}>
               <Switch
-                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                 id="auto-sync-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx
index 073cb4175..bb7418a4d 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx
@@ -26,7 +26,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx
index 90d7d5023..42fd38bdb 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx
@@ -58,7 +58,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
index d6c34fb87..b0e2ad967 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
@@ -175,8 +175,8 @@ export const SecretSyncReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Source</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
@@ -184,14 +184,14 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="flex w-full items-center gap-2 border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Destination</span>
-          {isChecking && <span className="text-xs text-mineshaft-400">Checking...</span>}
+        <div className="border-mineshaft-600 flex w-full items-center gap-2 border-b">
+          <span className="text-mineshaft-300 text-sm">Destination</span>
+          {isChecking && <span className="text-mineshaft-400 text-xs">Checking...</span>}
         </div>
         {hasDuplicate && (
           <div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
             <div className="flex text-sm text-yellow-100">
-              <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
+              <FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" />
               <div>
                 <p>
                   Another secret sync in your organization is already configured with the same
@@ -215,8 +215,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Sync Options</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
@@ -237,8 +237,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Details</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx
index 127ac503c..59f3234c1 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx
@@ -43,7 +43,7 @@ export const SecretSyncSourceFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Specify the environment and path where you would like to sync secrets from.
       </p>
 
diff --git a/frontend/src/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent.tsx b/frontend/src/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent.tsx
index 7e1876ada..7166ecf87 100644
--- a/frontend/src/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent.tsx
+++ b/frontend/src/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent.tsx
@@ -24,7 +24,7 @@ export const GitHubSyncSelectedRepositoriesTooltipContent = ({ secretSync }: Pro
   if (destinationConfig.scope === GitHubSyncScope.Organization) {
     return (
       <>
-        <span className="text-xs text-bunker-300">Repositories:</span>
+        <span className="text-bunker-300 text-xs">Repositories:</span>
         <p className={twMerge("text-sm", isPending && "text-mineshaft-400")}>
           {isPending
             ? "Loading..."
diff --git a/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx b/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
index 0b6daf889..7ceaa4e49 100644
--- a/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
+++ b/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
@@ -91,7 +91,7 @@ export const SecretReferenceNode = ({
           {hasChildren && (
             <FontAwesomeIcon
               icon={faChevronRight}
-              className="d mr-2 text-mineshaft-400 transition-transform duration-300 ease-linear"
+              className="d text-mineshaft-400 mr-2 transition-transform duration-300 ease-linear"
               aria-hidden
             />
           )}
@@ -103,7 +103,7 @@ export const SecretReferenceNode = ({
           <Tooltip className="max-w-md break-words" content={node.value}>
             <span
               className={twMerge(
-                "ml-1 px-1 text-xs text-mineshaft-400",
+                "text-mineshaft-400 ml-1 px-1 text-xs",
                 !node.value && "text-red-400"
               )}
             >
@@ -201,7 +201,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
         />
       </FormControl>
       <FormLabel className="mb-2" label="Reference Tree" />
-      <div className="relative max-h-96 thin-scrollbar overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
+      <div className="thin-scrollbar border-mineshaft-600 bg-bunker-700 text-mineshaft-200 relative max-h-96 overflow-auto rounded-md border py-6 text-sm">
         {isError ? (
           <div className="flex items-center justify-center py-4">
             <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" />
@@ -213,7 +213,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
           </ul>
         ) : null}
       </div>
-      <div className="mt-2 text-sm text-mineshaft-400">
+      <div className="text-mineshaft-400 mt-2 text-sm">
         Click a secret key to view its sub-references.
       </div>
     </div>
diff --git a/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx b/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
index 1c2891f42..a4760afcb 100644
--- a/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
+++ b/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
@@ -166,17 +166,17 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
             )}
           />
           <div className="mt-2">
-            <div className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400">
+            <div className="text-mineshaft-400 mb-0.5 ml-1 block text-sm font-normal">
               Tag Color
             </div>
             <div className="flex space-x-2">
-              <div className="flex items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 p-2">
+              <div className="border-mineshaft-500 bg-mineshaft-900 flex items-center justify-center rounded-sm border p-2">
                 <div
                   className="h-6 w-6 rounded-full"
                   style={{ background: `${selectedTagColor}` }}
                 />
               </div>
-              <div className="flex grow items-center rounded-sm border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
+              <div className="border-mineshaft-500 bg-mineshaft-900 flex grow items-center rounded-sm px-1 pr-2">
                 {!showHexInput ? (
                   <div className="inline-flex items-center gap-3 pl-3">
                     {secretTagsColors.map(($tagColor: TagColor) => {
@@ -213,7 +213,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
                         </div>
                       )}
                       {!isValidHexColor(selectedTagColor) && (
-                        <div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" />
+                        <div className="bg-blue border-mineshaft-500 h-7 w-7 rounded-full border border-dashed" />
                       )}
                     </div>
                     <div className="grow">
@@ -227,10 +227,10 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
                     </div>
                   </div>
                 )}
-                <div className="mx-4 h-8 border border-mineshaft-500" />
+                <div className="border-mineshaft-500 mx-4 h-8 border" />
                 <div className="flex h-7 w-7 items-center justify-center">
                   <div
-                    className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-xs border border-mineshaft-500 bg-mineshaft-900 bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${
+                    className={`rounded-xs border-mineshaft-500 bg-mineshaft-900 flex h-7 w-7 cursor-pointer items-center justify-center border bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${
                       showHexInput ? "tags-conic-bg rounded-full" : ""
                     }`}
                     onClick={() => setShowHexInput((prev) => !prev)}
diff --git a/frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx b/frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx
index fa5ab9b57..81539268f 100644
--- a/frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx
+++ b/frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx
@@ -16,9 +16,9 @@ export const AccessRestrictedBanner = ({
   )
 }: Props) => {
   return (
-    <div className="flex items-center rounded-md border border-mineshaft-500 bg-linear-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
+    <div className="border-mineshaft-500 bg-linear-to-br from-mineshaft-900 to-mineshaft-600 text-bunker-300 flex items-center rounded-md border px-16 py-12 text-center">
       <div>
-        <div className="text-4xl font-medium text-bunker-100">{title}</div>
+        <div className="text-bunker-100 text-4xl font-medium">{title}</div>
         <div className="-mt-1 text-sm">{body}</div>
       </div>
     </div>
diff --git a/frontend/src/components/v2/Accordion/Accordion.tsx b/frontend/src/components/v2/Accordion/Accordion.tsx
index d36c6705b..2ecb2cd30 100644
--- a/frontend/src/components/v2/Accordion/Accordion.tsx
+++ b/frontend/src/components/v2/Accordion/Accordion.tsx
@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
   ({ children, className, ...props }, forwardedRef) => (
     <AccordionPrimitive.Item
       className={twMerge(
-        "mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
+        "data-[state=open]:border-primary mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-hidden hover:text-primary data-[state=open]:text-primary",
+        "outline-hidden hover:text-primary data-[state=open]:text-primary group flex h-11 flex-1 items-center justify-between px-4 py-2",
         className
       )}
       {...props}
@@ -70,7 +70,7 @@ export const Accordion = ({
   children,
   ...props
 }: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => (
-  <AccordionPrimitive.Root {...props} className={twMerge("w-80 text-bunker-300", props.className)}>
+  <AccordionPrimitive.Root {...props} className={twMerge("text-bunker-300 w-80", props.className)}>
     {children}
   </AccordionPrimitive.Root>
 );
diff --git a/frontend/src/components/v2/Alert/Alert.tsx b/frontend/src/components/v2/Alert/Alert.tsx
index f4910e495..676c37958 100644
--- a/frontend/src/components/v2/Alert/Alert.tsx
+++ b/frontend/src/components/v2/Alert/Alert.tsx
@@ -59,14 +59,14 @@ const Alert = forwardRef<
           <>{icon} </>
         ) : (
           <FontAwesomeIcon
-            className="text-lg text-primary"
+            className="text-primary text-lg"
             icon={variantIconMap[variant ?? "default"]}
           />
         )}
       </div>
       <div className="flex flex-col gap-y-1">
         {hideTitle ? null : (
-          <h5 className="leading-6 font-medium tracking-tight" {...props}>
+          <h5 className="font-medium leading-6 tracking-tight" {...props}>
             {defaultTitle}
           </h5>
         )}
diff --git a/frontend/src/components/v2/Badge/Badge.tsx b/frontend/src/components/v2/Badge/Badge.tsx
index 0e6addd77..f902002c2 100644
--- a/frontend/src/components/v2/Badge/Badge.tsx
+++ b/frontend/src/components/v2/Badge/Badge.tsx
@@ -10,7 +10,7 @@ interface IProps {
 
 const badgeVariants = cva(
   [
-    "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-xs text-yellow opacity-80 hover:opacity-100"
+    "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 py-0.5 text-xs text-yellow opacity-80 hover:opacity-100"
   ],
   {
     variants: {
diff --git a/frontend/src/components/v2/Blur/Blur.tsx b/frontend/src/components/v2/Blur/Blur.tsx
index be0db5f19..d2b77e414 100644
--- a/frontend/src/components/v2/Blur/Blur.tsx
+++ b/frontend/src/components/v2/Blur/Blur.tsx
@@ -11,7 +11,7 @@ export const Blur = ({ className, tooltipText }: IProps) => {
   return (
     <Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
       <div
-        className={twMerge("flex w-80 grow items-center py-1 pr-2 pl-4", className)}
+        className={twMerge("flex w-80 grow items-center py-1 pl-4 pr-2", className)}
         tabIndex={0}
         role="button"
       >
diff --git a/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx b/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
index 6a0046bbf..cd5bc7928 100644
--- a/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
+++ b/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
@@ -27,7 +27,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
     <ol
       ref={ref}
       className={twMerge(
-        "flex flex-wrap items-center text-sm break-words text-bunker-100",
+        "text-bunker-100 flex flex-wrap items-center break-words text-sm",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={twMerge("transition-colors hover:text-primary", className)}
+      className={twMerge("hover:text-primary transition-colors", className)}
       {...props}
     />
   );
@@ -70,7 +70,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={twMerge("font-normal text-bunker-200 last:text-bunker-300", className)}
+      className={twMerge("text-bunker-200 last:text-bunker-300 font-normal", className)}
       {...props}
     />
   )
@@ -79,7 +79,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
-    {children ?? <p className="px-3 text-lg text-mineshaft-400/70">/</p>}
+    {children ?? <p className="text-mineshaft-400/70 px-3 text-lg">/</p>}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -139,7 +139,7 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
                         <FontAwesomeIcon
                           icon={faCaretDown}
                           size="sm"
-                          className="ml-2 text-bunker-300"
+                          className="text-bunker-300 ml-2"
                         />
                       </BreadcrumbSegment>
                     </BreadcrumbItem>
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 85ea1c514..c0b268847 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -116,7 +116,7 @@ const buttonVariants = cva(
         colorSchema: "danger",
         variant: "outline_bg",
         className:
-          "bg-mineshaft-600 border border-red-500 hover:bg-red/10 hover:border-red/40 text-red-500"
+          "bg-mineshaft-600 border border-red-500 hover:bg-red/15 bg-red/10 hover:border-red/40 text-red-500"
       },
       {
         colorSchema: "primary",
@@ -198,7 +198,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 : "infisical_loading"
             }
             isAutoPlay
-            className="absolute w-8 rounded-xl opacity-80 shadow-xs"
+            className="shadow-xs absolute w-8 rounded-xl opacity-80"
           />
         )}
         {leftIcon && (
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index b3ee48c5a..2f827199e 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -10,7 +10,7 @@ export type CardTitleProps = {
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
   <div
     className={twMerge(
-      "mb-5 border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal break-words",
+      "border-mineshaft-600 mb-5 break-words border-b px-6 py-4 font-sans text-lg font-normal",
       className
     )}
   >
@@ -35,7 +35,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className, style }: CardBodyProps) => (
-  <div className={twMerge("px-6 pt-0 pb-6", className)} style={style}>
+  <div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
     {children}
   </div>
 );
@@ -59,7 +59,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          "flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md",
+          "bg-mineshaft-800 font-inter flex w-full flex-col text-gray-200 shadow-md",
           isFullHeight && "h-full",
           isRounded && "rounded-md",
           isPlain && "shadow-none",
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx
index fda9a0672..d1001c7bc 100644
--- a/frontend/src/components/v2/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx
@@ -37,10 +37,10 @@ export const Checkbox = ({
   ...props
 }: CheckboxProps): JSX.Element => {
   return (
-    <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
+    <div className={twMerge("font-inter text-bunker-300 flex items-center", containerClassName)}>
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-mineshaft-400/50 bg-mineshaft-600 shadow-sm transition-all hover:bg-mineshaft-500",
+          "border-mineshaft-400/50 bg-mineshaft-600 hover:bg-mineshaft-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-all",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "border-primary/50 bg-primary/30",
           Boolean(children) && "mr-3",
@@ -54,7 +54,7 @@ export const Checkbox = ({
       >
         <CheckboxPrimitive.Indicator
           className={twMerge(
-            `${checkIndicatorBg || "mt-[0.1rem] text-mineshaft-200"}`,
+            `${checkIndicatorBg || "text-mineshaft-200 mt-[0.1rem]"}`,
             indicatorClassName
           )}
         >
@@ -74,7 +74,7 @@ export const Checkbox = ({
         htmlFor={id}
       >
         {children}
-        {isRequired && <span className="pl-1 text-red">*</span>}
+        {isRequired && <span className="text-red pl-1">*</span>}
       </label>
     </div>
   );
diff --git a/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx b/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
index 4ec04cb2b..c6bbec305 100644
--- a/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
+++ b/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
@@ -89,7 +89,7 @@ export const ConfirmActionModal = ({
         >
           <FormControl
             label={
-              <div className="pb-2 text-sm break-words">
+              <div className="break-words pb-2 text-sm">
                 {confirmationMessage || (
                   <>
                     Type <span className="font-bold">{confirmKey}</span> to perform this action
diff --git a/frontend/src/components/v2/ContentLoader/ContentLoader.tsx b/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
index 16a1c025a..c43ded880 100644
--- a/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+++ b/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
@@ -30,7 +30,7 @@ export const ContentLoader = ({ text, frequency = 2000, className, lottieClassNa
   return (
     <div
       className={twMerge(
-        "relative container mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:scheme-dark",
+        "text-mineshaft-50 dark:scheme-dark container relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8",
         className
       )}
     >
@@ -52,7 +52,7 @@ export const ContentLoader = ({ text, frequency = 2000, className, lottieClassNa
           </motion.div>
         </AnimatePresence>
       )}
-      {text && !isTextArray && <div className="text-xs text-primary">{text}</div>}
+      {text && !isTextArray && <div className="text-primary text-xs">{text}</div>}
     </div>
   );
 };
diff --git a/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx b/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
index ab7db25c7..c33ef414b 100644
--- a/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
+++ b/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
@@ -38,7 +38,7 @@ export const CreatableSelect = <T,>({
         control: ({ isFocused }) =>
           twMerge(
             isFocused ? "border-primary-400/50" : "border-mineshaft-600 hover:border-gray-400",
-            "w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 hover:cursor-pointer"
+            "bg-mineshaft-900 font-inter text-mineshaft-200 w-full rounded-md border p-0.5 hover:cursor-pointer"
           ),
         placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
         input: () => "pl-1 py-0.5",
diff --git a/frontend/src/components/v2/DatePicker/DatePicker.tsx b/frontend/src/components/v2/DatePicker/DatePicker.tsx
index 0fdb0faae..85864d891 100644
--- a/frontend/src/components/v2/DatePicker/DatePicker.tsx
+++ b/frontend/src/components/v2/DatePicker/DatePicker.tsx
@@ -104,7 +104,7 @@ export const DatePicker = ({
       <PopoverContent
         {...popUpContentProps}
         className={twMerge(
-          "w-fit border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter",
+          "border-mineshaft-600 bg-mineshaft-800 font-inter w-fit border p-2",
           popUpContentProps.className
         )}
       >
@@ -133,7 +133,7 @@ export const DatePicker = ({
               type="time"
               value={displayUtc ? localTimeToUTC(timeValue) : timeValue}
               onChange={handleTimeChange}
-              className="bg-mineshaft-700 text-white scheme-dark"
+              className="bg-mineshaft-700 scheme-dark text-white"
             />
           </div>
         )}
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 7ba593f58..245939fa4 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -96,7 +96,7 @@ export const DeleteActionModal = ({
         >
           <FormControl
             label={
-              <div className="pb-2 text-sm break-words">
+              <div className="break-words pb-2 text-sm">
                 {deletionMessage || (
                   <>
                     Type <span className="font-bold">{deleteKey}</span> to perform this action
diff --git a/frontend/src/components/v2/Divider/Divider.tsx b/frontend/src/components/v2/Divider/Divider.tsx
index a5b755eeb..b2d8d8ea0 100644
--- a/frontend/src/components/v2/Divider/Divider.tsx
+++ b/frontend/src/components/v2/Divider/Divider.tsx
@@ -7,7 +7,7 @@ interface IProps {
 export const Divider = ({ className }: IProps): JSX.Element => {
   return (
     <div className={twMerge("flex items-center px-2 opacity-50", className)}>
-      <div aria-hidden="true" className="h-1 w-full grow border-t border-mineshaft-300" />
+      <div aria-hidden="true" className="border-mineshaft-300 h-1 w-full grow border-t" />
     </div>
   );
 };
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
index 8bc73bf89..a8587ff14 100644
--- a/frontend/src/components/v2/Drawer/Drawer.tsx
+++ b/frontend/src/components/v2/Drawer/Drawer.tsx
@@ -64,7 +64,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
           )}
           <CardBody
             className={twMerge(
-              "grow overflow-x-hidden overflow-y-auto px-4 pt-4 dark:scheme-dark",
+              "dark:scheme-dark grow overflow-y-auto overflow-x-hidden px-4 pt-4",
               cardBodyClassName
             )}
           >
@@ -75,7 +75,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+              className="text-bunker-400 hover:text-bunker-50 absolute right-6 top-4 rounded-sm"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.tsx b/frontend/src/components/v2/Dropdown/Dropdown.tsx
index 9c8f7bbe6..38f05849f 100644
--- a/frontend/src/components/v2/Dropdown/Dropdown.tsx
+++ b/frontend/src/components/v2/Dropdown/Dropdown.tsx
@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
+            "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade border-mineshaft-600 bg-mineshaft-900 text-bunker-300 z-30 min-w-[220px] overflow-y-auto rounded-md border shadow-sm will-change-auto",
             className
           )}
         >
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
+            "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade border-mineshaft-600 bg-mineshaft-900 text-bunker-300 z-30 min-w-[220px] rounded-md border shadow-sm will-change-auto",
             className
           )}
         >
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.DropdownMenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
   <DropdownMenuPrimitive.Label
     {...props}
-    className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
+    className={twMerge("text-bunker-400 px-4 pb-1 pt-2 text-xs", className)}
   />
 );
 
@@ -92,7 +92,7 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
+      "rounded-xs font-inter text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700 block cursor-pointer px-4 py-2 text-xs",
       className,
       isDisabled ? "pointer-events-none cursor-not-allowed opacity-50" : ""
     )}
@@ -126,7 +126,7 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.SubTrigger
     {...props}
     className={twMerge(
-      "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
+      "rounded-xs font-inter text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700 block cursor-pointer px-4 py-2 text-xs",
       className
     )}
   >
diff --git a/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx b/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
index a81321cd5..f5327b6a2 100644
--- a/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
+++ b/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
@@ -9,7 +9,7 @@ type Props = {
 export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Element => (
   <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
     <ModalContent title="Email service not configured">
-      <p className="mb-4 text-bunker-300">
+      <p className="text-bunker-300 mb-4">
         The administrators of this Infisical instance have not yet set up an email service provider
         required to perform this action
       </p>
diff --git a/frontend/src/components/v2/EmptyState/EmptyState.tsx b/frontend/src/components/v2/EmptyState/EmptyState.tsx
index f6b926953..71d7fa9fc 100644
--- a/frontend/src/components/v2/EmptyState/EmptyState.tsx
+++ b/frontend/src/components/v2/EmptyState/EmptyState.tsx
@@ -23,13 +23,13 @@ export const EmptyState = ({
 }: Props) => (
   <div
     className={twMerge(
-      "flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-4 text-bunker-300",
+      "bg-mineshaft-800 text-bunker-300 flex w-full flex-col items-center px-2 pt-4",
       className
     )}
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
     <div className="flex flex-col items-center py-4">
-      <div className={twMerge("text-sm text-bunker-300", titleClassName)}>{title}</div>
+      <div className={twMerge("text-bunker-300 text-sm", titleClassName)}>{title}</div>
       <div>{children}</div>
     </div>
   </div>
diff --git a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx
index 714779f22..e9f6768ed 100644
--- a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx
+++ b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx
@@ -81,11 +81,11 @@ export const FilterableSelect = <T,>({
       }}
       classNames={{
         container: ({ isDisabled }) =>
-          twMerge("w-full font-inter text-sm", isDisabled && "pointer-events-auto! opacity-50"),
+          twMerge("font-inter w-full text-sm", isDisabled && "pointer-events-auto! opacity-50"),
         control: ({ isFocused, isDisabled }) =>
           twMerge(
             isFocused ? "border-primary-400/50" : "border-mineshaft-600",
-            `w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${
+            `bg-mineshaft-900 font-inter text-mineshaft-200 w-full rounded-md border p-0.5 ${
               isDisabled ? "cursor-not-allowed!" : "hover:cursor-pointer hover:border-gray-400"
             } `
           ),
diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 1426addd7..450290cf5 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -29,16 +29,16 @@ export const FormLabel = ({
 }: FormLabelProps) => (
   <Label.Root
     className={twMerge(
-      "mb-0.5 flex items-center text-sm font-normal text-mineshaft-400",
+      "text-mineshaft-400 mb-0.5 flex items-center text-sm font-normal",
       className
     )}
     htmlFor={id}
   >
     {label}
-    {isRequired && <span className="ml-1 text-red">*</span>}
-    {isOptional && <span className="ml-1 text-xs text-gray-500 italic">- Optional</span>}
+    {isRequired && <span className="text-red ml-1">*</span>}
+    {isOptional && <span className="ml-1 text-xs italic text-gray-500">- Optional</span>}
     {icon && !tooltipText && (
-      <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
+      <span className="text-mineshaft-300 hover:text-mineshaft-200 ml-2 cursor-default">
         {icon}
       </span>
     )}
@@ -58,7 +58,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      "text-opacity-90 mt-2 flex items-center font-inter text-xs text-mineshaft-300",
+      "font-inter text-mineshaft-300 mt-2 flex items-center text-xs text-opacity-90",
       isError && "text-red-600"
     )}
   >
diff --git a/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx b/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
index cba5e6fd7..07f6bca72 100644
--- a/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
+++ b/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
@@ -24,12 +24,12 @@ export const GenericFieldLabel = ({
     <div className={twMerge("min-w-0", className)}>
       <div className="flex items-center gap-1.5">
         {icon && <FontAwesomeIcon icon={icon} className="text-mineshaft-400" size="sm" />}
-        <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+        <p className={twMerge("text-mineshaft-400 text-xs font-medium", labelClassName)}>{label}</p>
       </div>
       {children ? (
-        <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
+        <p className={twMerge("text-mineshaft-100 text-sm", truncate && "truncate")}>{children}</p>
       ) : (
-        <p className="text-sm text-mineshaft-400/50 italic">None</p>
+        <p className="text-mineshaft-400/50 text-sm italic">None</p>
       )}
     </div>
   );
diff --git a/frontend/src/components/v2/HoverCard/HoverCard.tsx b/frontend/src/components/v2/HoverCard/HoverCard.tsx
index c6a520539..b45a642f2 100644
--- a/frontend/src/components/v2/HoverCard/HoverCard.tsx
+++ b/frontend/src/components/v2/HoverCard/HoverCard.tsx
@@ -19,7 +19,7 @@ export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
     </HoverCard.Trigger>
     <HoverCard.Portal>
       <HoverCard.Content className="HoverCardContent z-300" sideOffset={5}>
-        <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
+        <div className="border-mineshaft-600 bg-bunker-700 text-bunker-300 rounded-md border p-2 drop-shadow-xl">
           <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
             <div>
               <div className="Text bold">{text}</div>
diff --git a/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx b/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
index 816287349..2c9fc0de3 100644
--- a/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
+++ b/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
@@ -15,7 +15,7 @@ export const HoverCardContent = ({ children, className, ...props }: HoverCardCon
     <HoverCardPrimitive.Content
       {...props}
       className={twMerge(
-        "relative w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md",
+        "bg-mineshaft-600 fill-mineshaft-600 font-inter relative w-64 rounded-md p-4 pt-6 text-gray-200 shadow-md",
         className
       )}
     >
diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 9c4dc0b83..4bf08a8f2 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -334,7 +334,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         <Popover.Content
           align="start"
           onOpenAutoFocus={(e) => e.preventDefault()}
-          className="relative top-2 z-100 max-h-64 overflow-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+          className="z-100 border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 relative top-2 max-h-64 overflow-auto rounded-md border shadow-md"
           style={{
             width: "var(--radix-popover-trigger-width)"
           }}
@@ -366,15 +366,15 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                 <div
                   role="status"
                   aria-label="no-match-message"
-                  className="flex w-full items-center justify-between border-mineshaft-600 text-left"
+                  className="border-mineshaft-600 flex w-full items-center justify-between text-left"
                   key={`secret-reference-secret-${i + 1}`}
                 >
-                  <div className="text-md relative flex w-full cursor-default items-center justify-between px-2 py-2 opacity-75 outline-hidden transition-all select-none">
+                  <div className="text-md outline-hidden relative flex w-full cursor-default select-none items-center justify-between px-2 py-2 opacity-75 transition-all">
                     <div className="flex w-full items-start gap-2">
                       <div className="mt-1 flex items-center">{entryIcon}</div>
                       <div className="text-md w-10/12 truncate text-left">
                         <span className="text-gray-400">{item.label}</span>
-                        <div className="mb-[0.1rem] text-xs leading-3 text-bunker-400">
+                        <div className="text-bunker-400 mb-[0.1rem] text-xs leading-3">
                           {subText}
                         </div>
                       </div>
@@ -395,19 +395,19 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                     handleSuggestionSelect(i);
                   }}
                   onMouseEnter={() => setHighlightedIndex(i)}
-                  className="flex w-full items-center justify-between border-none border-mineshaft-600 bg-transparent p-0 text-left"
+                  className="border-mineshaft-600 flex w-full items-center justify-between border-none bg-transparent p-0 text-left"
                   key={`secret-reference-secret-${i + 1}`}
                 >
                   <div
                     className={`${
                       highlightedIndex === i ? "bg-mineshaft-500" : ""
-                    } text-md relative flex w-full cursor-pointer items-center justify-between px-2 py-2 outline-hidden transition-all select-none hover:bg-mineshaft-700 data-highlighted:bg-mineshaft-700`}
+                    } text-md outline-hidden hover:bg-mineshaft-700 data-highlighted:bg-mineshaft-700 relative flex w-full cursor-pointer select-none items-center justify-between px-2 py-2 transition-all`}
                   >
                     <div className="flex w-full items-start gap-2">
                       <div className="mt-1 flex items-center">{entryIcon}</div>
                       <div className="text-md w-10/12 truncate text-left">
                         <span>{item.label}</span>
-                        <div className="mb-[0.1rem] text-xs leading-3 text-bunker-400">
+                        <div className="text-bunker-400 mb-[0.1rem] text-xs leading-3">
                           {subText}
                         </div>
                       </div>
diff --git a/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx b/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
index 7b6073053..563c33bef 100644
--- a/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
+++ b/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
@@ -85,7 +85,7 @@ export const LeaveProjectModal = ({
         >
           <FormControl
             label={
-              <div className="pb-2 text-sm break-words">
+              <div className="break-words pb-2 text-sm">
                 Type <span className="font-bold">{deleteKey}</span> to leave the project
               </div>
             }
diff --git a/frontend/src/components/v2/Menu/Menu.tsx b/frontend/src/components/v2/Menu/Menu.tsx
index 3a222d0e8..09c1d8cdf 100644
--- a/frontend/src/components/v2/Menu/Menu.tsx
+++ b/frontend/src/components/v2/Menu/Menu.tsx
@@ -40,7 +40,7 @@ export const MenuItem = <T extends ElementType = "button">({
       type="button"
       role="menuitem"
       className={twMerge(
-        "group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
+        "font-inter text-bunker-100 duration-50 hover:bg-mineshaft-700 group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 text-sm transition-all",
         isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
         isDisabled && "cursor-not-allowed hover:bg-transparent",
         className
@@ -49,7 +49,7 @@ export const MenuItem = <T extends ElementType = "button">({
       {...props}
     >
       {leftIcon}
-      {children && <span className="grow text-left whitespace-nowrap">{children}</span>}
+      {children && <span className="grow whitespace-nowrap text-left">{children}</span>}
       {description && <span className="mt-2 text-xs">{description}</span>}
     </Item>
   );
@@ -65,7 +65,7 @@ export type MenuGroupProps = {
 
 export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => (
   <>
-    <li className={twMerge("px-2 pt-3 text-xs font-medium text-gray-400 uppercase", className)}>
+    <li className={twMerge("px-2 pt-3 text-xs font-medium uppercase text-gray-400", className)}>
       {title}
     </li>
     {children}
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index e7efda4b8..b2ee283cc 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -40,7 +40,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "animate-pop-in fixed top-1/2 left-1/2 z-30 thin-scrollbar max-w-xl -translate-x-2/4 -translate-y-2/4 border border-mineshaft-600 drop-shadow-2xl dark:scheme-dark",
+            "animate-pop-in thin-scrollbar border-mineshaft-600 dark:scheme-dark fixed left-1/2 top-1/2 z-30 max-w-xl -translate-x-2/4 -translate-y-2/4 border drop-shadow-2xl",
             className
           )}
           style={{ maxHeight: "90%" }}
@@ -51,7 +51,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             </DialogPrimitive.Title>
           )}
           <CardBody
-            className={twMerge("overflow-x-hidden overflow-y-auto", bodyClassName)}
+            className={twMerge("overflow-y-auto overflow-x-hidden", bodyClassName)}
             style={{ maxHeight: "90%" }}
           >
             {children}
@@ -61,7 +61,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+              className="text-bunker-400 hover:text-bunker-50 absolute right-6 top-4 rounded-sm"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>
diff --git a/frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx b/frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx
index d84c0103d..864cbcd58 100644
--- a/frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx
+++ b/frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx
@@ -13,7 +13,7 @@ type Props = {
 export const NoticeBanner = ({ icon = faWarning, title, children, className }: Props) => (
   <div
     className={twMerge(
-      "flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+      "border-primary-600/70 bg-primary/[.07] flex w-full flex-row items-center rounded-md border p-4 text-base text-white",
       className
     )}
   >
diff --git a/frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx b/frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx
index bde5853e5..91deb5ff8 100644
--- a/frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx
+++ b/frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx
@@ -14,12 +14,12 @@ export const NoticeBannerV2 = ({ title, children, className, titleClassName }: P
   return (
     <div
       className={twMerge(
-        "flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5",
+        "border-l-primary bg-mineshaft-300/5 flex flex-col rounded-r border-l-2 px-4 py-2.5",
         className
       )}
     >
       <div className={twMerge("mb-1 flex items-center text-sm", titleClassName)}>
-        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
         {title}
       </div>
       {children}
diff --git a/frontend/src/components/v2/PageHeader/PageHeader.tsx b/frontend/src/components/v2/PageHeader/PageHeader.tsx
index f445a3fc0..2dfafe669 100644
--- a/frontend/src/components/v2/PageHeader/PageHeader.tsx
+++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx
@@ -12,7 +12,7 @@ export const PageHeader = ({ title, description, children, className }: Props) =
   <div className={twMerge("mb-4 w-full", className)}>
     <div className="flex w-full justify-between">
       <div className="w-full">
-        <h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
+        <h1 className="mr-4 text-3xl font-medium capitalize text-white">{title}</h1>
       </div>
       <div className="flex items-center gap-2">{children}</div>
     </div>
diff --git a/frontend/src/components/v2/Pagination/Pagination.tsx b/frontend/src/components/v2/Pagination/Pagination.tsx
index db33f6260..7b79e1ca5 100644
--- a/frontend/src/components/v2/Pagination/Pagination.tsx
+++ b/frontend/src/components/v2/Pagination/Pagination.tsx
@@ -49,7 +49,7 @@ export const Pagination = ({
   return (
     <div
       className={twMerge(
-        "flex w-full items-center justify-end border-t border-mineshaft-600 bg-mineshaft-800 px-4 py-3 text-white",
+        "border-mineshaft-600 bg-mineshaft-800 flex w-full items-center justify-end border-t px-4 py-3 text-white",
         className
       )}
     >
@@ -94,7 +94,7 @@ export const Pagination = ({
           onClick={() => onChangePage(1)}
           isDisabled={!canGoFirst}
         >
-          <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronLeft} />
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} />
           <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
         </IconButton>
         <IconButton
@@ -120,7 +120,7 @@ export const Pagination = ({
           onClick={() => onChangePage(upperLimit)}
           isDisabled={!canGoLast}
         >
-          <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronRight} />
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} />
           <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
         </IconButton>
       </div>
diff --git a/frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx b/frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx
index 62fb93c6f..0f354ef6d 100644
--- a/frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx
+++ b/frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx
@@ -106,24 +106,24 @@ const PasswordGeneratorModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
       <div
         ref={modalRef}
-        className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
+        className="border-mineshaft-600 bg-mineshaft-800 w-full max-w-lg rounded-lg border shadow-xl"
       >
         <div className="p-6">
-          <h2 className="mb-1 text-xl font-medium text-bunker-200">Generate Random Value</h2>
-          <p className="mb-6 text-sm text-bunker-400">Generate strong unique values</p>
-          <div className="relative mb-4 rounded-md bg-mineshaft-900 p-4">
+          <h2 className="text-bunker-200 mb-1 text-xl font-medium">Generate Random Value</h2>
+          <p className="text-bunker-400 mb-6 text-sm">Generate strong unique values</p>
+          <div className="bg-mineshaft-900 relative mb-4 rounded-md p-4">
             <div className="flex items-center justify-between">
-              <div className="w-4/5 pr-2 font-mono text-lg break-all select-all">{password}</div>
+              <div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
               <div className="flex flex-col gap-1">
                 <Button
                   size="xs"
                   colorSchema="secondary"
                   variant="outline_bg"
                   onClick={() => setRefresh((prev) => !prev)}
-                  className="w-full text-bunker-300 hover:text-bunker-100"
+                  className="text-bunker-300 hover:text-bunker-100 w-full"
                 >
                   <FontAwesomeIcon icon={faRefresh} className="mr-1 h-3 w-3" />
                   Refresh
@@ -134,7 +134,7 @@ const PasswordGeneratorModal = ({
                   colorSchema="secondary"
                   variant="outline_bg"
                   onClick={copyToClipboard}
-                  className="w-full text-bunker-300 hover:text-bunker-100"
+                  className="text-bunker-300 hover:text-bunker-100 w-full"
                 >
                   <FontAwesomeIcon icon={isCopying ? faCheck : faCopy} className="mr-1 h-3 w-3" />
                   {copyText}
@@ -145,7 +145,7 @@ const PasswordGeneratorModal = ({
 
           <div className="mb-6">
             <div className="mb-1 flex items-center justify-between">
-              <label htmlFor="value-length" className="text-sm text-bunker-300">
+              <label htmlFor="value-length" className="text-bunker-300 text-sm">
                 Length: {passwordOptions.length}
               </label>
             </div>
diff --git a/frontend/src/components/v2/Popover/Popover.tsx b/frontend/src/components/v2/Popover/Popover.tsx
index 87d3e1814..65f76190e 100644
--- a/frontend/src/components/v2/Popover/Popover.tsx
+++ b/frontend/src/components/v2/Popover/Popover.tsx
@@ -21,24 +21,24 @@ export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) =>
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=open]:data-[side=left]:animate-slide-right-and-fade data-[state=open]:data-[side=right]:animate-slide-left-and-fade data-[state=open]:data-[side=top]:animate-slide-down-and-fade z-100 min-h-fit w-[460px] rounded-sm border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity]"
+        className="data-[state=open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=open]:data-[side=left]:animate-slide-right-and-fade data-[state=open]:data-[side=right]:animate-slide-left-and-fade data-[state=open]:data-[side=top]:animate-slide-down-and-fade z-100 border-chicago-700 bg-mineshaft-600 min-h-fit w-[460px] rounded-sm border p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)]"
         sideOffset={5}
         hideWhenDetached
         side="left"
       >
         <div className="dark flex flex-col pt-2">
-          <p className="mb-5 text-[15px] leading-[0px] font-medium text-bunker-200">Comment</p>
+          <p className="text-bunker-200 mb-5 text-[15px] font-medium leading-[0px]">Comment</p>
           <textarea
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            className="ph-no-capture placeholder peer z-10 h-80 w-full rounded-md border border-mineshaft-500 bg-bunker-600 px-2 py-2.5 text-sm text-bunker-300 caret-bunker-200 outline-hidden duration-200 placeholder:text-bunker-400 focus:text-bunker-100 focus:placeholder:text-transparent dark:scheme-dark"
+            className="ph-no-capture placeholder border-mineshaft-500 bg-bunker-600 text-bunker-300 caret-bunker-200 outline-hidden placeholder:text-bunker-400 focus:text-bunker-100 dark:scheme-dark peer z-10 h-80 w-full rounded-md border px-2 py-2.5 text-sm duration-200 focus:placeholder:text-transparent"
             spellCheck="false"
             placeholder="–"
           />
         </div>
         <Popover.Close
-          className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-hidden hover:text-white focus:shadow-[0_0_0_2px]"
+          className="hover:bg-violet4 focus:shadow-violet7 text-bunker-300 outline-hidden absolute right-[5px] top-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full hover:text-white focus:shadow-[0_0_0_2px]"
           aria-label="Close"
         >
           <FontAwesomeIcon icon={faXmark} />
diff --git a/frontend/src/components/v2/Popoverv2/Popoverv2.tsx b/frontend/src/components/v2/Popoverv2/Popoverv2.tsx
index acc069ac2..6a27e9230 100644
--- a/frontend/src/components/v2/Popoverv2/Popoverv2.tsx
+++ b/frontend/src/components/v2/Popoverv2/Popoverv2.tsx
@@ -27,7 +27,7 @@ export const PopoverContent = ({
     <PopoverPrimitive.Content
       className={twMerge(
         [
-          "relative z-100 w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md",
+          "z-100 bg-mineshaft-600 fill-mineshaft-600 font-inter relative w-64 rounded-md p-4 pt-6 text-gray-200 shadow-md",
           // animation
           "data-[state=open]:data-[side=bottom]:animate-slide-up-and-fade",
           "data-[state=open]:data-[side=top]:animate-slide-down-and-fade",
@@ -44,7 +44,7 @@ export const PopoverContent = ({
           <IconButton
             variant="plain"
             ariaLabel="close"
-            className="absolute top-0 right-1 rounded-sm text-bunker-400 hover:text-bunker-50"
+            className="text-bunker-400 hover:text-bunker-50 absolute right-1 top-0 rounded-sm"
           >
             <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
           </IconButton>
diff --git a/frontend/src/components/v2/RadioGroup/RadioGroup.tsx b/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
index 5331f42d9..b8089d008 100644
--- a/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
+++ b/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
@@ -14,25 +14,25 @@ export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) =
   >
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-hidden duration-200 hover:bg-bunker-400/40"
+        className="border-bunker-400/60 bg-bunker-400/20 outline-hidden hover:bg-bunker-400/40 h-[20px] w-[20px] cursor-default rounded-full border duration-200"
         value="App"
         id="r1"
       >
-        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
+        <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
+      <label className="text-bunker-200 pl-2 text-sm leading-none" htmlFor="r1">
         App
       </label>
     </div>
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-hidden duration-200 hover:bg-bunker-400/40"
+        className="border-bunker-400/60 bg-bunker-400/20 outline-hidden hover:bg-bunker-400/40 h-[22px] w-[22px] cursor-default rounded-full border duration-200"
         value="Pipeline"
         id="r2"
       >
-        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
+        <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
+      <label className="text-bunker-200 pl-2 text-sm leading-none" htmlFor="r2">
         Pipeline
       </label>
     </div>
diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
index b9c9fbe65..9dd5c0fe4 100644
--- a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
+++ b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
@@ -130,14 +130,14 @@ export const SecretPathInput = ({
         align="start"
         onOpenAutoFocus={(e) => e.preventDefault()}
         className={twMerge(
-          "relative top-2 z-100 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+          "z-100 border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 relative top-2 overflow-hidden rounded-md border shadow-md"
         )}
         style={{
           width: "var(--radix-popover-trigger-width)",
           maxHeight: "var(--radix-select-content-available-height)"
         }}
       >
-        <div className="max-h-[25vh] thin-scrollbar w-full flex-col items-center justify-center overflow-y-scroll rounded-md text-white">
+        <div className="thin-scrollbar max-h-[25vh] w-full flex-col items-center justify-center overflow-y-scroll rounded-md text-white">
           {suggestions.map((suggestion, i) => (
             <div
               tabIndex={0}
@@ -148,13 +148,13 @@ export const SecretPathInput = ({
                 handleSuggestionSelect(i);
               }}
               style={{ pointerEvents: "auto" }}
-              className="flex items-center justify-between border-mineshaft-600 text-left"
+              className="border-mineshaft-600 flex items-center justify-between text-left"
               key={`secret-reference-secret-${i + 1}`}
             >
               <div
                 className={`${
                   highlightedIndex === i ? "bg-gray-600" : ""
-                } text-md relative mb-0.5 flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1 outline-hidden transition-all select-none hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-500`}
+                } text-md outline-hidden hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-500 relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 transition-all`}
               >
                 <div className="flex gap-2">
                   <div className="flex items-center text-yellow-700">
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 3954b8b20..de1c985c9 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -58,7 +58,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Trigger
             ref={ref}
             className={twMerge(
-              "inline-flex items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-hidden focus:bg-mineshaft-700/80 data-placeholder:text-mineshaft-400",
+              "border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-200 outline-hidden focus:bg-mineshaft-700/80 data-placeholder:text-mineshaft-400 inline-flex items-center justify-between rounded-md border px-3 py-2 text-sm font-normal",
               className,
               isDisabled && "cursor-not-allowed opacity-50"
             )}
@@ -82,7 +82,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             <SelectPrimitive.Content
               side={side}
               className={twMerge(
-                "relative top-1 z-100 max-w-sm overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
+                "z-100 border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 relative top-1 max-w-sm overflow-hidden rounded-md border shadow-md",
                 position === "popper" && "max-h-72",
                 dropdownContainerClassName
               )}
@@ -132,14 +132,14 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         {...props}
         disabled={isDisabled}
         className={twMerge(
-          "relative mb-0.5 cursor-pointer items-center truncate overflow-hidden rounded-md py-2 pr-4 pl-10 text-sm outline-hidden transition-all select-none hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-700/80",
+          "outline-hidden hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-700/80 relative mb-0.5 cursor-pointer select-none items-center overflow-hidden truncate rounded-md py-2 pl-10 pr-4 text-sm transition-all",
           isSelected && "bg-primary",
-          isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:bg-transparent!",
+          isDisabled && "hover:bg-transparent! cursor-not-allowed text-gray-600 opacity-80",
           className
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
+        <SelectPrimitive.ItemIndicator className="text-primary absolute left-3.5">
           <FontAwesomeIcon icon={props.customIcon ? props.customIcon : faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
@@ -167,17 +167,17 @@ export const SelectClear = forwardRef<HTMLDivElement, SelectClearProps>(
         onSelect={() => onClear()}
         onClick={() => onClear()}
         className={twMerge(
-          "relative mb-0.5 flex cursor-pointer items-center rounded-md py-2 pr-4 pl-10 text-sm outline-hidden transition-all select-none hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-700/80",
+          "outline-hidden hover:bg-mineshaft-500 data-highlighted:bg-mineshaft-700/80 relative mb-0.5 flex cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm transition-all",
           isSelected && "bg-primary",
           isDisabled &&
-            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
+            "hover:text-mineshaft-600 cursor-not-allowed text-gray-600 hover:bg-transparent",
           className
         )}
         ref={forwardedRef}
       >
         <div
           className={twMerge(
-            "absolute left-3.5 text-primary",
+            "text-primary absolute left-3.5",
             selectValue === "" ? "visible" : "hidden"
           )}
         >
diff --git a/frontend/src/components/v2/Select/components/index.tsx b/frontend/src/components/v2/Select/components/index.tsx
index 7e91c792d..57bb42df2 100644
--- a/frontend/src/components/v2/Select/components/index.tsx
+++ b/frontend/src/components/v2/Select/components/index.tsx
@@ -40,7 +40,7 @@ export const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) =
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
         {isSelected && (
-          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>
diff --git a/frontend/src/components/v2/Skeleton/Skeleton.tsx b/frontend/src/components/v2/Skeleton/Skeleton.tsx
index 477456bb8..746391638 100644
--- a/frontend/src/components/v2/Skeleton/Skeleton.tsx
+++ b/frontend/src/components/v2/Skeleton/Skeleton.tsx
@@ -8,5 +8,5 @@ export type Props = {
 // Can be used with cards
 // Tables etc
 export const Skeleton = ({ className }: Props) => (
-  <div className={twMerge("h-6 w-full animate-pulse rounded-md bg-mineshaft-800", className)} />
+  <div className={twMerge("bg-mineshaft-800 h-6 w-full animate-pulse rounded-md", className)} />
 );
diff --git a/frontend/src/components/v2/Slider/Slider.tsx b/frontend/src/components/v2/Slider/Slider.tsx
index bc898ad61..e3cbb8577 100644
--- a/frontend/src/components/v2/Slider/Slider.tsx
+++ b/frontend/src/components/v2/Slider/Slider.tsx
@@ -175,7 +175,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
     }, [isDragging, handleChangeComplete]);
 
     const ValueDisplay = showValue ? (
-      <div className="text-xs text-bunker-300">{currentValue}</div>
+      <div className="text-bunker-300 text-xs">{currentValue}</div>
     ) : null;
 
     return (
@@ -226,7 +226,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
           />
 
           {showValue && valuePosition === "right" && (
-            <div className="ml-2 text-xs text-bunker-300">{currentValue}</div>
+            <div className="text-bunker-300 ml-2 text-xs">{currentValue}</div>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/v2/Spinner/Spinner.tsx b/frontend/src/components/v2/Spinner/Spinner.tsx
index d8a344e3e..b285a6e70 100644
--- a/frontend/src/components/v2/Spinner/Spinner.tsx
+++ b/frontend/src/components/v2/Spinner/Spinner.tsx
@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
       <svg
         aria-hidden="true"
         className={twMerge(
-          "m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
+          "fill-primary m-1 animate-spin text-gray-200 dark:text-gray-600",
           sizeChart[size],
           className
         )}
diff --git a/frontend/src/components/v2/Stepper/Stepper.tsx b/frontend/src/components/v2/Stepper/Stepper.tsx
index 81601ca1c..2129667eb 100644
--- a/frontend/src/components/v2/Stepper/Stepper.tsx
+++ b/frontend/src/components/v2/Stepper/Stepper.tsx
@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
   return (
     <div
       className={twMerge(
-        "flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
+        "border-bunker-300/30 flex w-full items-center space-x-3 rounded-md border p-2",
         className
       )}
     >
@@ -27,8 +27,8 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
             <div className="flex shrink-0 items-center space-x-2">
               <div
                 className={twMerge(
-                  "flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
-                  isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
+                  "text-mineshaft-800 flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium transition-all",
+                  isCompleted ? "bg-primary" : "border-primary/30 text-bunker-300 border",
                   isActive && "bg-primary text-mineshaft-800"
                 )}
               >
@@ -44,7 +44,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
             {isNotLast && (
               <div
                 style={{ height: "1px" }}
-                className={twMerge("grow bg-bunker-300/30", isCompleted && "bg-primary")}
+                className={twMerge("bg-bunker-300/30 grow", isCompleted && "bg-primary")}
               />
             )}
           </div>
diff --git a/frontend/src/components/v2/Switch/Switch.tsx b/frontend/src/components/v2/Switch/Switch.tsx
index dd36da49f..33ae3ec57 100644
--- a/frontend/src/components/v2/Switch/Switch.tsx
+++ b/frontend/src/components/v2/Switch/Switch.tsx
@@ -23,10 +23,10 @@ export const Switch = ({
   thumbClassName,
   ...props
 }: SwitchProps): JSX.Element => (
-  <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
+  <div className={twMerge("font-inter text-bunker-300 flex items-center", containerClassName)}>
     <label className="text-sm" htmlFor={id}>
       {children}
-      {isRequired && <span className="pl-1 text-red">*</span>}
+      {isRequired && <span className="text-red pl-1">*</span>}
     </label>
     <SwitchPrimitive.Root
       {...props}
@@ -34,7 +34,7 @@ export const Switch = ({
       checked={isChecked}
       disabled={isDisabled}
       className={twMerge(
-        "ml-3 h-5 w-9 rounded-full bg-bunker-300 transition-all data-[state=checked]:bg-primary",
+        "bg-bunker-300 data-[state=checked]:bg-primary ml-3 h-5 w-9 rounded-full transition-all",
         isDisabled && "bg-bunker-400 hover:bg-bunker-400",
         className
       )}
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
index 5450e0689..7c5a7fbe3 100644
--- a/frontend/src/components/v2/Table/Table.tsx
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -14,7 +14,7 @@ export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
     <div
       ref={ref}
       className={twMerge(
-        "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
+        "border-mineshaft-700 bg-mineshaft-800 font-inter relative w-full overflow-x-auto border border-solid",
         isRounded && "rounded-lg",
         className
       )}
@@ -33,7 +33,7 @@ export type TableProps = {
 
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
-    className={twMerge("w-full bg-mineshaft-800 p-2 text-left text-sm text-gray-300", className)}
+    className={twMerge("bg-mineshaft-800 w-full p-2 text-left text-sm text-gray-300", className)}
   >
     {children}
   </table>
@@ -48,7 +48,7 @@ export type THeadProps = {
 
 export const THead = ({ children, className, style }: THeadProps): JSX.Element => (
   <thead
-    className={twMerge("bg-mineshaft-800 text-xs text-bunker-300 uppercase", className)}
+    className={twMerge("bg-mineshaft-800 text-bunker-300 text-xs uppercase", className)}
     style={style}
   >
     {children}
@@ -61,7 +61,7 @@ export type TFootProps = {
 };
 
 export const TFoot = ({ children, className }: TFootProps): JSX.Element => (
-  <tfoot className={twMerge("bg-mineshaft-800 text-xs text-bunker-300 uppercase", className)}>
+  <tfoot className={twMerge("bg-mineshaft-800 text-bunker-300 text-xs uppercase", className)}>
     {children}
   </tfoot>
 );
@@ -83,7 +83,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "cursor-default border-b border-solid border-mineshaft-600 last:border-b-0",
+      "border-mineshaft-600 cursor-default border-b border-solid last:border-b-0",
       isHoverable && "hover:bg-mineshaft-600",
       isSelectable && "cursor-pointer",
       className
@@ -104,7 +104,7 @@ export type ThProps = {
 export const Th = ({ children, className, style }: ThProps): JSX.Element => (
   <th
     className={twMerge(
-      "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pt-4 pb-3.5 font-medium",
+      "border-mineshaft-600 bg-mineshaft-800 border-b-2 px-5 pb-3.5 pt-4 font-medium",
       className
     )}
     style={style}
diff --git a/frontend/src/components/v2/Tabs/Tabs.tsx b/frontend/src/components/v2/Tabs/Tabs.tsx
index 7e8466850..2da502321 100644
--- a/frontend/src/components/v2/Tabs/Tabs.tsx
+++ b/frontend/src/components/v2/Tabs/Tabs.tsx
@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
 
 export const TabList = ({ className, children, ...props }: TabListProps) => (
   <TabsPrimitive.List
-    className={twMerge("flex shrink-0 border-b-2 border-mineshaft-800", className)}
+    className={twMerge("border-mineshaft-800 flex shrink-0 border-b-2", className)}
     {...props}
   >
     {children}
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
 export const Tab = ({ className, children, ...props }: TabProps) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "flex h-10 items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
+      "text-mineshaft-400 hover:text-mineshaft-200 data-[state=active]:border-primary flex h-10 select-none items-center justify-center px-3 text-sm font-medium transition-all first:rounded-tl-md last:rounded-tr-md data-[state=active]:border-b data-[state=active]:text-white",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
 
 export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
   <TabsPrimitive.Content
-    className={twMerge("grow rounded-br-md rounded-bl-md py-5 outline-hidden", className)}
+    className={twMerge("outline-hidden grow rounded-bl-md rounded-br-md py-5", className)}
     {...props}
   >
     {children}
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
index afbe3c5c3..eab302c5c 100644
--- a/frontend/src/components/v2/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -52,7 +52,7 @@ export const Tooltip = ({
           sideOffset={5}
           {...props}
           className={twMerge(
-            "data-[state=delayed-open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=delayed-open]:data-[side=left]:animate-slide-right-and-fade data-[state=delayed-open]:data-[side=right]:animate-slide-left-and-fade data-[state=delayed-open]:data-[side=top]:animate-slide-down-and-fade z-50 max-w-60 border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md select-none",
+            "data-[state=delayed-open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=delayed-open]:data-[side=left]:animate-slide-right-and-fade data-[state=delayed-open]:data-[side=right]:animate-slide-left-and-fade data-[state=delayed-open]:data-[side=top]:animate-slide-down-and-fade border-mineshaft-600 bg-mineshaft-800 text-bunker-200 z-50 max-w-60 select-none border font-light shadow-md",
             isDisabled && "hidden!",
             center && "text-center",
             size === "sm" && "rounded-xs px-2 py-1 text-xs",
diff --git a/frontend/src/hooks/api/reactQuery.tsx b/frontend/src/hooks/api/reactQuery.tsx
index ad84ed6d6..59e1aa757 100644
--- a/frontend/src/hooks/api/reactQuery.tsx
+++ b/frontend/src/hooks/api/reactQuery.tsx
@@ -107,7 +107,7 @@ export const onRequestError = (error: unknown) => {
                           {el.subject.toString()} {hasConditions && "with conditions:"}
                         </div>
                         {hasConditions && (
-                          <ul className="flex list-disc flex-col gap-1 pt-2 pl-5 text-sm">
+                          <ul className="flex list-disc flex-col gap-1 pl-5 pt-2 text-sm">
                             {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
                               const operators = (
                                 el.conditions as Record<
diff --git a/frontend/src/hooks/api/users/types.ts b/frontend/src/hooks/api/users/types.ts
index d313efd23..b7ceb4a1b 100644
--- a/frontend/src/hooks/api/users/types.ts
+++ b/frontend/src/hooks/api/users/types.ts
@@ -111,29 +111,29 @@ export type TWorkspaceUser = {
   organization: string;
   roles: (
     | {
-      id: string;
-      role: "owner" | "admin" | "member" | "no-access" | "custom";
-      customRoleId: string;
-      customRoleName: string;
-      customRoleSlug: string;
-      isTemporary: false;
-      temporaryRange: null;
-      temporaryMode: null;
-      temporaryAccessEndTime: null;
-      temporaryAccessStartTime: null;
-    }
+        id: string;
+        role: "owner" | "admin" | "member" | "no-access" | "custom";
+        customRoleId: string;
+        customRoleName: string;
+        customRoleSlug: string;
+        isTemporary: false;
+        temporaryRange: null;
+        temporaryMode: null;
+        temporaryAccessEndTime: null;
+        temporaryAccessStartTime: null;
+      }
     | {
-      id: string;
-      role: "owner" | "admin" | "member" | "no-access" | "custom";
-      customRoleId: string;
-      customRoleName: string;
-      customRoleSlug: string;
-      isTemporary: true;
-      temporaryRange: string;
-      temporaryMode: ProjectUserMembershipTemporaryMode;
-      temporaryAccessEndTime: string;
-      temporaryAccessStartTime: string;
-    }
+        id: string;
+        role: "owner" | "admin" | "member" | "no-access" | "custom";
+        customRoleId: string;
+        customRoleName: string;
+        customRoleSlug: string;
+        isTemporary: true;
+        temporaryRange: string;
+        temporaryMode: ProjectUserMembershipTemporaryMode;
+        temporaryAccessEndTime: string;
+        temporaryAccessStartTime: string;
+      }
   )[];
   status: "invited" | "accepted" | "verified" | "completed";
   deniedPermissions: any[];
diff --git a/frontend/src/hooks/useSyntaxHighlight.tsx b/frontend/src/hooks/useSyntaxHighlight.tsx
index d1af77f77..c829fdb8c 100644
--- a/frontend/src/hooks/useSyntaxHighlight.tsx
+++ b/frontend/src/hooks/useSyntaxHighlight.tsx
@@ -29,7 +29,7 @@ export const useSyntaxHighlight = () => {
 
     // append a space on last new line this to show new line in ui for code component
     const val = text.at(-1) === "\n" ? text.concat(" ") : text;
-    if (val?.length === 0) return <span className="font-mono text-bunker-400/80">EMPTY</span>;
+    if (val?.length === 0) return <span className="text-bunker-400/80 font-mono">EMPTY</span>;
     return val?.split(REGEX).map((word, i) =>
       word.match(REGEX) !== null ? (
         <span className="ph-no-capture text-yellow" key={`${val}-${i + 1}`}>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 42b5d7930..80645676d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,14 +26,14 @@
   html {
     @apply overflow-hidden;
   }
+}
 
-  :root {
+:root {
     font-family: var(--font-inter);
     --foreground: oklch(0.985 0 0);
     --background: oklch(0.145 0 0);
 
     --toastify-color-dark: var(--color-mineshaft-700);
-  }
 }
 
 @theme {
diff --git a/frontend/src/layouts/AdminLayout/AdminLayout.tsx b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
index 859ce9627..acdedea68 100644
--- a/frontend/src/layouts/AdminLayout/AdminLayout.tsx
+++ b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
@@ -26,7 +26,7 @@ export const AdminLayout = () => {
     <>
       <Banner />
       <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark hidden ${containerHeight} bg-bunker-800 w-full flex-col overflow-x-hidden transition-all md:flex`}
       >
         <Navbar />
         {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
@@ -35,12 +35,12 @@ export const AdminLayout = () => {
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex grow flex-col overflow-y-hidden md:flex-row">
           <AdminSidebar />
-          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-4 pt-8 pb-4 dark:scheme-dark">
+          <div className="bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden px-4 pb-4 pt-8">
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t("common.no-mobile")} `}
diff --git a/frontend/src/layouts/AdminLayout/Sidebar.tsx b/frontend/src/layouts/AdminLayout/Sidebar.tsx
index 185ea1dbf..e8d99216c 100644
--- a/frontend/src/layouts/AdminLayout/Sidebar.tsx
+++ b/frontend/src/layouts/AdminLayout/Sidebar.tsx
@@ -64,8 +64,8 @@ export const AdminSidebar = () => {
   const matchRoute = useMatchRoute();
 
   return (
-    <aside className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
-      <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:scheme-dark">
+    <aside className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60">
+      <nav className="items-between dark:scheme-dark flex h-full flex-col justify-between overflow-y-auto">
         <div className="flex-1">
           <Menu>
             <MenuGroup title="Configuration">
@@ -107,7 +107,7 @@ export const AdminSidebar = () => {
         <Menu>
           <Link to="/organization/projects">
             <MenuItem
-              className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
               leftIcon={
                 <FontAwesomeIcon
                   className="mx-1 inline-block shrink-0"
diff --git a/frontend/src/layouts/KmsLayout/KmsLayout.tsx b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
index 71cdc6e8d..6953d4036 100644
--- a/frontend/src/layouts/KmsLayout/KmsLayout.tsx
+++ b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
@@ -21,10 +21,10 @@ export const KmsLayout = () => {
           animate={{ x: 0 }}
           exit={{ x: -150 }}
           transition={{ duration: 0.2 }}
-          className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+          className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
         >
-          <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-            <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+          <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+            <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
               <Lottie className="inline-block h-5 w-5 shrink-0" icon="unlock" />
               KMS
             </div>
@@ -125,7 +125,7 @@ export const KmsLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
-                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                     leftIcon={
                       <div className="w-6">
                         <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -139,7 +139,7 @@ export const KmsLayout = () => {
             </div>
           </nav>
         </motion.div>
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+        <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
           {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
           <Outlet />
         </div>
diff --git a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
index f2866259c..fafcc1a60 100644
--- a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
+++ b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
@@ -38,7 +38,7 @@ export const OrganizationLayout = () => {
     <>
       <Banner />
       <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark hidden ${containerHeight} bg-bunker-800 w-full flex-col overflow-x-hidden transition-all md:flex`}
       >
         <Navbar />
         {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
@@ -49,7 +49,7 @@ export const OrganizationLayout = () => {
           <OrgSidebar isHidden={isInsideProject} />
           <main
             className={twMerge(
-              "flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-4 pt-8 pb-4 dark:scheme-dark",
+              "bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden px-4 pb-4 pt-8",
               isInsideProject && "p-0"
             )}
           >
@@ -61,7 +61,7 @@ export const OrganizationLayout = () => {
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}
       />
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t("common.no-mobile")} `}
diff --git a/frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx b/frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx
index 0f37dfbcc..5e3c889dd 100644
--- a/frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx
@@ -25,8 +25,8 @@ export const MenuIconButton = <T extends ElementType = "button">({
         type="button"
         role="menuitem"
         className={twMerge(
-          "group relative my-1 flex w-full cursor-pointer flex-col items-center justify-center rounded-sm p-2 font-inter text-sm text-bunker-100 transition-all duration-150 hover:bg-mineshaft-700",
-          isSelected && "rounded-none bg-bunker-800 hover:bg-mineshaft-600",
+          "font-inter text-bunker-100 hover:bg-mineshaft-700 group relative my-1 flex w-full cursor-pointer flex-col items-center justify-center rounded-sm p-2 text-sm transition-all duration-150",
+          isSelected && "bg-bunker-800 hover:bg-mineshaft-600 rounded-none",
           isDisabled && "cursor-not-allowed hover:bg-transparent",
           className
         )}
@@ -38,7 +38,7 @@ export const MenuIconButton = <T extends ElementType = "button">({
         <div
           className={`${
             isSelected ? "opacity-100" : "opacity-0"
-          } absolute left-0 h-full w-1 bg-primary transition-all duration-150`}
+          } bg-primary absolute left-0 h-full w-1 transition-all duration-150`}
         />
         {icon && (
           <div className="my-auto mb-2 h-6 w-6">
@@ -53,7 +53,7 @@ export const MenuIconButton = <T extends ElementType = "button">({
             />
           </div>
         )}
-        <div className="grow justify-center text-center break-words" style={{ fontSize: "10px" }}>
+        <div className="grow justify-center break-words text-center" style={{ fontSize: "10px" }}>
           {children}
         </div>
       </Item>
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index a42c9e973..fd2f0a7ed 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -186,7 +186,7 @@ export const Navbar = () => {
 
   if (shouldShowMfa) {
     return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+      <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto">
         <Mfa
           email={user.email as string}
           method={requiredMfaMethod}
@@ -200,25 +200,25 @@ export const Navbar = () => {
   const isServerAdminPanel = location.pathname.startsWith("/admin");
 
   return (
-    <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
+    <div className="border-mineshaft-600 bg-mineshaft-800 z-10 flex min-h-12 items-center border-b px-4">
       <div>
         <Link to="/organization/projects">
           <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
         </Link>
       </div>
-      <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
+      <p className="text-mineshaft-400/70 pl-1 pr-3 text-lg">/</p>
       {isServerAdminPanel ? (
         <>
           <Link
             to="/admin"
-            className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
+            className="hover:text-primary group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100"
           >
             <div>
-              <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
+              <FontAwesomeIcon icon={faServer} className="text-bunker-300 text-xs" />
             </div>
             <div className="whitespace-nowrap">Server Console</div>
           </Link>
-          <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
+          <p className="text-mineshaft-400/70 pl-3 pr-3 text-lg">/</p>
           {breadcrumbs ? (
             // scott: remove /admin as we show server console above
             <BreadcrumbContainer breadcrumbs={breadcrumbs.slice(1) as TBreadcrumbFormat[]} />
@@ -229,12 +229,12 @@ export const Navbar = () => {
           <div className="flex items-center">
             <DropdownMenu modal={false}>
               <Link to="/organization/projects">
-                <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
+                <div className="hover:text-primary group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100">
                   <div>
-                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
+                    <FontAwesomeIcon icon={faBuilding} className="text-bunker-300 text-xs" />
                   </div>
                   <div className="whitespace-nowrap">{currentOrg?.name}</div>
-                  <div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
+                  <div className="border-mineshaft-500 text-bunker-300 no-underline! mr-1 rounded-sm border px-1 text-xs">
                     {getPlan(subscription)}
                   </div>
                   {subscription.cardDeclined && (
@@ -245,7 +245,7 @@ export const Navbar = () => {
                       <div className="flex items-center">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
-                          className="animate-pulse cursor-help text-xs text-primary-400"
+                          className="text-primary-400 animate-pulse cursor-help text-xs"
                         />
                       </div>
                     </Tooltip>
@@ -260,17 +260,17 @@ export const Navbar = () => {
                     ariaLabel="switch-org"
                     className="px-2 py-1"
                   >
-                    <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
+                    <FontAwesomeIcon icon={faCaretDown} className="text-bunker-300 text-xs" />
                   </IconButton>
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="start"
                 side="bottom"
-                className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
+                className="shadow-mineshaft-600 mt-6 cursor-default p-1 drop-shadow-md"
                 style={{ minWidth: "220px" }}
               >
-                <div className="px-2 py-1 text-xs text-mineshaft-400 capitalize">organizations</div>
+                <div className="text-mineshaft-400 px-2 py-1 text-xs capitalize">organizations</div>
                 {orgs?.map((org) => {
                   return (
                     <DropdownMenuItem key={org.id}>
@@ -307,7 +307,7 @@ export const Navbar = () => {
                         className="flex w-full items-center justify-start p-0 font-normal"
                         leftIcon={
                           currentOrg?.id === org.id && (
-                            <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                            <FontAwesomeIcon icon={faCheck} className="text-primary mr-3" />
                           )
                         }
                       >
@@ -318,14 +318,14 @@ export const Navbar = () => {
                     </DropdownMenuItem>
                   );
                 })}
-                <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                <div className="border-mineshaft-600 mt-1 h-1 border-t" />
                 <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
                   Log Out
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-          <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
+          <p className="text-mineshaft-400/70 pl-1 pr-3 text-lg">/</p>
           {breadcrumbs ? (
             <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
           ) : null}
@@ -334,7 +334,7 @@ export const Navbar = () => {
       <div className="grow" />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>
-          <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
+          <div className="border-mineshaft-500 hover:bg-mineshaft-600 rounded-l-md border border-r-0 px-2.5 py-1">
             <FontAwesomeIcon icon={faCircleQuestion} className="text-mineshaft-200" />
           </div>
         </DropdownMenuTrigger>
@@ -360,9 +360,9 @@ export const Navbar = () => {
                   <button
                     type="button"
                     onClick={() => setShowAdminsModal(true)}
-                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                    className="text-mineshaft-300 flex w-full items-center rounded-md font-normal duration-200"
                   >
-                    <div className="relative flex w-full cursor-pointer items-center justify-start rounded-md select-none">
+                    <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
                       {icon}
                       <div className="text-sm">{text}</div>
                     </div>
@@ -372,9 +372,9 @@ export const Navbar = () => {
                     target="_blank"
                     rel="noopener noreferrer"
                     href={String(url)}
-                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                    className="text-mineshaft-300 flex w-full items-center rounded-md font-normal duration-200"
                   >
-                    <div className="relative flex w-full cursor-pointer items-center justify-start rounded-md select-none">
+                    <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
                       {icon}
                       <div className="text-sm">{text}</div>
                     </div>
@@ -384,7 +384,7 @@ export const Navbar = () => {
             );
           })}
           {envConfig.PLATFORM_VERSION && (
-            <div className="mt-2 mb-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
+            <div className="hover:text-mineshaft-200 mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200">
               <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
               Version: {envConfig.PLATFORM_VERSION}
             </div>
@@ -394,21 +394,21 @@ export const Navbar = () => {
       <NotificationDropdown />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
-          <div className="rounded-r-md border border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
+          <div className="border-mineshaft-500 hover:bg-mineshaft-600 rounded-r-md border px-2.5 py-1">
             <FontAwesomeIcon icon={faUserCircle} className="text-mineshaft-200" />
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent side="bottom" align="end" className="mt-3 p-1">
           <div className="cursor-default px-1 py-1">
-            <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-linear-to-tr from-primary-500/10 to-mineshaft-800 p-1 px-2 transition-all duration-150">
+            <div className="border-mineshaft-600 bg-linear-to-tr from-primary-500/10 to-mineshaft-800 flex w-full items-center justify-center rounded-md border p-1 px-2 transition-all duration-150">
               <div className="p-1 pr-3">
-                <FontAwesomeIcon icon={faUser} className="text-xl text-mineshaft-400" />
+                <FontAwesomeIcon icon={faUser} className="text-mineshaft-400 text-xl" />
               </div>
               <div className="flex grow flex-col text-white">
-                <div className="max-w-36 truncate text-sm font-medium text-ellipsis capitalize">
+                <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
                   {user?.firstName} {user?.lastName}
                 </div>
-                <div className="text-xs text-mineshaft-300">{user.email}</div>
+                <div className="text-mineshaft-300 text-xs">{user.email}</div>
               </div>
             </div>
           </div>
@@ -419,7 +419,7 @@ export const Navbar = () => {
             href="https://infisical.com/docs/documentation/getting-started/introduction"
             target="_blank"
             rel="noopener noreferrer"
-            className="mt-3 w-full text-sm leading-[1.2rem] font-normal text-mineshaft-300 hover:text-mineshaft-100"
+            className="text-mineshaft-300 hover:text-mineshaft-100 mt-3 w-full text-sm font-normal leading-[1.2rem]"
           >
             <DropdownMenuItem>
               Documentation
@@ -433,7 +433,7 @@ export const Navbar = () => {
             href="https://infisical.com/slack"
             target="_blank"
             rel="noopener noreferrer"
-            className="mt-3 w-full text-sm leading-[1.2rem] font-normal text-mineshaft-300 hover:text-mineshaft-100"
+            className="text-mineshaft-300 hover:text-mineshaft-100 mt-3 w-full text-sm font-normal leading-[1.2rem]"
           >
             <DropdownMenuItem>
               Join Slack Community
@@ -443,7 +443,7 @@ export const Navbar = () => {
               />
             </DropdownMenuItem>
           </a>
-          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <div className="border-mineshaft-600 mt-1 h-1 border-t" />
           <DropdownMenuItem onClick={handleCopyToken}>
             Copy Token
             <Tooltip
@@ -453,7 +453,7 @@ export const Navbar = () => {
               <FontAwesomeIcon icon={faInfoCircle} className="pl-1.5 text-xs" />
             </Tooltip>
           </DropdownMenuItem>
-          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <div className="border-mineshaft-600 mt-1 h-1 border-t" />
           <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
             Log Out
           </DropdownMenuItem>
@@ -463,7 +463,7 @@ export const Navbar = () => {
         <ModalContent
           title={
             <div className="flex items-center gap-2">
-              <FontAwesomeIcon icon={faExclamationTriangle} className="text-lg text-primary-400" />
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-primary-400 text-lg" />
               Your payment could not be processed.
             </div>
           }
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx
index 82f5d0fdd..fdd539e4a 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx
@@ -16,7 +16,7 @@ export const Notification = ({ notification, onDelete }: Props) => {
   return (
     <div
       className={twMerge(
-        "group relative flex cursor-pointer items-start border-b border-mineshaft-600 p-3 transition-colors",
+        "border-mineshaft-600 group relative flex cursor-pointer items-start border-b p-3 transition-colors",
         notification.link ? "hover:bg-mineshaft-700" : "cursor-default",
         !notification.isRead && "bg-mineshaft-800"
       )}
@@ -31,16 +31,16 @@ export const Notification = ({ notification, onDelete }: Props) => {
             delayDuration={300}
             className="z-1000"
           >
-            <span className="overflow-hidden text-sm leading-5 font-medium text-ellipsis whitespace-nowrap text-mineshaft-100">
+            <span className="text-mineshaft-100 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-5">
               <Markdown components={{ p: "span" }}>{notification.title}</Markdown>
             </span>
           </Tooltip>
-          <span className="mt-px ml-auto text-xs whitespace-nowrap text-mineshaft-400">
+          <span className="text-mineshaft-400 ml-auto mt-px whitespace-nowrap text-xs">
             {formatDistance(notification.createdAt, new Date())} ago
           </span>
         </div>
         {notification.body && (
-          <span className="max-w-[350px] text-xs text-mineshaft-300">
+          <span className="text-mineshaft-300 max-w-[350px] text-xs">
             <Markdown>{notification.body}</Markdown>
           </span>
         )}
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx
index d72d9d59e..2eed16c29 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx
@@ -34,10 +34,10 @@ export const NotificationDropdown = () => {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger>
-        <div className="relative border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
+        <div className="border-mineshaft-500 hover:bg-mineshaft-600 relative border border-r-0 px-2.5 py-1">
           <FontAwesomeIcon icon={faBell} className="text-mineshaft-200" />
           {unreadCount > 0 && (
-            <span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-yellow-400 px-1 text-[10px] text-black">
+            <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-yellow-400 px-1 text-[10px] text-black">
               {unreadCount > 99 ? "99+" : unreadCount}
             </span>
           )}
@@ -49,11 +49,11 @@ export const NotificationDropdown = () => {
         className="z-999 mt-3 flex h-[550px] w-[400px] overflow-hidden rounded-lg"
       >
         <div className="flex w-full flex-col">
-          <div className="flex items-center justify-between border-b border-mineshaft-500 px-3 py-2">
+          <div className="border-mineshaft-500 flex items-center justify-between border-b px-3 py-2">
             <span className="font-medium text-white">Notifications</span>
             <button
               type="button"
-              className="text-xs font-medium text-mineshaft-300 hover:text-primary-400 disabled:pointer-events-none disabled:opacity-50"
+              className="text-mineshaft-300 hover:text-primary-400 text-xs font-medium disabled:pointer-events-none disabled:opacity-50"
               onClick={(e) => {
                 e.preventDefault();
                 markAllAsRead();
@@ -72,8 +72,8 @@ export const NotificationDropdown = () => {
             {!isLoading && notifications?.length === 0 && (
               <div className="flex h-full w-full flex-col items-center justify-center">
                 <FontAwesomeIcon icon={faBell} size="3x" className="text-mineshaft-400" />
-                <span className="mt-4 text-sm text-mineshaft-300">No new notifications</span>
-                <span className="text-xs text-mineshaft-400">
+                <span className="text-mineshaft-300 mt-4 text-sm">No new notifications</span>
+                <span className="text-mineshaft-400 text-xs">
                   We&apos;ll let you know when something important happens.
                 </span>
               </div>
diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx
index 518b7d101..9656d36b3 100644
--- a/frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx
@@ -15,8 +15,8 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
   if (isDismissed) return null;
 
   return (
-    <div className="flex w-full items-center border-b border-yellow/50 bg-yellow/30 px-4 py-2 text-sm text-yellow-200">
-      <FontAwesomeIcon icon={faWarning} className="mr-2.5 text-base text-yellow" />
+    <div className="border-yellow/50 bg-yellow/30 flex w-full items-center border-b px-4 py-2 text-sm text-yellow-200">
+      <FontAwesomeIcon icon={faWarning} className="text-yellow mr-2.5 text-base" />
       {text}{" "}
       {link && (
         <>
@@ -27,11 +27,11 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
             target="_blank"
             className="group flex items-center"
           >
-            <span className="cursor-pointer pl-1 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
+            <span className="group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100 cursor-pointer pl-1 underline underline-offset-2 duration-100">
               here
             </span>
             <FontAwesomeIcon
-              className="mt-[0.12rem] ml-1 group-hover:text-mineshaft-100"
+              className="group-hover:text-mineshaft-100 ml-1 mt-[0.12rem]"
               icon={faArrowUpRightFromSquare}
               size="xs"
             />
diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
index 0f4bed355..ed27a9002 100644
--- a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
@@ -45,9 +45,9 @@ export const OrgSidebar = ({ isHidden }: Props) => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: -240 }}
             layout
-            className="dark z-10 w-60 border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-800 to-mineshaft-900"
+            className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-800 to-mineshaft-900 dark z-10 w-60 border-r"
           >
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
+            <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
               <Menu>
                 <MenuGroup title="Overview">
                   <Link to="/organization/projects">
@@ -145,7 +145,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   !subscription.has_used_trial && (
                     <Tooltip content="Start Free Pro Trial">
                       <MenuItem
-                        className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                        className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                         leftIcon={
                           <FontAwesomeIcon
                             className="mx-1 inline-block shrink-0"
@@ -170,7 +170,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   )}
                 <Link to="/organization/secret-sharing">
                   <MenuItem
-                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                     leftIcon={
                       <div className="w-6">
                         <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faShare} />
@@ -183,7 +183,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                 {user.superAdmin && (
                   <Link to="/admin">
                     <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                      className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                       leftIcon={
                         <div className="w-6">
                           <FontAwesomeIcon
diff --git a/frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx b/frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx
index 82231c0e4..4c8dd955c 100644
--- a/frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx
@@ -50,7 +50,7 @@ export const ServerAdminsPanel = () => {
       <div className="flex-1 px-2">
         <TableContainer className="flex max-h-[30vh] flex-col overflow-auto">
           <Table className="w-full table-fixed">
-            <THead className="sticky top-0 bg-bunker-800">
+            <THead className="bg-bunker-800 sticky top-0">
               <Tr>
                 <Th className="w-1/2">Name</Th>
                 <Th className="w-1/2">Email</Th>
@@ -74,7 +74,7 @@ export const ServerAdminsPanel = () => {
             </TBody>
           </Table>
           {isEmpty && (
-            <div className="flex h-32 items-center justify-center text-sm text-mineshaft-400">
+            <div className="text-mineshaft-400 flex h-32 items-center justify-center text-sm">
               No server administrators found
             </div>
           )}
diff --git a/frontend/src/layouts/OrganizationLayout/components/SidebarHeader/SidebarHeader.tsx b/frontend/src/layouts/OrganizationLayout/components/SidebarHeader/SidebarHeader.tsx
index 99fe87adf..f2fa7e9ce 100644
--- a/frontend/src/layouts/OrganizationLayout/components/SidebarHeader/SidebarHeader.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/SidebarHeader/SidebarHeader.tsx
@@ -12,15 +12,15 @@ export const SidebarHeader = () => {
   const { subscription } = useSubscription();
 
   return (
-    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all duration-150 hover:bg-mineshaft-700">
-      <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary">
+    <div className="border-mineshaft-600 hover:bg-mineshaft-700 flex w-full items-center justify-center rounded-md border p-1 transition-all duration-150">
+      <div className="bg-primary mr-2 flex h-8 w-8 items-center justify-center rounded-md">
         {currentOrg?.name.charAt(0)}
       </div>
       <div className="flex grow flex-col text-white">
-        <div className="max-w-36 truncate text-sm font-medium text-ellipsis capitalize">
+        <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
           {currentOrg?.name}
         </div>
-        <div className="text-xs text-mineshaft-400">{getPlan(subscription)}</div>
+        <div className="text-mineshaft-400 text-xs">{getPlan(subscription)}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/layouts/PamLayout/PamLayout.tsx b/frontend/src/layouts/PamLayout/PamLayout.tsx
index 6039050eb..73ec26903 100644
--- a/frontend/src/layouts/PamLayout/PamLayout.tsx
+++ b/frontend/src/layouts/PamLayout/PamLayout.tsx
@@ -42,10 +42,10 @@ export const PamLayout = () => {
             animate={{ x: 0 }}
             exit={{ x: -150 }}
             transition={{ duration: 0.2 }}
-            className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+            className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
           >
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-              <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+            <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+              <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
                 <Lottie className="inline-block h-5 w-5 shrink-0" icon="groups" />
                 PAM
               </div>
@@ -163,7 +163,7 @@ export const PamLayout = () => {
                 <Menu>
                   <Link to="/organization/projects">
                     <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                      className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                       leftIcon={
                         <div className="w-6">
                           <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -177,7 +177,7 @@ export const PamLayout = () => {
               </div>
             </nav>
           </motion.div>
-          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+          <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
             {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
             <Outlet />
           </div>
diff --git a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
index 46551b9c5..fe200e2f7 100644
--- a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
+++ b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
@@ -15,29 +15,29 @@ export const PersonalSettingsLayout = () => {
       <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex grow flex-col overflow-y-hidden md:flex-row">
-          <aside className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
-            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:scheme-dark">
+          <aside className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60">
+            <nav className="items-between dark:scheme-dark flex h-full flex-col justify-between overflow-y-auto">
               <div className="grow">
                 <Link to="/organization/projects">
-                  <div className="my-6 flex cursor-default items-center justify-center pr-2 text-sm text-mineshaft-300 hover:text-mineshaft-100">
+                  <div className="text-mineshaft-300 hover:text-mineshaft-100 my-6 flex cursor-default items-center justify-center pr-2 text-sm">
                     <FontAwesomeIcon icon={faArrowLeft} className="pr-3" />
                     Back to organization
                   </div>
                 </Link>
               </div>
-              <div className="relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400">
+              <div className="text-mineshaft-400 relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm">
                 {(window.location.origin.includes("https://app.infisical.com") ||
                   window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
               </div>
               )
             </nav>
           </aside>
-          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 dark:scheme-dark">
+          <main className="bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden">
             <Outlet />
           </main>
         </div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t("common.no-mobile")} `}
diff --git a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
index cb186f4fa..7de4d3353 100644
--- a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+++ b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
@@ -37,10 +37,10 @@ export const PkiManagerLayout = () => {
             animate={{ x: 0 }}
             exit={{ x: -150 }}
             transition={{ duration: 0.2 }}
-            className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+            className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
           >
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-              <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+            <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+              <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
                 <Lottie className="inline-block h-5 w-5 shrink-0" icon="note" />
                 PKI Manager
               </div>
@@ -226,7 +226,7 @@ export const PkiManagerLayout = () => {
                 <Menu>
                   <Link to="/organization/projects">
                     <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                      className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                       leftIcon={
                         <div className="w-6">
                           <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -240,13 +240,13 @@ export const PkiManagerLayout = () => {
               </div>
             </nav>
           </motion.div>
-          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+          <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
             {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t("common.no-mobile")} `}
diff --git a/frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx b/frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx
index 71af774ca..36a213854 100644
--- a/frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx
@@ -15,7 +15,7 @@ export const AssumePrivilegeModeBanner = () => {
   if (!assumedPrivilegeDetails) return null;
 
   return (
-    <div className="z-10 -mx-4 flex items-center justify-center gap-2 rounded-sm border border-mineshaft-600 bg-primary-400 p-2 text-mineshaft-800 shadow-sm">
+    <div className="border-mineshaft-600 bg-primary-400 text-mineshaft-800 z-10 -mx-4 flex items-center justify-center gap-2 rounded-sm border p-2 shadow-sm">
       <div>
         <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
         You are currently viewing the project with privileges of{" "}
diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
index 1c2c08d23..e1b657be9 100644
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -106,9 +106,9 @@ export const ProjectSelect = () => {
             projectId: currentWorkspace.id
           }}
         >
-          <div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
+          <div className="hover:text-primary flex cursor-pointer items-center gap-2 text-sm text-white duration-100">
             <div>
-              <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
+              <FontAwesomeIcon icon={faTable} className="text-bunker-300 text-xs" />
             </div>
             <Tooltip content={currentWorkspace.name} className="max-w-96 break-words">
               <div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -125,18 +125,18 @@ export const ProjectSelect = () => {
               ariaLabel="switch-project"
               className="px-2 py-1"
             >
-              <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
+              <FontAwesomeIcon icon={faCaretDown} className="text-bunker-300 text-xs" />
             </IconButton>
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="start"
           side="bottom"
-          className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
+          className="shadow-mineshaft-600 mt-6 cursor-default p-1 drop-shadow-md"
           style={{ minWidth: "220px" }}
         >
-          <div className="px-2 py-1 text-xs text-mineshaft-400 capitalize">Projects</div>
-          <div className="mb-1 border-b border-b-mineshaft-600 py-1 pb-1">
+          <div className="text-mineshaft-400 px-2 py-1 text-xs capitalize">Projects</div>
+          <div className="border-b-mineshaft-600 mb-1 border-b py-1 pb-1">
             <Input
               value={searchProject}
               onChange={(evt) => setSearchProject(evt.target.value || "")}
@@ -146,7 +146,7 @@ export const ProjectSelect = () => {
               placeholder="Search projects"
             />
           </div>
-          <div className="max-h-80 thin-scrollbar overflow-auto">
+          <div className="thin-scrollbar max-h-80 overflow-auto">
             {projectsSortedByFav
               ?.filter((el) => el.name?.toLowerCase().includes(searchProject.toLowerCase()))
               ?.map((workspace) => {
@@ -167,14 +167,14 @@ export const ProjectSelect = () => {
                     }}
                     icon={
                       currentWorkspace?.id === workspace.id && (
-                        <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                        <FontAwesomeIcon icon={faCheck} className="text-primary mr-3" />
                       )
                     }
                   >
                     <div className="flex items-center">
                       <div className="flex flex-1 items-center justify-between overflow-hidden">
                         <Tooltip side="right" className="break-words" content={workspace.name}>
-                          <div className="max-w-40 truncate overflow-hidden whitespace-nowrap">
+                          <div className="max-w-40 overflow-hidden truncate whitespace-nowrap">
                             {workspace.name}
                           </div>
                         </Tooltip>
@@ -182,7 +182,7 @@ export const ProjectSelect = () => {
                       <div>
                         <FontAwesomeIcon
                           icon={workspace.isFavorite ? faSolidStar : faStar}
-                          className="text-sm text-yellow-600 hover:text-mineshaft-400"
+                          className="hover:text-mineshaft-400 text-sm text-yellow-600"
                           onClick={async (e) => {
                             e.stopPropagation();
                             await (
@@ -198,7 +198,7 @@ export const ProjectSelect = () => {
                 );
               })}
           </div>
-          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <div className="border-mineshaft-600 mt-1 h-1 border-t" />
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Workspace}>
             {(isOldProjectPermissionAllowed) => (
               <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Project}>
diff --git a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
index a99dff2a7..86c7cf865 100644
--- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
@@ -61,10 +61,10 @@ export const SecretManagerLayout = () => {
             animate={{ x: 0 }}
             exit={{ x: -150 }}
             transition={{ duration: 0.2 }}
-            className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+            className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
           >
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-              <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+            <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+              <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
                 <Lottie className="inline-block h-5 w-5 shrink-0" icon="vault" />
                 Secrets Manager
               </div>
@@ -236,7 +236,7 @@ export const SecretManagerLayout = () => {
                 <Menu>
                   <Link to="/organization/projects">
                     <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                      className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                       leftIcon={
                         <div className="w-6">
                           <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -250,13 +250,13 @@ export const SecretManagerLayout = () => {
               </div>
             </nav>
           </motion.div>
-          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+          <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
             {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t("common.no-mobile")} `}
diff --git a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
index fb86cfe48..aec920dcd 100644
--- a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+++ b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
@@ -52,10 +52,10 @@ export const SecretScanningLayout = () => {
           animate={{ x: 0 }}
           exit={{ x: -150 }}
           transition={{ duration: 0.2 }}
-          className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+          className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
         >
-          <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-            <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+          <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+            <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
               <Lottie className="inline-block h-5 w-5 shrink-0" icon="secret-scan" />
               Secret Scanning
             </div>
@@ -93,7 +93,7 @@ export const SecretScanningLayout = () => {
                           </div>
                           <span>Findings</span>
                           {Boolean(unresolvedFindings) && (
-                            <Badge variant="primary" className="mr-2 ml-auto h-min">
+                            <Badge variant="primary" className="ml-auto mr-2 h-min">
                               {unresolvedFindings}
                             </Badge>
                           )}
@@ -178,7 +178,7 @@ export const SecretScanningLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
-                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                     leftIcon={
                       <div className="w-6">
                         <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -192,7 +192,7 @@ export const SecretScanningLayout = () => {
             </div>
           </nav>
         </motion.div>
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+        <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
           {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
           <Outlet />
         </div>
diff --git a/frontend/src/layouts/SshLayout/SshLayout.tsx b/frontend/src/layouts/SshLayout/SshLayout.tsx
index d6f318f3a..d98d8e8d5 100644
--- a/frontend/src/layouts/SshLayout/SshLayout.tsx
+++ b/frontend/src/layouts/SshLayout/SshLayout.tsx
@@ -34,10 +34,10 @@ export const SshLayout = () => {
           animate={{ x: 0 }}
           exit={{ x: -150 }}
           transition={{ duration: 0.2 }}
-          className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+          className="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
         >
-          <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
-            <div className="flex items-center gap-3 border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
+          <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+            <div className="border-mineshaft-600 flex items-center gap-3 border-b px-4 py-3.5 text-lg text-white">
               <Lottie className="inline-block h-5 w-5 shrink-0" icon="terminal" />
               SSH
             </div>
@@ -148,7 +148,7 @@ export const SshLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
-                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
                     leftIcon={
                       <div className="w-6">
                         <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faHome} />
@@ -162,7 +162,7 @@ export const SshLayout = () => {
             </div>
           </nav>
         </motion.div>
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
+        <div className="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
           {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
           <Outlet />
         </div>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e99210352..a0b78f9f5 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -62,7 +62,7 @@ const router = createRouter({
   routeTree,
   context: { serverConfig: null, queryClient },
   defaultPendingComponent: () => (
-    <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
+    <div className="bg-bunker-800 flex h-screen w-screen items-center justify-center">
       <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
     </div>
   ),
diff --git a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
index 8128a53e0..3a0869a7c 100644
--- a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
@@ -9,11 +9,11 @@ export const AccessManagementPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Access Control" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Access Control"
diff --git a/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx b/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx
index 5b34aa029..a401026aa 100644
--- a/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx
+++ b/frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx
@@ -215,7 +215,7 @@ const ServerAdminsPanelTable = ({
                                   <div className="relative">
                                     <FontAwesomeIcon icon={faShieldHalved} />
                                     <FontAwesomeIcon
-                                      className="absolute -right-1 -bottom-[0.01rem]"
+                                      className="absolute -bottom-[0.01rem] -right-1"
                                       size="2xs"
                                       icon={faXmark}
                                     />
@@ -365,11 +365,11 @@ export const ServerAdminsTable = () => {
           selectedUsers.length > 0 && "h-16"
         )}
       >
-        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
           <div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
           <button
             type="button"
-            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
             onClick={() => setSelectedUsers([])}
           >
             Unselect All
@@ -390,7 +390,7 @@ export const ServerAdminsTable = () => {
           </Button>
         </div>
       </div>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <ServerAdminsPanelTable
           handlePopUpOpen={handlePopUpOpen}
           users={users}
@@ -442,10 +442,10 @@ export const ServerAdminsTable = () => {
           onDeleteApproved={() => handleRemoveUsers()}
           buttonText="Remove"
         >
-          <div className="mt-4 text-sm text-mineshaft-400">
+          <div className="text-mineshaft-400 mt-4 text-sm">
             The following users will be deleted:
           </div>
-          <div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
+          <div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border p-4 pl-8 text-sm text-red-200">
             <ul className="list-disc">
               {selectedUsers?.map((user) => {
                 const email = user.email ?? user.username;
@@ -467,7 +467,7 @@ export const ServerAdminsTable = () => {
                           <div className="inline-block">
                             <Badge
                               variant="primary"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
                             >
                               <FontAwesomeIcon icon={faWarning} />
                               <span>Deleting Yourself</span>
diff --git a/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx b/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
index f803d3f5c..cd4db09a2 100644
--- a/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
+++ b/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
@@ -9,11 +9,11 @@ export const AuthenticationPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Authentication"
diff --git a/frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx b/frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx
index 2abb96e60..1ad119cfa 100644
--- a/frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx
+++ b/frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx
@@ -111,12 +111,12 @@ export const AuthenticationPageForm = () => {
 
   return (
     <form
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
       onSubmit={handleSubmit(onAuthFormSubmit)}
     >
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">Login Methods</div>
-        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">Login Methods</div>
+        <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
           Select the login methods you wish to allow for all users of this instance.
         </div>
         <Controller
diff --git a/frontend/src/pages/admin/CachingPage/CachingPage.tsx b/frontend/src/pages/admin/CachingPage/CachingPage.tsx
index db8089813..46305cfa7 100644
--- a/frontend/src/pages/admin/CachingPage/CachingPage.tsx
+++ b/frontend/src/pages/admin/CachingPage/CachingPage.tsx
@@ -9,11 +9,11 @@ export const CachingPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title="Caching" description="Manage caching for your Infisical instance." />
           <CachingPageForm />
diff --git a/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx b/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx
index cac64d135..5ba140920 100644
--- a/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx
+++ b/frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx
@@ -57,10 +57,10 @@ export const CachingPageForm = () => {
 
   return (
     <>
-      <div className="mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border p-4">
         <div className="flex flex-col">
           <div className="mb-2 flex items-center gap-3">
-            <span className="text-xl font-medium text-mineshaft-100">Secrets Cache</span>
+            <span className="text-mineshaft-100 text-xl font-medium">Secrets Cache</span>
             {isInvalidating && (
               <Badge
                 variant="danger"
@@ -71,7 +71,7 @@ export const CachingPageForm = () => {
               </Badge>
             )}
           </div>
-          <span className="max-w-xl text-sm text-mineshaft-400">
+          <span className="text-mineshaft-400 max-w-xl text-sm">
             The encrypted secrets cache encompasses all secrets stored within the system and
             provides a temporary, secure storage location for frequently accessed credentials.
           </span>
diff --git a/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx b/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
index 96af9a712..49c168708 100644
--- a/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
+++ b/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
@@ -9,11 +9,11 @@ export const EncryptionPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Encryption"
diff --git a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx
index 69f4139a2..e7ea7b315 100644
--- a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx
+++ b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx
@@ -77,16 +77,16 @@ export const EncryptionPageForm = () => {
   return (
     <>
       <form
-        className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
         onSubmit={handleSubmit(onSubmit)}
       >
         <div className="flex flex-col justify-start">
           <div className="flex w-full justify-between">
-            <div className="mb-2 text-xl font-medium text-mineshaft-100">
+            <div className="text-mineshaft-100 mb-2 text-xl font-medium">
               KMS Encryption Strategy
             </div>
           </div>
-          <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
             Select which type of encryption strategy you want to use for your KMS root key. HSM is
             supported on Enterprise plans.
           </div>
@@ -102,7 +102,7 @@ export const EncryptionPageForm = () => {
                   isError={Boolean(error)}
                 >
                   <Select
-                    className="w-full bg-mineshaft-700"
+                    className="bg-mineshaft-700 w-full"
                     dropdownContainerClassName="bg-mineshaft-800"
                     defaultValue={field.value}
                     onValueChange={(e) => onChange(e)}
diff --git a/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx b/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
index 000dd1f0d..e8862e304 100644
--- a/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
+++ b/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
@@ -13,7 +13,7 @@ export const EnvironmentPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Environment Variables"
diff --git a/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx b/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx
index 59df496af..e03e86605 100644
--- a/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx
+++ b/frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx
@@ -40,7 +40,7 @@ export const GroupContainer = ({
   return (
     <div
       key={group.name}
-      className="overflow-clip border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b"
+      className="border-mineshaft-600 bg-mineshaft-800 overflow-clip border border-b-0 first:rounded-t-md last:rounded-b-md last:border-b"
     >
       <div
         className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
@@ -58,7 +58,7 @@ export const GroupContainer = ({
           icon={faChevronRight}
         />
 
-        <div className="grow text-base select-none">{group.name}</div>
+        <div className="grow select-none text-base">{group.name}</div>
       </div>
 
       {(open || search) && (
@@ -66,13 +66,13 @@ export const GroupContainer = ({
           {group.fields.map((field) => (
             <div
               key={field.key}
-              className="flex items-center justify-between gap-4 border-t border-mineshaft-500 bg-mineshaft-700/50 p-4"
+              className="border-mineshaft-500 bg-mineshaft-700/50 flex items-center justify-between gap-4 border-t p-4"
             >
               <div className="flex max-w-lg flex-col">
                 <span className="text-sm">
                   <HighlightText text={field.key} highlight={search} />
                 </span>
-                <span className="text-sm text-mineshaft-400">
+                <span className="text-mineshaft-400 text-sm">
                   <HighlightText text={field.description} highlight={search} />
                 </span>
               </div>
@@ -208,19 +208,19 @@ export const EnvironmentPageForm = () => {
 
   return (
     <form
-      className="flex flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 flex flex-col gap-4 rounded-lg border p-4"
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="flex w-full flex-row items-center justify-between">
         <div>
           <div className="flex items-start gap-1">
-            <p className="text-xl font-medium text-mineshaft-100">Overrides</p>
+            <p className="text-mineshaft-100 text-xl font-medium">Overrides</p>
             <a
               href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -230,7 +230,7 @@ export const EnvironmentPageForm = () => {
               </div>
             </a>
           </div>
-          <p className="text-sm text-bunker-300">
+          <p className="text-bunker-300 text-sm">
             Override specific environment variables. After saving, it may take up to 5 minutes for
             variables to propagate throughout every container.
           </p>
diff --git a/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx b/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
index e5a76e93c..eebde73e8 100644
--- a/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
+++ b/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
@@ -11,11 +11,11 @@ export const GeneralPage = () => {
   const { data: serverConfig } = useGetServerConfig();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="General"
diff --git a/frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx b/frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx
index be92dd679..bc61df051 100644
--- a/frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx
+++ b/frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx
@@ -103,12 +103,12 @@ export const GeneralPageForm = () => {
 
   return (
     <form
-      className="space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 space-y-6 rounded-lg border p-4"
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">Allow user signups</div>
-        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">Allow user signups</div>
+        <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
           Select if you want users to be able to signup freely into your Infisical instance.
         </div>
         <Controller
@@ -117,7 +117,7 @@ export const GeneralPageForm = () => {
           render={({ field: { onChange, ...field }, fieldState: { error } }) => (
             <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
               <Select
-                className="w-full bg-mineshaft-700"
+                className="bg-mineshaft-700 w-full"
                 dropdownContainerClassName="bg-mineshaft-800"
                 defaultValue={field.value}
                 onValueChange={(e) => onChange(e)}
@@ -132,7 +132,7 @@ export const GeneralPageForm = () => {
       </div>
       {signUpMode === "anyone" && (
         <div className="flex flex-col justify-start">
-          <div className="mb-4 text-xl font-medium text-mineshaft-100">
+          <div className="text-mineshaft-100 mb-4 text-xl font-medium">
             Restrict signup by email domain(s)
           </div>
           <Controller
@@ -159,8 +159,8 @@ export const GeneralPageForm = () => {
       )}
 
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">Default organization</div>
-        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">Default organization</div>
+        <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
           Select the default organization you want to set for SAML/LDAP/OIDC/Github logins. When
           selected, user logins will be automatically scoped to the selected organization.
         </div>
@@ -171,7 +171,7 @@ export const GeneralPageForm = () => {
             <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
               <Select
                 placeholder="Allow all organizations"
-                className="w-full bg-mineshaft-700"
+                className="bg-mineshaft-700 w-full"
                 dropdownContainerClassName="bg-mineshaft-800"
                 defaultValue={field.value ?? " "}
                 onValueChange={(e) => onChange(e)}
@@ -197,8 +197,8 @@ export const GeneralPageForm = () => {
       </div>
 
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">Trust emails</div>
-        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">Trust emails</div>
+        <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
           Select if you want Infisical to trust external emails from SAML/LDAP/OIDC identity
           providers. If set to false, then Infisical will prompt SAML/LDAP/OIDC provisioned users to
           verify their email upon their first login.
@@ -257,8 +257,8 @@ export const GeneralPageForm = () => {
       </div>
 
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">Notices</div>
-        <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">Notices</div>
+        <div className="text-mineshaft-400 mb-4 max-w-lg text-sm">
           Configure system-wide notification banners and security messages. These settings control
           the text displayed to users during authentication and throughout their session
         </div>
@@ -274,7 +274,7 @@ export const GeneralPageForm = () => {
                 placeholder="**Auth Consent Message**"
                 {...field}
                 rows={3}
-                className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
+                className="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
               />
             </FormControl>
           )}
@@ -293,7 +293,7 @@ export const GeneralPageForm = () => {
                 placeholder='<div style="background-color: red">TOP SECRET</div>'
                 {...field}
                 rows={3}
-                className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
+                className="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
               />
             </FormControl>
           )}
diff --git a/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
index e5edd375c..54eb04e98 100644
--- a/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
@@ -9,11 +9,11 @@ export const IntegrationsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Integrations"
diff --git a/frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx b/frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx
index f29238c30..1b07b1c16 100644
--- a/frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx
+++ b/frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx
@@ -51,10 +51,10 @@ export const IntegrationsPageForm = () => {
   ];
 
   return (
-    <div className="mb-6 min-h-64 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 min-h-64 rounded-lg border p-4">
       <div className="mb-4">
-        <div className="text-xl font-medium text-mineshaft-100">Integrations</div>
-        <div className="text-sm text-mineshaft-300">
+        <div className="text-mineshaft-100 text-xl font-medium">Integrations</div>
+        <div className="text-mineshaft-300 text-sm">
           Configure your instance-wide settings to enable integration with third-party services.
         </div>
       </div>
diff --git a/frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx b/frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx
index 30cabf75d..0f0d88323 100644
--- a/frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx
+++ b/frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx
@@ -72,15 +72,15 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
           value="microsoft-teams-integration"
           className="data-[state=open]:border-none"
         >
-          <AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
+          <AccordionTrigger className="border-mineshaft-500 bg-mineshaft-700 flex h-fit w-full justify-start rounded-md border px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
-              <BsMicrosoftTeams className="text-lg group-hover:text-primary-400" />
+              <BsMicrosoftTeams className="group-hover:text-primary-400 text-lg" />
               <div className="text-[15px] font-medium">Microsoft Teams</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">
-            <div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
-              <div className="mb-2 max-w-lg text-sm text-mineshaft-300">
+            <div className="border-mineshaft-500 bg-mineshaft-700 flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 px-4 py-4">
+              <div className="text-mineshaft-300 mb-2 max-w-lg text-sm">
                 Step 1: Create and configure Microsoft Teams bot and Azure Resources. Please refer
                 to the documentation below for more information.
               </div>
@@ -93,7 +93,7 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
                   <Button colorSchema="secondary">Documentation</Button>
                 </a>
               </div>
-              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+              <div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
                 Step 2: Configure your instance-wide settings to enable integration with Microsoft
                 Teams. Copy the App ID and Client Secret from your Microsoft Teams bot&apos;s App
                 Registration page. The Client Secret is the password for the bot.
diff --git a/frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx b/frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx
index 9175692c5..b2c1aef22 100644
--- a/frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx
+++ b/frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx
@@ -105,15 +105,15 @@ export const SlackIntegrationForm = ({ adminIntegrationsConfig }: Props) => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Accordion type="single" collapsible className="w-full">
         <AccordionItem value="slack-integration" className="data-[state=open]:border-none">
-          <AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
+          <AccordionTrigger className="border-mineshaft-500 bg-mineshaft-700 flex h-fit w-full justify-start rounded-md border px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
-              <BsSlack className="text-lg group-hover:text-primary-400" />
+              <BsSlack className="group-hover:text-primary-400 text-lg" />
               <div className="text-[15px] font-medium">Slack</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">
-            <div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
-              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+            <div className="border-mineshaft-500 bg-mineshaft-700 flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 px-4 py-4">
+              <div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
                 Step 1: Create your Infisical Slack App
               </div>
               <div className="mb-6">
@@ -124,7 +124,7 @@ export const SlackIntegrationForm = ({ adminIntegrationsConfig }: Props) => {
                   Create Slack App
                 </Button>
               </div>
-              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+              <div className="text-mineshaft-300 mb-4 max-w-lg text-sm">
                 Step 2: Configure your instance-wide settings to enable integration with Slack. Copy
                 the values from the App Credentials page of your custom Slack App.
               </div>
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx b/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
index e9096d39a..5d7174d45 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
@@ -9,11 +9,11 @@ export const ResourceOverviewPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "Resource Overview" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Resource Overview"
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
index c493fe24d..5c3fd6ca6 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
@@ -139,7 +139,7 @@ const IdentityPanelTable = ({
                                   <div className="relative">
                                     <FontAwesomeIcon icon={faShieldHalved} />
                                     <FontAwesomeIcon
-                                      className="absolute -right-1 -bottom-[0.01rem]"
+                                      className="absolute -bottom-[0.01rem] -right-1"
                                       size="2xs"
                                       icon={faXmark}
                                     />
@@ -200,11 +200,11 @@ export const MachineIdentitiesTable = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-xl font-medium text-mineshaft-100">Machine Identities</p>
-          <p className="text-sm text-bunker-300">Manage machine identities across your instance.</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Machine Identities</p>
+          <p className="text-bunker-300 text-sm">Manage machine identities across your instance.</p>
         </div>
       </div>
       <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
index 9405505c8..a72e48423 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
@@ -200,15 +200,15 @@ const ViewMembersModalContent = ({
       />
       <TableContainer
         className={twMerge(
-          "mt-4 flex flex-1 flex-col border border-mineshaft-500 bg-mineshaft-700",
+          "border-mineshaft-500 bg-mineshaft-700 mt-4 flex flex-1 flex-col border",
           Boolean(filteredMembers.length) && "rounded-b-none"
         )}
       >
-        <Table className="overflow-y-auto bg-mineshaft-700">
+        <Table className="bg-mineshaft-700 overflow-y-auto">
           <THead className="sticky top-0 z-50">
             <Tr>
-              <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
-                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+              <Th className="bg-mineshaft-700 w-1/3 border-none p-0">
+                <div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
                   Name
                   <IconButton
                     variant="plain"
@@ -226,8 +226,8 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
-                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+              <Th className="bg-mineshaft-700 w-1/3 border-none p-0">
+                <div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
                   Email
                   <IconButton
                     variant="plain"
@@ -245,13 +245,13 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <Th className="w-1/4 border-none bg-mineshaft-700 p-0">
-                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+              <Th className="bg-mineshaft-700 w-1/4 border-none p-0">
+                <div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5">
                   Role
                 </div>
               </Th>
-              <Th className="w-5 border-none bg-mineshaft-700 p-0">
-                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5" />
+              <Th className="bg-mineshaft-700 w-5 border-none p-0">
+                <div className="border-mineshaft-500 flex h-12 w-full items-center border-b-2 px-3 py-2.5" />
               </Th>
             </Tr>
           </THead>
@@ -277,7 +277,7 @@ const ViewMembersModalContent = ({
                         status !== OrgMembershipStatus.Accepted && (
                           <Button
                             isDisabled={resendOrgInvite.isPending}
-                            className="ml-2 h-7 border-mineshaft-600 bg-mineshaft-800/50 font-normal"
+                            className="border-mineshaft-600 bg-mineshaft-800/50 ml-2 h-7 font-normal"
                             colorSchema="primary"
                             variant="outline_bg"
                             size="xs"
@@ -296,7 +296,7 @@ const ViewMembersModalContent = ({
                     </div>
                   </Td>
                   <Td className="max-w-0">
-                    <Badge className="flex w-fit max-w-full items-center gap-x-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
+                    <Badge className="bg-mineshaft-400/50 text-bunker-200 flex w-fit max-w-full items-center gap-x-1 whitespace-nowrap">
                       <p className="truncate capitalize">{member.role.replace("-", " ")}</p>
                       {Boolean(member.roleId) && (
                         <Tooltip content="This member has a custom role assigned.">
@@ -351,7 +351,7 @@ const ViewMembersModalContent = ({
         </Table>
         {!filteredMembers.length && (
           <EmptyState
-            className="my-auto bg-mineshaft-700"
+            className="bg-mineshaft-700 my-auto"
             title={
               members.length
                 ? "No organization members match search..."
@@ -363,7 +363,7 @@ const ViewMembersModalContent = ({
       </TableContainer>
       {Boolean(filteredMembers.length) && (
         <Pagination
-          className="rounded-b-md border border-t-0 bg-mineshaft-700"
+          className="bg-mineshaft-700 rounded-b-md border border-t-0"
           count={filteredMembers.length}
           page={page}
           perPage={perPage}
@@ -545,7 +545,7 @@ const OrganizationsPanelTable = ({
                           <Tooltip className="text-center" content="View Members">
                             <FontAwesomeIcon
                               icon={faEye}
-                              className="mr-1.5 text-mineshaft-300"
+                              className="text-mineshaft-300 mr-1.5"
                               size="sm"
                             />
                           </Tooltip>
@@ -711,11 +711,11 @@ export const OrganizationsTable = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-xl font-medium text-mineshaft-100">Organizations</p>
-          <p className="text-sm text-bunker-300">
+          <p className="text-mineshaft-100 text-xl font-medium">Organizations</p>
+          <p className="text-bunker-300 text-sm">
             Manage, join and view organizations across your instance.
           </p>
         </div>
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
index 74e9d5e7e..9cdcdaa23 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
@@ -136,7 +136,7 @@ const UserPanelTable = ({
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -275,7 +275,7 @@ const UserPanelTable = ({
                                     <div className="relative">
                                       <FontAwesomeIcon icon={faShieldHalved} />
                                       <FontAwesomeIcon
-                                        className="absolute -right-1 -bottom-[0.01rem]"
+                                        className="absolute -bottom-[0.01rem] -right-1"
                                         size="2xs"
                                         icon={faXmark}
                                       />
@@ -447,11 +447,11 @@ export const UserIdentitiesTable = () => {
           selectedUsers.length > 0 && "h-16"
         )}
       >
-        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
           <div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
           <button
             type="button"
-            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
             onClick={() => setSelectedUsers([])}
           >
             Unselect All
@@ -472,11 +472,11 @@ export const UserIdentitiesTable = () => {
           </Button>
         </div>
       </div>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <p className="text-xl font-medium text-mineshaft-100">User Identities</p>
-            <p className="text-sm text-bunker-300">Manage user identities across your instance.</p>
+            <p className="text-mineshaft-100 text-xl font-medium">User Identities</p>
+            <p className="text-bunker-300 text-sm">Manage user identities across your instance.</p>
           </div>
         </div>
         <UserPanelTable
@@ -539,10 +539,10 @@ export const UserIdentitiesTable = () => {
           onDeleteApproved={() => handleRemoveUsers()}
           buttonText="Delete"
         >
-          <div className="mt-4 text-sm text-mineshaft-400">
+          <div className="text-mineshaft-400 mt-4 text-sm">
             The following users will be deleted:
           </div>
-          <div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
+          <div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border p-4 pl-8 text-sm text-red-200">
             <ul className="list-disc">
               {selectedUsers?.map((user) => {
                 const email = user.email ?? user.username;
@@ -564,7 +564,7 @@ export const UserIdentitiesTable = () => {
                           <div className="inline-block">
                             <Badge
                               variant="primary"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
                             >
                               <FontAwesomeIcon icon={faWarning} />
                               <span>Deleting Yourself</span>
diff --git a/frontend/src/pages/admin/SignUpPage/SignUpPage.tsx b/frontend/src/pages/admin/SignUpPage/SignUpPage.tsx
index 04bd2f55c..31554f286 100644
--- a/frontend/src/pages/admin/SignUpPage/SignUpPage.tsx
+++ b/frontend/src/pages/admin/SignUpPage/SignUpPage.tsx
@@ -74,7 +74,7 @@ export const SignUpPage = () => {
   if (config?.initialized) return <ContentLoader text="Redirecting to admin page..." />;
 
   return (
-    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6">
       <Helmet>
         <title>{t("common.head-title", { title: t("signup.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -95,7 +95,7 @@ export const SignUpPage = () => {
             <div className="flex flex-col items-center space-y-2 text-center">
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
               <div className="pt-4 text-4xl">Welcome to Infisical</div>
-              <div className="pb-4 text-bunker-300">Create your first Super Admin Account</div>
+              <div className="text-bunker-300 pb-4">Create your first Super Admin Account</div>
             </div>
             <form onSubmit={handleSubmit(handleFormSubmit)}>
               <div className="mt-8">
diff --git a/frontend/src/pages/auth/CliRedirectPage/CliRedirectPage.tsx b/frontend/src/pages/auth/CliRedirectPage/CliRedirectPage.tsx
index 9df3f03fb..f932366f1 100644
--- a/frontend/src/pages/auth/CliRedirectPage/CliRedirectPage.tsx
+++ b/frontend/src/pages/auth/CliRedirectPage/CliRedirectPage.tsx
@@ -35,7 +35,7 @@ export const CliRedirectPage = () => {
   };
 
   return (
-    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
+    <div className="bg-bunker-800 flex flex-col justify-between md:h-screen">
       <Helmet>
         <title>Infisical CLI | Login Successful!</title>
         <link rel="icon" href="/infisical.ico" />
@@ -54,18 +54,18 @@ export const CliRedirectPage = () => {
         {cliToken ? (
           <>
             <div className="pb-4">
-              <p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
+              <p className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
                 Unable to reach CLI
               </p>
-              <p className="text-light mb-1 text-center text-lg text-mineshaft-400">
+              <p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
                 Your login was successful but, Infisical couldn&apos;t automatically push your login
                 token to the CLI.
               </p>
-              <p className="text-light mb-1 text-center text-lg text-mineshaft-400">
+              <p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
                 Please copy the token below and manually provide it to your CLI.
               </p>
             </div>
-            <div className="dark relative flex max-h-36 max-w-xl flex-col items-center space-y-4 overflow-y-auto rounded-md border border-mineshaft-700 bg-mineshaft-900 p-3">
+            <div className="border-mineshaft-700 bg-mineshaft-900 dark relative flex max-h-36 max-w-xl flex-col items-center space-y-4 overflow-y-auto rounded-md border p-3">
               <SecretInput value={cliToken as string} />
               <div className="mx-1 flex">
                 <IconButton
@@ -83,10 +83,10 @@ export const CliRedirectPage = () => {
           </>
         ) : (
           <>
-            <p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
+            <p className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
               Head back to your terminal
             </p>
-            <p className="text-light mb-1 text-lg text-mineshaft-400">
+            <p className="text-light text-mineshaft-400 mb-1 text-lg">
               You&apos;ve successfully logged in to the Infisical CLI
             </p>
           </>
diff --git a/frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx b/frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx
index 0f7935058..810fc770a 100644
--- a/frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx
+++ b/frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx
@@ -3,27 +3,27 @@ import { Link } from "@tanstack/react-router";
 
 export const EmailNotVerifiedPage = () => {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
       <Helmet>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
         </div>
       </Link>
       <div className="mx-auto flex w-full flex-col items-center justify-center">
-        <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
           Your email was not verified
         </h1>
         <p className="w-max justify-center text-center text-sm text-gray-400">
           Please try again. <br /> Note: If it still doesn&apos;t work, please reach out to us at
           support@infisical.com
         </p>
-        <div className="mt-6 flex flex-row text-sm text-bunker-400">
+        <div className="text-bunker-400 mt-6 flex flex-row text-sm">
           <Link to="/login">
-            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
               Back to Login
             </span>
           </Link>
diff --git a/frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx b/frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx
index 6800f5241..e0111deeb 100644
--- a/frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx
+++ b/frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx
@@ -62,7 +62,7 @@ export const LoginLdapPage = () => {
   };
 
   return (
-    <div className="flex h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
       <Helmet>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -71,7 +71,7 @@ export const LoginLdapPage = () => {
         <meta name="og:description" content={t("login.og-description") ?? ""} />
       </Helmet>
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img
             src="/images/gradientLogo.svg"
             style={{
@@ -83,12 +83,12 @@ export const LoginLdapPage = () => {
         </div>
       </Link>
       <div className="mx-auto w-full max-w-md md:px-6">
-        <p className="mx-auto mb-8 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <p className="bg-linear-to-b to-bunker-200 mx-auto mb-8 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
           What&apos;s your LDAP Login?
         </p>
         <form onSubmit={handleSubmission}>
           {!config.defaultAuthOrgSlug && !passedOrgSlug && (
-            <div className="relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
+            <div className="md:min-w-88 relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
               <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
                 <Input
                   value={organizationSlug}
@@ -103,7 +103,7 @@ export const LoginLdapPage = () => {
               </div>
             </div>
           )}
-          <div className="relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
+          <div className="md:min-w-88 relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
             <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
               <Input
                 value={username}
@@ -118,7 +118,7 @@ export const LoginLdapPage = () => {
               />
             </div>
           </div>
-          <div className="relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
+          <div className="md:min-w-88 relative mx-auto mt-2 flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
             <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
               <Input
                 value={password}
@@ -132,7 +132,7 @@ export const LoginLdapPage = () => {
               />
             </div>
           </div>
-          <div className="mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-88 lg:w-1/6">
+          <div className="md:min-w-88 mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center lg:w-1/6">
             <Button
               type="submit"
               colorSchema="primary"
@@ -150,7 +150,7 @@ export const LoginLdapPage = () => {
               navigate({ to: "/login" });
             }}
             type="button"
-            className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+            className="text-bunker-300 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4"
           >
             {t("login.other-option")}
           </button>
diff --git a/frontend/src/pages/auth/LoginPage/LoginPage.tsx b/frontend/src/pages/auth/LoginPage/LoginPage.tsx
index 807176496..b1c4c9f26 100644
--- a/frontend/src/pages/auth/LoginPage/LoginPage.tsx
+++ b/frontend/src/pages/auth/LoginPage/LoginPage.tsx
@@ -64,7 +64,7 @@ export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
   };
 
   return (
-    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6">
       <Helmet>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -73,7 +73,7 @@ export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
         <meta name="og:description" content={t("login.og-description") ?? ""} />
       </Helmet>
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img
             src="/images/gradientLogo.svg"
             style={{
diff --git a/frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx b/frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
index b36dcd283..1109467ec 100644
--- a/frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
@@ -176,7 +176,7 @@ export const InitialStep = ({
         onSubmit={handleLogin}
         className="mx-auto flex w-full flex-col items-center justify-center"
       >
-        <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
           Login to Infisical
         </h1>
         <RegionSelect />
@@ -215,7 +215,7 @@ export const InitialStep = ({
       onSubmit={handleLogin}
       className="mx-auto flex w-full flex-col items-center justify-center"
     >
-      <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
         Login to Infisical
       </h1>
       <RegionSelect />
@@ -284,7 +284,7 @@ export const InitialStep = ({
                 window.open(`/api/v1/sso/redirect/google${queryString ? `?${queryString}` : ""}`);
                 window.close();
               }}
-              className="h-10 w-full bg-mineshaft-600"
+              className="bg-mineshaft-600 h-10 w-full"
             >
               <FontAwesomeIcon icon={faGoogle} />
             </IconButton>
@@ -313,7 +313,7 @@ export const InitialStep = ({
                 window.open(`/api/v1/sso/redirect/github${queryString ? `?${queryString}` : ""}`);
                 window.close();
               }}
-              className="h-10 w-full bg-mineshaft-600"
+              className="bg-mineshaft-600 h-10 w-full"
             >
               <FontAwesomeIcon icon={faGithub} />
             </IconButton>
@@ -342,7 +342,7 @@ export const InitialStep = ({
                 window.open(`/api/v1/sso/redirect/gitlab${queryString ? `?${queryString}` : ""}`);
                 window.close();
               }}
-              className="h-10 w-full bg-mineshaft-600"
+              className="bg-mineshaft-600 h-10 w-full"
             >
               <FontAwesomeIcon icon={faGitlab} />
             </IconButton>
@@ -352,9 +352,9 @@ export const InitialStep = ({
       {(!config.enabledLoginMethods ||
         (shouldDisplayLoginMethod(LoginMethod.EMAIL) && config.enabledLoginMethods.length > 1)) && (
         <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
-          <div className="w-full border-t border-mineshaft-400/60" />
-          <span className="mx-2 text-xs text-mineshaft-200">or</span>
-          <div className="w-full border-t border-mineshaft-400/60" />
+          <div className="border-mineshaft-400/60 w-full border-t" />
+          <span className="text-mineshaft-200 mx-2 text-xs">or</span>
+          <div className="border-mineshaft-400/60 w-full border-t" />
         </div>
       )}
       {shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
@@ -415,9 +415,9 @@ export const InitialStep = ({
         shouldDisplayLoginMethod(LoginMethod.GOOGLE) ||
         shouldDisplayLoginMethod(LoginMethod.GITHUB) ||
         shouldDisplayLoginMethod(LoginMethod.GITLAB)) ? (
-        <div className="mt-6 flex flex-row text-sm text-bunker-400">
+        <div className="text-bunker-400 mt-6 flex flex-row text-sm">
           <Link to="/signup">
-            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
               Don&apos;t have an account yet? {t("login.create-account")}
             </span>
           </Link>
@@ -426,9 +426,9 @@ export const InitialStep = ({
         <div className="mt-4" />
       )}
       {shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
-        <div className="mt-2 flex flex-row text-sm text-bunker-400">
+        <div className="text-bunker-400 mt-2 flex flex-row text-sm">
           <Link to="/verify-email">
-            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
               Forgot password? Recover your account
             </span>
           </Link>
diff --git a/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx b/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
index 3e13d6d08..93ddf0b7b 100644
--- a/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
+++ b/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
@@ -301,7 +301,7 @@ export const PasswordStep = ({
 
   if (shouldShowMfa) {
     return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+      <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto">
         <Mfa
           email={email}
           successCallback={mfaSuccessCallback}
@@ -326,7 +326,7 @@ export const PasswordStep = ({
 
   if (hasExchangedPrivateKey) {
     return (
-      <div className="fixed top-0 left-0 h-screen w-screen bg-bunker-800">
+      <div className="bg-bunker-800 fixed left-0 top-0 h-screen w-screen">
         <ContentLoader />
       </div>
     );
@@ -335,11 +335,11 @@ export const PasswordStep = ({
   return (
     <form onSubmit={handleLogin} className="mx-auto h-full w-full max-w-md px-6 pt-8">
       <div className="mb-8">
-        <p className="mx-auto mb-4 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <p className="bg-linear-to-b to-bunker-200 mx-auto mb-4 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
           What&apos;s your Infisical password?
         </p>
       </div>
-      <div className="relative mx-auto flex max-h-24 w-full min-w-88 items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
+      <div className="min-w-88 relative mx-auto flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
         <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
           <Input
             value={password}
@@ -354,7 +354,7 @@ export const PasswordStep = ({
         </div>
       </div>
       {shouldShowCaptcha && envConfig.CAPTCHA_SITE_KEY && (
-        <div className="mx-auto mt-4 flex w-full min-w-88 items-center justify-center lg:w-1/6">
+        <div className="min-w-88 mx-auto mt-4 flex w-full items-center justify-center lg:w-1/6">
           <HCaptcha
             theme="dark"
             sitekey={envConfig.CAPTCHA_SITE_KEY}
@@ -363,7 +363,7 @@ export const PasswordStep = ({
           />
         </div>
       )}
-      <div className="mx-auto mt-4 flex w-full min-w-88 items-center justify-center rounded-md text-center lg:w-1/6">
+      <div className="min-w-88 mx-auto mt-4 flex w-full items-center justify-center rounded-md text-center lg:w-1/6">
         <Button
           disabled={shouldShowCaptcha && captchaToken === ""}
           type="submit"
@@ -376,13 +376,13 @@ export const PasswordStep = ({
           {t("login.login")}
         </Button>
       </div>
-      <div className="mx-auto mt-4 flex w-max flex-col items-center text-xs text-bunker-400">
+      <div className="text-bunker-400 mx-auto mt-4 flex w-max flex-col items-center text-xs">
         <span className="max-w-sm px-4 text-center duration-200">
           Infisical Master Password serves as a decryption mechanism so that even Google is not able
           to access your secrets.
         </span>
         <Link to="/verify-email">
-          <span className="mt-2 cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+          <span className="hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
             {t("login.forgot-password")}
           </span>
         </Link>
@@ -393,7 +393,7 @@ export const PasswordStep = ({
             navigate({ to: "/login" });
           }}
           type="button"
-          className="mt-2 cursor-pointer text-xs text-bunker-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+          className="text-bunker-400 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-xs duration-200 hover:underline hover:underline-offset-4"
         >
           {t("login.other-option")}
         </button>
diff --git a/frontend/src/pages/auth/LoginPage/components/SSOStep/SSOStep.tsx b/frontend/src/pages/auth/LoginPage/components/SSOStep/SSOStep.tsx
index 82852edc9..fbb2b31c7 100644
--- a/frontend/src/pages/auth/LoginPage/components/SSOStep/SSOStep.tsx
+++ b/frontend/src/pages/auth/LoginPage/components/SSOStep/SSOStep.tsx
@@ -36,11 +36,11 @@ export const SSOStep = ({ setStep, type }: Props) => {
 
   return (
     <div className="mx-auto w-full max-w-md md:px-6">
-      <p className="mx-auto mb-8 flex w-max justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <p className="bg-linear-to-b to-bunker-200 mx-auto mb-8 flex w-max justify-center from-white bg-clip-text text-center text-xl font-medium text-transparent">
         What&apos;s your organization slug?
       </p>
       <form onSubmit={handleSubmission}>
-        <div className="relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-88 lg:w-1/6">
+        <div className="md:min-w-88 relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 lg:w-1/6">
           <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
             <Input
               value={ssoIdentifier}
@@ -54,7 +54,7 @@ export const SSOStep = ({ setStep, type }: Props) => {
             />
           </div>
         </div>
-        <div className="mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-88 lg:w-1/6">
+        <div className="md:min-w-88 mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center lg:w-1/6">
           <Button
             type="submit"
             colorSchema="primary"
@@ -72,7 +72,7 @@ export const SSOStep = ({ setStep, type }: Props) => {
             setStep(0);
           }}
           type="button"
-          className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+          className="text-bunker-300 hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4"
         >
           {t("login.other-option")}
         </button>
diff --git a/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx b/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx
index b66ebe9e4..82f6a295e 100644
--- a/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx
+++ b/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx
@@ -43,7 +43,7 @@ export const LoginSsoPage = () => {
   };
 
   return (
-    <div className="flex h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
       <Helmet>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -52,7 +52,7 @@ export const LoginSsoPage = () => {
         <meta name="og:description" content={t("login.og-description") ?? ""} />
       </Helmet>
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img
             src="/images/gradientLogo.svg"
             style={{ height: "90px", width: "120px" }}
diff --git a/frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx b/frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx
index 49252f16a..64267a190 100644
--- a/frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx
+++ b/frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx
@@ -36,9 +36,9 @@ export const PasswordResetPage = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
         </div>
       </Link>
diff --git a/frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx b/frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx
index 4818c5f2f..c87e308bb 100644
--- a/frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx
+++ b/frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx
@@ -20,7 +20,7 @@ export const ConfirmEmailStep = ({ onComplete }: Props) => {
   } = useVerifyPasswordResetCode();
   return (
     <div className="mx-auto flex w-full flex-col items-center justify-center">
-      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
         Confirm your email
       </h1>
       <p className="mb-8 w-max justify-center text-center text-sm text-gray-400">
diff --git a/frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx b/frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx
index 39d5c66fe..718946062 100644
--- a/frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx
+++ b/frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx
@@ -171,7 +171,7 @@ export const EnterPasswordStep = ({
       onSubmit={handleSubmit(resetPasswordHandler)}
       className="mx-auto flex w-full flex-col items-center justify-center"
     >
-      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
         Enter new password
       </h1>
       <p className="w-max justify-center text-center text-sm text-gray-400">
@@ -222,13 +222,13 @@ export const EnterPasswordStep = ({
       passwordErrorEscapeChar ||
       passwordErrorLowEntropy ||
       passwordErrorBreached ? (
-        <div className="mt-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 drop-shadow-sm">
+        <div className="border-mineshaft-600 bg-mineshaft-800 mt-4 rounded-sm border p-4 drop-shadow-sm">
           <div className="mb-1 ml-2 text-sm text-gray-300">Password should contain:</div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorTooShort ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
               at least 14 characters
@@ -236,9 +236,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorTooLong ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
               at most 100 characters
@@ -246,9 +246,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorNoLetterChar ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div
               className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -258,9 +258,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorNoNumOrSpecialChar ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div
               className={`${
@@ -272,9 +272,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorRepeatedChar ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div
               className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -284,9 +284,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorEscapeChar ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div
               className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -296,9 +296,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorLowEntropy ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div
               className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -308,9 +308,9 @@ export const EnterPasswordStep = ({
           </div>
           <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorBreached ? (
-              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
+              <FontAwesomeIcon icon={faXmark} className="text-red mr-2.5 text-lg" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
             )}
             <div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
               Password was found in a data breach.
diff --git a/frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx b/frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx
index 9adc04e1d..678b09827 100644
--- a/frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx
+++ b/frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx
@@ -45,7 +45,7 @@ export const InputBackupKeyStep = ({ verificationToken, onComplete }: Props) =>
       onSubmit={handleSubmit(getEncryptedKeyHandler)}
       className="mx-auto flex w-full flex-col items-center justify-center"
     >
-      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
         Enter your backup key
       </h1>
       <p className="w-max justify-center text-center text-sm text-gray-400">
diff --git a/frontend/src/pages/auth/PasswordSetupPage/PasswordSetupPage.tsx b/frontend/src/pages/auth/PasswordSetupPage/PasswordSetupPage.tsx
index a1dad3cc5..8a2523705 100644
--- a/frontend/src/pages/auth/PasswordSetupPage/PasswordSetupPage.tsx
+++ b/frontend/src/pages/auth/PasswordSetupPage/PasswordSetupPage.tsx
@@ -96,11 +96,11 @@ export const PasswordSetupPage = () => {
     passwordErrorBreached;
 
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center bg-bunker-800">
+    <div className="bg-bunker-800 flex h-screen w-full flex-col items-center justify-center">
       <form onSubmit={handleSetPassword}>
-        <Card className="flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 px-8 py-4">
+        <Card className="border-mineshaft-600 flex w-full max-w-lg flex-col rounded-md border px-8 py-4">
           <CardTitle
-            className="p-0 pt-2 pb-4 text-left text-xl"
+            className="p-0 pb-4 pt-2 text-left text-xl"
             subTitle="Make sure to store your password somewhere safe."
           >
             <div className="flex flex-row items-center">
@@ -173,13 +173,13 @@ export const PasswordSetupPage = () => {
               }
             />
           </FormControl>
-          <div className="mb-4 flex w-full max-w-md flex-col items-start rounded-md bg-mineshaft-700 px-2 py-2 transition-opacity duration-100">
+          <div className="bg-mineshaft-700 mb-4 flex w-full max-w-md flex-col items-start rounded-md px-2 py-2 transition-opacity duration-100">
             <div className="mb-1 text-sm text-gray-400">Password must contain:</div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorTooShort ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -189,9 +189,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorTooLong ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -201,9 +201,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorNoLetterChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -213,9 +213,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorNoNumOrSpecialChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${
@@ -227,9 +227,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorRepeatedChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -239,9 +239,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorEscapeChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -251,9 +251,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorLowEntropy ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -263,9 +263,9 @@ export const PasswordSetupPage = () => {
             </div>
             <div className="ml-1 flex flex-row items-center justify-start">
               {passwordErrorBreached ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
               )}
               <div
                 className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}
diff --git a/frontend/src/pages/auth/RequestNewInvitePage/RequestNewInvitePage.tsx b/frontend/src/pages/auth/RequestNewInvitePage/RequestNewInvitePage.tsx
index d99a73e4f..a0950c93d 100644
--- a/frontend/src/pages/auth/RequestNewInvitePage/RequestNewInvitePage.tsx
+++ b/frontend/src/pages/auth/RequestNewInvitePage/RequestNewInvitePage.tsx
@@ -6,16 +6,16 @@ import { Helmet } from "react-helmet";
  */
 export const RequestNewInvitePage = () => {
   return (
-    <div className="flex flex-col justify-between bg-bunker-700 md:h-screen">
+    <div className="bg-bunker-700 flex flex-col justify-between md:h-screen">
       <Helmet>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="mt-8 flex h-screen w-screen flex-col items-center justify-center text-bunker-200">
-        <p className="text-4xl text-primary-100">Oops, your invite has expired.</p>
+      <div className="text-bunker-200 mt-8 flex h-screen w-screen flex-col items-center justify-center">
+        <p className="text-primary-100 text-4xl">Oops, your invite has expired.</p>
         <p className="my-4 text-lg">Ask your admin for a new one.</p>
-        <p className="max-w-xs px-7 text-center text-sm leading-tight text-bunker-400">
-          <span className="rounded-md bg-primary-500/40 px-1 text-black">Note:</span> If it still
+        <p className="text-bunker-400 max-w-xs px-7 text-center text-sm leading-tight">
+          <span className="bg-primary-500/40 rounded-md px-1 text-black">Note:</span> If it still
           doesn&apos;t work, please reach out to us at support@infisical.com
         </p>
       </div>
diff --git a/frontend/src/pages/auth/SelectOrgPage/EmailDuplicationConfirmation.tsx b/frontend/src/pages/auth/SelectOrgPage/EmailDuplicationConfirmation.tsx
index 5fa158f93..8d90cdbf6 100644
--- a/frontend/src/pages/auth/SelectOrgPage/EmailDuplicationConfirmation.tsx
+++ b/frontend/src/pages/auth/SelectOrgPage/EmailDuplicationConfirmation.tsx
@@ -37,7 +37,7 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
   }, [logout, navigate]);
 
   return (
-    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto">
       <Helmet>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -45,7 +45,7 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
         <meta property="og:title" content={t("login.og-title") ?? ""} />
         <meta name="og:description" content={t("login.og-description") ?? ""} />
       </Helmet>
-      <div className="mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 border-mineshaft-500 p-10 shadow-lg">
+      <div className="border-mineshaft-500 mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 p-10 shadow-lg">
         <Link to="/">
           <div className="mb-4 flex justify-center">
             <img
@@ -60,29 +60,29 @@ export const EmailDuplicationConfirmation = ({ onRemoveDuplicateLater }: Props)
         </Link>
         <form className="mx-auto flex w-full flex-col items-center justify-center">
           <div className="mb-6">
-            <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
               Multiple Accounts Detected
             </h1>
             <p className="text-md mb-4 text-center text-white">
               <span className="text-slate-300">You&apos;re currently logged in as</span>{" "}
               <b>{duplicateAccounts?.data?.myAccount?.username}</b>.
             </p>
-            <div className="mt-4 mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
-              <p className="mt-1 mb-2 text-sm text-bunker-300">
+            <div className="border-l-primary bg-mineshaft-300/5 mb-4 mt-4 flex flex-col rounded-r border-l-2 px-4 py-2.5">
+              <p className="text-bunker-300 mb-2 mt-1 text-sm">
                 We&apos;ve detected multiple accounts using variations of the same email address.
               </p>
             </div>
           </div>
-          <div className="mb-4 w-full border-b border-mineshaft-400 pb-1 text-sm text-mineshaft-200">
+          <div className="border-mineshaft-400 text-mineshaft-200 mb-4 w-full border-b pb-1 text-sm">
             Your other accounts
           </div>
-          <div className="flex h-full max-h-60 thin-scrollbar w-full flex-col items-stretch gap-2 overflow-auto rounded-md">
+          <div className="thin-scrollbar flex h-full max-h-60 w-full flex-col items-stretch gap-2 overflow-auto rounded-md">
             {duplicateAccounts?.data?.duplicateAccounts?.map((el) => {
               const lastSession = el.devices?.at(-1);
               return (
                 <div
                   key={el.id}
-                  className="flex items-center gap-8 rounded-md bg-mineshaft-700 px-4 py-3 text-gray-200"
+                  className="bg-mineshaft-700 flex items-center gap-8 rounded-md px-4 py-3 text-gray-200"
                 >
                   <div className="group flex grow flex-col">
                     <div className="truncate text-sm transition-colors">{el.username}</div>
diff --git a/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx b/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
index b22f0f0fa..cc4e81497 100644
--- a/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
+++ b/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
@@ -12,7 +12,7 @@ export const SelectOrganizationPage = () => {
 
   if (duplicateAccounts.isPending) {
     return (
-      <div className="h-screen w-screen bg-bunker-800">
+      <div className="bg-bunker-800 h-screen w-screen">
         <ContentLoader />
       </div>
     );
diff --git a/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx b/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
index 4a7ef739e..3accbe316 100644
--- a/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
+++ b/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
@@ -247,14 +247,14 @@ export const SelectOrganizationSection = () => {
     ((isInitialOrgCheckLoading || defaultSelectedOrg) && !shouldShowMfa)
   ) {
     return (
-      <div className="h-screen w-screen bg-bunker-800">
+      <div className="bg-bunker-800 h-screen w-screen">
         <ContentLoader />
       </div>
     );
   }
 
   return (
-    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto">
       <Helmet>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -269,7 +269,7 @@ export const SelectOrganizationSection = () => {
           method={requiredMfaMethod}
         />
       ) : (
-        <div className="mx-auto mt-20 w-fit rounded-lg border-2 border-mineshaft-500 p-10 shadow-lg">
+        <div className="border-mineshaft-500 mx-auto mt-20 w-fit rounded-lg border-2 p-10 shadow-lg">
           <Link to="/">
             <div className="mb-4 flex justify-center">
               <img
@@ -284,7 +284,7 @@ export const SelectOrganizationSection = () => {
           </Link>
           <form className="mx-auto flex w-full flex-col items-center justify-center">
             <div className="mb-8 space-y-2">
-              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
                 Choose your organization
               </h1>
               <div className="space-y-1">
@@ -308,13 +308,13 @@ export const SelectOrganizationSection = () => {
                   <div
                     onClick={() => handleSelectOrganization(org)}
                     key={org.id}
-                    className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 text-gray-200 capitalize shadow-md transition-colors hover:bg-mineshaft-600"
+                    className="bg-mineshaft-700 hover:bg-mineshaft-600 group flex cursor-pointer items-center justify-between rounded-md px-4 py-3 capitalize text-gray-200 shadow-md transition-colors"
                   >
                     <p className="truncate transition-colors">{org.name}</p>
 
                     <FontAwesomeIcon
                       icon={faArrowRight}
-                      className="text-gray-400 transition-all group-hover:translate-x-2 group-hover:text-primary-500"
+                      className="group-hover:text-primary-500 text-gray-400 transition-all group-hover:translate-x-2"
                     />
                   </div>
                 ))
diff --git a/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx b/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx
index a002a1716..18b4a99ed 100644
--- a/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx
+++ b/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx
@@ -138,11 +138,11 @@ export const SignupInvitePage = () => {
 
   // Step 4 of the sign up process (download the emergency kit pdf)
   const stepConfirmEmail = (
-    <div className="mx-1 mb-36 flex h-7/12 w-full max-w-xs flex-col items-center rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-4 py-8 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
-      <p className="mb-2 flex justify-center text-center text-4xl font-medium text-primary-100">
+    <div className="h-7/12 border-mineshaft-600 bg-mineshaft-800 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl border px-4 py-8 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
+      <p className="text-primary-100 mb-2 flex justify-center text-center text-4xl font-medium">
         Confirm your email
       </p>
-      <div className="mx-auto mt-4 mb-2 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
+      <div className="mx-auto mb-2 mt-4 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
         <Button
           onClick={async () => {
             try {
@@ -179,8 +179,8 @@ export const SignupInvitePage = () => {
 
   // Because this is the invite signup - we directly go to the last step of signup (email is already verified)
   const main = (
-    <div className="mx-auto mb-32 h-7/12 w-max rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-8 py-10 drop-shadow-xl md:mb-16">
-      <p className="mx-8 mb-6 flex justify-center bg-linear-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
+    <div className="h-7/12 border-mineshaft-600 bg-mineshaft-800 mx-auto mb-32 w-max rounded-xl border px-8 py-10 drop-shadow-xl md:mb-16">
+      <p className="bg-linear-to-tr from-mineshaft-300 mx-8 mb-6 flex justify-center to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
         Almost there!
       </p>
       <div className="relative z-0 flex max-h-24 w-full items-center justify-end rounded-lg md:p-2">
@@ -232,7 +232,7 @@ export const SignupInvitePage = () => {
                 return (
                   <div className="items-top ml-1 flex flex-row justify-start" key={key}>
                     <div>
-                      <FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
+                      <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
                     </div>
                     <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
                   </div>
@@ -259,7 +259,7 @@ export const SignupInvitePage = () => {
   );
 
   return (
-    <div className="flex h-screen flex-col items-center justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col items-center justify-center">
       <Helmet>
         <title>Sign Up</title>
         <link rel="icon" href="/infisical.ico" />
@@ -274,7 +274,7 @@ export const SignupInvitePage = () => {
       ) : (
         <>
           <Link to="/">
-            <div className="mt-20 mb-4 flex justify-center">
+            <div className="mb-4 mt-20 flex justify-center">
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
             </div>
           </Link>
diff --git a/frontend/src/pages/auth/SignUpPage/SignUpPage.tsx b/frontend/src/pages/auth/SignUpPage/SignUpPage.tsx
index df5f64d40..13845056b 100644
--- a/frontend/src/pages/auth/SignUpPage/SignUpPage.tsx
+++ b/frontend/src/pages/auth/SignUpPage/SignUpPage.tsx
@@ -125,7 +125,7 @@ export const SignUpPage = () => {
   };
 
   return (
-    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto px-6 pb-28">
       <Helmet>
         <title>{t("common.head-title", { title: t("signup.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -133,7 +133,7 @@ export const SignUpPage = () => {
         <meta property="og:title" content={t("signup.og-title") as string} />
         <meta name="og:description" content={t("signup.og-description") as string} />
       </Helmet>
-      <div className="mt-20 mb-4 flex justify-center">
+      <div className="mb-4 mt-20 flex justify-center">
         <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
       </div>
       <form onSubmit={(e) => e.preventDefault()}>{renderView(step)}</form>
diff --git a/frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx b/frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx
index eeca64e5a..33693569e 100644
--- a/frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx
+++ b/frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx
@@ -67,7 +67,7 @@ export const SignupSsoPage = () => {
   };
 
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
       <Helmet>
         <title>{t("common.head-title", { title: t("signup.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -75,7 +75,7 @@ export const SignupSsoPage = () => {
         <meta property="og:title" content={t("signup.og-title") as string} />
         <meta name="og:description" content={t("signup.og-description") as string} />
       </Helmet>
-      <div className="mt-20 mb-4 flex justify-center">
+      <div className="mb-4 mt-20 flex justify-center">
         <img
           src="/images/gradientLogo.svg"
           style={{
diff --git a/frontend/src/pages/auth/SignUpSsoPage/components/EmailConfirmationStep/EmailConfirmationStep.tsx b/frontend/src/pages/auth/SignUpSsoPage/components/EmailConfirmationStep/EmailConfirmationStep.tsx
index efa498749..e7f728129 100644
--- a/frontend/src/pages/auth/SignUpSsoPage/components/EmailConfirmationStep/EmailConfirmationStep.tsx
+++ b/frontend/src/pages/auth/SignUpSsoPage/components/EmailConfirmationStep/EmailConfirmationStep.tsx
@@ -138,7 +138,7 @@ export const EmailConfirmationStep = ({
 
   return (
     <div className="mx-auto h-full w-full pb-4 md:px-8">
-      <p className="text-md flex justify-center text-bunker-200">
+      <p className="text-md text-bunker-200 flex justify-center">
         We&apos;ve sent a verification code to {email}
       </p>
       <div className="mx-auto hidden w-max min-w-[20rem] md:block">
@@ -149,7 +149,7 @@ export const EmailConfirmationStep = ({
           fields={6}
           onChange={setCode}
           {...props}
-          className="mt-6 mb-2"
+          className="mb-2 mt-6"
         />
       </div>
       <div className="mx-auto mt-4 block w-max md:hidden">
@@ -160,11 +160,11 @@ export const EmailConfirmationStep = ({
           fields={6}
           onChange={setCode}
           {...propsPhone}
-          className="mt-2 mb-2"
+          className="mb-2 mt-2"
         />
       </div>
       {codeError && <Error text="Oops. Your code is wrong. Please try again." />}
-      <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
         <div className="text-l w-full py-1 text-lg">
           <Button
             type="submit"
@@ -184,15 +184,15 @@ export const EmailConfirmationStep = ({
       <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">Don&apos;t see the code?</span>
-          <div className="text-md mt-2 flex flex-row text-bunker-400">
+          <div className="text-md text-bunker-400 mt-2 flex flex-row">
             <button disabled={isLoading} onClick={resendCode} type="button">
-              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
                 {isResendingVerificationEmail ? "Resending..." : "Resend"}
               </span>
             </button>
           </div>
         </div>
-        <p className="pb-2 text-sm text-bunker-400">Make sure to check your spam inbox.</p>
+        <p className="text-bunker-400 pb-2 text-sm">Make sure to check your spam inbox.</p>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx b/frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx
index 1555bd255..d45f7d8b9 100644
--- a/frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx
+++ b/frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx
@@ -167,12 +167,12 @@ export const UserInfoSSOStep = ({
 
   return (
     <div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
-      <p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
+      <p className="text-medium bg-linear-to-b to-bunker-200 mx-8 mb-6 flex justify-center from-white bg-clip-text text-xl font-bold text-transparent md:mx-16">
         {t("signup.step3-message")}
       </p>
-      <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
+      <div className="md:border-mineshaft-600 md:bg-mineshaft-800 mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:px-8">
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
             Your Name
           </p>
           <Input
@@ -184,14 +184,14 @@ export const UserInfoSSOStep = ({
             className="h-12"
           />
           {nameError && (
-            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
               Please, specify your name
             </p>
           )}
         </div>
         {!forceDefaultOrg && providerOrganizationName === undefined && (
           <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-            <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+            <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
               Organization Name
             </p>
             <Input
@@ -204,7 +204,7 @@ export const UserInfoSSOStep = ({
               isDisabled={forceDefaultOrg}
             />
             {organizationNameError && (
-              <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+              <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
                 Please, specify your organization name
               </p>
             )}
@@ -212,7 +212,7 @@ export const UserInfoSSOStep = ({
         )}
         {providerOrganizationName === undefined && (
           <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-            <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+            <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
               Where did you hear about us? <span className="font-light">(optional)</span>
             </p>
             <Input
@@ -223,7 +223,7 @@ export const UserInfoSSOStep = ({
             />
           </div>
         )}
-        <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
           <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
diff --git a/frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx b/frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx
index 5e7bd9e94..7914737c1 100644
--- a/frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx
+++ b/frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx
@@ -43,7 +43,7 @@ export const VerifyEmailPage = () => {
   };
 
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+    <div className="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex min-h-screen flex-col justify-center px-6 pb-28">
       <Helmet>
         <title>Reset Password</title>
         <link rel="icon" href="/infisical.ico" />
@@ -55,7 +55,7 @@ export const VerifyEmailPage = () => {
         />
       </Helmet>
       <Link to="/">
-        <div className="mt-20 mb-4 flex justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img
             src="/images/gradientLogo.svg"
             style={{
@@ -71,7 +71,7 @@ export const VerifyEmailPage = () => {
           onSubmit={onSubmit}
           className="mx-auto flex w-full flex-col items-center justify-center"
         >
-          <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+          <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
             Forgot your password?
           </h1>
           <p className="w-max justify-center text-center text-sm text-gray-400">
@@ -102,9 +102,9 @@ export const VerifyEmailPage = () => {
               Continue
             </Button>
           </div>
-          <div className="mt-6 flex flex-row text-sm text-bunker-400">
+          <div className="text-bunker-400 mt-6 flex flex-row text-sm">
             <Link to="/login">
-              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
                 Back to Login
               </span>
             </Link>
@@ -113,16 +113,16 @@ export const VerifyEmailPage = () => {
       )}
       {step === 2 && (
         <div className="mx-auto flex w-full flex-col items-center justify-center">
-          <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+          <h1 className="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
             Look for an email in your inbox
           </h1>
           <p className="w-max max-w-lg justify-center text-center text-sm text-gray-400">
             If the email is in our system, you will receive an email at{" "}
             <span className="italic">{email}</span> with instructions on how to reset your password.
           </p>
-          <div className="mt-6 flex flex-row text-sm text-bunker-400">
+          <div className="text-bunker-400 mt-6 flex flex-row text-sm">
             <Link to="/login">
-              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
                 Back to Login
               </span>
             </Link>
diff --git a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
index 97d50b9bf..653701231 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
@@ -10,7 +10,7 @@ import { PkiAlertsSection } from "./components";
 export const AlertingPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
       <Helmet>
         <title>{t("common.head-title", { title: "Alerting" })}</title>
       </Helmet>
diff --git a/frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertsSection.tsx b/frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertsSection.tsx
index 329974f65..f06d56d96 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertsSection.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertsSection.tsx
@@ -46,9 +46,9 @@ export const PkiAlertsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Alerts</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Alerts</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.PkiAlerts}
diff --git a/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionSection.tsx b/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionSection.tsx
index eecceaa7d..428ee2b3b 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionSection.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionSection.tsx
@@ -46,9 +46,9 @@ export const PkiCollectionSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Certificate Collections</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Certificate Collections</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.PkiCollections}
diff --git a/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx b/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx
index 44e3b912e..93bc610cc 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx
@@ -56,7 +56,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
               data?.collections.map((pkiCollection) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`pki-collection-${pkiCollection.id}`}
                     onClick={() =>
                       navigate({
diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
index 00c92aa11..2bf1d136c 100644
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
@@ -84,7 +84,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.name}>
diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx
index 8309a9e17..3c266a00c 100644
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx
@@ -6,9 +6,9 @@ type Props = {
 
 export const CaCertificatesSection = ({ caId }: Props) => {
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">CA Certificates</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">CA Certificates</h3>
         {/* <IconButton
           ariaLabel="copy icon"
           variant="plain"
diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx
index d5753b0f2..9dab4de11 100644
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx
@@ -6,9 +6,9 @@ type Props = {
 
 export const CaCrlsSection = ({ caId }: Props) => {
   return (
-    <div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">
           CA Certificate Revocation Lists (CRLs)
         </h3>
       </div>
diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx
index dd212eb40..a8d6063d3 100644
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx
@@ -38,9 +38,9 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
   const ca = data as TInternalCertificateAuthority;
 
   return ca ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">CA Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">CA Details</h3>
         <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Identity}>
           {(isAllowed) => {
             return (
@@ -66,13 +66,13 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">CA Type</p>
-          <p className="text-sm text-mineshaft-300">{caTypeToNameMap[ca.configuration.type]}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">CA Type</p>
+          <p className="text-mineshaft-300 text-sm">{caTypeToNameMap[ca.configuration.type]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">CA ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">CA ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{ca.id}</p>
+            <p className="text-mineshaft-300 text-sm">{ca.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -93,9 +93,9 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
         {ca.configuration.type === InternalCaType.INTERMEDIATE &&
           ca.status !== CaStatus.PENDING_CERTIFICATE && (
             <div className="mb-4">
-              <p className="text-sm font-medium text-mineshaft-300">Parent CA ID</p>
+              <p className="text-mineshaft-300 text-sm font-medium">Parent CA ID</p>
               <div className="group flex align-top">
-                <p className="text-sm text-mineshaft-300">
+                <p className="text-mineshaft-300 text-sm">
                   {ca.configuration.parentCaId
                     ? ca.configuration.parentCaId
                     : "N/A - External Parent CA"}
@@ -121,42 +121,42 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
             </div>
           )}
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{ca.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{ca.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Status</p>
-          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
+          <p className="text-mineshaft-300 text-sm">{caStatusToNameMap[ca.status]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Key Algorithm</p>
+          <p className="text-mineshaft-300 text-sm">
             {certKeyAlgorithmToNameMap[ca.configuration.keyAlgorithm]}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Max Path Length</p>
-          <p className="text-sm text-mineshaft-300">{ca.configuration.maxPathLength ?? "-"}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Max Path Length</p>
+          <p className="text-mineshaft-300 text-sm">{ca.configuration.maxPathLength ?? "-"}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Not Before</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Not Before</p>
+          <p className="text-mineshaft-300 text-sm">
             {ca.configuration.notBefore
               ? format(new Date(ca.configuration.notBefore), "yyyy-MM-dd")
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Not After</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Not After</p>
+          <p className="text-mineshaft-300 text-sm">
             {ca.configuration.notAfter
               ? format(new Date(ca.configuration.notAfter), "yyyy-MM-dd")
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Enable Direct Issuance</p>
-          <p className="text-sm text-mineshaft-300">{ca.enableDirectIssuance ? "True" : "False"}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Enable Direct Issuance</p>
+          <p className="text-mineshaft-300 text-sm">{ca.enableDirectIssuance ? "True" : "False"}</p>
         </div>
         {ca.status === CaStatus.ACTIVE && (
           <ProjectPermissionCan
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
index a2bff12ed..8e96f8484 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
@@ -11,7 +11,7 @@ import { CaSection } from "./components";
 export const CertificateAuthoritiesPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
       <Helmet>
         <title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
       </Helmet>
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaInstallCertModal/ExternalCaInstallForm.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaInstallCertModal/ExternalCaInstallForm.tsx
index f730322c9..d737e6c45 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaInstallCertModal/ExternalCaInstallForm.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaInstallCertModal/ExternalCaInstallForm.tsx
@@ -113,7 +113,7 @@ export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
             </div>
           </div>
           <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all whitespace-pre-wrap">{csr}</p>
+            <p className="mr-4 whitespace-pre-wrap break-all">{csr}</p>
           </div>
         </>
       )}
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
index e853dc801..fd8e6f7d3 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaSection.tsx
@@ -70,9 +70,9 @@ export const CaSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Internal Certificate Authorities</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Internal Certificate Authorities</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.CertificateAuthorities}
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx
index 81fce98c6..7c3798eda 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx
@@ -74,7 +74,7 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
               cas.map((ca) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`ca-${ca.id}`}
                     onClick={() =>
                       navigate({
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
index 14ce122ec..472310aaf 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaSection.tsx
@@ -74,9 +74,9 @@ export const ExternalCaSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">External Certificate Authorities</p>
+        <p className="text-mineshaft-100 text-xl font-medium">External Certificate Authorities</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.CertificateAuthorities}
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx
index a948473e8..117550e0f 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx
@@ -67,7 +67,7 @@ export const ExternalCaTable = ({ handlePopUpOpen }: Props) => {
               data.map((ca) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`ca-${ca.id}`}
                     onClick={() => {
                       handlePopUpOpen("ca", {
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx b/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
index f4258a4d5..ae6f98e55 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
@@ -27,7 +27,7 @@ export const CertificatesPage = () => {
   );
 
   return (
-    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
       <Helmet>
         <title>{t("common.head-title", { title: "Certificates" })}</title>
       </Helmet>
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateContent.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateContent.tsx
index 3284825d3..8c40af74f 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateContent.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateContent.tsx
@@ -92,7 +92,7 @@ export const CertificateContent = ({
         </div>
       </div>
       <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-        <p className="mr-4 break-all whitespace-pre-wrap">{certificate}</p>
+        <p className="mr-4 whitespace-pre-wrap break-all">{certificate}</p>
       </div>
       {certificateChain && (
         <>
@@ -127,7 +127,7 @@ export const CertificateContent = ({
             </div>
           </div>
           <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all whitespace-pre-wrap">{certificateChain}</p>
+            <p className="mr-4 whitespace-pre-wrap break-all">{certificateChain}</p>
           </div>
         </>
       )}
@@ -164,7 +164,7 @@ export const CertificateContent = ({
             </div>
           </div>
           <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all whitespace-pre-wrap">{privateKey}</p>
+            <p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
           </div>
         </>
       )}
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx
index 918aa7303..a8509fe17 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx
@@ -440,7 +440,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                           errorText={error?.message}
                           isError={Boolean(error)}
                         >
-                          <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                             {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                               return (
                                 <Checkbox
@@ -474,7 +474,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                           errorText={error?.message}
                           isError={Boolean(error)}
                         >
-                          <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                             {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                               return (
                                 <Checkbox
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx
index 849cbe832..e843c41d1 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateEnrollmentModal.tsx
@@ -198,7 +198,7 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
                   <TextArea
                     {...field}
                     isDisabled={disableBootstrapCertValidation}
-                    className="min-h-60 border-none bg-mineshaft-900 text-gray-400"
+                    className="bg-mineshaft-900 min-h-60 border-none text-gray-400"
                     reSize="none"
                   />
                 </FormControl>
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx
index 9d5d9355f..8f547e573 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx
@@ -399,7 +399,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                        <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                           {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                             return (
                               <Checkbox
@@ -432,7 +432,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                        <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                           {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                             return (
                               <Checkbox
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx
index c4d25a6ad..656a43bad 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx
@@ -63,9 +63,9 @@ export const CertificateTemplatesSection = ({ caId }: Props) => {
   };
 
   return (
-    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Certificate Templates</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Certificate Templates</h3>
         <ProjectPermissionCan
           I={ProjectPermissionPkiTemplateActions.Create}
           a={ProjectPermissionSub.CertificateTemplates}
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
index e29864544..7601a7473 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
@@ -52,9 +52,9 @@ export const CertificatesSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Certificates</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Certificates</p>
         <ProjectPermissionCan
           I={ProjectPermissionCertificateActions.Create}
           a={ProjectPermissionSub.Certificates}
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
index 10851d0e1..e52982ef0 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -42,7 +42,7 @@ export const IntegrationsListPage = () => {
         <meta property="og:title" content="Manage your certificates in seconds" />
         <meta name="og:description" content="Sync and manage PKI certificates across services" />
       </Helmet>
-      <div className="relative container mx-auto max-w-7xl pb-12 text-white">
+      <div className="container relative mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
             title="Integrations"
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx
index eb16166fc..de87995a9 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx
@@ -134,7 +134,7 @@ export const PkiSyncRow = ({
         });
       }}
       className={twMerge(
-        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
         syncStatus === PkiSyncStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`sync-${id}`}
@@ -146,7 +146,7 @@ export const PkiSyncRow = ({
           className="min-w-7"
         />
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div>
           <div className="flex w-full items-center">
             <p className="truncate">{name}</p>
@@ -155,12 +155,12 @@ export const PkiSyncRow = ({
                 <FontAwesomeIcon
                   icon={faInfoCircle}
                   size="xs"
-                  className="ml-1 text-mineshaft-400"
+                  className="text-mineshaft-400 ml-1"
                 />
               </Tooltip>
             )}
           </div>
-          <p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
+          <p className="text-bunker-300 truncate text-xs leading-4">{destinationDetails.name}</p>
         </div>
       </Td>
       {subscriberId ? (
@@ -192,7 +192,7 @@ export const PkiSyncRow = ({
               className="max-w-sm"
               content={
                 [PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].includes(syncStatus) ? (
-                  <div className="flex flex-col gap-2 py-1 whitespace-normal">
+                  <div className="flex flex-col gap-2 whitespace-normal py-1">
                     {lastSyncedAt && (
                       <div>
                         <div
@@ -200,22 +200,22 @@ export const PkiSyncRow = ({
                         >
                           <FontAwesomeIcon
                             icon={faCalendarCheck}
-                            className="ml-1 pt-0.5 pr-1.5 text-sm"
+                            className="ml-1 pr-1.5 pt-0.5 text-sm"
                           />
                           <div className="text-xs">Last Synced</div>
                         </div>
-                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
+                        <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
                           {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
                         </div>
                       </div>
                     )}
                     {failureMessage && (
                       <div>
-                        <div className="mb-2 flex self-start text-red">
-                          <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+                        <div className="text-red mb-2 flex self-start">
+                          <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                           <div className="text-xs">Failure Reason</div>
                         </div>
-                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+                        <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                           {failureMessage}
                         </div>
                       </div>
@@ -235,7 +235,7 @@ export const PkiSyncRow = ({
               content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
             >
               <div>
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                   <FontAwesomeIcon icon={faBan} />
                   {!syncStatus && "Auto-Sync Disabled"}
                 </Badge>
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncTableCell.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncTableCell.tsx
index e2526351e..1d498acd5 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncTableCell.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncTableCell.tsx
@@ -23,7 +23,7 @@ export const PkiSyncTableCell = ({
   secondaryClassName
 }: PkiSyncTableCellProps) => {
   return (
-    <Td className="max-w-0 min-w-32!">
+    <Td className="min-w-32! max-w-0">
       <Tooltip
         side="left"
         className="max-w-2xl break-words"
@@ -31,7 +31,7 @@ export const PkiSyncTableCell = ({
           <>
             <p className="text-sm">{primaryText}</p>
             {secondaryText && (
-              <p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
+              <p className={twMerge("text-bunker-300 text-xs leading-3", secondaryClassName)}>
                 {secondaryText}
               </p>
             )}
@@ -46,20 +46,20 @@ export const PkiSyncTableCell = ({
               <FontAwesomeIcon
                 size="xs"
                 icon={faInfoCircle}
-                className="ml-1 inline-block text-bunker-300"
+                className="text-bunker-300 ml-1 inline-block"
               />
             )}
           </p>
           {secondaryText && (
             <p
-              className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
+              className={twMerge("text-bunker-300 truncate text-xs leading-4", secondaryClassName)}
             >
               {secondaryText}
               {infoBadge === "secondary" && (
                 <FontAwesomeIcon
                   size="xs"
                   icon={faInfoCircle}
-                  className="ml-1 inline-block text-bunker-300"
+                  className="text-bunker-300 ml-1 inline-block"
                 />
               )}
             </p>
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncsTable.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncsTable.tsx
index ca4aa7473..19d813d91 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncsTable.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncsTable.tsx
@@ -285,14 +285,14 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
             {[PkiSyncStatus.Running, PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].map(
               (status) => (
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx
index 564eeb789..bba677d98 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx
@@ -60,17 +60,17 @@ export const PkiSyncsTab = () => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-start gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Certificate Syncs</p>
               <a
                 href="https://infisical.com/docs/integrations/pki-syncs/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -80,7 +80,7 @@ export const PkiSyncsTab = () => {
                 </div>
               </a>
             </div>
-            <p className="text-sm text-bunker-300">
+            <p className="text-bunker-300 text-sm">
               Use App Connections to sync certificates to third-party services.
             </p>
           </div>
diff --git a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
index 5ca305743..06e355377 100644
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
@@ -70,7 +70,7 @@ export const PkiCollectionPage = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.name}>
diff --git a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx
index 0f82209c9..224686683 100644
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx
@@ -21,9 +21,9 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
   const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
 
   return pkiCollection ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Collection Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Collection Details</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Edit}
           a={ProjectPermissionSub.PkiCollections}
@@ -51,9 +51,9 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">PKI Collection ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">PKI Collection ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{pkiCollection.id}</p>
+            <p className="text-mineshaft-300 text-sm">{pkiCollection.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -72,12 +72,12 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{pkiCollection.name}</p>
         </div>
         <div>
-          <p className="text-sm font-medium text-mineshaft-300">Description</p>
-          <p className="text-sm text-mineshaft-300">{pkiCollection.description}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Description</p>
+          <p className="text-mineshaft-300 text-sm">{pkiCollection.description}</p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx
index ea787611c..96e872b84 100644
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx
@@ -45,9 +45,9 @@ export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
   const sectionName = type === PkiItemType.CA ? "Certificate Authorities" : "Certificates";
 
   return pkiCollection ? (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">{sectionName}</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">{sectionName}</h3>
         <IconButton
           ariaLabel="copy icon"
           variant="plain"
diff --git a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
index 682ed4253..9515e7cc9 100644
--- a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
@@ -75,7 +75,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.name}>
diff --git a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx
index 11c39bd76..856e6d067 100644
--- a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesSection.tsx
@@ -11,9 +11,9 @@ export const PkiSubscriberCertificatesSection = ({ subscriberName }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["revokeCertificate"] as const);
 
   return (
-    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Certificates</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 h-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Certificates</h3>
       </div>
       <div className="py-4">
         <PkiSubscriberCertificatesTable
diff --git a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx
index f9c94740a..fce3e6ef5 100644
--- a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx
@@ -112,9 +112,9 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
   );
 
   return pkiSubscriber ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">PKI Subscriber Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">PKI Subscriber Details</h3>
         <ProjectPermissionCan
           I={ProjectPermissionPkiSubscriberActions.Edit}
           a={ProjectPermissionSub.PkiSubscribers}
@@ -143,9 +143,9 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">PKI Subscriber ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">PKI Subscriber ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{pkiSubscriber.id}</p>
+            <p className="text-mineshaft-300 text-sm">{pkiSubscriber.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -164,23 +164,23 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{pkiSubscriber.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Status</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
+          <p className="text-mineshaft-300 text-sm">
             {pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Common Name</p>
-          <p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Common Name</p>
+          <p className="text-mineshaft-300 text-sm">{pkiSubscriber.commonName}</p>
         </div>
         {pkiSubscriber.lastOperationAt && (
           <div className="mb-4">
-            <p className="text-sm font-medium text-mineshaft-300">Last Operation (Local Time)</p>
-            <p className="text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 text-sm font-medium">Last Operation (Local Time)</p>
+            <p className="text-mineshaft-300 text-sm">
               {new Date(pkiSubscriber.lastOperationAt).toLocaleString()}
             </p>
           </div>
@@ -188,7 +188,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
         {pkiSubscriber.lastOperationStatus === SubscriberOperationStatus.FAILED && (
           <div className="mb-4">
             <GenericFieldLabel labelClassName="text-red" label="Last Operation Status">
-              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+              <p className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                 {pkiSubscriber.lastOperationMessage}
               </p>
             </GenericFieldLabel>
diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
index c95e9490e..e537e5426 100644
--- a/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
@@ -12,7 +12,7 @@ export const PkiSubscribersPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "PKI Subscribers" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
+      <div className="bg-bunker-800 h-full">
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx
index 4bc427e48..932f3201b 100644
--- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx
@@ -655,7 +655,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                               errorText={error?.message}
                               isError={Boolean(error)}
                             >
-                              <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                              <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                                 {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                                   return (
                                     <Checkbox
@@ -688,7 +688,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                               errorText={error?.message}
                               isError={Boolean(error)}
                             >
-                              <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                              <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                                 {EXTENDED_KEY_USAGES_OPTIONS.map(
                                   ({ label, value: optionValue }) => {
                                     return (
diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx
index 984ef45ae..80561ab00 100644
--- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberSection.tsx
@@ -83,16 +83,16 @@ export const PkiSubscriberSection = () => {
   const subscriberName = subscriberStatusData?.subscriberName || "";
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Subscribers</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Subscribers</p>
         <div className="flex w-full justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://infisical.com/docs/documentation/platform/pki/subscribers"
           >
-            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+            <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
               Documentation{" "}
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx
index d28c2d3a2..3d8b5edb0 100644
--- a/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx
@@ -71,7 +71,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
               data.map((subscriber) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`pki-subscriber-${subscriber.id}`}
                     onClick={() =>
                       navigate({
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
index 26d2b43f9..c5d6d3a51 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
@@ -68,7 +68,7 @@ const PageContent = () => {
 
   return (
     <>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
+      <div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <Button
             variant="link"
@@ -92,11 +92,11 @@ const PageContent = () => {
             <img
               alt={`${destinationDetails.name} sync`}
               src={`/images/integrations/${destinationDetails.image}`}
-              className="mt-3 ml-1 w-16"
+              className="ml-1 mt-3 w-16"
             />
             <div>
               <p className="text-3xl font-medium text-white">{pkiSync.name}</p>
-              <p className="leading-3 text-bunker-300">{destinationDetails.name} PKI Sync</p>
+              <p className="text-bunker-300 leading-3">{destinationDetails.name} PKI Sync</p>
             </div>
             <PkiSyncActionTriggers pkiSync={pkiSync} />
           </div>
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx
index 462678280..23d4fda1f 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx
@@ -132,7 +132,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
 
   return (
     <>
-      <div className="mt-4 ml-auto flex flex-wrap items-center justify-end gap-2">
+      <div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
         {syncOption?.canImportCertificates && <PkiSyncImportStatusBadge pkiSync={pkiSync} />}
         <PkiSyncRemoveStatusBadge pkiSync={pkiSync} />
         {pkiSync.isAutoSyncEnabled ? (
@@ -149,7 +149,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
             content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
           >
             <div>
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faBan} />
                 <span>Auto-Sync Disabled</span>
               </Badge>
@@ -165,7 +165,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
               <Button
                 variant="outline_bg"
                 leftIcon={<FontAwesomeIcon icon={faRotate} />}
-                className="h-9 rounded-r-none bg-mineshaft-500"
+                className="bg-mineshaft-500 h-9 rounded-r-none"
                 isDisabled={!isAllowed || triggerSyncMutation.isPending}
                 isLoading={triggerSyncMutation.isPending}
                 onClick={handleTriggerSync}
@@ -179,7 +179,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
               <IconButton
                 ariaLabel="add-folder-or-import"
                 variant="outline_bg"
-                className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
+                className="border-mineshaft border-l-mineshaft-700 bg-mineshaft-500 h-9 w-10 rounded-l-none border-l-2"
               >
                 <FontAwesomeIcon icon={faEllipsisV} />
               </IconButton>
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncAuditLogsSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncAuditLogsSection.tsx
index 0f9f4a90c..18146b3c2 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncAuditLogsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncAuditLogsSection.tsx
@@ -24,11 +24,11 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
   const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
 
   return (
-    <div className="flex max-h-full w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Sync Logs</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex max-h-full w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Sync Logs</h3>
         {subscription.auditLogs && (
-          <p className="text-xs text-bunker-300">
+          <p className="text-bunker-300 text-xs">
             Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
           </p>
         )}
@@ -47,7 +47,7 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
           }}
         />
       ) : (
-        <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
+        <div className="bg-mineshaft-800 text-mineshaft-200 flex h-full items-center justify-center rounded-lg text-sm">
           <div className="flex flex-col items-center gap-4 py-20">
             <FontAwesomeIcon size="2x" icon={faFingerprint} />
             <p>
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
index af16fbffd..0e8dc30cd 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
@@ -15,7 +15,7 @@ import { AzureKeyVaultPkiSyncDestinationSection } from "./PkiSyncDestinationSect
 
 const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
   <div>
-    <label className="text-sm text-bunker-300">{label}</label>
+    <label className="text-bunker-300 text-sm">{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -45,9 +45,9 @@ export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props)
   });
 
   return (
-    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Destination Configuration</h3>
         <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AzureKeyVaultPkiSyncDestinationSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AzureKeyVaultPkiSyncDestinationSection.tsx
index 7c1cc8b14..39ff1e9a8 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AzureKeyVaultPkiSyncDestinationSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AzureKeyVaultPkiSyncDestinationSection.tsx
@@ -3,7 +3,7 @@ import { TAzureKeyVaultPkiSync } from "@app/hooks/api/pkiSyncs/types/azure-key-v
 
 const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
   <div>
-    <label className="text-sm text-bunker-300">{label}</label>
+    <label className="text-bunker-300 text-sm">{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDetailsSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDetailsSection.tsx
index 7514bab50..806918cb0 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDetailsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDetailsSection.tsx
@@ -22,7 +22,7 @@ const GenericFieldLabel = ({
   labelClassName?: string;
 }) => (
   <div>
-    <label className={`text-sm text-bunker-300 ${labelClassName || ""}`}>{label}</label>
+    <label className={`text-bunker-300 text-sm ${labelClassName || ""}`}>{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -55,9 +55,9 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
   });
 
   return (
-    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Details</h3>
         <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
@@ -91,7 +91,7 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
           )}
           {syncStatus === PkiSyncStatus.Failed && failureMessage && (
             <GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
-              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+              <p className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                 {failureMessage}
               </p>
             </GenericFieldLabel>
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx
index 3af7bf189..7bcd82bf4 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx
@@ -25,9 +25,9 @@ export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
 
   return (
     <div>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <h3 className="font-medium text-mineshaft-100">Sync Options</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+          <h3 className="text-mineshaft-100 font-medium">Sync Options</h3>
           <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
             {(isAllowed) => (
               <IconButton
diff --git a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx
index 5885795e2..e2323b338 100644
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx
@@ -11,7 +11,7 @@ import { TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
   <div>
-    <label className="text-sm text-bunker-300">{label}</label>
+    <label className="text-bunker-300 text-sm">{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -30,9 +30,9 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
 
   return (
     <div>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <h3 className="font-medium text-mineshaft-100">Source</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+          <h3 className="text-mineshaft-100 font-medium">Source</h3>
           <div>
             {!subscriberId && (
               <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
index fe8f98aea..146170b71 100644
--- a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
@@ -102,7 +102,7 @@ export const PkiTemplateListPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "PKI Templates" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
+      <div className="bg-bunker-800 h-full">
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
@@ -110,9 +110,9 @@ export const PkiTemplateListPage = () => {
               description="Manage certificate template to request and issue dynamic certificates following a strict format."
             />
           </div>
-          <div className="container mx-auto mb-6 max-w-7xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 container mx-auto mb-6 max-w-7xl rounded-lg border p-4">
             <div className="mb-4 flex justify-between">
-              <p className="text-xl font-medium text-mineshaft-100">Templates</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Templates</p>
               <div className="flex w-full justify-end">
                 <ProjectPermissionCan
                   I={ProjectPermissionPkiTemplateActions.Create}
diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx
index 093a2fcc1..b8cdbfe1c 100644
--- a/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx
+++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx
@@ -327,7 +327,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                     errorText={error?.message}
                     isError={Boolean(error)}
                   >
-                    <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                    <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                       {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                         return (
                           <Checkbox
@@ -360,7 +360,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                     errorText={error?.message}
                     isError={Boolean(error)}
                   >
-                    <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                    <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                       {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
                         return (
                           <Checkbox
diff --git a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
index 22c1a6961..47687d2cd 100644
--- a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
@@ -16,7 +16,7 @@ export const SettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/kms/KmipPage/KmipPage.tsx b/frontend/src/pages/kms/KmipPage/KmipPage.tsx
index 9c337bba3..8cfa9770c 100644
--- a/frontend/src/pages/kms/KmipPage/KmipPage.tsx
+++ b/frontend/src/pages/kms/KmipPage/KmipPage.tsx
@@ -11,11 +11,11 @@ export const KmipPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "KMS" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="KMIP"
diff --git a/frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx b/frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx
index b3f3fb380..1d087759e 100644
--- a/frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx
+++ b/frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx
@@ -129,7 +129,7 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
         isError={Boolean(errors.description?.message)}
       >
         <TextArea
-          className="max-h-80 min-h-40 max-w-full min-w-full"
+          className="max-h-80 min-h-40 min-w-full max-w-full"
           {...register("description")}
         />
       </FormControl>
@@ -139,7 +139,7 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
         render={({ field: { onChange, value }, fieldState: { error } }) => {
           return (
             <FormControl label="Permissions" errorText={error?.message} isError={Boolean(error)}>
-              <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+              <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
                 {KMIP_PERMISSIONS_OPTIONS.map(({ label, value: optionValue }) => {
                   return (
                     <Checkbox
diff --git a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx
index 9ba85beef..3a997e3f6 100644
--- a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx
+++ b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx
@@ -141,16 +141,16 @@ export const KmipClientTable = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">KMIP Clients</p>
+          <p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">KMIP Clients</p>
           <div className="flex w-full justify-end pr-4">
             <a
               target="_blank"
               rel="noopener noreferrer"
               href="https://infisical.com/docs/documentation/platform/kms"
             >
-              <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
                 Documentation{" "}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
@@ -222,7 +222,7 @@ export const KmipClientTable = () => {
                   const { name, id, description, permissions } = kmipClient;
 
                   return (
-                    <Tr className="group h-10 hover:bg-mineshaft-700" key={`st-v3-${id}`}>
+                    <Tr className="hover:bg-mineshaft-700 group h-10" key={`st-v3-${id}`}>
                       <Td>{name}</Td>
                       <Td className="max-w-80 break-all">{description}</Td>
                       <Td className="max-w-40">{[permissions.join(", ")]}</Td>
@@ -232,7 +232,7 @@ export const KmipClientTable = () => {
                             <IconButton
                               variant="plain"
                               colorSchema="primary"
-                              className="ml-4 p-0 data-[state=open]:text-primary-400"
+                              className="data-[state=open]:text-primary-400 ml-4 p-0"
                               ariaLabel="More options"
                             >
                               <FontAwesomeIcon size="lg" icon={faEllipsis} />
diff --git a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
index d7b4b9fec..87420e817 100644
--- a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
@@ -11,11 +11,11 @@ export const OverviewPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: "KMS" })}</title>
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
             title="Overview Page"
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx
index 4c9cf685b..97f5dd8f5 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx
@@ -89,7 +89,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
       {plaintext ? (
         <FormControl label="Decrypted Data (plaintext)">
           <TextArea
-            className="max-h-80 min-h-40 max-w-full min-w-full"
+            className="max-h-80 min-h-40 min-w-full max-w-full"
             isDisabled
             value={plaintext}
           />
@@ -102,7 +102,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
         >
           <TextArea
             {...register("ciphertext")}
-            className="max-h-80 min-h-40 max-w-full min-w-full"
+            className="max-h-80 min-h-40 min-w-full max-w-full"
           />
         </FormControl>
       )}
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx
index 4fb09cf4e..036c84548 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx
@@ -81,7 +81,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
       {ciphertext ? (
         <FormControl label="Encrypted Data (Ciphertext)">
           <TextArea
-            className="max-h-80 min-h-40 max-w-full min-w-full"
+            className="max-h-80 min-h-40 min-w-full max-w-full"
             isDisabled
             value={cmekEncrypt.data?.ciphertext}
           />
@@ -95,7 +95,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
           >
             <TextArea
               {...register("plaintext")}
-              className="max-h-80 min-h-40 max-w-full min-w-full"
+              className="max-h-80 min-h-40 min-w-full max-w-full"
             />
           </FormControl>
           <Controller
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx
index c3cccd678..f1169342c 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx
@@ -211,7 +211,7 @@ const CmekForm = ({ onComplete, cmek }: FormProps) => {
         isError={Boolean(errors.description?.message)}
       >
         <TextArea
-          className="max-h-80 min-h-40 max-w-full min-w-full"
+          className="max-h-80 min-h-40 min-w-full max-w-full"
           {...register("description")}
         />
       </FormControl>
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx
index fec66a31f..24a20a2ee 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx
@@ -93,7 +93,7 @@ const SignForm = ({ cmek }: FormProps) => {
       {signature ? (
         <FormControl label="Data Signature">
           <TextArea
-            className="max-h-80 min-h-40 max-w-full min-w-full"
+            className="max-h-80 min-h-40 min-w-full max-w-full"
             isDisabled
             value={signature}
           />
@@ -105,7 +105,7 @@ const SignForm = ({ cmek }: FormProps) => {
             errorText={errors.data?.message}
             isError={Boolean(errors.data)}
           >
-            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 min-w-full max-w-full" />
           </FormControl>
 
           <div className="mb-6 flex w-full items-center justify-between gap-2">
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx
index bf721edfb..b866e7f85 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx
@@ -214,16 +214,16 @@ export const CmekTable = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">Keys</p>
+          <p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">Keys</p>
           <div className="flex w-full justify-end pr-4">
             <a
               target="_blank"
               rel="noopener noreferrer"
               href="https://infisical.com/docs/documentation/platform/kms"
             >
-              <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
                 Documentation{" "}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
@@ -298,7 +298,7 @@ export const CmekTable = () => {
 
                   return (
                     <Tr
-                      className="group h-10 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 group h-10"
                       key={`st-v3-${id}`}
                       onMouseLeave={() => {
                         setCopyCipherText("");
@@ -351,7 +351,7 @@ export const CmekTable = () => {
                               <IconButton
                                 variant="plain"
                                 colorSchema="primary"
-                                className="ml-4 p-0 data-[state=open]:text-primary-400"
+                                className="data-[state=open]:text-primary-400 ml-4 p-0"
                                 ariaLabel="More options"
                               >
                                 <FontAwesomeIcon size="lg" icon={faEllipsis} />
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx
index 4163beb5a..d26a5efc1 100644
--- a/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx
+++ b/frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx
@@ -139,13 +139,13 @@ const VerifyForm = ({ cmek }: FormProps) => {
           </div>
           <div className="mt-3">
             <span className="text-sm opacity-60">Signature:</span>{" "}
-            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 text-sm break-words whitespace-pre-wrap">
+            <div className="border-mineshaft-700 bg-mineshaft-900 whitespace-pre-wrap break-words rounded-md border p-2 text-sm">
               {signature}
             </div>
           </div>
           <div>
             <span className="text-sm opacity-60">Data:</span>{" "}
-            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 text-sm">
+            <div className="border-mineshaft-700 bg-mineshaft-900 rounded-md border p-2 text-sm">
               {isBase64Encoded ? decodeBase64(data).toString() : data}
             </div>
           </div>
@@ -157,7 +157,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
             errorText={errors.data?.message}
             isError={Boolean(errors.data)}
           >
-            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 min-w-full max-w-full" />
           </FormControl>
 
           <FormControl
@@ -168,7 +168,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
           >
             <TextArea
               {...register("signature")}
-              className="max-h-80 min-h-40 max-w-full min-w-full"
+              className="max-h-80 min-h-40 min-w-full max-w-full"
             />
           </FormControl>
 
diff --git a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
index cdc0582dc..ff67c85b3 100644
--- a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
@@ -16,7 +16,7 @@ export const SettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/middlewares/restrict-login-signup.tsx b/frontend/src/pages/middlewares/restrict-login-signup.tsx
index 7d60d9d95..dca1a752b 100644
--- a/frontend/src/pages/middlewares/restrict-login-signup.tsx
+++ b/frontend/src/pages/middlewares/restrict-login-signup.tsx
@@ -51,8 +51,8 @@ export const AuthConsentWrapper = () => {
   return (
     <>
       {config.authConsentContent && !hasConsented && (
-        <div className="bg-opacity-90 fixed inset-0 z-50 flex items-center justify-center bg-mineshaft-700/80">
-          <div className="max-h-[80vh] w-4/12 overflow-y-auto rounded-lg bg-bunker-800 p-6 text-white">
+        <div className="bg-mineshaft-700/80 fixed inset-0 z-50 flex items-center justify-center bg-opacity-90">
+          <div className="bg-bunker-800 max-h-[80vh] w-4/12 overflow-y-auto rounded-lg p-6 text-white">
             <ReactMarkdown rehypePlugins={[rehypeRaw]}>
               {DOMPurify.sanitize(config.authConsentContent)}
             </ReactMarkdown>
diff --git a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
index 74908e948..b0c24553b 100644
--- a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
@@ -76,7 +76,7 @@ export const AccessManagementPage = () => {
   const hasNoAccess = tabSections.every((tab) => tab.isHidden);
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
       </Helmet>
@@ -86,12 +86,12 @@ export const AccessManagementPage = () => {
           description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
         />
         {!currentOrg.shouldUseNewPrivilegeSystem && (
-          <div className="mt-4 mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+          <div className="border-l-primary bg-mineshaft-300/5 mb-4 mt-4 flex flex-col rounded-r border-l-2 px-4 py-2.5">
             <div className="mb-1 flex items-center text-sm">
-              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
               Your organization is using legacy privilege management
             </div>
-            <p className="mt-1 mb-2 text-sm text-bunker-300">
+            <p className="text-bunker-300 mb-2 mt-1 text-sm">
               We&apos;ve developed an improved privilege management system to better serve your
               security needs. Upgrade to our new permission-based approach that allows you to
               explicitly designate who can modify specific access levels, rather than relying on
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
index 753ebd93c..5e2fc42f4 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -55,9 +55,9 @@ export const OrgGroupsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Groups</p>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
index 61119fce1..6545e4cb1 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
@@ -249,7 +249,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                           }
                         })
                       }
-                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                       key={`org-group-${id}`}
                     >
                       <Td>{name}</Td>
@@ -264,7 +264,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               <Select
                                 value={role === "custom" ? (customRole?.slug as string) : role}
                                 isDisabled={!isAllowed}
-                                className="h-8 w-48 bg-mineshaft-700"
+                                className="bg-mineshaft-700 h-8 w-48"
                                 position="popper"
                                 dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                                 onValueChange={(selectedRole) =>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthTemplatesTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthTemplatesTable.tsx
index 517fc7823..c1aba9512 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthTemplatesTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthTemplatesTable.tsx
@@ -182,7 +182,7 @@ export const IdentityAuthTemplatesTable = ({ handlePopUpOpen }: Props) => {
             {!isPending &&
               templates?.map((template) => (
                 <Tr
-                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                  className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                   key={`template-${template.id}`}
                 >
                   <Td>{template.name}</Td>
@@ -192,7 +192,7 @@ export const IdentityAuthTemplatesTable = ({ handlePopUpOpen }: Props) => {
                     </div>
                   </Td>
                   <Td>
-                    <span className="text-sm text-mineshaft-400">
+                    <span className="text-mineshaft-400 text-sm">
                       {template.templateFields.url}
                     </span>
                   </Td>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx
index d2926e024..94ae41c8a 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx
@@ -343,7 +343,7 @@ export const IdentityKubernetesAuthForm = ({
                                   );
                                 }
                               }}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewayLoading}
                               placeholder="Default: Internet Gateway"
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx
index 224af9d5e..23be4c36a 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx
@@ -233,7 +233,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
             render={({ field: { onChange, value }, fieldState: { error } }) => (
               <FormControl errorText={error?.message} isError={Boolean(error)}>
                 <Switch
-                  className="mr-2 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                  className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-2 shadow-inner"
                   containerClassName="flex-row-reverse w-fit"
                   id="delete-protection-enabled"
                   thumbClassName="bg-mineshaft-800"
@@ -252,7 +252,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
             {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
               <div key={metadataFieldId} className="flex items-end space-x-2">
                 <div className="grow">
-                  {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+                  {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
                   <Controller
                     control={control}
                     name={`metadata.${i}.key`}
@@ -269,7 +269,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </div>
                 <div className="grow">
                   {i === 0 && (
-                    <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                    <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
                   )}
                   <Controller
                     control={control}
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
index 9280ab5d9..cb34debad 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -104,16 +104,16 @@ export const IdentitySection = withPermission(
 
     return (
       <div>
-        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Identities</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Identities</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -152,16 +152,16 @@ export const IdentitySection = withPermission(
           <IdentityTable handlePopUpOpen={handlePopUpOpen} />
         </div>
         {/* Identity Auth Templates Section */}
-        <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Identity Auth Templates</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/auth-templates"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
index b632318e6..9cc563136 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
@@ -192,7 +192,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-9.5 w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "h-9.5 border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex w-[2.6rem] items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -208,8 +208,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                   Apply Roles to Filter Identities
                 </DropdownMenuLabel>
                 {roles?.map(({ id, slug, name }) => (
@@ -302,7 +302,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                 }) => {
                   return (
                     <Tr
-                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                       key={`identity-${id}`}
                       onClick={() =>
                         navigate({
@@ -317,7 +317,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                         {name}
                         {lastLoginAuthMethod && lastLoginTime && (
                           <Tooltip
-                            className="max-w-96 min-w-52 px-3"
+                            className="min-w-52 max-w-96 px-3"
                             content={
                               <LastLoginSection
                                 lastLoginAuthMethod={identityAuthToNameMap[lastLoginAuthMethod]}
@@ -327,7 +327,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           >
                             <FontAwesomeIcon
                               icon={faInfoCircle}
-                              className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
+                              className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
                             />
                           </Tooltip>
                         )}
@@ -342,7 +342,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                               <Select
                                 value={role === "custom" ? (customRole?.slug as string) : role}
                                 isDisabled={!isAllowed}
-                                className="h-8 w-48 bg-mineshaft-700"
+                                className="bg-mineshaft-700 h-8 w-48"
                                 position="popper"
                                 dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                                 onValueChange={(selectedRole) =>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx
index d43d84c86..c4acdd076 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx
@@ -312,7 +312,7 @@ export const IdentityUniversalAuthForm = ({
         </TabList>
         <TabPanel value={IdentityFormTab.Configuration}>
           {accessTokenPeriodValue > 0 ? (
-            <div className="mb-4 text-xs text-bunker-400">
+            <div className="text-bunker-400 mb-4 text-xs">
               When Access Token Period is set, TTL and Max TTL are ignored.
             </div>
           ) : (
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/MachineAuthTemplateUsagesModal.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/MachineAuthTemplateUsagesModal.tsx
index 909391474..d4a2147e6 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/MachineAuthTemplateUsagesModal.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/MachineAuthTemplateUsagesModal.tsx
@@ -57,7 +57,7 @@ export const MachineAuthTemplateUsagesModal = ({
                 {!isPending &&
                   usages.map((usage) => (
                     <Tr
-                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                       key={`usage-${usage.identityId}`}
                       onClick={() =>
                         navigate({
@@ -70,7 +70,7 @@ export const MachineAuthTemplateUsagesModal = ({
                     >
                       <Td>{usage.identityName}</Td>
                       <Td>
-                        <span className="text-sm text-mineshaft-400">{usage.identityId}</span>
+                        <span className="text-mineshaft-400 text-sm">{usage.identityId}</span>
                       </Td>
                     </Tr>
                   ))}
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/lockout/LockoutTab.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/lockout/LockoutTab.tsx
index d5834d839..164e3975a 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/lockout/LockoutTab.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/lockout/LockoutTab.tsx
@@ -35,7 +35,7 @@ export const LockoutTab = ({
                 errorText={error?.message}
               >
                 <Switch
-                  className="mr-3 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                  className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-3 shadow-inner"
                   containerClassName="flex-row-reverse w-fit"
                   id="lockout-enabled"
                   thumbClassName="bg-mineshaft-800"
@@ -110,25 +110,25 @@ export const LockoutTab = ({
                   >
                     <SelectItem
                       value="s"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Seconds</div>
                     </SelectItem>
                     <SelectItem
                       value="m"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Minutes</div>
                     </SelectItem>
                     <SelectItem
                       value="h"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Hours</div>
                     </SelectItem>
                     <SelectItem
                       value="d"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Days</div>
                     </SelectItem>
@@ -177,19 +177,19 @@ export const LockoutTab = ({
                   >
                     <SelectItem
                       value="s"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Seconds</div>
                     </SelectItem>
                     <SelectItem
                       value="m"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Minutes</div>
                     </SelectItem>
                     <SelectItem
                       value="h"
-                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                     >
                       <div className="ml-3 font-medium">Hours</div>
                     </SelectItem>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx
index e49beadae..b7b39c1d8 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx
@@ -232,7 +232,7 @@ export const AddOrgMemberModal = ({
                 <FormControl label="Emails" isError={Boolean(error)} errorText={error?.message}>
                   <TextArea
                     {...field}
-                    className="ring-opacity-70 mt-1 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden transition-all placeholder:text-bunker-400 focus:ring-2"
+                    className="min-w-120 border-mineshaft-500 bg-mineshaft-900/70 text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 mt-1 h-20 w-full rounded-md border px-2 py-1 text-sm ring-opacity-70 transition-all focus:ring-2"
                     placeholder="email@example.com, email2@example.com..."
                   />
                 </FormControl>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx
index 2cd54e587..7a7999373 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx
@@ -27,10 +27,10 @@ export const OrgInviteLink = ({ invite }: Props) => {
 
   return (
     <div key={`invite-${invite.email}`}>
-      <p className="text-sm text-mineshaft-400">
+      <p className="text-mineshaft-400 text-sm">
         Invite for <span className="font-medium">{invite.email}</span>
       </p>
-      <div className="flex flex-col gap-1 rounded-md bg-white/4 p-2 text-base text-gray-400">
+      <div className="bg-white/4 flex flex-col gap-1 rounded-md p-2 text-base text-gray-400">
         <p
           className={twMerge(
             "mr-4 line-clamp-1",
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
index 010a12b38..84b66aa10 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -158,11 +158,11 @@ export const OrgMembersSection = () => {
           selectedMemberIds.length > 0 && "h-16"
         )}
       >
-        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
           <div className="mr-2 text-sm">{selectedMemberIds.length} Selected</div>
           <button
             type="button"
-            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
             onClick={() => setSelectedMemberIds([])}
           >
             Unselect All
@@ -201,9 +201,9 @@ export const OrgMembersSection = () => {
           </OrgPermissionCan>
         </div>
       </div>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">Users</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Users</p>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
             {(isAllowed) => (
               <Button
@@ -267,10 +267,10 @@ export const OrgMembersSection = () => {
           }
           buttonText="Remove"
         >
-          <div className="mt-4 text-sm text-mineshaft-400">
+          <div className="text-mineshaft-400 mt-4 text-sm">
             The following members will be removed:
           </div>
-          <div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
+          <div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border p-4 pl-8 text-sm text-red-200">
             <ul className="list-disc">
               {(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => {
                 const email = member.user.email ?? member.user.username ?? member.inviteEmail;
@@ -292,7 +292,7 @@ export const OrgMembersSection = () => {
                           <div className="inline-block">
                             <Badge
                               variant="danger"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
                             >
                               <FontAwesomeIcon icon={faBan} />
                               <span>Ignored</span>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
index e581c982f..faef80f43 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -332,7 +332,7 @@ export const OrgMembersTable = ({
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-9.5 w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "h-9.5 border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex w-[2.6rem] items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -348,8 +348,8 @@ export const OrgMembersTable = ({
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                   Apply Roles to Filter Users
                 </DropdownMenuLabel>
                 {roles?.map(({ id, slug, name }) => (
@@ -492,7 +492,7 @@ export const OrgMembersTable = ({
                   return (
                     <Tr
                       key={`org-membership-${orgMembershipId}`}
-                      className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 h-10 w-full cursor-pointer transition-colors duration-100"
                       onClick={() =>
                         navigate({
                           to: "/organization/members/$membershipId" as const,
@@ -525,7 +525,7 @@ export const OrgMembersTable = ({
                           </p>
                           {u.superAdmin && (
                             <Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
-                              <span className="hidden xl:inline">Server Admin</span>
+                              <span className="mr-1 hidden xl:inline">Server Admin</span>
                               <Tooltip content="Server Admin">
                                 <FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
                               </Tooltip>
@@ -533,7 +533,7 @@ export const OrgMembersTable = ({
                           )}
                           {lastLoginAuthMethod && lastLoginTime && (
                             <Tooltip
-                              className="max-w-96 min-w-52 px-3"
+                              className="min-w-52 max-w-96 px-3"
                               content={
                                 <LastLoginSection
                                   lastLoginAuthMethod={lastLoginAuthMethod}
@@ -543,7 +543,7 @@ export const OrgMembersTable = ({
                             >
                               <FontAwesomeIcon
                                 icon={faInfoCircle}
-                                className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
+                                className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
                               />
                             </Tooltip>
                           )}
@@ -561,7 +561,7 @@ export const OrgMembersTable = ({
                             <Select
                               value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
                               isDisabled={userId === u?.id || !isAllowed}
-                              className="h-8 w-48 bg-mineshaft-700"
+                              className="bg-mineshaft-700 h-8 w-48"
                               position="popper"
                               dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                               onValueChange={(selectedRole) =>
@@ -594,7 +594,7 @@ export const OrgMembersTable = ({
                                 {(isAllowed) => (
                                   <Button
                                     isDisabled={!isAllowed || isResendInvitePending}
-                                    className="h-8 border-mineshaft-600 bg-mineshaft-700 font-normal"
+                                    className="border-mineshaft-600 bg-mineshaft-700 h-8 font-normal"
                                     colorSchema="primary"
                                     variant="outline_bg"
                                     isLoading={
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
index 03de66a38..8d28316eb 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
@@ -198,9 +198,9 @@ export const OrgRoleTable = () => {
     orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Organization Roles</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Organization Roles</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
           {(isAllowed) => (
             <Button
@@ -282,7 +282,7 @@ export const OrgRoleTable = () => {
               return (
                 <Tr
                   key={`role-list-${id}`}
-                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                  className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                   onClick={() =>
                     navigate({
                       to: "/organization/roles/$roleId",
@@ -312,7 +312,7 @@ export const OrgRoleTable = () => {
                     {slug}
                   </Td>
                   <Td>
-                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
+                    <Badge className="bg-mineshaft-400/50 text-bunker-200 w-min whitespace-nowrap">
                       {isCustomProjectRole(slug) ? "Custom" : "Default"}
                     </Badge>
                   </Td>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx b/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
index 97aaff73d..31a5643b3 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
@@ -73,15 +73,15 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
       <ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
         {step === "info" ? (
           <div className="mb-4">
-            <p className="mb-4 text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 mb-4 text-sm">
               We&apos;ve developed an improved privilege management system that enhances how access
               controls work in your organization.
             </p>
 
-            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+            <div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
               <div className="mb-3">
                 <div className="mb-3">
-                  <p className="mb-3 text-sm text-mineshaft-300">
+                  <p className="text-mineshaft-300 mb-3 text-sm">
                     <strong>Current system: </strong>
                     Users with higher privilege levels can modify access for anyone below them. This
                     rigid hierarchy makes it difficult to implement precise access control policies,
@@ -89,7 +89,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                     specialized roles (like team leads) need to manage their team&apos;s access
                     without receiving broader administrative powers.
                   </p>
-                  <p className="text-sm text-mineshaft-300">
+                  <p className="text-mineshaft-300 text-sm">
                     <strong>New system:</strong> Users need explicit permission to modify specific
                     access levels, providing targeted control. After upgrading, you&apos;ll need to
                     grant the new &apos;Grant Privileges&apos; permission. At the organization
@@ -98,7 +98,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-groups"
                       target="_blank"
                       rel="noreferrer"
-                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                      className="hover:text-bunker-200 hover:decoration-primary-700 underline"
                     >
                       Group
                     </a>{" "}
@@ -107,7 +107,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-identity"
                       target="_blank"
                       rel="noreferrer"
-                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                      className="hover:text-bunker-200 hover:decoration-primary-700 underline"
                     >
                       Identity
                     </a>{" "}
@@ -116,7 +116,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-member"
                       target="_blank"
                       rel="noreferrer"
-                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                      className="hover:text-bunker-200 hover:decoration-primary-700 underline"
                     >
                       Member,
                     </a>{" "}
@@ -124,7 +124,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-groups"
                       target="_blank"
                       rel="noreferrer"
-                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                      className="hover:text-bunker-200 hover:decoration-primary-700 underline"
                     >
                       Group,
                     </a>{" "}
@@ -133,7 +133,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-identity"
                       target="_blank"
                       rel="noreferrer"
-                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                      className="hover:text-bunker-200 hover:decoration-primary-700 underline"
                     >
                       Identity
                     </a>{" "}
@@ -149,7 +149,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                 variant="solid"
                 colorSchema="primary"
                 size="md"
-                className="w-[120px] bg-primary hover:bg-primary-600"
+                className="bg-primary hover:bg-primary-600 w-[120px]"
               >
                 Continue
               </Button>
@@ -157,19 +157,19 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
           </div>
         ) : (
           <div className="mb-4">
-            <p className="mb-4 text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 mb-4 text-sm">
               Your existing access control workflows will continue to function. However, actions
               that involve modifying privileges or permissions will now use the new permission-based
               system, requiring users to have explicit permission to modify given resource.
             </p>
 
-            <p className="mb-4 text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 mb-4 text-sm">
               This upgrade affects operations like updating roles, managing group memberships, and
               modifying privileges across your organization and projects.
             </p>
 
-            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-              <p className="mb-4 text-sm text-mineshaft-300">
+            <div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
+              <p className="text-mineshaft-300 mb-4 text-sm">
                 Once upgraded, your organization <span className="font-bold">cannot</span> revert to
                 the legacy privilege system. Please ensure you&apos;ve completed all preparations
                 before proceeding.
@@ -268,7 +268,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                 <button
                   type="button"
                   onClick={() => setStep("info")}
-                  className="w-[120px] text-sm text-mineshaft-300 hover:text-mineshaft-200"
+                  className="text-mineshaft-300 hover:text-mineshaft-200 w-[120px] text-sm"
                 >
                   Cancel
                 </button>
@@ -285,7 +285,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       variant="solid"
                       colorSchema="primary"
                       size="md"
-                      className="w-[120px] bg-primary hover:bg-primary-600"
+                      className="bg-primary hover:bg-primary-600 w-[120px]"
                       isDisabled={!isAllChecksCompleted || !isAdmin}
                       isLoading={isSubmitting}
                     >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
index acb559847..7ab442a95 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
@@ -19,7 +19,7 @@ export const AppConnectionsPage = withPermission(
           <link rel="icon" href="/infisical.ico" />
           <meta property="og:image" content="/images/message.png" />
         </Helmet>
-        <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="bg-bunker-800 flex w-full justify-center text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
               className="w-full"
@@ -28,7 +28,7 @@ export const AppConnectionsPage = withPermission(
             />
             <div className="mb-4 flex w-full flex-col rounded-md border border-blue-500/50 bg-blue-500/30 px-4 py-2 text-sm text-blue-200">
               <div className="flex items-center">
-                <FontAwesomeIcon icon={faInfoCircle} className="mr-2 mb-0.5 text-sm" />
+                <FontAwesomeIcon icon={faInfoCircle} className="mb-0.5 mr-2 text-sm" />
                 <span className="text-sm text-blue-200">
                   App connections can also be created and managed independently in projects now.
                 </span>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/1PasswordConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/1PasswordConnectionForm.tsx
index d326ff92a..74df05a66 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/1PasswordConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/1PasswordConnectionForm.tsx
@@ -78,7 +78,7 @@ export const OnePassConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx
index 05edd8c0d..f6c8f10cd 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx
@@ -80,7 +80,7 @@ export const Auth0ConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AwsConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AwsConnectionForm.tsx
index 4009cc4a3..6af87f2a3 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AwsConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AwsConnectionForm.tsx
@@ -87,7 +87,7 @@ export const AwsConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureADCSConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureADCSConnectionForm.tsx
index b4957d31a..df3a7597d 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureADCSConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureADCSConnectionForm.tsx
@@ -114,7 +114,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -131,13 +131,13 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
         />
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
           <Tab.List
-            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} border-mineshaft-600 w-full border-b-2`}
           >
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -146,9 +146,9 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -157,11 +157,11 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
           </Tab.List>
           {selectedTabIndex === 1 && (
-            <div className="mb-2 text-xs text-mineshaft-300">
+            <div className="text-mineshaft-300 mb-2 text-xs">
               SSL configuration for HTTPS connections
             </div>
           )}
-          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
             <Tab.Panel>
               <Controller
                 name="credentials.adcsUrl"
@@ -222,7 +222,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     isOptional
                   >
                     <TextArea
-                      className="h-[3.6rem] resize-none!"
+                      className="resize-none! h-[3.6rem]"
                       {...field}
                       isDisabled={!sslEnabled}
                       placeholder="-----BEGIN CERTIFICATE-----
@@ -242,7 +242,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     errorText={error?.message}
                   >
                     <Switch
-                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                       id="ssl-reject-unauthorized"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={sslEnabled ? value : false}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureAppConfigurationConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureAppConfigurationConnectionForm.tsx
index 3772478f0..589918e2a 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureAppConfigurationConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureAppConfigurationConnectionForm.tsx
@@ -202,7 +202,7 @@ export const AzureAppConfigurationConnectionForm = ({
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureClientSecretsConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureClientSecretsConnectionForm.tsx
index dcfdbaa08..7e363e4ee 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureClientSecretsConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureClientSecretsConnectionForm.tsx
@@ -190,7 +190,7 @@ export const AzureClientSecretsConnectionForm = ({ appConnection, onSubmit, proj
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureDevOpsConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureDevOpsConnectionForm.tsx
index 7d2a4ce7d..8e81ec892 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureDevOpsConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureDevOpsConnectionForm.tsx
@@ -227,7 +227,7 @@ export const AzureDevOpsConnectionForm = ({ appConnection, onSubmit, projectId }
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureKeyVaultConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureKeyVaultConnectionForm.tsx
index 8c0f00acf..b21dd8070 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureKeyVaultConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureKeyVaultConnectionForm.tsx
@@ -200,7 +200,7 @@ export const AzureKeyVaultConnectionForm = ({ appConnection, onSubmit, projectId
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/BitbucketConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/BitbucketConnectionForm.tsx
index 0f4ef11ef..0a0a69245 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/BitbucketConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/BitbucketConnectionForm.tsx
@@ -78,7 +78,7 @@ export const BitbucketConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CamundaConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CamundaConnectionForm.tsx
index b60fab800..e33b96a80 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CamundaConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CamundaConnectionForm.tsx
@@ -78,7 +78,7 @@ export const CamundaConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ChecklyConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ChecklyConnectionForm.tsx
index 2a2365ffa..ed69306de 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ChecklyConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ChecklyConnectionForm.tsx
@@ -79,7 +79,7 @@ export const ChecklyConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CloudflareConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CloudflareConnectionForm.tsx
index b158fba78..b029ceaf0 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CloudflareConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/CloudflareConnectionForm.tsx
@@ -78,7 +78,7 @@ export const CloudflareConnectionForm = ({ appConnection, onSubmit }: Props) =>
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DatabricksConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DatabricksConnectionForm.tsx
index a47cc39a5..fe61c8c18 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DatabricksConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DatabricksConnectionForm.tsx
@@ -82,7 +82,7 @@ export const DatabricksConnectionForm = ({ appConnection, onSubmit }: Props) =>
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DigitalOceanConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DigitalOceanConnectionForm.tsx
index e217c3535..b406dd4a3 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DigitalOceanConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DigitalOceanConnectionForm.tsx
@@ -79,7 +79,7 @@ export const DigitalOceanConnectionForm = ({ appConnection, onSubmit }: Props) =
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/FlyioConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/FlyioConnectionForm.tsx
index 874d361f7..dae880570 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/FlyioConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/FlyioConnectionForm.tsx
@@ -80,7 +80,7 @@ export const FlyioConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GcpConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GcpConnectionForm.tsx
index c45b93c26..861a58bf3 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GcpConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GcpConnectionForm.tsx
@@ -87,7 +87,7 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubConnectionForm.tsx
index 5faa7d5b0..833ee7865 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubConnectionForm.tsx
@@ -185,7 +185,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -220,7 +220,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
                           setValue("gatewayId", null);
                         }
                       }}
-                      className="w-full border border-mineshaft-500"
+                      className="border-mineshaft-500 w-full border"
                       dropdownContainerClassName="max-w-none"
                       placeholder="Enterprise Cloud"
                       position="popper"
@@ -272,7 +272,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
                                 isDisabled={!isAllowed}
                                 value={value || (null as unknown as string)}
                                 onValueChange={onChange}
-                                className="w-full border border-mineshaft-500"
+                                className="border-mineshaft-500 w-full border"
                                 dropdownContainerClassName="max-w-none"
                                 isLoading={isGatewaysLoading}
                                 placeholder="Default: Internet Gateway"
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubRadarConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubRadarConnectionForm.tsx
index 5cb559410..e70bf210b 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubRadarConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubRadarConnectionForm.tsx
@@ -132,7 +132,7 @@ export const GitHubRadarConnectionForm = ({ appConnection, projectId }: Props) =
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitLabConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitLabConnectionForm.tsx
index e9af41aaa..1c11dc31f 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitLabConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitLabConnectionForm.tsx
@@ -240,7 +240,7 @@ export const GitLabConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
                     setValue("credentials.code", "custom");
                   }
                 }}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -277,7 +277,7 @@ export const GitLabConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
                         setValue("credentials.code", "custom");
                       }
                     }}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     position="popper"
                     dropdownContainerClassName="max-w-none"
                   >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HCVaultConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HCVaultConnectionForm.tsx
index dce53fdda..41dc5dcb0 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HCVaultConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HCVaultConnectionForm.tsx
@@ -112,7 +112,7 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -151,7 +151,7 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
                         isDisabled={!isAllowed}
                         value={value as string}
                         onValueChange={onChange}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         dropdownContainerClassName="max-w-none"
                         isLoading={isGatewaysLoading}
                         placeholder="Default: Internet Gateway"
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HerokuAppConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HerokuAppConnectionForm.tsx
index 92549bdb7..0ea47fecb 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HerokuAppConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HerokuAppConnectionForm.tsx
@@ -191,7 +191,7 @@ export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
                     setValue("credentials.code", "custom");
                   }
                 }}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx
index 17b5f5ffa..fa61e8272 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx
@@ -76,7 +76,7 @@ export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/LdapConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/LdapConnectionForm.tsx
index 219be38eb..38327023c 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/LdapConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/LdapConnectionForm.tsx
@@ -131,7 +131,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                   isDisabled={isUpdate}
                   value={value}
                   onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   position="popper"
                   dropdownContainerClassName="max-w-none"
                 >
@@ -159,7 +159,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                   isDisabled={isUpdate}
                   value={value}
                   onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500 capitalize"
+                  className="border-mineshaft-500 w-full border capitalize"
                   position="popper"
                   dropdownContainerClassName="max-w-none"
                 >
@@ -177,13 +177,13 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
         </div>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
           <Tab.List
-            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} border-mineshaft-600 w-full border-b-2`}
           >
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -192,9 +192,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -203,9 +203,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
           </Tab.List>
           {selectedTabIndex === 1 && (
-            <div className="mb-2 text-xs text-mineshaft-300">Requires ldaps:// URL</div>
+            <div className="text-mineshaft-300 mb-2 text-xs">Requires ldaps:// URL</div>
           )}
-          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
             <Tab.Panel>
               <Controller
                 name="credentials.url"
@@ -266,7 +266,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     isOptional
                   >
                     <TextArea
-                      className="h-[3.6rem] resize-none!"
+                      className="resize-none! h-[3.6rem]"
                       {...field}
                       isDisabled={!sslEnabled}
                     />
@@ -283,7 +283,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     errorText={error?.message}
                   >
                     <Switch
-                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                       id="ssl-reject-unauthorized"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={sslEnabled ? value : false}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MsSqlConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MsSqlConnectionForm.tsx
index 082cdad3b..19c66cd5e 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MsSqlConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MsSqlConnectionForm.tsx
@@ -126,7 +126,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                           isDisabled={!isAllowed}
                           value={value as string}
                           onValueChange={onChange}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                           dropdownContainerClassName="max-w-none"
                           isLoading={isGatewaysLoading}
                           placeholder="Default: Internet Gateway"
@@ -168,7 +168,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MySqlConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MySqlConnectionForm.tsx
index a3108226a..113f8d755 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MySqlConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MySqlConnectionForm.tsx
@@ -123,7 +123,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                           isDisabled={!isAllowed}
                           value={value as string}
                           onValueChange={onChange}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                           dropdownContainerClassName="max-w-none"
                           isLoading={isGatewaysLoading}
                           placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/NetlifyConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/NetlifyConnectionForm.tsx
index 7386aeab3..08e78e0dc 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/NetlifyConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/NetlifyConnectionForm.tsx
@@ -79,7 +79,7 @@ export const NetlifyConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OCIConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OCIConnectionForm.tsx
index 8f375e836..7ee742e0c 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OCIConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OCIConnectionForm.tsx
@@ -89,7 +89,7 @@ export const OCIConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OktaConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OktaConnectionForm.tsx
index b6ef15d08..aa5b7f6a5 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OktaConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OktaConnectionForm.tsx
@@ -87,7 +87,7 @@ export const OktaConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OracleDBConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OracleDBConnectionForm.tsx
index d16763132..193d77fac 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OracleDBConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OracleDBConnectionForm.tsx
@@ -123,7 +123,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
                           isDisabled={!isAllowed}
                           value={value as string}
                           onValueChange={onChange}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                           dropdownContainerClassName="max-w-none"
                           isLoading={isGatewaysLoading}
                           placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/PostgresConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/PostgresConnectionForm.tsx
index ae00d7b57..64a8c207a 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/PostgresConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/PostgresConnectionForm.tsx
@@ -123,7 +123,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
                           isDisabled={!isAllowed}
                           value={value as string}
                           onValueChange={onChange}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                           dropdownContainerClassName="max-w-none"
                           isLoading={isGatewaysLoading}
                           placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RailwayConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RailwayConnectionForm.tsx
index 31e93f66e..0bc2ddeba 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RailwayConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RailwayConnectionForm.tsx
@@ -79,7 +79,7 @@ export const RailwayConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RedisConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RedisConnectionForm.tsx
index 44b450baf..fec7f591f 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RedisConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RedisConnectionForm.tsx
@@ -107,7 +107,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -124,12 +124,12 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
         />
 
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -138,9 +138,9 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                   selected
-                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                     : "text-bunker-300"
                 }`
               }
@@ -148,7 +148,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
               SSL ({sslEnabled ? "Enabled" : "Disabled"})
             </Tab>
           </Tab.List>
-          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
             <Tab.Panel>
               <div className="mt-[0.675rem] flex items-start gap-2">
                 <Controller
@@ -222,7 +222,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 render={({ field: { value, onChange }, fieldState: { error } }) => (
                   <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                     <Switch
-                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                       id="ssl-enabled"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={value}
@@ -244,7 +244,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     label="SSL Certificate"
                     isOptional
                   >
-                    <TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
+                    <TextArea className="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
                   </FormControl>
                 )}
               />
@@ -258,7 +258,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     errorText={error?.message}
                   >
                     <Switch
-                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                       id="ssl-reject-unauthorized"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={sslEnabled ? value : false}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RenderConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RenderConnectionForm.tsx
index 9e03a3748..20b553bd2 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RenderConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/RenderConnectionForm.tsx
@@ -76,7 +76,7 @@ export const RenderConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/SupabaseConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/SupabaseConnectionForm.tsx
index 12be09cdc..f65b25349 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/SupabaseConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/SupabaseConnectionForm.tsx
@@ -102,7 +102,7 @@ export const SupabaseConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TeamCityConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TeamCityConnectionForm.tsx
index a4ed1f260..43b50e412 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TeamCityConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TeamCityConnectionForm.tsx
@@ -78,7 +78,7 @@ export const TeamCityConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TerraformCloudConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TerraformCloudConnectionForm.tsx
index 52606b4d7..646d53b10 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TerraformCloudConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TerraformCloudConnectionForm.tsx
@@ -79,7 +79,7 @@ export const TerraformCloudConnectionForm = ({ appConnection, onSubmit }: Props)
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/VercelConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/VercelConnectionForm.tsx
index e2c545f19..ec653b590 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/VercelConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/VercelConnectionForm.tsx
@@ -79,7 +79,7 @@ export const VercelConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/WindmillConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/WindmillConnectionForm.tsx
index e60ebd3f0..7d6ea6f3e 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/WindmillConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/WindmillConnectionForm.tsx
@@ -85,7 +85,7 @@ export const WindmillConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ZabbixConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ZabbixConnectionForm.tsx
index 72bbd03f7..5f159306b 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ZabbixConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ZabbixConnectionForm.tsx
@@ -70,7 +70,7 @@ export const ZabbixConnectionForm = ({ appConnection, onSubmit }: Props) => {
                 isDisabled={isUpdate}
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal.tsx
index 914d065b0..c767d7027 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal.tsx
@@ -12,10 +12,10 @@ export const PlatformManagedConfirmationModal = ({ isOpen, onOpenChange, onConfi
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent className="max-w-2xl" title="Platform Managed Credentials">
         <NoticeBannerV2 title="Are you sure you want have Infisical manage the credentials of this connection?">
-          <p className="my-1 text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 my-1 text-sm">
             Once created, Infisical will update the password of this connection.
           </p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             You will not be able to access the updated password.
           </p>
         </NoticeBannerV2>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedNoticeBanner.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedNoticeBanner.tsx
index b75e4b19c..ba898447e 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedNoticeBanner.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedNoticeBanner.tsx
@@ -2,7 +2,7 @@ import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2
 
 export const PlatformManagedNoticeBanner = () => (
   <NoticeBannerV2 title="Platform Managed Credentials">
-    <p className="text-sm text-bunker-300">
+    <p className="text-bunker-300 text-sm">
       This App Connection&#39;s credentials are managed by Infisical and cannot be updated.
     </p>
   </NoticeBannerV2>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/SqlConnectionFields.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/SqlConnectionFields.tsx
index f72d3ce91..059d2d700 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/SqlConnectionFields.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/SqlConnectionFields.tsx
@@ -23,11 +23,11 @@ export const SqlConnectionFields = ({
   return (
     <>
       <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-        <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+        <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
           <Tab
             className={({ selected }) =>
-              `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
-                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+              `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
               }`
             }
           >
@@ -35,15 +35,15 @@ export const SqlConnectionFields = ({
           </Tab>
           <Tab
             className={({ selected }) =>
-              `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
-                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+              `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
               }`
             }
           >
             SSL ({sslEnabled ? "Enabled" : "Disabled"})
           </Tab>
         </Tab.List>
-        <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+        <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
           <Tab.Panel>
             <div className="mt-[0.675rem] flex items-start gap-2">
               <Controller
@@ -132,7 +132,7 @@ export const SqlConnectionFields = ({
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                   <Switch
-                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                    className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                     id="ssl-enabled"
                     thumbClassName="bg-mineshaft-800"
                     isChecked={value}
@@ -156,7 +156,7 @@ export const SqlConnectionFields = ({
                   isOptional
                 >
                   <TextArea
-                    className="h-14 resize-none!"
+                    className="resize-none! h-14"
                     {...field}
                     isDisabled={isPlatformManagedCredentials || !sslEnabled}
                   />
@@ -173,7 +173,7 @@ export const SqlConnectionFields = ({
                   errorText={error?.message}
                 >
                   <Switch
-                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                    className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                     id="ssl-reject-unauthorized"
                     thumbClassName="bg-mineshaft-800"
                     isChecked={sslEnabled ? value : false}
@@ -208,7 +208,7 @@ export const SqlConnectionFields = ({
           render={({ field: { value, onChange }, fieldState: { error } }) => (
             <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
               <Switch
-                className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                 id="platform-managed"
                 thumbClassName="bg-mineshaft-800"
                 isChecked={value}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
index 5774e7707..19150bac6 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
   const appDetails = APP_CONNECTION_MAP[app];
 
   return (
-    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
       <div className="relative">
         <img
           alt={`${appDetails.name} logo`}
           src={`/images/integrations/${appDetails.image}`}
-          className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+          className="bg-bunker-500 h-12 w-12 rounded-md p-2"
         />
         {appDetails.icon && (
           <FontAwesomeIcon
             icon={appDetails.icon}
-            className="absolute right-1 bottom-1 text-primary-700"
+            className="text-primary-700 absolute bottom-1 right-1"
           />
         )}
       </div>
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {appDetails.name}
           <a
             href={`https://infisical.com/docs/integrations/app-connections/${app}`}
@@ -37,8 +37,8 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
         </p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
           onClick={onBack}
         >
           Select another App
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
index c1d3a528a..3e663517e 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
@@ -46,7 +46,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -60,7 +60,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map((option) => {
           const {
             image,
@@ -78,7 +78,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(option.app)
               }
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
             >
               <div className="relative">
                 <img
@@ -91,7 +91,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                 />
                 {icon && (
                   <FontAwesomeIcon
-                    className="absolute -right-1.5 -bottom-1.5 text-primary-700"
+                    className="text-primary-700 absolute -bottom-1.5 -right-1.5"
                     size="xl"
                     icon={icon}
                   />
@@ -125,7 +125,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -134,7 +134,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -145,7 +145,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx
index 514900ee0..e74175844 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx
@@ -78,7 +78,7 @@ export const AppConnectionRow = ({
 
   return (
     <Tr
-      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
+      className={twMerge("hover:bg-mineshaft-700 group h-12 transition-colors duration-100")}
       key={`app-connection-${id}`}
     >
       <Td>
@@ -93,35 +93,35 @@ export const AppConnectionRow = ({
               <FontAwesomeIcon
                 icon={connectionDetails.icon}
                 size="xs"
-                className="absolute -right-0.5 -bottom-0.5 text-primary-700"
+                className="text-primary-700 absolute -bottom-0.5 -right-0.5"
               />
             )}
           </div>
           <span className="hidden lg:inline">{connectionDetails.name}</span>
         </div>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex w-full items-center">
           <p className="truncate">{name}</p>
           {description && (
             <Tooltip content={description}>
-              <FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
+              <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
             </Tooltip>
           )}
         </div>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <p className="truncate">
           <FontAwesomeIcon
             size="sm"
-            className="mr-1.5 text-mineshaft-300/75"
+            className="text-mineshaft-300/75 mr-1.5"
             icon={methodDetails.icon}
           />
           {methodDetails.name}
         </p>
       </Td>
       {!isProjectView && (
-        <Td className="max-w-0 min-w-32!">
+        <Td className="min-w-32! max-w-0">
           {project ? (
             <Link
               // @ts-expect-error app-connections aren't in kms/ssh
@@ -134,7 +134,7 @@ export const AppConnectionRow = ({
               <p className="truncate">
                 <FontAwesomeIcon
                   size="sm"
-                  className="mr-1.5 text-mineshaft-300/75"
+                  className="text-mineshaft-300/75 mr-1.5"
                   icon={faTable}
                 />
                 {project.name}
@@ -144,7 +144,7 @@ export const AppConnectionRow = ({
             <p className="truncate">
               <FontAwesomeIcon
                 size="sm"
-                className="mr-1.5 text-mineshaft-300/75"
+                className="text-mineshaft-300/75 mr-1.5"
                 icon={faBuilding}
               />
               Organization
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
index 491a4d7d7..e194cd8de 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
@@ -209,17 +209,17 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
     handlePopUpOpen("editDetails", appConnection);
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-1">
-            <p className="text-xl font-medium text-mineshaft-100">App Connections</p>
+            <p className="text-mineshaft-100 text-xl font-medium">App Connections</p>
             <a
               href="https://infisical.com/docs/integrations/app-connections/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mt-[0.12rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow ml-1 mt-[0.12rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -229,7 +229,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               </div>
             </a>
           </div>
-          <p className="text-sm text-bunker-300">
+          <p className="text-bunker-300 text-sm">
             Create and configure connections with third-party apps for re-use across your project
             {isProjectView ? "" : "s"}.
           </p>
@@ -261,7 +261,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
       </div>
       <div className="flex gap-2">
         {!isProjectView && (
-          <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+          <div className="border-mineshaft-600 bg-mineshaft-800 flex gap-x-0.5 rounded-md border p-1">
             <Button
               variant="outline_bg"
               onClick={() => {
@@ -271,7 +271,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               size="xs"
               className={`${
                 view === View.Scope ? "bg-mineshaft-500" : "bg-transparent"
-              } min-w-20 rounded border-none hover:bg-mineshaft-600`}
+              } hover:bg-mineshaft-600 min-w-20 rounded border-none`}
             >
               Organization
             </Button>
@@ -284,7 +284,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               size="xs"
               className={`${
                 view === View.All ? "bg-mineshaft-500" : "bg-transparent"
-              } min-w-20 rounded border-none hover:bg-mineshaft-600`}
+              } hover:bg-mineshaft-600 min-w-20 rounded border-none`}
             >
               All
             </Button>
@@ -304,7 +304,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -313,7 +313,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent
             sideOffset={2}
-            className="max-h-[70vh] thin-scrollbar overflow-y-auto"
+            className="thin-scrollbar max-h-[70vh] overflow-y-auto"
             align="end"
           >
             <DropdownMenuLabel>Filter by Apps</DropdownMenuLabel>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/DeleteAppConnectionModal.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/DeleteAppConnectionModal.tsx
index e5f6b3684..9d6107dfc 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/DeleteAppConnectionModal.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/DeleteAppConnectionModal.tsx
@@ -50,10 +50,10 @@ export const DeleteAppConnectionModal = ({ isOpen, onOpenChange, appConnection }
     >
       {appConnection.isPlatformManagedCredentials && (
         <NoticeBannerV2 className="mt-3" title="Platform Managed Credentials">
-          <p className="text-sm text-bunker-300">
+          <p className="text-bunker-300 text-sm">
             This App Connection&#39;s credentials are managed by Infisical.
           </p>
-          <p className="mt-3 text-sm text-bunker-300">
+          <p className="text-bunker-300 mt-3 text-sm">
             By deleting this connection you may lose permanent access to the associated resource.
           </p>
         </NoticeBannerV2>
diff --git a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
index 11628ce98..3e8af0e31 100644
--- a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
@@ -6,14 +6,14 @@ import { LogsSection } from "./components";
 
 export const AuditLogsPage = () => {
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>Infisical | Audit Logs</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
 
-      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
             title="Audit logs"
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
index cc8748953..40ef9febe 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogFilterItem.tsx
@@ -29,14 +29,14 @@ export const LogFilterItem = ({
           <Tooltip content={tooltipText} className="max-w-sm">
             <FontAwesomeIcon
               icon={faInfoCircle}
-              className="-mt-[0.05rem] ml-1 text-[11px] text-mineshaft-400"
+              className="text-mineshaft-400 -mt-[0.05rem] ml-1 text-[11px]"
             />
           </Tooltip>
         )}
         <Button
           onClick={() => onClear()}
           variant="link"
-          className="ml-auto font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto font-normal transition-all duration-75"
           size="xs"
         >
           Clear
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx
index 3407043a2..a38c72d21 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx
@@ -98,7 +98,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
               ))}
             </>
           ) : (
-            <div className="flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent bg-mineshaft-600 px-5 py-2 text-sm text-bunker-200">
+            <div className="bg-mineshaft-600 text-bunker-200 flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent px-5 py-2 text-sm">
               <div>
                 {formatDateTime({
                   timezone,
@@ -234,7 +234,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                           </FormControl>
                         </div>
                         {error && (
-                          <span className="text-opacity-90 text-xs text-red-600">
+                          <span className="text-xs text-red-600 text-opacity-90">
                             {error.message}
                           </span>
                         )}
@@ -276,7 +276,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                 <FontAwesomeIcon
                   icon={faChevronRight}
                   size="xs"
-                  className="mt-6 text-mineshaft-400"
+                  className="text-mineshaft-400 mt-6"
                 />
                 <Controller
                   name="endDate"
@@ -324,7 +324,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
       <Select
         value={timezone}
         onValueChange={(val) => setTimezone(val as Timezone)}
-        className="w-[10.6rem] border border-mineshaft-500! bg-mineshaft-600! capitalize"
+        className="border-mineshaft-500! bg-mineshaft-600! w-[10.6rem] border capitalize"
         dropdownContainerClassName="max-w-none"
         position="popper"
         dropdownContainerStyle={{
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
index c53c38984..d689e1457 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx
@@ -124,7 +124,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
         <Button variant="outline_bg" colorSchema="primary" className="relative">
           <FontAwesomeIcon icon={faFilterCircleXmark} />
           {activeFilterCount > 0 && (
-            <Badge className="absolute right-0 bottom-0" variant="primary">
+            <Badge className="absolute bottom-0 right-0" variant="primary">
               {activeFilterCount}
             </Badge>
           )}
@@ -132,8 +132,8 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="mt-4 overflow-visible py-4">
         <form onSubmit={handleSubmit(setFilter)}>
-          <div className="flex min-w-64 flex-col font-inter">
-            <div className="mb-3 flex items-center border-b border-b-mineshaft-500 px-3 pb-2">
+          <div className="font-inter flex min-w-64 flex-col">
+            <div className="border-b-mineshaft-500 mb-3 flex items-center border-b px-3 pb-2">
               <div className="flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
                   <span>Filters</span>
@@ -175,7 +175,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
                     <FormControl>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
-                          <div className="inline-flex thin-scrollbar w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal whitespace-nowrap text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
+                          <div className="thin-scrollbar border-mineshaft-500 bg-mineshaft-700 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm font-normal">
                             {selectedEventTypes?.length === 1
                               ? filteredEventTypes.find(
                                   (eventType) => eventType.value === selectedEventTypes[0]
@@ -189,7 +189,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
                         <DropdownMenuContent
                           align="end"
                           sideOffset={2}
-                          className="z-100 max-h-80 thin-scrollbar overflow-hidden"
+                          className="z-100 thin-scrollbar max-h-80 overflow-hidden"
                         >
                           <div className="max-h-80 overflow-y-auto">
                             {filteredEventTypes.length > 0 ? (
@@ -224,7 +224,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
                                       isSelected ? (
                                         <FontAwesomeIcon
                                           icon={faCheckCircle}
-                                          className="pr-0.5 text-primary"
+                                          className="text-primary pr-0.5"
                                         />
                                       ) : (
                                         <div className="pl-[1.01rem]" />
@@ -269,7 +269,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
                           if (e === "all") onChange(undefined);
                           else setValue("userAgentType", e as UserAgentType, { shouldDirty: true });
                         }}
-                        className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
+                        className={twMerge("border-mineshaft-500 bg-mineshaft-700 w-full border")}
                         position="popper"
                       >
                         <SelectItem value="all" key="all">
@@ -337,9 +337,9 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
                     exit={{ opacity: 0, height: 0 }}
                     transition={{ duration: 0.3 }}
                   >
-                    <div className="mt-2 mb-3">
+                    <div className="mb-3 mt-2">
                       <p className="text-xs opacity-60">Secrets</p>
-                      <div className="h-px w-full rounded-full bg-mineshaft-500" />
+                      <div className="bg-mineshaft-500 h-px w-full rounded-full" />
                     </div>
                     <LogFilterItem
                       label="Environment"
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx
index e950dbb45..15e28037b 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx
@@ -73,17 +73,17 @@ const LogsSectionComponent = ({
 
   if (pageView)
     return (
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
         <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
           <div>
             <div className="flex items-center gap-1 whitespace-nowrap">
-              <p className="text-xl font-medium text-mineshaft-100">Audit History</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Audit History</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/audit-logs"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.1rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.1rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx
index 1fabac5f5..60bcb244a 100644
--- a/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx
@@ -22,7 +22,7 @@ const Tag = ({ label, value }: TagProps) => {
 
   return (
     <div className="flex items-center space-x-1.5">
-      <div className="rounded-sm bg-mineshaft-600 p-0.5 pl-1 font-mono">{label}:</div>
+      <div className="bg-mineshaft-600 rounded-sm p-0.5 pl-1 font-mono">{label}:</div>
       <div>{value}</div>
     </div>
   );
@@ -34,7 +34,7 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer border-x-0 border-t-0 border-b hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer border-x-0 border-b border-t-0"
         role="button"
         tabIndex={0}
         onClick={() => setIsOpen.toggle()}
@@ -62,9 +62,9 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
         </Td>
       </Tr>
       {isOpen && (
-        <Tr className={`log-${auditLog.id} h-10 border-x-0 border-t-0 border-b`}>
+        <Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
           <Td colSpan={3} className="px-3 py-2">
-            <div className="my-1 max-h-96 thin-scrollbar overflow-auto rounded-sm border border-mineshaft-600 bg-bunker-800 p-2 font-mono leading-6 whitespace-pre-wrap">
+            <div className="thin-scrollbar border-mineshaft-600 bg-bunker-800 my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded-sm border p-2 font-mono leading-6">
               {JSON.stringify(auditLog, null, 4)}
             </div>
           </Td>
diff --git a/frontend/src/pages/organization/BillingPage/BillingPage.tsx b/frontend/src/pages/organization/BillingPage/BillingPage.tsx
index e49314f13..acec0efe4 100644
--- a/frontend/src/pages/organization/BillingPage/BillingPage.tsx
+++ b/frontend/src/pages/organization/BillingPage/BillingPage.tsx
@@ -11,13 +11,13 @@ export const BillingPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: t("billing.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
-      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
         <div className="w-full max-w-7xl px-6">
           <PageHeader
             title={t("billing.title")}
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/CurrentPlanSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/CurrentPlanSection.tsx
index 1fc905a06..c0d516a49 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/CurrentPlanSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/CurrentPlanSection.tsx
@@ -38,7 +38,7 @@ export const CurrentPlanSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Current usage</h2>
       <TableContainer className="mt-4">
         <Table>
@@ -63,16 +63,14 @@ export const CurrentPlanSection = () => {
                 return (
                   <Tr key={`current-plan-row-${name}`} className="h-12">
                     <Td>
-                      {name}
-                      {toolTipText && (
-                        <Tooltip content={toolTipText}>
-                          <FontAwesomeIcon
-                            icon={faInfoCircle}
-                            className="relative bottom-2 left-2"
-                            size="xs"
-                          />
-                        </Tooltip>
-                      )}
+                      <div className="flex items-center">
+                        {name}
+                        {toolTipText && (
+                          <Tooltip content={toolTipText}>
+                            <FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
+                          </Tooltip>
+                        )}
+                      </div>
                     </Td>
                     <Td>{displayCell(allowed)}</Td>
                     <Td>{used}</Td>
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx
index 380537c08..ce97ca710 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx
@@ -21,14 +21,14 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
     >
       <ModalContent className="max-w-(--breakpoint-lg)" title="Infisical Cloud Plans">
         <Tab.Group>
-          <Tab.List className="max-w-(--breakpoint-lg) border-b-2 border-mineshaft-600">
+          <Tab.List className="max-w-(--breakpoint-lg) border-mineshaft-600 border-b-2">
             <Tab as={Fragment}>
               {({ selected }) => (
                 <button
                   type="button"
                   className={`p-4 ${
                     selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                  } w-30 font-medium outline-hidden`}
+                  } w-30 outline-hidden whitespace-nowrap font-medium`}
                 >
                   Bill monthly
                 </button>
@@ -40,7 +40,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
                   type="button"
                   className={`p-4 ${
                     selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                  } w-30 font-medium outline-hidden`}
+                  } w-30 outline-hidden font-medium`}
                 >
                   Bill yearly
                 </button>
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx
index d22eab08b..1b65e55f4 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx
@@ -110,9 +110,9 @@ export const PreviewSection = () => {
         subscription?.slug !== "pro" &&
         subscription?.slug !== "pro-annual" && (
           <div className="flex flex-row space-x-6">
-            <div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
+            <div className="border-primary/40 bg-primary/10 mb-6 flex flex-1 items-center rounded-lg border p-4">
               <div className="flex-1">
-                <h2 className="text-xl font-medium text-mineshaft-100">
+                <h2 className="text-mineshaft-100 text-xl font-medium">
                   Unleash the full power of{" "}
                   <span className="bg-linear-to-r from-primary-500 to-yellow bg-clip-text font-medium text-transparent">
                     Infisical
@@ -137,8 +137,8 @@ export const PreviewSection = () => {
                 )}
               </OrgPermissionCan>
             </div>
-            <div className="mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-              <div className="mb-4 flex w-full justify-center font-medium text-mineshaft-200">
+            <div className="border-mineshaft-600 bg-mineshaft-800 mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border p-4">
+              <div className="text-mineshaft-200 mb-4 flex w-full justify-center font-medium">
                 Want to learn more?{" "}
               </div>
               <div className="flex w-full justify-center">
@@ -147,7 +147,7 @@ export const PreviewSection = () => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <span className="cursor-pointer rounded-full border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 duration-200 hover:border-primary/40 hover:bg-primary/10">
+                  <span className="border-mineshaft-500 bg-mineshaft-600 hover:border-primary/40 hover:bg-primary/10 cursor-pointer rounded-full border px-4 py-2 duration-200">
                     Book a demo{" "}
                     <FontAwesomeIcon
                       icon={faArrowUpRightFromSquare}
@@ -161,9 +161,9 @@ export const PreviewSection = () => {
         )}
       {!isPending && subscription && data && (
         <div className="mb-6 flex">
-          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Current plan</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {`${formatPlanSlug(subscription.slug)} ${
                 subscription.status === "trialing" ? "(Trial)" : ""
               }`}
@@ -190,17 +190,17 @@ export const PreviewSection = () => {
               </OrgPermissionCan>
             )}
           </div>
-          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Price</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {subscription.status === "trialing"
                 ? "$0.00 / month"
                 : `${formatAmount(data.amount)} / ${data.interval}`}
             </p>
           </div>
-          <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Subscription renews on</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
             </p>
           </div>
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/CompanyNameSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/CompanyNameSection.tsx
index fce3978c7..397a044ad 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/CompanyNameSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/CompanyNameSection.tsx
@@ -59,9 +59,9 @@ export const CompanyNameSection = () => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
-      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Business name</h2>
+      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Business name</h2>
       <div className="max-w-md">
         <Controller
           defaultValue=""
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/InvoiceEmailSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
index 8b471346f..f0a01795f 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
@@ -60,7 +60,7 @@ export const InvoiceEmailSection = () => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Invoice email recipient</h2>
       <div className="max-w-md">
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx
index 1008996db..412ca24c2 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx
@@ -24,7 +24,7 @@ export const PmtMethodsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex items-center">
         <h2 className="flex-1 text-xl font-medium text-white">Payment methods</h2>
         <OrgPermissionCan
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/TaxIDSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/TaxIDSection.tsx
index bcad4be53..3af8a7eb3 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/TaxIDSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/TaxIDSection.tsx
@@ -15,7 +15,7 @@ export const TaxIDSection = () => {
   ] as const);
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex items-center">
         <h2 className="flex-1 text-xl font-medium text-white">Tax ID</h2>
         <OrgPermissionCan
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx b/frontend/src/pages/organization/BillingPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
index 2f0333c15..b935f1980 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="flex-1 text-xl font-medium text-white">Invoices</h2>
       <InvoicesTable />
     </div>
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingSelfHostedTab/LicensesSection.tsx b/frontend/src/pages/organization/BillingPage/components/BillingSelfHostedTab/LicensesSection.tsx
index ab779ceee..883821acb 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingSelfHostedTab/LicensesSection.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingSelfHostedTab/LicensesSection.tsx
@@ -19,7 +19,7 @@ export const LicensesSection = () => {
   const { data, isPending } = useGetOrgLicenses(currentOrg?.id ?? "");
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Enterprise licenses</h2>
       <TableContainer className="mt-4">
         <Table>
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
index da7643c50..4deed0f2f 100644
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -77,10 +77,10 @@ const Page = () => {
     handlePopUpClose("deleteGroup");
   };
 
-  if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
+  if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.group.name}>
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
index d3194a9f8..ed27d0a27 100644
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
@@ -16,12 +16,12 @@ type Props = {
 export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
   const { data, isPending } = useGetGroupById(groupId);
 
-  if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
+  if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
 
   return data ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Group Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Group Details</h3>
         <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => {
             return (
@@ -49,38 +49,38 @@ export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Group ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Group ID</p>
           <div className="group flex items-center gap-2">
-            <p className="text-sm text-mineshaft-300">{data.group.id}</p>
+            <p className="text-mineshaft-300 text-sm">{data.group.id}</p>
             <CopyButton value={data.group.id} name="Group ID" size="xs" variant="plain" />
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{data.group.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{data.group.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Slug</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Slug</p>
           <div className="group flex items-center gap-2">
-            <p className="text-sm text-mineshaft-300">{data.group.slug}</p>
+            <p className="text-mineshaft-300 text-sm">{data.group.slug}</p>
             <CopyButton value={data.group.slug} name="Slug" size="xs" variant="plain" />
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
-          <p className="text-sm text-mineshaft-300">{data.group.role}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
+          <p className="text-mineshaft-300 text-sm">{data.group.role}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Created At</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Created At</p>
+          <p className="text-mineshaft-300 text-sm">
             {new Date(data.group.createdAt).toLocaleString()}
           </p>
         </div>
       </div>
     </div>
   ) : (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
         <p className="text-mineshaft-300">Group data not found</p>
       </div>
     </div>
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
index 2ca6859b0..d3b8917ae 100644
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
@@ -51,9 +51,9 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
   };
 
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Group Members</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Group Members</h3>
         <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Tooltip
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
index 446e54885..563e0ceb5 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -72,7 +72,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.identity.name} />
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx
index b1d75ff83..14e325c5a 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx
@@ -19,12 +19,12 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
   const { data, refetch } = useGetIdentityById(identityId);
 
   return data ? (
-    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Authentication</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Authentication</h3>
       </div>
       {data.identity.authMethods.length > 0 ? (
-        <div className="flex flex-col divide-y divide-mineshaft-400/50">
+        <div className="divide-mineshaft-400/50 flex flex-col divide-y">
           {data.identity.authMethods.map((authMethod) => (
             <button
               key={authMethod}
@@ -36,7 +36,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
                 })
               }
               type="button"
-              className="flex w-full items-center justify-between bg-mineshaft-900 px-4 py-2 text-sm hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600"
+              className="bg-mineshaft-900 hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600 flex w-full items-center justify-between px-4 py-2 text-sm"
             >
               <span>{identityAuthToNameMap[authMethod]}</span>
               <div className="flex gap-2">
@@ -52,7 +52,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
         </div>
       ) : (
         <div className="w-full space-y-2 pt-2">
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             No authentication methods configured. Get started by creating a new auth method.
           </p>
         </div>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx
index c1bd0adf6..14f4b671e 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx
@@ -36,9 +36,9 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
   return (
     <div>
       <div className="mb-4">
-        <p className="text-sm font-medium text-mineshaft-300">Client ID</p>
+        <p className="text-mineshaft-300 text-sm font-medium">Client ID</p>
         <div className="group flex align-top">
-          <p className="text-sm text-mineshaft-300">{identityUniversalAuth?.clientId ?? ""}</p>
+          <p className="text-mineshaft-300 text-sm">{identityUniversalAuth?.clientId ?? ""}</p>
           <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
             <Tooltip content={copyTextClientId}>
               <IconButton
@@ -58,7 +58,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
       </div>
       {clientSecrets?.length ? (
         <div className="flex justify-between">
-          <p className="text-sm font-medium text-mineshaft-300">{`Client Secrets (${clientSecrets.length})`}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">{`Client Secrets (${clientSecrets.length})`}</p>
           <Button
             variant="link"
             onClick={() => {
@@ -90,10 +90,10 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
               <div className="flex items-center">
                 <FontAwesomeIcon size="1x" icon={faKey} />
                 <div className="ml-4">
-                  <p className="text-sm font-medium text-mineshaft-300">
+                  <p className="text-mineshaft-300 text-sm font-medium">
                     {`${clientSecretPrefix}****`}
                   </p>
-                  <p className="text-sm text-mineshaft-300">
+                  <p className="text-mineshaft-300 text-sm">
                     {expiresAt ? `Expires on ${format(expiresAt, "yyyy-MM-dd")}` : "No Expiry"}
                   </p>
                 </div>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityTokens.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityTokens.tsx
index 118fea015..7f8b8a1c2 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityTokens.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityTokens.tsx
@@ -28,8 +28,8 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
   return (
     <div>
       {tokens?.length ? (
-        <div className="flex items-center justify-between border-b border-bunker-400 pb-1">
-          <p className="text-sm font-medium text-bunker-300">{`Access Tokens (${tokens.length})`}</p>
+        <div className="border-bunker-400 flex items-center justify-between border-b pb-1">
+          <p className="text-bunker-300 text-sm font-medium">{`Access Tokens (${tokens.length})`}</p>
           <Button
             size="xs"
             className="underline"
@@ -54,16 +54,16 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
         );
         return (
           <div
-            className="group flex items-center justify-between border-b border-mineshaft-500 px-2 py-2 last:pb-0"
+            className="border-mineshaft-500 group flex items-center justify-between border-b px-2 py-2 last:pb-0"
             key={`identity-token-${token.id}`}
           >
             <div className="flex items-center">
               <FontAwesomeIcon size="xs" className="text-mineshaft-400" icon={faKey} />
               <div className="ml-3">
-                <p className="text-sm font-medium text-mineshaft-300">
+                <p className="text-mineshaft-300 text-sm font-medium">
                   {token.name ? token.name : "-"}
                 </p>
-                <p className="text-xs text-mineshaft-400">
+                <p className="text-mineshaft-400 text-xs">
                   {token.isAccessTokenRevoked
                     ? "Revoked"
                     : `Expires on ${format(expiresAt, "yyyy-MM-dd")}`}
@@ -114,7 +114,7 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
         );
       })}
       <Button
-        className="mt-4 mr-4 w-full"
+        className="mr-4 mt-4 w-full"
         colorSchema="secondary"
         type="submit"
         size="xs"
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityClientSecretModal.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityClientSecretModal.tsx
index b4fbd131e..102a31adf 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityClientSecretModal.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityClientSecretModal.tsx
@@ -159,7 +159,7 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
             </div>
           </form>
         ) : (
-          <div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
             <p className="mr-4 break-all">{token}</p>
             <Tooltip content={copyTextToken}>
               <IconButton
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx
index 8e0c1228c..3e4f12496 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx
@@ -41,9 +41,9 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
 
   const { data } = useGetIdentityById(identityId);
   return data ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Identity Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Identity Details</h3>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -116,9 +116,9 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Identity ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Identity ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{data.identity.id}</p>
+            <p className="text-mineshaft-300 text-sm">{data.identity.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -137,47 +137,47 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{data.identity.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Last Login Auth Method</p>
+          <p className="text-mineshaft-300 text-sm">
             {data.lastLoginAuthMethod ? identityAuthToNameMap[data.lastLoginAuthMethod] : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Last Login Time</p>
+          <p className="text-mineshaft-300 text-sm">
             {data.lastLoginTime ? format(data.lastLoginTime, "PPpp") : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Delete Protection</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Delete Protection</p>
+          <p className="text-mineshaft-300 text-sm">
             {data.identity.hasDeleteProtection ? "On" : "Off"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
-          <p className="text-sm text-mineshaft-300">{data.role}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
+          <p className="text-mineshaft-300 text-sm">{data.role}</p>
         </div>
         <div>
-          <p className="text-sm font-medium text-mineshaft-300">Metadata</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Metadata</p>
           {data?.metadata?.length ? (
-            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+            <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
               {data.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
                     size="xs"
-                    className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                    className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
                   >
                     <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                     <div>{el.key}</div>
                   </Tag>
                   <Tag
                     size="xs"
-                    className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                    className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
                   >
                     <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
                       {el.value}
@@ -187,7 +187,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
               ))}
             </div>
           ) : (
-            <p className="text-sm text-mineshaft-300">-</p>
+            <p className="text-mineshaft-300 text-sm">-</p>
           )}
         </div>
       </div>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
index 1622962ea..6a43aa487 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
@@ -46,7 +46,7 @@ export const IdentityProjectRow = ({
 
   return (
     <Tr
-      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+      className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
       key={`identity-project-membership-${id}`}
       onClick={() => {
         if (isAccessible) {
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsSection.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsSection.tsx
index 6530b9ae5..5bb87bd31 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsSection.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsSection.tsx
@@ -47,9 +47,9 @@ export const IdentityProjectsSection = ({ identityId }: Props) => {
   };
 
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Projects</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Projects</h3>
         <IconButton
           ariaLabel="copy icon"
           variant="plain"
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityTokenModal.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityTokenModal.tsx
index d2b865a5a..c188680eb 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityTokenModal.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityTokenModal.tsx
@@ -159,7 +159,7 @@ export const IdentityTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
             </div>
           </form>
         ) : (
-          <div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
             <p className="mr-4 break-all">{token}</p>
             <Tooltip content={copyTextToken}>
               <IconButton
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx
index eb81bbcef..0ca3eb985 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx
@@ -9,11 +9,11 @@ type Props = {
 export const IdentityAuthFieldDisplay = ({ label, children, className }: Props) => {
   return (
     <div className={className}>
-      <span className="text-sm text-mineshaft-400">{label}</span>
+      <span className="text-mineshaft-400 text-sm">{label}</span>
       {children ? (
-        <p className="text-base leading-4 break-words">{children}</p>
+        <p className="break-words text-base leading-4">{children}</p>
       ) : (
-        <p className="text-base leading-4 text-bunker-400 italic">Not set</p>
+        <p className="text-bunker-400 text-base italic leading-4">Not set</p>
       )}
     </div>
   );
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthLockoutFields.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthLockoutFields.tsx
index b5cb2d901..9680b1e25 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthLockoutFields.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthLockoutFields.tsx
@@ -51,7 +51,7 @@ export const LockoutFields = ({
 
   return (
     <>
-      <div className="col-span-2 mt-3 flex justify-between border-b border-mineshaft-500 pb-2">
+      <div className="border-mineshaft-500 col-span-2 mt-3 flex justify-between border-b pb-2">
         <span className="text-bunker-300">Lockout Options</span>
         <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx
index be9c166b3..af3ddc73e 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx
@@ -77,7 +77,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
 
   return (
     <div className="col-span-2 mt-3">
-      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+      <div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
         <span className="text-bunker-300">Access Tokens</span>
         <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
@@ -103,7 +103,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
             <THead>
               <Tr className="text-xs font-medium">
                 <Th className="py-1 font-normal">Name</Th>
-                <Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
+                <Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
                 <Th className="py-1 font-normal">Expires</Th>
                 <Th className="w-5 py-1 font-normal" />
               </Tr>
@@ -128,7 +128,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
                   }
 
                   return (
-                    <Tr className="text-xs hover:bg-mineshaft-700" key={id}>
+                    <Tr className="hover:bg-mineshaft-700 text-xs" key={id}>
                       <Td>{name || "-"}</Td>
                       <Td>
                         {`${accessTokenNumUses}${accessTokenNumUsesLimit ? `/${accessTokenNumUsesLimit}` : ""}`}
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx
index b034b5367..7fcd459be 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx
@@ -66,7 +66,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
 
   return (
     <div className="col-span-2">
-      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+      <div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
         <span className="text-bunker-300">Client Secrets</span>
         <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
@@ -93,7 +93,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
               <Tr className="text-xs font-medium">
                 <Th className="py-1 font-normal">Secret</Th>
                 <Th className="py-1 font-normal">Description</Th>
-                <Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
+                <Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
                 <Th className="py-1 font-normal">Expires</Th>
                 <Th className="w-5 py-1 font-normal" />
               </Tr>
@@ -118,7 +118,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
                   }
 
                   return (
-                    <Tr className="text-xs hover:bg-mineshaft-700" key={id}>
+                    <Tr className="hover:bg-mineshaft-700 text-xs" key={id}>
                       <Td>{clientSecretPrefix}***</Td>
                       <Td>{description || "-"}</Td>
                       <Td>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx
index 7ea2c8ba3..ad3334d8e 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx
@@ -22,7 +22,7 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+        <div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
           <span className="text-bunker-300">Details</span>
           <div className="flex items-center gap-2">
             <DropdownMenu>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx
index 477753672..997b23f67 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx
@@ -75,11 +75,11 @@ export const ViewIdentityJwtAuthContent = ({
                 side="right"
                 className="max-w-xl p-2"
                 content={
-                  <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.jwksCaCert}</p>
+                  <p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.jwksCaCert}</p>
                 }
               >
                 <div className="w-min">
-                  <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                  <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                     <FontAwesomeIcon icon={faEye} />
                     <span>Reveal</span>
                   </Badge>
@@ -98,13 +98,13 @@ export const ViewIdentityJwtAuthContent = ({
                   className="max-w-xl p-2"
                   key={key}
                   content={
-                    <p className="rounded-sm bg-mineshaft-600 p-2 break-words whitespace-normal">
+                    <p className="bg-mineshaft-600 whitespace-normal break-words rounded-sm p-2">
                       {key}
                     </p>
                   }
                 >
                   <div className="inline-block w-min">
-                    <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                    <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                       <FontAwesomeIcon icon={faEye} />
                       <span>Key {index + 1}</span>
                     </Badge>
@@ -133,13 +133,13 @@ export const ViewIdentityJwtAuthContent = ({
             side="right"
             className="max-w-xl p-2"
             content={
-              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
+              <pre className="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
                 {JSON.stringify(data.boundClaims, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx
index fa39feb22..227e2fc89 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx
@@ -84,20 +84,20 @@ export const ViewIdentityKubernetesAuthContent = ({
             side="right"
             className="max-w-xl p-2"
             content={
-              <p className="rounded-sm bg-mineshaft-600 p-2 break-words">
+              <p className="bg-mineshaft-600 break-words rounded-sm p-2">
                 {data.tokenReviewerJwt || "Not provided"}
               </p>
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
             </div>
           </Tooltip>
         ) : (
-          <p className="text-base leading-4 text-bunker-400 italic">Not set</p>
+          <p className="text-bunker-400 text-base italic leading-4">Not set</p>
         )}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Account Names">
@@ -120,10 +120,10 @@ export const ViewIdentityKubernetesAuthContent = ({
           <Tooltip
             side="right"
             className="max-w-xl p-2"
-            content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
+            content={<p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCert}</p>}
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx
index f9a0b93bc..30928e5d3 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx
@@ -70,10 +70,10 @@ export const ViewIdentityLdapAuthContent = ({
         <Tooltip
           side="right"
           className="max-w-xl p-2"
-          content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.bindPass}</p>}
+          content={<p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.bindPass}</p>}
         >
           <div className="w-min">
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+            <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
               <FontAwesomeIcon icon={faEye} />
               <span>Reveal</span>
             </Badge>
@@ -90,13 +90,13 @@ export const ViewIdentityLdapAuthContent = ({
             side="right"
             className="max-w-xl p-2"
             content={
-              <p className="rounded-sm bg-mineshaft-600 p-2 break-words">
+              <p className="bg-mineshaft-600 break-words rounded-sm p-2">
                 {data.ldapCaCertificate}
               </p>
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx
index 1c81c365c..082798cf3 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx
@@ -71,10 +71,10 @@ export const ViewIdentityOidcAuthContent = ({
           <Tooltip
             side="right"
             className="max-w-xl p-2"
-            content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
+            content={<p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCert}</p>}
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
@@ -97,13 +97,13 @@ export const ViewIdentityOidcAuthContent = ({
             side="right"
             className="max-w-xl p-2"
             content={
-              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
+              <pre className="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
                 {JSON.stringify(data.boundClaims, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
@@ -117,13 +117,13 @@ export const ViewIdentityOidcAuthContent = ({
             side="right"
             className="max-w-xl p-2"
             content={
-              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
+              <pre className="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
                 {JSON.stringify(data.claimMetadataMapping, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx
index 6dc45eefa..1a8203a1b 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx
@@ -68,11 +68,11 @@ export const ViewIdentityTlsCertAuthContent = ({
           side="right"
           className="max-w-xl p-2"
           content={
-            <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCertificate}</p>
+            <p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCertificate}</p>
           }
         >
           <div className="w-min">
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+            <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
               <FontAwesomeIcon icon={faEye} />
               <span>Reveal</span>
             </Badge>
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx
index 4d7b95087..935a16474 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx
@@ -103,7 +103,7 @@ export const ViewIdentityUniversalAuthContent = ({
         />
       )}
       <div className="col-span-2 my-3">
-        <div className="mb-3 border-b border-mineshaft-500 pb-2">
+        <div className="border-mineshaft-500 mb-3 border-b pb-2">
           <span className="text-bunker-300">Client ID</span>
         </div>
         <div className="flex items-center gap-2">
diff --git a/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
index 660e4b26d..db3ff17dc 100644
--- a/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
@@ -11,7 +11,7 @@ export const NetworkingPage = () => {
         <title>Infisical | Networking</title>
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex w-full justify-center text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
             title="Networking"
diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx
index 27ebb6820..fd62c81f6 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx
@@ -100,16 +100,16 @@ export const GatewayTab = withPermission(
     );
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-medium text-mineshaft-100">Gateways</h3>
+            <h3 className="text-mineshaft-100 text-lg font-medium">Gateways</h3>
             <a
               href="https://infisical.com/docs/documentation/platform/gateways/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 py-0.5 text-sm font-normal opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -120,7 +120,7 @@ export const GatewayTab = withPermission(
             </a>
           </div>
         </div>
-        <p className="mb-4 text-sm text-mineshaft-400">
+        <p className="text-mineshaft-400 mb-4 text-sm">
           Create and configure gateway to access private network resources from Infisical
         </p>
         <div>
@@ -160,7 +160,7 @@ export const GatewayTab = withPermission(
                     <Td>
                       <div className="flex items-center gap-2">
                         <span>{el.name}</span>
-                        <span className="rounded-sm bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
+                        <span className="bg-mineshaft-700 text-mineshaft-400 rounded-sm px-1.5 py-0.5 text-xs">
                           Gateway v{el.isV1 ? "1" : "2"}
                         </span>
                       </div>
diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx
index 1a0d41b4c..0f70c3f0f 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx
@@ -55,7 +55,7 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <NoticeBannerV2 className="mx-auto mb-4" title="Project Linking">
-        <p className="mt-1 text-xs text-mineshaft-300">
+        <p className="text-mineshaft-300 mt-1 text-xs">
           Since the 15th May 2025, all gateways are automatically available for use in all projects
           and you no longer need to link them.
           <br />
diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
index 89b7bf4c9..8da5294f5 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
@@ -66,16 +66,16 @@ export const RelayTab = withPermission(
     );
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-medium text-mineshaft-100">Relays</h3>
+            <h3 className="text-mineshaft-100 text-lg font-medium">Relays</h3>
             <a
               href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 py-0.5 text-sm font-normal opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -86,7 +86,7 @@ export const RelayTab = withPermission(
             </a>
           </div>
         </div>
-        <p className="mb-4 text-sm text-mineshaft-400">
+        <p className="text-mineshaft-400 mb-4 text-sm">
           Create and configure relays to securely access private network resources from Infisical
         </p>
         <div>
@@ -120,7 +120,7 @@ export const RelayTab = withPermission(
                         <span>{el.name}</span>
                         {!el.orgId && (
                           <Tooltip content="This is a managed relay provided by Infisical">
-                            <span className="rounded-sm bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
+                            <span className="bg-mineshaft-700 text-mineshaft-400 rounded-sm px-1.5 py-0.5 text-xs">
                               Managed
                             </span>
                           </Tooltip>
diff --git a/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx b/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx
index 495842bf5..45899b290 100644
--- a/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx
+++ b/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx
@@ -20,7 +20,7 @@ export const NoOrgPage = () => {
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="min-h-screen bg-bunker-800">
+      <div className="bg-bunker-800 min-h-screen">
         <CreateOrgModal
           isOpen={popUp.createOrg.isOpen}
           onClose={() => handlePopUpToggle("createOrg", false)}
diff --git a/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx b/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
index 2e4b43cbe..d4e1c6ede 100644
--- a/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
@@ -58,7 +58,7 @@ export const ProjectsPage = () => {
     : true;
 
   return (
-    <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800">
+    <div className="bg-bunker-800 mx-auto flex max-w-7xl flex-col justify-start">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.members.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
diff --git a/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx b/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
index d7dcfcb3e..4048b47ce 100644
--- a/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
@@ -136,17 +136,17 @@ export const AllProjectView = ({
       <div className="flex w-full flex-row">
         <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
-          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+          className="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] text-sm duration-200"
           containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         />
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1">
           <Tooltip content="Toggle Sort Direction">
             <IconButton
-              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
+              className="hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
               ariaLabel="Sort asc"
               variant="plain"
               size="xs"
@@ -161,7 +161,7 @@ export const AllProjectView = ({
           <DropdownMenuTrigger asChild>
             <div
               className={twMerge(
-                "ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1",
+                "border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1",
                 projectTypeFilter && "border-primary-400 text-primary-400"
               )}
             >
@@ -169,7 +169,7 @@ export const AllProjectView = ({
                 <IconButton
                   ariaLabel="project-types"
                   className={twMerge(
-                    "min-w-[2.4rem] border-none hover:bg-mineshaft-600",
+                    "hover:bg-mineshaft-600 min-w-[2.4rem] border-none",
                     projectTypeFilter && "text-primary-400"
                   )}
                   variant="plain"
@@ -200,7 +200,7 @@ export const AllProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex gap-x-0.5 rounded-md border p-1">
           <Tooltip content="Disabled across All Project view.">
             <div className="flex cursor-not-allowed items-center justify-center">
               <IconButton
@@ -208,7 +208,7 @@ export const AllProjectView = ({
                 ariaLabel="grid"
                 size="xs"
                 isDisabled
-                className="pointer-events-none min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
+                className="hover:bg-mineshaft-600 pointer-events-none min-w-[2.4rem] border-none bg-transparent"
               >
                 <FontAwesomeIcon icon={faBorderAll} />
               </IconButton>
@@ -218,7 +218,7 @@ export const AllProjectView = ({
             variant="outline_bg"
             ariaLabel="list"
             size="xs"
-            className="min-w-[2.4rem] border-none bg-mineshaft-500 hover:bg-mineshaft-600"
+            className="bg-mineshaft-500 hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
           >
             <FontAwesomeIcon icon={faList} />
           </IconButton>
@@ -253,12 +253,12 @@ export const AllProjectView = ({
             <div
               key={`workspace-cards-loading-${i + 1}`}
               className={twMerge(
-                "flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700",
+                "border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border px-6",
                 i === 0 && "rounded-t-md",
                 i === 2 && "rounded-b-md border-b"
               )}
             >
-              <Skeleton className="w-full bg-mineshaft-600" />
+              <Skeleton className="bg-mineshaft-600 w-full" />
             </div>
           ))}
         {!isProjectLoading &&
@@ -288,20 +288,20 @@ export const AllProjectView = ({
               }}
               key={workspace.id}
               className={twMerge(
-                "group flex min-w-72 items-center justify-center border-t border-r border-l border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md",
-                workspace.isMember ? "cursor-pointer hover:bg-mineshaft-700" : "cursor-default"
+                "border-mineshaft-600 bg-mineshaft-800 group flex min-w-72 items-center justify-center border-l border-r border-t px-6 py-3 first:rounded-t-md",
+                workspace.isMember ? "hover:bg-mineshaft-700 cursor-pointer" : "cursor-default"
               )}
             >
               <div className="mr-3 flex min-w-0 flex-1 items-center gap-3">
-                <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
+                <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1 shadow-inner">
                   <Lottie
                     className="h-[1.35rem] w-[1.35rem] shrink-0"
                     icon={getProjectLottieIcon(workspace.type)}
                   />
                 </div>
                 <div className="-mt-0.5 flex min-w-0 flex-col">
-                  <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
-                  <p className="truncate text-xs leading-4 text-mineshaft-300">
+                  <p className="text-mineshaft-100 truncate text-sm">{workspace.name}</p>
+                  <p className="text-mineshaft-300 truncate text-xs leading-4">
                     {getProjectTitle(workspace.type)}{" "}
                     {workspace.description ? `- ${workspace.description}` : ""}
                   </p>
@@ -351,7 +351,7 @@ export const AllProjectView = ({
       </div>
       {!isProjectLoading && Boolean(searchedProjects?.totalCount) && (
         <Pagination
-          className="rounded-b-md border border-mineshaft-600"
+          className="border-mineshaft-600 rounded-b-md border"
           perPage={perPage}
           perPageList={[12, 24, 48, 96]}
           count={searchedProjects?.totalCount || 0}
@@ -361,10 +361,10 @@ export const AllProjectView = ({
         />
       )}
       {!isProjectLoading && !searchedProjects?.totalCount && (
-        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+        <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
           <FontAwesomeIcon
             icon={faFolderOpen}
-            className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
+            className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
           />
           <div className="text-center font-light">No Projects Found</div>
         </div>
diff --git a/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx b/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
index 020947f28..b3f273dba 100644
--- a/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
@@ -200,15 +200,15 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className="cursor-pointer overflow-clip rounded-sm border border-l-4 border-mineshaft-600 border-l-mineshaft-400 bg-mineshaft-800 p-4 transition-transform duration-100 hover:scale-[103%] hover:border-l-primary hover:bg-mineshaft-700"
+      className="border-mineshaft-600 border-l-mineshaft-400 bg-mineshaft-800 hover:border-l-primary hover:bg-mineshaft-700 cursor-pointer overflow-clip rounded-sm border border-l-4 p-4 transition-transform duration-100 hover:scale-[103%]"
     >
       <div className="flex items-center gap-4">
-        <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
+        <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1.5 shadow-inner">
           <Lottie className="h-7 w-7 shrink-0" icon={getProjectLottieIcon(workspace.type)} />
         </div>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-lg font-medium text-mineshaft-100">{workspace.name}</p>
-          <p className="truncate text-sm leading-4 text-mineshaft-300">
+          <p className="text-mineshaft-100 truncate text-lg font-medium">{workspace.name}</p>
+          <p className="text-mineshaft-300 truncate text-sm leading-4">
             {getProjectTitle(workspace.type)}
           </p>
         </div>
@@ -216,7 +216,7 @@ export const MyProjectView = ({
           {isFavorite ? (
             <FontAwesomeIcon
               icon={faSolidStar}
-              className="text-sm text-yellow-600 hover:text-mineshaft-400"
+              className="hover:text-mineshaft-400 text-sm text-yellow-600"
               onClick={(e) => {
                 e.stopPropagation();
                 removeProjectFromFavorites(workspace.id);
@@ -225,7 +225,7 @@ export const MyProjectView = ({
           ) : (
             <FontAwesomeIcon
               icon={faStar}
-              className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              className="text-mineshaft-400 hover:text-mineshaft-300 text-sm"
               onClick={(e) => {
                 e.stopPropagation();
                 addProjectToFavorites(workspace.id);
@@ -234,7 +234,7 @@ export const MyProjectView = ({
           )}
         </div>
       </div>
-      <p className="mt-4 truncate text-sm text-mineshaft-400">
+      <p className="text-mineshaft-400 mt-4 truncate text-sm">
         {workspace.description || "No description"}
       </p>
     </div>
@@ -251,20 +251,20 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className={`group flex min-w-72 cursor-pointer border-t border-r border-l border-mineshaft-600 bg-mineshaft-800 px-6 py-3 hover:bg-mineshaft-700 ${
+      className={`border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 group flex min-w-72 cursor-pointer border-l border-r border-t px-6 py-3 ${
         index === 0 && "rounded-t-md"
       }`}
     >
       <div className="flex min-w-0 flex-1 items-center gap-3">
-        <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
+        <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1 shadow-inner">
           <Lottie
             className="h-[1.35rem] w-[1.35rem] shrink-0"
             icon={getProjectLottieIcon(workspace.type)}
           />
         </div>
         <div className="-mt-0.5 flex min-w-0 flex-col">
-          <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
-          <p className="truncate text-xs leading-4 text-mineshaft-300">
+          <p className="text-mineshaft-100 truncate text-sm">{workspace.name}</p>
+          <p className="text-mineshaft-300 truncate text-xs leading-4">
             {getProjectTitle(workspace.type)}{" "}
             {workspace.description ? `- ${workspace.description}` : ""}
           </p>
@@ -274,7 +274,7 @@ export const MyProjectView = ({
         {isFavorite ? (
           <FontAwesomeIcon
             icon={faSolidStar}
-            className="ml-6 text-sm text-yellow-600 hover:text-mineshaft-400"
+            className="hover:text-mineshaft-400 ml-6 text-sm text-yellow-600"
             onClick={(e) => {
               e.stopPropagation();
               removeProjectFromFavorites(workspace.id);
@@ -283,7 +283,7 @@ export const MyProjectView = ({
         ) : (
           <FontAwesomeIcon
             icon={faStar}
-            className="ml-6 text-sm text-mineshaft-400 hover:text-mineshaft-300"
+            className="text-mineshaft-400 hover:text-mineshaft-300 ml-6 text-sm"
             onClick={(e) => {
               e.stopPropagation();
               addProjectToFavorites(workspace.id);
@@ -304,16 +304,16 @@ export const MyProjectView = ({
               Array.apply(0, Array(3)).map((_x, i) => (
                 <div
                   key={`workspace-cards-loading-${i + 1}`}
-                  className="flex h-40 min-w-72 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+                  className="border-mineshaft-600 bg-mineshaft-800 flex h-40 min-w-72 flex-col justify-between rounded-md border p-4"
                 >
-                  <div className="mt-0 text-lg text-mineshaft-100">
-                    <Skeleton className="w-3/4 bg-mineshaft-600" />
+                  <div className="text-mineshaft-100 mt-0 text-lg">
+                    <Skeleton className="bg-mineshaft-600 w-3/4" />
                   </div>
-                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
+                  <div className="text-mineshaft-300 mt-0 pb-6 text-sm">
+                    <Skeleton className="bg-mineshaft-600 w-1/2" />
                   </div>
                   <div className="flex justify-end">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
+                    <Skeleton className="bg-mineshaft-600 w-1/2" />
                   </div>
                 </div>
               ))}
@@ -336,11 +336,11 @@ export const MyProjectView = ({
               Array.apply(0, Array(3)).map((_x, i) => (
                 <div
                   key={`workspace-cards-loading-${i + 1}`}
-                  className={`group flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+                  className={`border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 group flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border px-6 ${
                     i === 0 && "rounded-t-md"
                   } ${i === 2 && "rounded-b-md border-b"}`}
                 >
-                  <Skeleton className="w-full bg-mineshaft-600" />
+                  <Skeleton className="bg-mineshaft-600 w-full" />
                 </div>
               ))}
             {!isProjectViewLoading &&
@@ -353,20 +353,20 @@ export const MyProjectView = ({
     }
   } else if (workspaces.length && searchFilter) {
     projectsComponents = (
-      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+      <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
         <FontAwesomeIcon
           icon={faSearch}
-          className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
+          className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
         />
         <div className="text-center font-light">No projects match search...</div>
       </div>
     );
   } else if (filteredWorkspaces.length === 0 && isTableFilteredByType) {
     projectsComponents = (
-      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+      <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
         <FontAwesomeIcon
           icon={faSearch}
-          className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
+          className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
         />
         <div className="text-center font-light">No projects match filters...</div>
       </div>
@@ -378,17 +378,17 @@ export const MyProjectView = ({
       <div className="flex w-full flex-row">
         <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
-          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+          className="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] text-sm duration-200"
           containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         />
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1">
           <Tooltip content="Toggle Sort Direction">
             <IconButton
-              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
+              className="hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
               ariaLabel={`Sort ${
                 orderDirection === OrderByDirection.ASC ? "descending" : "ascending"
               }`}
@@ -407,7 +407,7 @@ export const MyProjectView = ({
           <DropdownMenuTrigger asChild>
             <div
               className={twMerge(
-                "ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1",
+                "border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1",
                 isTableFilteredByType && "border-primary-400 text-primary-400"
               )}
             >
@@ -415,7 +415,7 @@ export const MyProjectView = ({
                 <IconButton
                   ariaLabel="project-types"
                   className={twMerge(
-                    "min-w-[2.4rem] border-none hover:bg-mineshaft-600",
+                    "hover:bg-mineshaft-600 min-w-[2.4rem] border-none",
                     isTableFilteredByType && "text-primary-400"
                   )}
                   variant="plain"
@@ -446,7 +446,7 @@ export const MyProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex gap-x-0.5 rounded-md border p-1">
           <IconButton
             variant="outline_bg"
             onClick={() => {
@@ -457,7 +457,7 @@ export const MyProjectView = ({
             size="xs"
             className={`${
               projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"
-            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+            } hover:bg-mineshaft-600 min-w-[2.4rem] border-none`}
           >
             <FontAwesomeIcon icon={faBorderAll} />
           </IconButton>
@@ -471,7 +471,7 @@ export const MyProjectView = ({
             size="xs"
             className={`${
               projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"
-            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+            } hover:bg-mineshaft-600 min-w-[2.4rem] border-none`}
           >
             <FontAwesomeIcon icon={faList} />
           </IconButton>
@@ -505,8 +505,8 @@ export const MyProjectView = ({
         <Pagination
           className={
             projectsViewMode === ProjectsViewMode.GRID
-              ? "col-span-full justify-start! border-transparent bg-transparent pl-2"
-              : "rounded-b-md border border-mineshaft-600"
+              ? "justify-start! col-span-full border-transparent bg-transparent pl-2"
+              : "border-mineshaft-600 rounded-b-md border"
           }
           perPage={perPage}
           perPageList={[12, 24, 48, 96]}
@@ -517,10 +517,10 @@ export const MyProjectView = ({
         />
       )}
       {isWorkspaceEmpty && !isTableFilteredByType && (
-        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+        <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
           <FontAwesomeIcon
             icon={faFolderOpen}
-            className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
+            className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
           />
           <div className="text-center font-light">
             You are not part of any projects in this organization yet. When you are, they will
diff --git a/frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx b/frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx
index 9d17891d3..a918a3d05 100644
--- a/frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export const ProjectListToggle = ({ value, onChange }: Props) => {
   return (
-    <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+    <div className="border-mineshaft-600 bg-mineshaft-800 flex gap-x-0.5 rounded-md border p-1">
       <Button
         variant="outline_bg"
         onClick={() => {
@@ -21,7 +21,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === ProjectListView.MyProjects ? "bg-mineshaft-500" : "bg-transparent"
-        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
       >
         My Projects
       </Button>
@@ -33,7 +33,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === ProjectListView.AllProjects ? "bg-mineshaft-500" : "bg-transparent"
-        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
       >
         All Projects
       </Button>
diff --git a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
index ac67f0d54..8522ff90e 100644
--- a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
@@ -77,7 +77,7 @@ export const Page = () => {
   const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
@@ -85,7 +85,7 @@ export const Page = () => {
               <div className="flex flex-col">
                 <div>
                   <span>{data.name}</span>
-                  <p className="text-sm leading-3 font-normal text-mineshaft-400 normal-case">
+                  <p className="text-mineshaft-400 text-sm font-normal normal-case leading-3">
                     {data.slug} {data.description && `- ${data.description}`}
                   </p>
                 </div>
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx b/frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx
index 8995c03b3..763197b9b 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx
@@ -135,12 +135,12 @@ export const DuplicateOrgRoleModal = ({ isOpen, onOpenChange, roleId }: Props) =
         {isPending ? (
           <div className="flex h-full flex-col items-center justify-center py-2.5">
             <Spinner size="lg" className="text-mineshaft-500" />
-            <p className="mt-4 text-sm text-mineshaft-400">Loading Role...</p>
+            <p className="text-mineshaft-400 mt-4 text-sm">Loading Role...</p>
           </div>
         ) : role ? (
           <Content role={role!} onClose={() => onOpenChange(false)} />
         ) : (
-          <p className="w-full text-center text-red">
+          <p className="text-red w-full text-center">
             Error: could not find role with slug &#34;{roleId}&#34;
           </p>
         )}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
index 48a0de62e..c15cc0821 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
@@ -73,7 +73,7 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -83,7 +83,7 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
index b8e13af69..bdc5f6696 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
@@ -121,7 +121,7 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -131,7 +131,7 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAuditLogsRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAuditLogsRow.tsx
index fec6da56a..35597d254 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAuditLogsRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAuditLogsRow.tsx
@@ -84,7 +84,7 @@ export const OrgPermissionAuditLogsRow = ({ isEditable, control, setValue }: Pro
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -94,7 +94,7 @@ export const OrgPermissionAuditLogsRow = ({ isEditable, control, setValue }: Pro
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
index de81119a1..ad37a26c6 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
@@ -109,7 +109,7 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -119,7 +119,7 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
index 468b2f5f2..3a4d1bb69 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
@@ -118,7 +118,7 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -128,7 +128,7 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
index 04e38a533..735d9673e 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
@@ -142,7 +142,7 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -152,7 +152,7 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
index 0dbe4d30c..28da40937 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
@@ -152,7 +152,7 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -162,7 +162,7 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
index 6eb161983..edbac8f03 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
@@ -70,7 +70,7 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -80,7 +80,7 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionMachineIdentityAuthTemplateRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionMachineIdentityAuthTemplateRow.tsx
index 46908889a..f231aa2a9 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionMachineIdentityAuthTemplateRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionMachineIdentityAuthTemplateRow.tsx
@@ -148,7 +148,7 @@ export const OrgPermissionMachineIdentityAuthTemplateRow = ({
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -158,7 +158,7 @@ export const OrgPermissionMachineIdentityAuthTemplateRow = ({
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionRelayRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionRelayRow.tsx
index 238a03ff5..4bee52e84 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionRelayRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionRelayRow.tsx
@@ -117,7 +117,7 @@ export const OrgRelayPermissionRow = ({ isEditable, control, setValue }: Props)
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -127,7 +127,7 @@ export const OrgRelayPermissionRow = ({ isEditable, control, setValue }: Props)
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
index 084687a08..61285d7dc 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
@@ -67,7 +67,7 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -77,7 +77,7 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
index aa70a2e08..b05e11018 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
@@ -67,7 +67,7 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -77,7 +77,7 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
index 0e3b48a4e..c651d7e10 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
@@ -163,7 +163,7 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
   return (
     <>
       <Tr
-        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -173,7 +173,7 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="h-8 w-40 bg-mineshaft-700"
+            className="bg-mineshaft-700 h-8 w-40"
             dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
index 1ee3b4d91..03aa7a768 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
@@ -115,18 +115,18 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
     >
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
         <div>
-          <h3 className="text-lg font-medium text-mineshaft-100">Policies</h3>
-          <p className="text-sm leading-3 text-mineshaft-400">Configure granular access policies</p>
+          <h3 className="text-mineshaft-100 text-lg font-medium">Policies</h3>
+          <p className="text-mineshaft-400 text-sm leading-3">Configure granular access policies</p>
         </div>
         {isCustomRole && (
           <div className="flex items-center">
             {isDirty && (
               <Button
-                className="mr-4 text-mineshaft-300"
+                className="text-mineshaft-300 mr-4"
                 variant="link"
                 isDisabled={isSubmitting || !isDirty}
                 isLoading={isSubmitting}
diff --git a/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx b/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
index a026b86f3..e51ad5aad 100644
--- a/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
@@ -20,7 +20,7 @@ export const SecretSharingPage = () => {
         <meta name="og:description" content={String(t("approval.og-description"))} />
       </Helmet>
       <div className="h-full">
-        <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
+        <div className="bg-bunker-800 container mx-auto h-full w-full max-w-7xl text-white">
           <PageHeader
             title="Secret Sharing"
             description="Share secrets securely using a shareable link"
@@ -30,7 +30,7 @@ export const SecretSharingPage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/documentation/platform/secret-sharing"
             >
-              <div className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              <div className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
                 Documentation{" "}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretForm.tsx b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretForm.tsx
index d2ada2b29..57d0125f4 100644
--- a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretForm.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretForm.tsx
@@ -173,7 +173,7 @@ export const RequestSecretForm = () => {
         </IconButton>
       </div>
       <Button
-        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
+        className="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
diff --git a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretTab.tsx b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretTab.tsx
index fd3b1d5b5..6ffe16343 100644
--- a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretTab.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretTab.tsx
@@ -42,9 +42,9 @@ export const RequestSecretTab = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Secret Requests</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Secret Requests</p>
         <Button
           colorSchema="primary"
           leftIcon={<FontAwesomeIcon icon={faPlus} />}
diff --git a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RevealSecretValueModal.tsx b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RevealSecretValueModal.tsx
index 5aa529e77..8ef6dd84d 100644
--- a/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RevealSecretValueModal.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RevealSecretValueModal.tsx
@@ -22,12 +22,12 @@ const Content = ({ secretValue, secretRequestName }: ContentProps) => {
   return (
     <>
       {secretRequestName && (
-        <p className="mb-8 text-sm text-mineshaft-200">
+        <p className="text-mineshaft-200 mb-8 text-sm">
           Shared secret value for <strong>{secretRequestName}</strong>
         </p>
       )}
 
-      <div className="mb-8 flex items-center justify-between rounded-md bg-mineshaft-700 p-2 text-base text-gray-400">
+      <div className="bg-mineshaft-700 mb-8 flex items-center justify-between rounded-md p-2 text-base text-gray-400">
         <p className="mr-4 break-all">{secretValue}</p>
         <Tooltip content="Click to copy">
           <IconButton
diff --git a/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretTab.tsx b/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretTab.tsx
index d4f2f0a1f..c80be2906 100644
--- a/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretTab.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretTab.tsx
@@ -40,9 +40,9 @@ export const ShareSecretTab = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Shared Secrets</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Shared Secrets</p>
         <Button
           colorSchema="primary"
           leftIcon={<FontAwesomeIcon icon={faPlus} />}
diff --git a/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx b/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
index ae1aa3772..bb14227a4 100644
--- a/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
+++ b/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
@@ -19,7 +19,7 @@ export const SecretSharingSettingsPage = withPermission(
         <Helmet>
           <title>{t("common.head-title", { title: "Secret Share Settings" })}</title>
         </Helmet>
-        <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="bg-bunker-800 flex w-full justify-center text-white">
           <div className="w-full max-w-7xl">
             <PageHeader title="Secret Share Settings" />
             <SecretSharingSettingsTabGroup />
diff --git a/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx b/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx
index 034c7d8fe..50ac95d8a 100644
--- a/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx
+++ b/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx
@@ -122,11 +122,11 @@ export const OrgSecretShareLimitSection = () => {
   ];
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Secret Share Limits</p>
       </div>
-      <p className="mt-2 mb-4 text-sm text-gray-400">
+      <p className="mb-4 mt-2 text-sm text-gray-400">
         These settings establish the maximum limits for all Shared Secret parameters within this
         organization. Shared secrets cannot be created with values exceeding these limits.
       </p>
@@ -180,7 +180,7 @@ export const OrgSecretShareLimitSection = () => {
                         <SelectItem
                           key={value}
                           value={value}
-                          className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                          className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                         >
                           <div className="ml-3 font-medium">{label}</div>
                         </SelectItem>
diff --git a/frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx b/frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx
index 1ea62c187..380560055 100644
--- a/frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx
+++ b/frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx
@@ -31,7 +31,7 @@ export const SecretSharingAllowShareToAnyone = () => {
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-6">
       <div className="py-4">
         <div className="mb-2 flex justify-between">
           <h3 className="text-md text-mineshaft-100">
@@ -48,7 +48,7 @@ export const SecretSharingAllowShareToAnyone = () => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           If enabled, team members will be able to share secrets to members outside of this
           organization
         </p>
diff --git a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
index 263672313..3343efd1b 100644
--- a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
@@ -13,7 +13,7 @@ export const SettingsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex w-full justify-center text-white">
         <div className="w-full max-w-7xl">
           <PageHeader title={t("settings.org.title")} />
           <OrgTabGroup />
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx
index f5499e55a..e03838888 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx
@@ -76,7 +76,7 @@ export const DatadogProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }:
               <Select
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx
index f4f7932a4..bfd5bbab5 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx
@@ -21,9 +21,9 @@ export const AuditLogStreamsTab = withPermission(
     ] as const);
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="flex justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">Audit Log Streams</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Audit Log Streams</p>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Settings}>
             {(isAllowed) => (
               <Button
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx
index 1d5cbc4f0..0989791a2 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx
@@ -14,27 +14,27 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
   const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
 
   return (
-    <div className="mb-4 flex w-full items-center gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-center gap-2 border-b pb-4">
       <div className="relative">
         {providerDetails.image ? (
           <img
             alt={providerDetails.name}
             src={`/images/integrations/${providerDetails.image}`}
-            className="size-12 rounded-md bg-bunker-500 p-2"
+            className="bg-bunker-500 size-12 rounded-md p-2"
           />
         ) : (
           providerDetails.icon && (
-            <div className="size-12 rounded-md bg-bunker-500 p-2">
+            <div className="bg-bunker-500 size-12 rounded-md p-2">
               <FontAwesomeIcon
                 icon={providerDetails.icon}
-                className="h-full w-full text-mineshaft-300"
+                className="text-mineshaft-300 h-full w-full"
               />
             </div>
           )
         )}
       </div>
       <div>
-        <div className="mb-1 flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 mb-1 flex items-center">
           {providerDetails.name}
           <a
             href="https://infisical.com/docs/documentation/platform/audit-log-streams/audit-log-streams#example-providers"
@@ -42,14 +42,14 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
             className="ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-px text-xs" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-px mr-1 text-xs" />
               <span>Docs</span>
               <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-px ml-1 text-[10px]" />
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {logStreamExists
             ? `${providerDetails.name} Log Stream`
             : `Create a ${providerDetails.name} Log Stream`}
@@ -58,7 +58,7 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
       {onBack && (
         <button
           type="button"
-          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
           onClick={onBack}
         >
           Select another provider
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx
index 258730731..bd9c4f780 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx
@@ -32,7 +32,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
 
   return (
     <Tr
-      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
+      className={twMerge("hover:bg-mineshaft-700 group h-12 transition-colors duration-100")}
       key={`log-stream-${id}`}
     >
       <Td>
@@ -48,7 +48,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
               providerDetails.icon && (
                 <FontAwesomeIcon
                   icon={providerDetails.icon}
-                  className="size-5 text-mineshaft-300"
+                  className="text-mineshaft-300 size-5"
                 />
               )
             )}
@@ -56,7 +56,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
           <span className="hidden lg:inline">{providerDetails.name}</span>
         </div>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex w-full items-center">
           <p className="truncate">{url}</p>
         </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx
index ee47f8c0f..11afacf2a 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx
@@ -164,14 +164,14 @@ export const AuditLogStreamTable = () => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Filter by Provider</DropdownMenuLabel>
             {logStreams.length ? (
               [...new Set(logStreams.map(({ provider }) => provider))].map((provider) => {
@@ -202,7 +202,7 @@ export const AuditLogStreamTable = () => {
                         providerDetails.icon && (
                           <FontAwesomeIcon
                             icon={providerDetails.icon}
-                            className="size-4 text-mineshaft-300"
+                            className="text-mineshaft-300 size-4"
                           />
                         )
                       )}
diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx
index c8b206cc4..2728d5d27 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx
@@ -54,14 +54,14 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map((option) => {
           const { image, icon, name, size = 50 } = AUDIT_LOG_STREAM_PROVIDER_MAP[option.provider];
 
@@ -75,7 +75,7 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
                   onSelect(option.provider);
                 }
               }}
-              className={`group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 ${option.provider === LogProvider.Custom ? "bg-mineshaft-700/30 hover:bg-mineshaft-600/30" : "bg-mineshaft-700 hover:bg-mineshaft-600"} p-4 duration-200`}
+              className={`border-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border ${option.provider === LogProvider.Custom ? "bg-mineshaft-700/30 hover:bg-mineshaft-600/30" : "bg-mineshaft-700 hover:bg-mineshaft-600"} p-4 duration-200`}
             >
               {image && (
                 <div className="relative">
@@ -90,7 +90,7 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
                 </div>
               )}
               {icon && (
-                <FontAwesomeIcon className="mt-auto size-10 text-mineshaft-300" icon={icon} />
+                <FontAwesomeIcon className="text-mineshaft-300 mt-auto size-10" icon={icon} />
               )}
               <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
                 {name}
diff --git a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx
index 4857e8fe3..89154064f 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx
@@ -14,10 +14,10 @@ export const ExternalMigrationsTab = () => {
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["selectImportPlatform"] as const);
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
-          <p className="text-xl font-medium text-mineshaft-100">Import from external source</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Import from external source</p>
 
           <div>
             <a
@@ -25,7 +25,7 @@ export const ExternalMigrationsTab = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/documentation/platform/external-migrations/overview"
             >
-              <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow ml-2 inline-block rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/GenericDropzone.tsx b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/GenericDropzone.tsx
index c564572a4..7b51dccc9 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/GenericDropzone.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/GenericDropzone.tsx
@@ -82,7 +82,7 @@ export const GenericDropzone = forwardRef<HTMLInputElement, Props>(
           onDragOver={handleDrag}
           onDrop={handleDrop}
           className={twMerge(
-            "relative mx-0.5 mt-4 mb-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 px-2 py-4 text-sm text-mineshaft-200 opacity-60 outline-2 outline-chicago-600 duration-200 outline-dashed hover:opacity-100",
+            "bg-mineshaft-900 text-mineshaft-200 outline-chicago-600 relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md px-2 py-4 text-sm opacity-60 outline-dashed outline-2 duration-200 hover:opacity-100",
             isDragActive && "opacity-100",
             !isSmaller && "mx-auto w-full max-w-3xl flex-col space-y-4 py-20"
           )}
diff --git a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/SelectImportFromPlatformModal.tsx b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/SelectImportFromPlatformModal.tsx
index c7c22e0a7..273c22148 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/SelectImportFromPlatformModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/SelectImportFromPlatformModal.tsx
@@ -60,14 +60,14 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 text-sm text-mineshaft-300">
+              <div className="text-mineshaft-300 mb-4 text-sm">
                 Select a platform to import from
               </div>
               <div className="flex items-center space-x-4">
                 {PLATFORM_LIST.map((platform, idx) => (
                   <div
                     key={`platform-${idx + 1}`}
-                    className="flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded-sm border border-mineshaft-500 bg-mineshaft-700 p-6 py-5 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="border-mineshaft-500 bg-mineshaft-700 hover:border-primary/70 hover:bg-primary/10 flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded-sm border p-6 py-5 transition-all hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -86,7 +86,7 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
                       alt={`${platform.title} logo`}
                       style={{ width: platform.size }}
                     />
-                    <div className="text-center text-sm whitespace-pre-wrap">{platform.title}</div>
+                    <div className="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
index d793a1e1e..b023975d0 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
@@ -168,7 +168,7 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
                               onChange(v);
                             }
                           }}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                           dropdownContainerClassName="max-w-none"
                           isLoading={isGatewayLoading}
                           placeholder="Default: Internet Gateway"
@@ -255,9 +255,9 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
                   <div
                     key={el.value}
                     className={twMerge(
-                      "flex w-full cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 p-4 opacity-75 transition-all",
+                      "border-mineshaft-600 flex w-full cursor-pointer flex-col items-center gap-2 rounded-sm border p-4 opacity-75 transition-all",
                       field.value === el.value
-                        ? "border-opacity-70 border-primary-700 bg-mineshaft-700 opacity-100"
+                        ? "border-primary-700 bg-mineshaft-700 border-opacity-70 opacity-100"
                         : "hover:border-primary-800/75 hover:bg-mineshaft-600",
                       el.isCustom && "col-span-2",
                       el.isCustom &&
diff --git a/frontend/src/pages/organization/SettingsPage/components/KmipTab/OrgKmipTab.tsx b/frontend/src/pages/organization/SettingsPage/components/KmipTab/OrgKmipTab.tsx
index 148b9f443..f41660756 100644
--- a/frontend/src/pages/organization/SettingsPage/components/KmipTab/OrgKmipTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/KmipTab/OrgKmipTab.tsx
@@ -79,7 +79,7 @@ const OrgConfigSection = ({
   return (
     <>
       <div className="flex flex-col justify-start">
-        <div className="mb-2 text-xl font-medium text-mineshaft-100">KMIP configuration</div>
+        <div className="text-mineshaft-100 mb-2 text-xl font-medium">KMIP configuration</div>
         {isKmipConfigLoading && (
           <div className="mt-8 flex justify-center">
             <Spinner />
@@ -89,7 +89,7 @@ const OrgConfigSection = ({
           <>
             <div className="mt-2">
               <div className="text-lg">Certificate Chain for KMIP Clients</div>
-              <div className="mt-2 max-w-lg text-sm text-mineshaft-400">
+              <div className="text-mineshaft-400 mt-2 max-w-lg text-sm">
                 This certificate chain is used by KMIP clients to verify the identity of the KMIP
                 server. It should be presented by the server during TLS authentication to establish
                 a secure and encrypted connection.
@@ -131,7 +131,7 @@ const OrgConfigSection = ({
             </div>
             <div className="mt-8">
               <div className="text-lg">Certificate Chain for KMIP Server</div>
-              <div className="mt-2 max-w-lg text-sm text-mineshaft-400">
+              <div className="text-mineshaft-400 mt-2 max-w-lg text-sm">
                 This certificate chain is used by the KMIP server to verify the identity of KMIP
                 clients. It should be configured on the server to establish trust in client
                 certificates during mutual TLS authentication.
@@ -261,7 +261,7 @@ export const KmipTab = () => {
   const { data: kmipConfig, isPending } = useGetOrgKmipConfig(currentOrg.id);
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <OrgConfigSection kmipConfig={kmipConfig} isKmipConfigLoading={isPending} />
     </div>
   );
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
index e78ad61b9..48b93cb24 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
@@ -46,7 +46,7 @@ export const OrgDeleteSection = () => {
     <>
       <hr className="border-mineshaft-600" />
       <div className="py-4">
-        <p className="text-md mb-4 text-mineshaft-100">Danger Zone</p>
+        <p className="text-md text-mineshaft-100 mb-4">Danger Zone</p>
         <Button
           isLoading={isPending}
           colorSchema="danger"
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AddExternalKmsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AddExternalKmsForm.tsx
index 6068b13e7..a1b7ff4c7 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AddExternalKmsForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AddExternalKmsForm.tsx
@@ -59,12 +59,12 @@ export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 text-mineshaft-300">Select a KMS Provider</div>
+              <div className="text-mineshaft-300 mb-4">Select a KMS Provider</div>
               <div className="flex items-center space-x-4">
                 {EXTERNAL_KMS_LIST.map(({ icon, provider, title }) => (
                   <div
                     key={`kms-${provider}`}
-                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="border-mineshaft-500 bg-bunker-600 hover:border-primary/70 hover:bg-primary/10 flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border p-6 transition-all hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -79,7 +79,7 @@ export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
                     }}
                   >
                     <FontAwesomeIcon icon={icon} size="lg" />
-                    <div className="text-center text-sm whitespace-pre-wrap">{title}</div>
+                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx
index ef47f3195..62272f6cf 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx
@@ -240,7 +240,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
               defaultValue={field.value}
               {...field}
               onValueChange={(e) => onChange(e)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
             >
               {AWS_REGIONS.map((awsRegion) => (
                 <SelectItem value={awsRegion.slug} key={`kms-aws-region-${awsRegion.slug}`}>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx
index d080b57c6..a39484bc9 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx
@@ -96,7 +96,7 @@ export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) =
       <Td>
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="rounded-lg">
-            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+            <div className="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
               <FontAwesomeIcon size="sm" icon={faEllipsis} />
             </div>
           </DropdownMenuTrigger>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx
index 07711d306..c22a0969b 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx
@@ -342,7 +342,7 @@ export const GcpKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
         )}
       />
       {kms && (
-        <span className="text-xs text-mineshaft-300">
+        <span className="text-mineshaft-300 text-xs">
           To change your GCP credentials, create a new external KMS and assign it to project you
           want to use it with.
         </span>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
index c2031381a..034ca8fd7 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
@@ -66,9 +66,9 @@ export const OrgEncryptionTab = withPermission(
     };
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="flex justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">Key Management System (KMS)</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Key Management System (KMS)</p>
           <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Kms}>
             {(isAllowed) => (
               <Button
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
index bdab03d29..ee1b02900 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
@@ -8,7 +8,7 @@ import { OrgNameChangeSection } from "../OrgNameChangeSection";
 export const OrgGeneralTab = () => {
   const { hasOrgRole } = useOrgPermission();
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-6">
       <OrgNameChangeSection />
       <OrgIncidentContactsSection />
       {hasOrgRole(OrgMembershipRole.Admin) && <OrgDeleteSection />}
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
index 9b6323c2e..e8b7d5c3a 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
@@ -83,7 +83,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   if (!isFormInitialized) {
     return (
-      <div className="flex h-101 w-full items-center justify-center">
+      <div className="h-101 flex w-full items-center justify-center">
         <Spinner size="lg" />
       </div>
     );
@@ -92,7 +92,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
       <div className="">
-        <h2 className="text-md mb-2 text-mineshaft-100">Organization Name</h2>
+        <h2 className="text-md text-mineshaft-100 mb-2">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -105,13 +105,13 @@ export const OrgNameChangeSection = (): JSX.Element => {
         />
       </div>
       <div>
-        <h2 className="text-md mb-2 text-mineshaft-100">Organization ID</h2>
+        <h2 className="text-md text-mineshaft-100 mb-2">Organization ID</h2>
         <FormControl className="max-w-md">
           <Input isDisabled value={currentOrg.id} />
         </FormControl>
       </div>
       <div>
-        <h2 className="text-md mb-2 text-mineshaft-100">Organization Slug</h2>
+        <h2 className="text-md text-mineshaft-100 mb-2">Organization Slug</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -125,7 +125,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       </div>
       {canReadOrgRoles && (
         <div className="pb-4">
-          <h2 className="text-md mb-2 text-mineshaft-100">Default Organization Member Role</h2>
+          <h2 className="text-md text-mineshaft-100 mb-2">Default Organization Member Role</h2>
           <p className="text-mineshaft-400" />
           <Controller
             defaultValue=""
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/OrgProductSelectSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/OrgProductSelectSection.tsx
index 61ee0c6e9..53f60eb12 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/OrgProductSelectSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/OrgProductSelectSection.tsx
@@ -79,8 +79,8 @@ export const OrgProductSelectSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-6 py-5">
-      <h2 className="text-xl font-medium text-mineshaft-100">Enabled Products</h2>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border px-6 py-5">
+      <h2 className="text-mineshaft-100 text-xl font-medium">Enabled Products</h2>
       <p className="mb-4 text-gray-400">
         Select which products are available for your organization.
       </p>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ExternalGroupOrgRoleMappings.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ExternalGroupOrgRoleMappings.tsx
index 8e181e8c4..5e9c52717 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ExternalGroupOrgRoleMappings.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ExternalGroupOrgRoleMappings.tsx
@@ -95,7 +95,7 @@ export const ExternalGroupOrgRoleMappings = () => {
   return (
     <div className="py-4">
       <h2 className="text-md text-mineshaft-100">SCIM Group to Organization Role Mappings</h2>
-      <p className="text-sm text-mineshaft-300">
+      <p className="text-mineshaft-300 text-sm">
         Assign newly provisioned users a default organization role based on their SCIM group.
       </p>
       <form onSubmit={handleSubmit(handleUpdateMappings)} className="pt-4">
@@ -109,7 +109,7 @@ export const ExternalGroupOrgRoleMappings = () => {
                   {i === 0 && (
                     <FormLabel
                       label="SCIM Group Name"
-                      className="text-xs text-mineshaft-400"
+                      className="text-mineshaft-400 text-xs"
                       tooltipClassName="max-w-md whitespace-pre-line"
                       tooltipText="The name associated with this group in your SCIM provider"
                     />
@@ -134,7 +134,7 @@ export const ExternalGroupOrgRoleMappings = () => {
                 </div>
                 <div className="flex-1">
                   {i === 0 && (
-                    <span className="text-xs text-mineshaft-400">
+                    <span className="text-mineshaft-400 text-xs">
                       Role to Assign Users in this Group
                     </span>
                   )}
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgGithubSyncSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgGithubSyncSection.tsx
index 77acb4f7c..bb04d53af 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgGithubSyncSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgGithubSyncSection.tsx
@@ -97,7 +97,7 @@ export const OrgGithubSyncSection = () => {
   };
 
   return (
-    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-6">
       <p className="text-xl font-medium text-gray-200">
         Sync user groups from your GitHub Organization
       </p>
@@ -123,7 +123,7 @@ export const OrgGithubSyncSection = () => {
             </OrgPermissionCan>
           </div>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           {isPending ? <Skeleton /> : null}
           {data ? data?.githubOrgName : "Not configured"}
         </p>
@@ -149,7 +149,7 @@ export const OrgGithubSyncSection = () => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Allow group provisioning/deprovisioning with GitHub
           </p>
         </div>
@@ -175,7 +175,7 @@ export const OrgGithubSyncSection = () => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Manually sync GitHub teams for all organization members. This will update team
             memberships for users who have previously logged in with GitHub.
           </p>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgSCIMSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgSCIMSection.tsx
index c8e6fbc3e..97faf471d 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgSCIMSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/OrgSCIMSection.tsx
@@ -59,7 +59,7 @@ export const OrgScimSection = () => {
   };
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-6">
       <p className="text-xl font-medium text-gray-200">Provision users via SCIM</p>
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
@@ -76,7 +76,7 @@ export const OrgScimSection = () => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
+        <p className="text-mineshaft-300 text-sm">Manage SCIM configuration</p>
       </div>
       <ExternalGroupOrgRoleMappings />
       <div className="py-4">
@@ -99,7 +99,7 @@ export const OrgScimSection = () => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           Allow member provisioning/deprovisioning with SCIM
         </p>
       </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ScimTokenModal.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ScimTokenModal.tsx
index c542a88bb..0953a5bf4 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ScimTokenModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgProvisioningTab/ScimTokenModal.tsx
@@ -166,7 +166,7 @@ export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pr
             }}
           >
             <FontAwesomeIcon icon={isScimUrlCopied ? faCheck : faCopy} />
-            <span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
+            <span className="group-hover:animate-fade-in bg-bunker-800 absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
               {t("common.click-to-copy")}
             </span>
           </IconButton>
@@ -199,7 +199,7 @@ export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pr
                 }}
               >
                 <FontAwesomeIcon icon={isScimTokenCopied ? faCheck : faCopy} />
-                <span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
+                <span className="group-hover:animate-fade-in bg-bunker-800 absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
                   {t("common.click-to-copy")}
                 </span>
               </IconButton>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgGenericAuthSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgGenericAuthSection.tsx
index 7e2bd522b..a91c676d6 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgGenericAuthSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgGenericAuthSection.tsx
@@ -72,7 +72,7 @@ export const OrgGenericAuthSection = () => {
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-6">
       <div className="py-4">
         <div className="mb-2 flex justify-between">
           <h3 className="text-md text-mineshaft-100">Enforce Multi-factor Authentication</h3>
@@ -87,13 +87,13 @@ export const OrgGenericAuthSection = () => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           Enforce members to authenticate with MFA in order to access the organization
         </p>
         {currentOrg?.enforceMfa && (
           <FormControl label="Selected 2FA method" className="mt-3">
             <Select
-              className="min-w-[20rem] border border-mineshaft-500"
+              className="border-mineshaft-500 min-w-[20rem] border"
               onValueChange={handleUpdateSelectedMfa}
               defaultValue={currentOrg.selectedMfaMethod ?? MfaMethod.EMAIL}
             >
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgUserAccessTokenLimitSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgUserAccessTokenLimitSection.tsx
index 6e9865532..be852017f 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgUserAccessTokenLimitSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgUserAccessTokenLimitSection.tsx
@@ -86,11 +86,11 @@ export const OrgUserAccessTokenLimitSection = () => {
   ];
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Session Length</p>
       </div>
-      <p className="mt-2 mb-4 text-sm text-gray-400">
+      <p className="mb-4 mt-2 text-sm text-gray-400">
         Specify the duration of each login session for users in this organization.
       </p>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
@@ -140,7 +140,7 @@ export const OrgUserAccessTokenLimitSection = () => {
                         <SelectItem
                           key={value}
                           value={value}
-                          className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
+                          className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
                         >
                           <div className="ml-3 font-medium">{label}</div>
                         </SelectItem>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx
index 527239898..28e4819e5 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx
@@ -142,10 +142,10 @@ export const OrgGeneralAuthSection = ({
   };
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-6">
       <div>
         <p className="text-xl font-medium text-gray-200">SSO Enforcement</p>
-        <p className="mt-1 mb-2 text-gray-400">
+        <p className="mb-2 mt-1 text-gray-400">
           Manage strict enforcement of specific authentication methods for your organization.
         </p>
       </div>
@@ -168,7 +168,7 @@ export const OrgGeneralAuthSection = ({
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Enforce users to authenticate via SAML to access this organization.
             <br />
             When this is enabled your organization members will only be able to login with SAML.
@@ -193,7 +193,7 @@ export const OrgGeneralAuthSection = ({
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Enforce users to authenticate via OIDC to access this organization.
             <br />
             When this is enabled your organization members will only be able to login with OIDC.
@@ -239,7 +239,7 @@ export const OrgGeneralAuthSection = ({
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Enforce users to authenticate via Google OAuth to access this organization.
             <br />
             When this is enabled your organization members will only be able to login with Google
@@ -264,7 +264,7 @@ export const OrgGeneralAuthSection = ({
                       In case of a lockout, admins can use the{" "}
                       <a
                         target="_blank"
-                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        className="hover:text-mineshaft-300 underline underline-offset-2"
                         href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
                         rel="noreferrer"
                       >
@@ -274,7 +274,7 @@ export const OrgGeneralAuthSection = ({
                       <a
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        className="hover:text-mineshaft-300 underline underline-offset-2"
                         href={`${window.location.origin}/login/admin`}
                       >
                         {window.location.origin}/login/admin
@@ -286,7 +286,7 @@ export const OrgGeneralAuthSection = ({
                 <FontAwesomeIcon
                   icon={faInfoCircle}
                   size="sm"
-                  className="mt-0.5 inline-block text-mineshaft-400"
+                  className="text-mineshaft-400 mt-0.5 inline-block"
                 />
               </Tooltip>
             </div>
@@ -301,7 +301,7 @@ export const OrgGeneralAuthSection = ({
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             <span>
               Allow organization admins to bypass SSO login enforcement when your SSO provider is
               unavailable, misconfigured, or inaccessible.
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx
index 817797eff..d53af61dc 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx
@@ -146,7 +146,7 @@ export const OrgLDAPSection = (): JSX.Element => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Allow members to authenticate into Infisical with LDAP
           </p>
         </div>
@@ -167,7 +167,7 @@ export const OrgLDAPSection = (): JSX.Element => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           Manage how LDAP groups are mapped to internal groups in Infisical
         </p>
       </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx
index 7e4b2b3ef..8f7946d33 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx
@@ -86,7 +86,7 @@ export const OrgOIDCSection = (): JSX.Element => {
   const isGoogleOAuthEnabled = currentOrg.googleSsoAuthEnforced;
 
   return (
-    <div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <p className="text-xl font-medium text-gray-200">OIDC</p>
@@ -135,14 +135,14 @@ export const OrgOIDCSection = (): JSX.Element => {
               </OrgPermissionCan>
             )}
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Allow members to authenticate into Infisical with OIDC
           </p>
         </div>
       )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <div className="text-md flex items-center text-mineshaft-100">
+          <div className="text-md text-mineshaft-100 flex items-center">
             <span>OIDC Group Membership Mapping</span>
             <Tooltip
               className="max-w-lg"
@@ -161,12 +161,12 @@ export const OrgOIDCSection = (): JSX.Element => {
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline underline-offset-2 hover:text-mineshaft-300"
+                    className="hover:text-mineshaft-300 underline underline-offset-2"
                     href="https://infisical.com/docs/documentation/platform/sso/overview"
                   >
                     See your OIDC provider docs for details.
                   </a>
-                  <p className="mt-4 text-yellow">
+                  <p className="text-yellow mt-4">
                     <FontAwesomeIcon className="mr-1" icon={faWarning} />
                     Group membership changes in the OIDC provider only sync with Infisical when a
                     user logs in via OIDC. For example, if you remove a user from a group in the
@@ -180,7 +180,7 @@ export const OrgOIDCSection = (): JSX.Element => {
               <FontAwesomeIcon
                 icon={faInfoCircle}
                 size="sm"
-                className="mt-0.5 ml-1 inline-block text-mineshaft-400"
+                className="text-mineshaft-400 ml-1 mt-0.5 inline-block"
               />
             </Tooltip>
           </div>
@@ -195,7 +195,7 @@ export const OrgOIDCSection = (): JSX.Element => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           Infisical will manage user group memberships based on the OIDC provider
         </p>
       </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx
index ecaa06e05..9afae7cdc 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx
@@ -162,14 +162,14 @@ export const OrgSSOSection = (): JSX.Element => {
             </OrgPermissionCan>
           )}
         </div>
-        <p className="text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 text-sm">
           Allow members to authenticate into Infisical with SAML
         </p>
       </div>
       {data && GROUP_SYNC_SUPPORTED_PROVIDERS.includes(data.authProvider) && (
         <div className="py-4">
           <div className="mb-2 flex justify-between">
-            <div className="text-md flex items-center text-mineshaft-100">
+            <div className="text-md text-mineshaft-100 flex items-center">
               <span>SAML Group Membership Mapping</span>
               <Tooltip
                 className="max-w-lg"
@@ -187,12 +187,12 @@ export const OrgSSOSection = (): JSX.Element => {
                     <a
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="underline underline-offset-2 hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline underline-offset-2"
                       href="https://infisical.com/docs/documentation/platform/sso/overview"
                     >
                       See your SAML provider docs for details.
                     </a>
-                    <p className="mt-4 text-yellow">
+                    <p className="text-yellow mt-4">
                       <FontAwesomeIcon className="mr-1" icon={faWarning} />
                       Group membership changes in the SAML provider only sync with Infisical when a
                       user logs in via SAML. For example, if you remove a user from a group in the
@@ -206,7 +206,7 @@ export const OrgSSOSection = (): JSX.Element => {
                 <FontAwesomeIcon
                   icon={faInfoCircle}
                   size="sm"
-                  className="mt-0.5 ml-1 inline-block text-mineshaft-400"
+                  className="text-mineshaft-400 ml-1 mt-0.5 inline-block"
                 />
               </Tooltip>
             </div>
@@ -221,7 +221,7 @@ export const OrgSSOSection = (): JSX.Element => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm">
             Infisical will manage user group memberships based on the SAML provider
           </p>
         </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx
index 5c4076159..1872305a4 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx
@@ -71,10 +71,10 @@ export const OrgSsoTab = withPermission(
       shouldDisplaySection(LoginMethod.OIDC) ||
       shouldDisplaySection(LoginMethod.LDAP) ? (
         <>
-          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+          <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 space-y-6 rounded-lg border p-6">
             <div>
               <p className="text-xl font-medium text-gray-200">Connect an Identity Provider</p>
-              <p className="mt-1 mb-2 text-gray-400">
+              <p className="mb-2 mt-1 text-gray-400">
                 Connect your identity provider to simplify user management with options like SAML,
                 OIDC, and LDAP.
               </p>
@@ -85,7 +85,7 @@ export const OrgSsoTab = withPermission(
                   "mt-4 flex items-center justify-between",
                   (shouldDisplaySection(LoginMethod.OIDC) ||
                     shouldDisplaySection(LoginMethod.LDAP)) &&
-                    "border-b border-mineshaft-500 pb-4"
+                    "border-mineshaft-500 border-b pb-4"
                 )}
               >
                 <p className="text-lg text-gray-200">SAML</p>
@@ -108,7 +108,7 @@ export const OrgSsoTab = withPermission(
               <div
                 className={twMerge(
                   "mt-4 flex items-center justify-between",
-                  shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
+                  shouldDisplaySection(LoginMethod.LDAP) && "border-mineshaft-500 border-b pb-4"
                 )}
               >
                 <p className="text-lg text-gray-200">OIDC</p>
@@ -166,7 +166,7 @@ export const OrgSsoTab = withPermission(
           />
         </>
       ) : (
-        <EmptyState title="" iconSize="2x" className="pt-14 pb-10!">
+        <EmptyState title="" iconSize="2x" className="pb-10! pt-14">
           <p className="text-center text-lg">Single Sign-On (SSO) has been disabled</p>
           <p className="text-center">Contact your server administrator</p>
         </EmptyState>
@@ -193,7 +193,7 @@ export const OrgSsoTab = withPermission(
           {shouldShowCreateIdentityProviderView ? (
             createIdentityProviderView
           ) : (
-            <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+            <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 space-y-6 rounded-lg border p-6">
               <div>
                 {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
                 {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModal.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModal.tsx
index df5fca59f..6106749c5 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModal.tsx
@@ -282,13 +282,13 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
             {authProvider && data && (
               <>
                 <div className="mb-4">
-                  <h3 className="text-sm text-mineshaft-400">
+                  <h3 className="text-mineshaft-400 text-sm">
                     {renderLabels(authProvider).acsUrl}
                   </h3>
                   <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
                 </div>
                 <div className="mb-4">
-                  <h3 className="text-sm text-mineshaft-400">
+                  <h3 className="text-mineshaft-400 text-sm">
                     {renderLabels(authProvider).entityId}
                   </h3>
                   <p className="text-md text-gray-400">{window.origin}</p>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx
index 8ad40ae4b..40e846321 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx
@@ -17,14 +17,14 @@ const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
 
 export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
   return (
-    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
       <img
         alt={`${providerDetails.label} logo`}
         src={`/images/sso/${providerDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {providerDetails.label}
           <a
             href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
@@ -32,8 +32,8 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -42,7 +42,7 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {isConnected
             ? `${providerDetails.label} Connection`
             : `Connect to ${providerDetails.label}`}
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/AddWorkflowIntegrationForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/AddWorkflowIntegrationForm.tsx
index 15acf5c97..ddad6004e 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/AddWorkflowIntegrationForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/AddWorkflowIntegrationForm.tsx
@@ -58,12 +58,12 @@ export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 text-mineshaft-300">Select a platform</div>
+              <div className="text-mineshaft-300 mb-4">Select a platform</div>
               <div className="flex items-center space-x-4">
                 {PLATFORM_LIST.map(({ icon, platform, title }) => (
                   <div
                     key={platform}
-                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="border-mineshaft-500 bg-bunker-600 hover:border-primary/70 hover:bg-primary/10 flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border p-6 transition-all hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -78,7 +78,7 @@ export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
                     }}
                   >
                     <div>{icon}</div>
-                    <div className="text-center text-sm whitespace-pre-wrap">{title}</div>
+                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/MicrosoftTeamsIntegrationForm.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/MicrosoftTeamsIntegrationForm.tsx
index 09e5d6583..891e46528 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/MicrosoftTeamsIntegrationForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/MicrosoftTeamsIntegrationForm.tsx
@@ -123,7 +123,7 @@ export const MicrosoftTeamsIntegrationForm = ({ id, onClose }: Props) => {
 
   return (
     <form onSubmit={handleSubmit(handleMicrosoftTeamsFormSubmit)} autoComplete="off">
-      <div className="mb-4 text-xs text-mineshaft-200">
+      <div className="text-mineshaft-200 mb-4 text-xs">
         For seamless installations, ensure that the Infisical bot is already installed in your
         Microsoft Teams tenant. For more information, please refer to the{" "}
         <a
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx
index bfdd27c02..a178cef9e 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx
@@ -130,9 +130,9 @@ export const OrgWorkflowIntegrationTab = withPermission(
     };
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="flex justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">Workflow Integrations</p>
+          <p className="text-mineshaft-100 text-xl font-medium">Workflow Integrations</p>
           <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Settings}>
             {(isAllowed) => (
               <Button
@@ -194,7 +194,7 @@ export const OrgWorkflowIntegrationTab = withPermission(
                   <Td>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild className="rounded-lg">
-                        <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
                           <FontAwesomeIcon size="sm" icon={faEllipsis} />
                         </div>
                       </DropdownMenuTrigger>
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
index 7a99af1d6..49b9379a2 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
@@ -52,10 +52,10 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
 
   return (
     <>
-      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
+      <div className="border-bunker-400 mb-4 flex items-start justify-between border-b pb-4">
         <div className="flex-col">
           <h3 className="text-xl font-medium">{name}</h3>
-          <h2 className="text-sm text-mineshaft-400">
+          <h2 className="text-mineshaft-400 text-sm">
             {`${getProjectTitle(type)} - `}
             {description || "Project Template"}
           </h2>
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx
index 09a2a69af..351659111 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx
@@ -87,13 +87,13 @@ export const ProjectTemplateEditRoleForm = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
     >
       <FormProvider {...formMethods}>
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-base font-medium text-mineshaft-200"
+            className="text-mineshaft-200 text-base font-medium"
             variant="link"
             onClick={onGoBack}
           >
@@ -103,7 +103,7 @@ export const ProjectTemplateEditRoleForm = ({
             <div className="flex items-center space-x-4">
               {isDirty && (
                 <Button
-                  className="mr-4 text-mineshaft-300"
+                  className="text-mineshaft-300 mr-4"
                   variant="link"
                   isDisabled={isSubmitting}
                   isLoading={isSubmitting}
@@ -117,7 +117,7 @@ export const ProjectTemplateEditRoleForm = ({
                   variant="outline_bg"
                   type="submit"
                   className={twMerge(
-                    "mr-4 h-10 border border-primary",
+                    "border-primary mr-4 h-10 border",
                     isDirty && "bg-primary text-black"
                   )}
                   isDisabled={isSubmitting || !isDirty || isDisabled}
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
index ec1899369..c7bacfe4e 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
@@ -98,13 +98,13 @@ export const ProjectTemplateEnvironmentsForm = ({
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+      <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
         <div>
           <h2 className="text-lg font-medium">Project Environments</h2>
           {!isInfisicalTemplate && (
-            <p className="text-sm text-mineshaft-400">
+            <p className="text-mineshaft-400 text-sm">
               Add, rename, remove and reorder environments for this project template
             </p>
           )}
@@ -130,7 +130,7 @@ export const ProjectTemplateEnvironmentsForm = ({
         )}
       </div>
       {errors.environments && (
-        <span className="my-4 text-sm text-red">{errors.environments.message}</span>
+        <span className="text-red my-4 text-sm">{errors.environments.message}</span>
       )}
       <TableContainer>
         <Table>
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx
index 85580da07..6f32295d1 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx
@@ -103,11 +103,11 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
             exit={{ opacity: 0, translateX: -30 }}
             className="absolute w-full"
           >
-            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+            <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+              <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
                 <div>
                   <h2 className="text-lg font-medium">Project Roles</h2>
-                  <p className="text-sm text-mineshaft-400">
+                  <p className="text-mineshaft-400 text-sm">
                     {isInfisicalTemplate
                       ? "Click a role to view the associated permissions"
                       : "Add, edit and remove roles for this project template"}
@@ -151,7 +151,7 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
                           return (
                             <Tr
                               key={role.slug}
-                              className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                              className="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
                               role="button"
                               tabIndex={0}
                               onKeyDown={(evt) => {
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx
index 6010d61f1..d15df14e8 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx
@@ -140,7 +140,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
                 <div
                   key={el.value}
                   className={twMerge(
-                    "flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
+                    "border-mineshaft-600 hover:border-primary-400 hover:bg-mineshaft-600 flex cursor-pointer flex-col items-center gap-2 rounded-sm border px-2 py-4 opacity-75 transition-all",
                     field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
                   )}
                   onClick={() => field.onChange(el.value)}
@@ -166,7 +166,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
         isError={Boolean(errors.description?.message)}
       >
         <TextArea
-          className="max-h-80 min-h-40 max-w-full min-w-full"
+          className="max-h-80 min-h-40 min-w-full max-w-full"
           {...register("description")}
         />
       </FormControl>
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx
index c542410bd..22ce84266 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx
@@ -50,19 +50,19 @@ export const ProjectTemplatesSection = () => {
             className="absolute min-h-40 w-full"
           >
             <div>
-              <p className="mb-6 font-inter text-bunker-300">
+              <p className="font-inter text-bunker-300 mb-6">
                 Create and configure templates with predefined roles and environments to streamline
                 project setup
               </p>
-              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
                 <div className="mb-4 flex items-start">
-                  <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
+                  <p className="text-mineshaft-100 text-xl font-medium">Project Templates</p>
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
                     href="https://infisical.com/docs/documentation/platform/project-templates"
                   >
-                    <div className="mt-[0.32rem] ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                    <div className="bg-yellow/20 text-yellow ml-2 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                       <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                       <span>Docs</span>
                       <FontAwesomeIcon
diff --git a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx
index 60cfac678..d7f4d233f 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx
@@ -85,7 +85,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
               return (
                 <Tr
                   onClick={() => onEdit(template)}
-                  className="cursor-pointer hover:bg-mineshaft-700"
+                  className="hover:bg-mineshaft-700 cursor-pointer"
                   key={id}
                 >
                   <Td>
@@ -94,7 +94,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                       <Tooltip content={description}>
                         <FontAwesomeIcon
                           size="sm"
-                          className="ml-2 text-mineshaft-400"
+                          className="text-mineshaft-400 ml-2"
                           icon={faCircleInfo}
                         />
                       </Tooltip>
@@ -115,7 +115,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                       >
                         <FontAwesomeIcon
                           size="sm"
-                          className="ml-2 text-mineshaft-400"
+                          className="text-mineshaft-400 ml-2"
                           icon={faCircleInfo}
                         />
                       </Tooltip>
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
index 03a720b98..3091dfeeb 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
@@ -115,7 +115,7 @@ const Page = withPermission(
     };
 
     return (
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
         {membership && (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
index 680795e2e..9687d3fb8 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
@@ -81,9 +81,9 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
   )?.name;
 
   return membership ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">User Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">User Details</h3>
         {userId !== membership.user.id && (
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Member}>
             {(isAllowed) => {
@@ -113,17 +113,17 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">
             {membership.user.firstName || membership.user.lastName
               ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Username</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Username</p>
           <div className="group flex align-top">
-            <p className="text-sm break-all text-mineshaft-300">{membership.user.username}</p>
+            <p className="text-mineshaft-300 break-all text-sm">{membership.user.username}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextUsername}>
                 <IconButton
@@ -142,9 +142,9 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Email</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Email</p>
           <div className="flex items-center">
-            <p className="mr-2 text-sm break-all text-mineshaft-300">
+            <p className="text-mineshaft-300 mr-2 break-all text-sm">
               {membership.user.email ?? "-"}{" "}
               <Tooltip
                 content={
@@ -163,45 +163,45 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Last Login Auth Method</p>
           <div className="group flex align-top">
-            <p className="text-sm break-all text-mineshaft-300">
+            <p className="text-mineshaft-300 break-all text-sm">
               {membership.lastLoginAuthMethod || "-"}
             </p>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Last Login Time</p>
           <div className="group flex align-top">
-            <p className="text-sm break-all text-mineshaft-300">
+            <p className="text-mineshaft-300 break-all text-sm">
               {membership.lastLoginTime ? format(membership.lastLoginTime, "PPpp") : "-"}
             </p>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
-          <p className="text-sm text-mineshaft-300">{roleName ?? "-"}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
+          <p className="text-mineshaft-300 text-sm">{roleName ?? "-"}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Status</p>
-          <p className="text-sm text-mineshaft-300">{getStatus(membership)}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
+          <p className="text-mineshaft-300 text-sm">{getStatus(membership)}</p>
         </div>
         <div>
-          <p className="text-sm font-medium text-mineshaft-300">Metadata</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Metadata</p>
           {membership?.metadata?.length ? (
-            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+            <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
               {membership.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
                     size="xs"
-                    className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                    className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
                   >
                     <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                     <div>{el.key}</div>
                   </Tag>
                   <Tag
                     size="xs"
-                    className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                    className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
                   >
                     <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
                       {el.value}
@@ -211,7 +211,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
               ))}
             </div>
           ) : (
-            <p className="text-sm text-mineshaft-300">-</p>
+            <p className="text-mineshaft-300 text-sm">-</p>
           )}
         </div>
         {membership.isActive &&
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserOrgMembershipModal.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserOrgMembershipModal.tsx
index 29b199a0b..8fb73a90c 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserOrgMembershipModal.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserOrgMembershipModal.tsx
@@ -170,7 +170,7 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg
             {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
               <div key={metadataFieldId} className="flex items-end space-x-2">
                 <div className="grow">
-                  {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+                  {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
                   <Controller
                     control={control}
                     name={`metadata.${i}.key`}
@@ -187,7 +187,7 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg
                 </div>
                 <div className="grow">
                   {i === 0 && (
-                    <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                    <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
                   )}
                   <Controller
                     control={control}
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserAuditLogsSection.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserAuditLogsSection.tsx
index d6729f72b..5e5625d1c 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserAuditLogsSection.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserAuditLogsSection.tsx
@@ -14,8 +14,8 @@ export const UserAuditLogsSection = withPermission(
     // eslint-disable-next-line no-nested-ternary
     return (
       subscription?.auditLogs && (
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+          <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
             <p className="text-lg font-medium text-gray-200">Audit Logs</p>
           </div>
           <LogsSection
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsRow.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsRow.tsx
index 5543ac167..be3777faf 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsRow.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsRow.tsx
@@ -15,7 +15,7 @@ export const UserGroupsRow = ({ group, handlePopUpOpen }: Props) => {
   return (
     <>
       <Tr
-        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
         key={`user-project-membership-${group.id}`}
       >
         <Td>{group.name}</Td>
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsSection.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsSection.tsx
index 8e7cf3ce8..bcdc4d0b8 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsSection.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsSection.tsx
@@ -43,9 +43,9 @@ export const UserGroupsSection = ({ orgMembership }: Props) => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
-          <h3 className="text-lg font-medium text-mineshaft-100">Groups</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+        <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
+          <h3 className="text-mineshaft-100 text-lg font-medium">Groups</h3>
         </div>
 
         <UserGroupsTable orgMembership={orgMembership} handlePopUpOpen={handlePopUpOpen} />
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectRow.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectRow.tsx
index a7a88a72c..823a4652b 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectRow.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectRow.tsx
@@ -39,7 +39,7 @@ export const UserProjectRow = ({
 
   return (
     <Tr
-      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+      className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
       key={`user-project-membership-${id}`}
       onClick={() => {
         if (isAccessible) {
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsSection.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsSection.tsx
index 843b5a63c..d3e2cd650 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsSection.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsSection.tsx
@@ -48,9 +48,9 @@ export const UserProjectsSection = ({ membershipId }: Props) => {
   };
 
   return membership ? (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Projects</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Projects</h3>
         {userId !== membership.user.id && membership.status !== "invited" && (
           <IconButton
             ariaLabel="copy icon"
diff --git a/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx b/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
index 179d267c4..fe2d7461b 100644
--- a/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
@@ -20,8 +20,8 @@ export const PamAccountsPage = () => {
         I={ProjectPermissionPamAccountActions.Read}
         a={ProjectPermissionSub.PamAccounts}
       >
-        <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="bg-bunker-800 h-full">
+          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader title="Accounts" description="View, access, and manage accounts." />
               <PamAccountsSection />
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx b/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
index 92b2f7859..cee8ec515 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export const AccountViewToggle = ({ value, onChange }: Props) => {
   return (
-    <div className="flex gap-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+    <div className="border-mineshaft-600 bg-mineshaft-800 flex gap-0.5 rounded-md border p-1">
       <Button
         variant="outline_bg"
         onClick={() => {
@@ -21,7 +21,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === AccountView.Flat ? "bg-mineshaft-500" : "bg-transparent"
-        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
       >
         Hide Folders
       </Button>
@@ -33,7 +33,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === AccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
-        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
       >
         Show Folders
       </Button>
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
index 9049001e6..661bd9a9e 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
@@ -71,7 +71,7 @@ export const PamAccessAccountModal = ({ isOpen, onOpenChange, account }: Props)
         <a
           href="https://infisical.com/docs/cli/overview"
           target="_blank"
-          className="mt-2 flex h-4 w-fit items-center gap-2 border-b border-mineshaft-400 text-sm text-mineshaft-400 transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
+          className="border-mineshaft-400 text-mineshaft-400 mt-2 flex h-4 w-fit items-center gap-2 border-b text-sm transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
           rel="noreferrer"
         >
           <span>Install the Infisical CLI</span>
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountHeader.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountHeader.tsx
index 0b84deb38..efb7fe835 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountHeader.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountHeader.tsx
@@ -10,20 +10,20 @@ export const PamAccountHeader = ({ resourceName, resourceType, onBack }: Props)
   const details = PAM_RESOURCE_TYPE_MAP[resourceType];
 
   return (
-    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
       <img
         alt={`${details.name} logo`}
         src={`/images/integrations/${details.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">{resourceName}</div>
-        <p className="text-sm leading-4 text-mineshaft-400">{details.name} resource</p>
+        <div className="text-mineshaft-300 flex items-center">{resourceName}</div>
+        <p className="text-mineshaft-400 text-sm leading-4">{details.name} resource</p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
           onClick={onBack}
         >
           Select another resource
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx
index 3d2f3227d..40a1b1740 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx
@@ -86,14 +86,14 @@ export const PamAccountRow = ({
             <span>
               <HighlightText text={name} highlight={search} />
             </span>
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
+            <Badge className="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
               <FontAwesomeIcon icon={faBoxOpen} />
               <span>
                 <HighlightText text={account.resource.name} highlight={search} />
               </span>
             </Badge>
             {isFlatView && accountPath && (
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faFolder} />
                 <span>
                   <HighlightText text={accountPath} highlight={search} />
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
index 7cdf93dc8..50d3358c3 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
@@ -296,14 +296,14 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 min-w-10 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 min-w-10 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Resource</DropdownMenuLabel>
             {uniqueResources.length ? (
               uniqueResources.map((resource) => {
@@ -370,7 +370,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
                     <IconButton
                       variant="outline_bg"
                       ariaLabel="add-folder-or-import"
-                      className="rounded-l-none bg-mineshaft-600 p-3"
+                      className="bg-mineshaft-600 rounded-l-none p-3"
                     >
                       <FontAwesomeIcon icon={faAngleDown} />
                     </IconButton>
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamFolderRow.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamFolderRow.tsx
index 376210066..e1309d88f 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamFolderRow.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamFolderRow.tsx
@@ -27,7 +27,7 @@ type Props = {
 export const PamFolderRow = ({ folder, onClick, onDelete, onUpdate, search }: Props) => {
   return (
     <Tr
-      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+      className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
       onClick={onClick}
     >
       <Td>
@@ -48,7 +48,7 @@ export const PamFolderRow = ({ folder, onClick, onDelete, onUpdate, search }: Pr
                 <IconButton
                   ariaLabel="Options"
                   colorSchema="secondary"
-                  className="hidden w-6 group-hover:flex data-[state=open]:flex!"
+                  className="data-[state=open]:flex! hidden w-6 group-hover:flex"
                   variant="plain"
                 >
                   <FontAwesomeIcon icon={faEllipsisV} />
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx
index 06c04e019..be753b8d7 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx
@@ -19,15 +19,15 @@ export const PamResourceOption = ({
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         {isCreateOption ? (
-          <div className="flex items-center gap-x-1 text-mineshaft-400">
+          <div className="text-mineshaft-400 flex items-center gap-x-1">
             <FontAwesomeIcon icon={faPlus} size="sm" />
             <span className="mr-auto">Create New Resource</span>
           </div>
         ) : (
           <>
             <p className="truncate">{children}</p>
-            <div className="mr-auto ml-2">
-              <Badge className="flex h-5 items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+            <div className="ml-2 mr-auto">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 items-center gap-1 whitespace-nowrap">
                 <img
                   alt={`${name} logo`}
                   src={`/images/integrations/${image}`}
@@ -37,7 +37,7 @@ export const PamResourceOption = ({
               </Badge>
             </div>
             {isSelected && (
-              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+              <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
             )}
           </>
         )}
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx b/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
index 6c6bcfba6..e381d2903 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
@@ -47,7 +47,7 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
diff --git a/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx b/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
index e8238d8a9..0be30e40b 100644
--- a/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
@@ -20,8 +20,8 @@ export const PamResourcesPage = () => {
         I={ProjectPermissionPamAccountActions.Read}
         a={ProjectPermissionSub.PamResources}
       >
-        <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="bg-bunker-800 h-full">
+          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
                 title="Resources"
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx
index 5b6eb7256..0a518184a 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx
@@ -40,7 +40,7 @@ export const GenericResourceFields = () => {
             <Select
               value={value || (null as unknown as string)}
               onValueChange={onChange}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               dropdownContainerClassName="max-w-none"
               isLoading={isGatewaysLoading}
               placeholder="Select a Gateway..."
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlResourceFields.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlResourceFields.tsx
index 5e140dd1d..ff8217eb9 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlResourceFields.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlResourceFields.tsx
@@ -17,11 +17,11 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
   const sslEnabled = watch("connectionDetails.sslEnabled");
   return (
     <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-      <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+      <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
         <Tab
           className={({ selected }) =>
-            `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
-              selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+            `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+              selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
             }`
           }
         >
@@ -29,15 +29,15 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
         </Tab>
         <Tab
           className={({ selected }) =>
-            `-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
-              selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+            `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+              selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
             }`
           }
         >
           SSL ({sslEnabled ? "Enabled" : "Disabled"})
         </Tab>
       </Tab.List>
-      <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+      <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
         <Tab.Panel>
           <div className="mt-[0.675rem] flex items-start gap-2">
             <Controller
@@ -91,7 +91,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
             render={({ field: { value, onChange }, fieldState: { error } }) => (
               <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                 <Switch
-                  className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                  className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                   id="ssl-enabled"
                   thumbClassName="bg-mineshaft-800"
                   isChecked={value}
@@ -113,7 +113,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
                 label="SSL Certificate"
                 isOptional
               >
-                <TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
+                <TextArea className="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
               </FormControl>
             )}
           />
@@ -127,7 +127,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
                 errorText={error?.message}
               >
                 <Switch
-                  className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                  className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                   id="ssl-reject-unauthorized"
                   thumbClassName="bg-mineshaft-800"
                   isChecked={sslEnabled ? value : false}
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceHeader.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceHeader.tsx
index 4b4fd34c4..04be2bcd1 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceHeader.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceHeader.tsx
@@ -9,20 +9,20 @@ export const PamResourceHeader = ({ resourceType, onBack }: Props) => {
   const details = PAM_RESOURCE_TYPE_MAP[resourceType];
 
   return (
-    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
       <img
         alt={`${details.name} logo`}
         src={`/images/integrations/${details.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">{details.name}</div>
-        <p className="text-sm leading-4 text-mineshaft-400">Resource</p>
+        <div className="text-mineshaft-300 flex items-center">{details.name}</div>
+        <p className="text-mineshaft-400 text-sm leading-4">Resource</p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
           onClick={onBack}
         >
           Select another resource type
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx
index aba64cc6a..1bb7ff1dc 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx
@@ -40,7 +40,7 @@ export const PamResourceRow = ({ resource, onUpdate, onDelete, search }: Props)
           <span>
             <HighlightText text={name} highlight={search} />
           </span>
-          <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+          <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
             <span>
               <HighlightText text={resourceTypeName} highlight={search} />
             </span>
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
index 2f46a8aca..2364eeb27 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
@@ -178,14 +178,14 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Resource Type</DropdownMenuLabel>
             {resources.length ? (
               [...new Set(resources.map(({ resourceType }) => resourceType))].map((type) => {
diff --git a/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx b/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
index fe95a98aa..b08eba9a6 100644
--- a/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
@@ -81,7 +81,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
       </div>
     );
   }
@@ -95,7 +95,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map((option) => {
           const { image, name, size = 50 } = PAM_RESOURCE_TYPE_MAP[option.resource];
 
@@ -103,7 +103,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
             <button
               type="button"
               onClick={() => handleResourceSelect(option.resource)}
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
             >
               <div className="relative">
                 <img
@@ -142,7 +142,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
                     {"If you don't see the resource you're looking for,"}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -151,7 +151,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -162,7 +162,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <span className="text-xs">Don&#39;t see the resource you&#39;re looking for?</span>
                 <FontAwesomeIcon size="xs" icon={faInfoCircle} />
               </div>
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
index b82c6b6e7..bdeffd0a5 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
@@ -19,7 +19,7 @@ const Page = () => {
   const { data: session } = useGetPamSessionById(sessionId);
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {session && (
         <div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
           <PageHeader
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx
index c527c2716..f0a9081f2 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx
@@ -42,11 +42,11 @@ export const PamSessionDetailsSection = ({
   const details = PAM_RESOURCE_TYPE_MAP[resourceType];
 
   return (
-    <div className="max-w-[350px] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Session Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 max-w-[350px] rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Session Details</h3>
       </div>
-      <div className="pt-4 text-sm text-mineshaft-300">
+      <div className="text-mineshaft-300 pt-4 text-sm">
         <DetailItem label="Session ID">
           <div className="group flex align-top">
             <p className="truncate">{id}</p>
@@ -76,7 +76,7 @@ export const PamSessionDetailsSection = ({
               className="size-4"
             />
             <p>{accountName}</p>
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-yellow/20 whitespace-nowrap text-yellow">
+            <Badge className="bg-yellow/20 text-yellow flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
               <FontAwesomeIcon icon={faBoxOpen} />
               {resourceName}
             </Badge>
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 5f06a64e2..ed8af7d7d 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -24,9 +24,9 @@ export const PamSessionLogsSection = ({ session }: Props) => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Session Logs</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex h-full w-full flex-col gap-4 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Session Logs</h3>
       </div>
       <div className="flex flex-col gap-2 overflow-y-auto text-xs">
         {session.commandLogs.length > 0 ? (
@@ -36,13 +36,13 @@ export const PamSessionLogsSection = ({ session }: Props) => {
               <button
                 type="button"
                 key={log.timestamp}
-                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:ring-2 focus:ring-mineshaft-400 focus:outline-hidden ${
+                className={`border-mineshaft-700 focus:ring-mineshaft-400 focus:outline-hidden flex w-full flex-col rounded-md border p-3 text-left focus:ring-2 ${
                   isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
                 }`}
                 onClick={() => toggleExpand(log.timestamp)}
               >
-                <div className="flex items-center justify-between text-bunker-400">
-                  <div className="flex items-center gap-2 select-none">
+                <div className="text-bunker-400 flex items-center justify-between">
+                  <div className="flex select-none items-center gap-2">
                     <FontAwesomeIcon
                       icon={isExpanded ? faChevronDown : faChevronRight}
                       className="size-3 transition-transform duration-200"
@@ -53,14 +53,14 @@ export const PamSessionLogsSection = ({ session }: Props) => {
 
                 <div
                   className={`mt-2 font-mono ${
-                    isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
+                    isExpanded ? "whitespace-pre-wrap break-all" : "truncate"
                   }`}
                 >
                   {log.input}
                 </div>
 
                 {isExpanded && log.output && (
-                  <div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
+                  <div className="border-mineshaft-700 text-bunker-300 mt-2 whitespace-pre-wrap break-all border-t pt-2 font-mono">
                     {log.output}
                   </div>
                 )}
@@ -68,11 +68,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
             );
           })
         ) : (
-          <div className="flex w-full grow items-center justify-center text-bunker-300">
+          <div className="text-bunker-300 flex w-full grow items-center justify-center">
             {session.startedAt && session.endedAt ? (
               <div className="text-center">
                 <div className="mb-2">Session logs are not yet available</div>
-                <div className="text-xs text-bunker-400">
+                <div className="text-bunker-400 text-xs">
                   Logs will be uploaded after the session duration has elapsed.
                   <br />
                   If logs do not appear after some time, please contact your Gateway administrators.
diff --git a/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx b/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
index 03ca60a3b..6d70e6d31 100644
--- a/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
@@ -20,8 +20,8 @@ export const PamSessionPage = () => {
         I={ProjectPermissionPamSessionActions.Read}
         a={ProjectPermissionSub.PamSessions}
       >
-        <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="bg-bunker-800 h-full">
+          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
                 title="Sessions"
diff --git a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
index f730e331d..466f6da93 100644
--- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
@@ -60,7 +60,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
   return (
     <>
       <Tr
-        className={twMerge("group h-10 cursor-pointer hover:bg-bunker-400/20")}
+        className={twMerge("hover:bg-bunker-400/20 group h-10 cursor-pointer")}
         onClick={() => router.history.push(`/projects/pam/${projectId}/sessions/${id}`)}
       >
         <Td>
@@ -77,7 +77,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                 <span>
                   <HighlightText text={accountName} highlight={search} />
                 </span>
-                <div className="flex items-center gap-1 text-xs text-bunker-300">
+                <div className="text-bunker-300 flex items-center gap-1 text-xs">
                   <FontAwesomeIcon icon={faBoxOpen} className="size-3" />
                   <span>
                     <HighlightText text={resourceName} highlight={search} />
@@ -92,7 +92,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
             <span>
               <HighlightText text={actorName} highlight={search} />
             </span>
-            <span className="text-xs text-bunker-300">
+            <span className="text-bunker-300 text-xs">
               <HighlightText text={actorEmail} highlight={search} />
             </span>
           </div>
@@ -100,7 +100,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
         <Td>
           <div className="flex flex-col">
             <span>{new Date(createdAt).toLocaleTimeString()}</span>
-            <span className="text-xs text-bunker-300">
+            <span className="text-bunker-300 text-xs">
               {new Date(createdAt).toLocaleDateString()}
             </span>
           </div>
@@ -109,7 +109,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
           {endedAt ? (
             <div className="flex flex-col">
               <span>{new Date(endedAt).toLocaleTimeString()}</span>
-              <span className="text-xs text-bunker-300">
+              <span className="text-bunker-300 text-xs">
                 {new Date(endedAt).toLocaleDateString()}
               </span>
             </div>
@@ -161,7 +161,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
           <Td colSpan={5} className="py-3 text-xs">
             {logsToShow.map((log) => (
               <div key={`${id}-log-${log.timestamp}`} className="mb-4 flex flex-col last:mb-0">
-                <div className="flex items-center gap-1.5 text-bunker-400">
+                <div className="text-bunker-400 flex items-center gap-1.5">
                   <FontAwesomeIcon icon={faTerminal} className="size-3" />
                   <span>{new Date(log.timestamp).toLocaleString()}</span>
                 </div>
@@ -169,7 +169,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                 <div className="font-mono">
                   <HighlightText text={log.input.trim()} highlight={search} />
                 </div>
-                <div className="font-mono text-bunker-300">
+                <div className="text-bunker-300 font-mono">
                   <HighlightText text={log.output.trim()} highlight={search} />
                 </div>
               </div>
@@ -181,7 +181,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                   size="xs"
                   leftIcon={<FontAwesomeIcon icon={showAllLogs ? faChevronUp : faChevronDown} />}
                   onClick={() => setShowAllLogs(!showAllLogs)}
-                  className="p-0 text-mineshaft-300 hover:text-primary"
+                  className="text-mineshaft-300 hover:text-primary p-0"
                 >
                   {showAllLogs
                     ? "Show less"
diff --git a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
index 2f4f9f7ef..7cea9a2de 100644
--- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
@@ -242,14 +242,14 @@ export const PamSessionsTable = ({ sessions }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Session Status</DropdownMenuLabel>
             {sessions.length ? (
               [...new Set(sessions.map(({ status }) => status))].map((status) => {
diff --git a/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx b/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
index 81a0a1d07..7f8a4722e 100644
--- a/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
@@ -8,7 +8,7 @@ export const SettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
index 9da8770d2..c57e09757 100644
--- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
@@ -37,7 +37,7 @@ const Page = () => {
   const isSecretManager = currentProject.type === ProjectType.SecretManager;
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
           title="Access Control"
diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
index 188c2ba7d..fc147deab 100644
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
@@ -94,7 +94,7 @@ const IdentityTemporaryRoleForm = ({
         className="border border-gray-600 pt-4"
       >
         <div className="flex flex-col space-y-4">
-          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+          <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
             Set Role Temporarily
           </div>
           {isExpired && <Tag colorSchema="red">Expired</Tag>}
@@ -269,7 +269,7 @@ const GroupRolesForm = ({ projectRoles, roles, groupId, onClose }: FormProps) =>
 
   return (
     <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
-      <div className="max-h-80 thin-scrollbar space-y-4 overflow-y-auto">
+      <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
         {projectRoles
           ?.filter(
             ({ name, slug }) =>
@@ -409,7 +409,7 @@ export const GroupRoles = ({
           <HoverCardTrigger>
             <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
           </HoverCardTrigger>
-          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+          <HoverCardContent className="bg-mineshaft-800 border border-gray-700 p-4">
             {roles
               .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
               .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
index b2a2b7cf3..fdb3481ab 100644
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
@@ -66,9 +66,9 @@ export const GroupsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">User Groups</p>
+        <p className="text-mineshaft-100 text-xl font-medium">User Groups</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
index 3ce5b4062..d8765b717 100644
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
@@ -152,7 +152,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                 .map(({ group: { id, name }, roles, createdAt }) => {
                   return (
                     <Tr
-                      className="group h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 group h-10 w-full cursor-pointer transition-colors duration-100"
                       key={`st-v3-${id}`}
                       role="button"
                       tabIndex={0}
diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
index 652b7047d..1e35f258c 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -165,16 +165,16 @@ export const IdentityTab = withProjectPermission(
         animate={{ opacity: 1, translateX: 0 }}
         exit={{ opacity: 0, translateX: 30 }}
       >
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Identities</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Identities</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -252,7 +252,7 @@ export const IdentityTab = withProjectPermission(
                     } = identityMember;
                     return (
                       <Tr
-                        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                        className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
                         key={`st-v3-${id}`}
                         role="button"
                         tabIndex={0}
@@ -325,7 +325,7 @@ export const IdentityTab = withProjectPermission(
                                 <HoverCardTrigger>
                                   <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
                                 </HoverCardTrigger>
-                                <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+                                <HoverCardContent className="bg-mineshaft-800 border border-gray-700 p-4">
                                   {roles
                                     .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
                                     .map(
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRbacSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRbacSection.tsx
index 291a5b58b..3a6a832d7 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRbacSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRbacSection.tsx
@@ -150,7 +150,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
   return (
     <div>
       <div className="text-lg font-medium">Roles</div>
-      <p className="text-sm text-mineshaft-400">Select one of the pre-defined or custom roles.</p>
+      <p className="text-mineshaft-400 text-sm">Select one of the pre-defined or custom roles.</p>
       <div>
         <form onSubmit={roleForm.handleSubmit(handleRoleUpdate)}>
           <div className="mt-2 flex flex-col space-y-2">
@@ -172,7 +172,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                         {...field}
                         isDisabled={isMemberEditDisabled}
                         onValueChange={(e) => onChange(e)}
-                        className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
+                        className="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
                       >
                         {projectRoles?.map(({ name, slug, id: projectRoleId }) => (
                           <SelectItem value={slug} key={projectRoleId}>
@@ -203,7 +203,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                             rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                             isDisabled={isMemberEditDisabled}
                             className={twMerge(
-                              "border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                              "bg-mineshaft-600 hover:bg-mineshaft-500 border-none py-2.5 text-xs capitalize",
                               isTemporary && "text-primary",
                               isExpired && "text-red-600"
                             )}
@@ -228,7 +228,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                       className="border border-gray-600 pt-4"
                     >
                       <div className="flex flex-col space-y-4">
-                        <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                        <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
                           Configure timed access
                         </div>
                         {isExpired && <Tag colorSchema="red">Expired</Tag>}
@@ -298,7 +298,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                   </Popover>
                   <IconButton
                     variant="outline_bg"
-                    className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
+                    className="border-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
                     ariaLabel="delete-role"
                     isDisabled={isMemberEditDisabled || selectedRoleList.fields.length === 1}
                     onClick={() => {
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx
index 187e1813a..374c555de 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx
@@ -18,7 +18,7 @@ export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) =>
       <MemberRbacSection projectMember={projectMember} onOpenUpgradeModal={onOpenUpgradeModal} />
       <Alert
         title="Additional privileges have been moved and now offer full permission customization."
-        className="mt-4 border-primary/50 bg-primary/10"
+        className="border-primary/50 bg-primary/10 mt-4"
       >
         <AlertDescription>
           <Link
@@ -28,7 +28,7 @@ export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) =>
               membershipId: projectMember.id
             }}
           >
-            <span className="cursor-pointer text-primary underline underline-offset-2">
+            <span className="text-primary cursor-pointer underline underline-offset-2">
               Click here to access them now
             </span>
           </Link>
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
index 33c0d1077..3a6f5182b 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
@@ -302,7 +302,7 @@ export const SpecificPrivilegeSecretForm = ({
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="w-full bg-mineshaft-900 hover:bg-mineshaft-800"
+                  className="bg-mineshaft-900 hover:bg-mineshaft-800 w-full"
                   onValueChange={(e) => onChange(e)}
                   position="popper"
                   dropdownContainerClassName="max-w-none"
@@ -331,7 +331,7 @@ export const SpecificPrivilegeSecretForm = ({
                         <Select
                           {...field}
                           isDisabled={isMemberEditDisabled || !selectablePaths.length}
-                          className="w-full hover:bg-mineshaft-800"
+                          className="hover:bg-mineshaft-800 w-full"
                           placeholder="Select a secret path"
                           onValueChange={(e) => field.onChange(e)}
                           position="popper"
@@ -368,7 +368,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="read"
                   render={({ field }) => (
                     <label
-                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
+                      className={`border-mineshaft-600 bg-mineshaft-900 hover:border-primary/30 hover:bg-primary/10 group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border p-3 duration-100 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-read"
                     >
                       <Checkbox
@@ -378,7 +378,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
+                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faEye}
@@ -386,10 +386,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="View"
-                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-xs text-mineshaft-400">Read secret values</p>
+                        <p className="text-mineshaft-400 text-xs">Read secret values</p>
                       </div>
                     </label>
                   )}
@@ -399,7 +399,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="create"
                   render={({ field }) => (
                     <label
-                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
+                      className={`border-mineshaft-600 bg-mineshaft-900 hover:border-primary/30 hover:bg-primary/10 group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border p-3 duration-100 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-change"
                     >
                       <Checkbox
@@ -409,7 +409,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
+                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faPlus}
@@ -417,10 +417,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Create"
-                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-xs text-mineshaft-400">Create new secrets</p>
+                        <p className="text-mineshaft-400 text-xs">Create new secrets</p>
                       </div>
                     </label>
                   )}
@@ -432,7 +432,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="edit"
                   render={({ field }) => (
                     <label
-                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
+                      className={`border-mineshaft-600 bg-mineshaft-900 hover:border-primary/30 hover:bg-primary/10 group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border p-3 duration-100 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-modify"
                     >
                       <Checkbox
@@ -442,7 +442,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
+                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faPencil}
@@ -450,10 +450,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Modify"
-                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-xs text-mineshaft-400">Update existing secrets</p>
+                        <p className="text-mineshaft-400 text-xs">Update existing secrets</p>
                       </div>
                     </label>
                   )}
@@ -463,7 +463,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="delete"
                   render={({ field }) => (
                     <label
-                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
+                      className={`border-mineshaft-600 bg-mineshaft-900 hover:border-primary/30 hover:bg-primary/10 group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border p-3 duration-100 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-delete"
                     >
                       <Checkbox
@@ -473,7 +473,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
+                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faTrashCan}
@@ -481,10 +481,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Delete"
-                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
+                        <p className="text-mineshaft-400 text-xs">Delete existing secrets</p>
                       </div>
                     </label>
                   )}
@@ -504,7 +504,7 @@ export const SpecificPrivilegeSecretForm = ({
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-4" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                          "w-full border-mineshaft-600 bg-mineshaft-900 py-2.5 text-sm text-mineshaft-300 capitalize hover:border-mineshaft-600 hover:bg-mineshaft-800",
+                          "border-mineshaft-600 bg-mineshaft-900 text-mineshaft-300 hover:border-mineshaft-600 hover:bg-mineshaft-800 w-full py-2.5 text-sm capitalize",
                           isExpired && "text-red-600"
                         )}
                       >
@@ -518,10 +518,10 @@ export const SpecificPrivilegeSecretForm = ({
                   side="right"
                   sideOffset={12}
                   hideCloseBtn
-                  className="border border-mineshaft-600 bg-mineshaft-800 pt-4"
+                  className="border-mineshaft-600 bg-mineshaft-800 border pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="text-sm text-mineshaft-300">Configure timed access</div>
+                    <div className="text-mineshaft-300 text-sm">Configure timed access</div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
                     <Controller
                       control={privilegeForm.control}
@@ -594,7 +594,7 @@ export const SpecificPrivilegeSecretForm = ({
                   <Tooltip content="Cancel" className="mr-4">
                     <IconButton
                       variant="outline_bg"
-                      className="border border-mineshaft-500 bg-mineshaft-600 py-2.5 hover:border-red/70 hover:bg-red/20"
+                      className="border-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-2.5"
                       ariaLabel="delete-privilege"
                       isDisabled={privilegeForm.formState.isSubmitting}
                       onClick={() => privilegeForm.reset()}
@@ -629,7 +629,7 @@ export const SpecificPrivilegeSecretForm = ({
                   <IconButton
                     isDisabled={isMemberEditDisabled}
                     variant="outline_bg"
-                    className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
+                    className="border-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
                     ariaLabel="delete-privilege"
                     onClick={() => handlePopUpOpen("deletePrivilege")}
                   >
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx
index 6c02ca5b3..6a433f371 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx
@@ -55,9 +55,9 @@ export const MembersSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Users</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Users</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx
index e8cb43db9..5f6f29ade 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx
@@ -193,7 +193,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-9.5 w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "h-9.5 border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex w-[2.6rem] items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -209,8 +209,8 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                   Apply Roles to Filter Users
                 </DropdownMenuLabel>
                 {projectRoles?.map(({ id, slug, name }) => (
@@ -301,7 +301,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                 return (
                   <Tr
                     key={`membership-${membershipId}`}
-                    className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
                     role="button"
                     tabIndex={0}
                     onKeyDown={(evt) => {
@@ -365,7 +365,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                             <HoverCardTrigger>
                               <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
                             </HoverCardTrigger>
-                            <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+                            <HoverCardContent className="bg-mineshaft-800 border border-gray-700 p-4">
                               {roles
                                 .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
                                 .map(
diff --git a/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
index 0be78b427..96ac4d9f3 100644
--- a/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -165,9 +165,9 @@ export const ProjectRoleList = () => {
     orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Project Roles</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Project Roles</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
           {(isAllowed) => (
             <Button
@@ -247,7 +247,7 @@ export const ProjectRoleList = () => {
               return (
                 <Tr
                   key={`role-list-${id}`}
-                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                  className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                   onClick={() =>
                     navigate({
                       to: `${getProjectBaseURL(currentProject.type)}/roles/$roleSlug`,
@@ -261,7 +261,7 @@ export const ProjectRoleList = () => {
                   <Td>{name}</Td>
                   <Td>{slug}</Td>
                   <Td>
-                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
+                    <Badge className="bg-mineshaft-400/50 text-bunker-200 w-min whitespace-nowrap">
                       {isCustomProjectRole(slug) ? "Custom" : "Default"}
                     </Badge>
                   </Td>
diff --git a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
index 873422f3c..7862e352f 100644
--- a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
@@ -314,7 +314,7 @@ const ServiceTokenForm = () => {
       </div>
     </form>
   ) : (
-    <div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+    <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
       <p className="mr-4 break-all">{newToken}</p>
       <IconButton
         ariaLabel="copy icon"
@@ -323,7 +323,7 @@ const ServiceTokenForm = () => {
         onClick={copyTokenToClipboard}
       >
         <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
-        <span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
+        <span className="group-hover:animate-fade-in bg-bunker-800 absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
           {t("common.click-to-copy")}
         </span>
       </IconButton>
diff --git a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
index c8f90c27e..f3c6936b4 100644
--- a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -47,17 +47,17 @@ export const ServiceTokenSection = withProjectPermission(
     };
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="mb-2 flex items-center justify-between">
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Service Tokens</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Service Tokens</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/token"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -67,7 +67,7 @@ export const ServiceTokenSection = withProjectPermission(
                 </div>
               </a>
             </div>
-            <p className="text-sm text-bunker-300">
+            <p className="text-bunker-300 text-sm">
               {t("section.token.service-tokens-description")}
             </p>
           </div>
diff --git a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx
index 2cc88aad4..802d9edc1 100644
--- a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx
@@ -205,9 +205,9 @@ export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
                       {row?.scopes.map(({ secretPath, environment }) => (
                         <div
                           key={`${row.id}-${environment}-${secretPath}`}
-                          className="inline-flex items-center space-x-1 rounded-md border border-mineshaft-500 p-1 px-2"
+                          className="border-mineshaft-500 inline-flex items-center space-x-1 rounded-md border p-1 px-2"
                         >
-                          <div className="mr-1 border-r border-mineshaft-500 pr-2">
+                          <div className="border-mineshaft-500 mr-1 border-r pr-2">
                             {environment}
                           </div>
                           <FontAwesomeIcon icon={faFolder} size="sm" className="text-yellow" />
diff --git a/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx b/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
index 84fb69b83..5126a2620 100644
--- a/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
@@ -20,7 +20,7 @@ export const AppConnectionsPage = withProjectPermission(
           <link rel="icon" href="/infisical.ico" />
           <meta property="og:image" content="/images/message.png" />
         </Helmet>
-        <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="bg-bunker-800 flex w-full justify-center text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
               className="w-full"
diff --git a/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
index 1e9b1ad54..7d646106a 100644
--- a/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
@@ -8,12 +8,12 @@ export const AuditLogsPage = () => {
   const { currentProject } = useProject();
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       <Helmet>
         <title>Project Audit Logs</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
             title="Audit logs"
diff --git a/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
index d6bda7ea1..453c52975 100644
--- a/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -31,7 +31,7 @@ const Page = () => {
     );
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {groupMembership ? (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={groupMembership.group.name} />
diff --git a/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx b/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
index cca6cabfd..78a800937 100644
--- a/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
+++ b/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
@@ -70,9 +70,9 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
   };
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Group Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Group Details</h3>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <IconButton ariaLabel="Options" colorSchema="secondary" className="w-6" variant="plain">
@@ -101,9 +101,9 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Group ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Group ID</p>
           <div className="group flex items-center gap-2">
-            <p className="text-sm text-mineshaft-300">{groupMembership.group.id}</p>
+            <p className="text-mineshaft-300 text-sm">{groupMembership.group.id}</p>
             <CopyButton
               value={groupMembership.group.id}
               name="Group ID"
@@ -113,18 +113,18 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{groupMembership.group.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{groupMembership.group.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Slug</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Slug</p>
           <div className="group flex items-center gap-2">
-            <p className="text-sm text-mineshaft-300">{groupMembership.group.slug}</p>
+            <p className="text-mineshaft-300 text-sm">{groupMembership.group.slug}</p>
             <CopyButton value={groupMembership.group.slug} name="Slug" size="xs" variant="plain" />
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Project Role</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Project Role</p>
           <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Groups}>
             {(isAllowed) => (
               <GroupRoles
@@ -138,8 +138,8 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
           </ProjectPermissionCan>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Assigned to Project</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Assigned to Project</p>
+          <p className="text-mineshaft-300 text-sm">
             {format(groupMembership.createdAt, "M/d/yyyy")}
           </p>
         </div>
diff --git a/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx b/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
index 4534e4371..cf6e9682b 100644
--- a/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
+++ b/frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
@@ -8,9 +8,9 @@ type Props = {
 
 export const GroupMembersSection = ({ groupMembership }: Props) => {
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Group Members</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Group Members</h3>
       </div>
       <div className="py-4">
         <GroupMembersTable groupMembership={groupMembership} />
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
index 993320e56..e57f099bc 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -113,7 +113,7 @@ const Page = () => {
   }
 
   return (
-    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex max-w-7xl flex-col justify-between text-white">
       {identityMembershipDetails ? (
         <>
           <PageHeader
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx
index a5d74271c..f88076f69 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx
@@ -187,13 +187,13 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
     >
       <FormProvider {...form}>
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-lg font-medium text-mineshaft-100"
+            className="text-mineshaft-100 text-lg font-medium"
             variant="link"
             onClick={onGoBack}
           >
@@ -202,7 +202,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
           <div className="flex items-center space-x-4">
             {isDirty && (
               <Button
-                className="mr-4 text-mineshaft-300"
+                className="text-mineshaft-300 mr-4"
                 variant="link"
                 isDisabled={isSubmitting}
                 isLoading={isSubmitting}
@@ -216,7 +216,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
                 variant="outline_bg"
                 type="submit"
                 className={twMerge(
-                  "mr-4 h-10 border border-primary",
+                  "border-primary mr-4 h-10 border",
                   isDirty && "bg-primary text-black"
                 )}
                 isDisabled={isSubmitting || !isDirty || isDisabled}
@@ -231,7 +231,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
         </div>
         <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
           <div className="text-lg">Overview</div>
-          <p className="mb-4 text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 mb-4 text-sm">
             Additional privileges take precedence over roles when permissions conflict
           </p>
           <div className="flex items-end space-x-6">
@@ -258,7 +258,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                         isDisabled={isIdentityEditDisabled}
                         className={twMerge(
-                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
                           isTemporary && "text-primary",
                           isExpired && "text-red-600"
                         )}
@@ -276,7 +276,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
                   className="border border-gray-600 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
                       Configure Timed Access
                     </div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx
index f98f6ebf8..083e33172 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx
@@ -102,10 +102,10 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
             initial={{ opacity: 0, translateX: 0 }}
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: -30 }}
-            className="absolute w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+            className="border-mineshaft-600 bg-mineshaft-900 absolute w-full rounded-lg border p-4"
           >
-            <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-              <h3 className="text-lg font-medium text-mineshaft-100">
+            <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+              <h3 className="text-mineshaft-100 text-lg font-medium">
                 Project Additional Privileges
               </h3>
 
@@ -174,7 +174,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
                         return (
                           <Tr
                             key={`user-project-privilege-${privilegeDetails?.id}`}
-                            className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                            className="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
                             role="button"
                             tabIndex={0}
                             onKeyDown={(evt) => {
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
index 34b5229d6..d21760782 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
@@ -89,9 +89,9 @@ export const IdentityRoleDetailsSection = ({
   };
 
   return (
-    <div className="mb-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Project Roles</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Project Roles</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Edit}
           a={subject(ProjectPermissionSub.Identity, {
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx
index a74428e98..08ae56561 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx
@@ -154,7 +154,7 @@ export const IdentityRoleModify = ({ identityProjectMembership }: Props) => {
                     {...field}
                     isDisabled={isIdentityEditDisabled}
                     onValueChange={(e) => onChange(e)}
-                    className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
+                    className="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
                     containerClassName="w-1/2"
                   >
                     {projectRoles?.map(({ name, slug, id: projectRoleId }) => (
@@ -186,7 +186,7 @@ export const IdentityRoleModify = ({ identityProjectMembership }: Props) => {
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                         isDisabled={isIdentityEditDisabled}
                         className={twMerge(
-                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
                           isTemporary && "text-primary",
                           isExpired && "text-red-600"
                         )}
@@ -211,7 +211,7 @@ export const IdentityRoleModify = ({ identityProjectMembership }: Props) => {
                   className="border border-gray-600 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
                       Configure Timed Access
                     </div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
@@ -281,7 +281,7 @@ export const IdentityRoleModify = ({ identityProjectMembership }: Props) => {
               </Popover>
               <IconButton
                 variant="outline_bg"
-                className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
+                className="border-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
                 ariaLabel="delete-role"
                 isDisabled={isIdentityEditDisabled || selectedRoleList.fields.length === 1}
                 onClick={() => {
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
index 23b8299da..861adced2 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
@@ -115,7 +115,7 @@ export const Page = () => {
   }
 
   return (
-    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex max-w-7xl flex-col justify-between text-white">
       {membershipDetails ? (
         <>
           <PageHeader
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx
index 7094c9ca8..6203c30ef 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx
@@ -102,10 +102,10 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
             initial={{ opacity: 0, translateX: 0 }}
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: -30 }}
-            className="absolute w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+            className="border-mineshaft-600 bg-mineshaft-900 absolute w-full rounded-lg border p-4"
           >
-            <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-              <h3 className="text-lg font-medium text-mineshaft-100">
+            <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+              <h3 className="text-mineshaft-100 text-lg font-medium">
                 Project Additional Privileges
               </h3>
               {userId !== membershipDetails?.user?.id &&
@@ -172,7 +172,7 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
                         return (
                           <Tr
                             key={`user-project-privilege-${privilegeDetails?.id}`}
-                            className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                            className="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
                             role="button"
                             tabIndex={0}
                             onKeyDown={(evt) => {
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx
index 1a217a509..392257a6e 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx
@@ -183,13 +183,13 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
     >
       <FormProvider {...form}>
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-lg font-medium text-mineshaft-100"
+            className="text-mineshaft-100 text-lg font-medium"
             variant="link"
             onClick={onGoBack}
           >
@@ -198,7 +198,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
           <div className="flex items-center space-x-4">
             {isDirty && (
               <Button
-                className="mr-4 text-mineshaft-300"
+                className="text-mineshaft-300 mr-4"
                 variant="link"
                 isDisabled={isSubmitting}
                 isLoading={isSubmitting}
@@ -212,7 +212,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
                 variant="outline_bg"
                 type="submit"
                 className={twMerge(
-                  "mr-4 h-10 border border-primary",
+                  "border-primary mr-4 h-10 border",
                   isDirty && "bg-primary text-black"
                 )}
                 isDisabled={isSubmitting || !isDirty || isDisabled}
@@ -227,7 +227,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
         </div>
         <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
           <div className="text-lg">Overview</div>
-          <p className="mb-4 text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 mb-4 text-sm">
             Additional privileges take precedence over roles when permissions conflict
           </p>
           <div className="flex items-end space-x-6">
@@ -254,7 +254,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
                           isTemporary && "text-primary",
                           isExpired && "text-red-600"
                         )}
@@ -272,7 +272,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
                   className="border border-gray-600 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
                       Configure Timed Access
                     </div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx
index 703511c84..67899a99b 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx
@@ -94,9 +94,9 @@ export const MemberRoleDetailsSection = ({
   };
 
   return (
-    <div className="mb-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Project Roles</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-4 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Project Roles</h3>
         {!isOwnProjectMembershipDetails && membershipDetails?.status !== "invited" && (
           <ProjectPermissionCan
             I={ProjectPermissionActions.Edit}
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx
index f18131b93..6711a8a54 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx
@@ -168,7 +168,7 @@ export const MemberRoleModify = ({ projectMember, onOpenUpgradeModal }: Props) =
                     {...field}
                     isDisabled={isMemberEditDisabled}
                     onValueChange={(e) => onChange(e)}
-                    className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
+                    className="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
                     containerClassName="w-1/2"
                   >
                     {projectRoles?.map(({ name, slug, id: projectRoleId }) => (
@@ -200,7 +200,7 @@ export const MemberRoleModify = ({ projectMember, onOpenUpgradeModal }: Props) =
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
+                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
                           isTemporary && "text-primary",
                           isExpired && "text-red-600"
                         )}
@@ -225,7 +225,7 @@ export const MemberRoleModify = ({ projectMember, onOpenUpgradeModal }: Props) =
                   className="border border-gray-600 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
                       Configure Timed Access
                     </div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
@@ -295,7 +295,7 @@ export const MemberRoleModify = ({ projectMember, onOpenUpgradeModal }: Props) =
               </Popover>
               <IconButton
                 variant="outline_bg"
-                className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
+                className="border-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
                 ariaLabel="delete-role"
                 isDisabled={isMemberEditDisabled || selectedRoleList.fields.length === 1}
                 onClick={() => {
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
index d8c95907d..2a08ccc4a 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
@@ -86,7 +86,7 @@ const Page = () => {
   );
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
@@ -94,7 +94,7 @@ const Page = () => {
               <div className="flex flex-col">
                 <div>
                   <span>{data.name}</span>
-                  <p className="text-sm leading-3 font-normal text-mineshaft-400 normal-case">
+                  <p className="text-mineshaft-400 text-sm font-normal normal-case leading-3">
                     {data.slug} {data.description && `- ${data.description}`}
                   </p>
                 </div>
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx
index 37f6b3868..86c0d972b 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx
@@ -44,7 +44,7 @@ export const AddPoliciesButton = ({ isDisabled, projectType }: Props) => {
           <IconButton
             ariaLabel="Open policy template options"
             variant="outline_bg"
-            className="rounded-l-none bg-mineshaft-600 p-3"
+            className="bg-mineshaft-600 rounded-l-none p-3"
           >
             <FontAwesomeIcon icon={faAngleDown} />
           </IconButton>
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx
index 80fc46e7f..c1ee65f5a 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx
@@ -49,7 +49,7 @@ export const ConditionsFields = ({
     (errors?.permissions as any)?.[subject]?.[position]?.conditions?.root?.message;
 
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+    <div className="border-t-mineshaft-600 bg-mineshaft-800 mt-6 border-t pt-2">
       <div className="flex w-full items-center justify-between">
         <div className="mt-2.5 flex items-center text-gray-300">
           <span>Conditions</span>
@@ -67,7 +67,7 @@ export const ConditionsFields = ({
               </>
             }
           >
-            <FontAwesomeIcon size="xs" className="ml-1 text-mineshaft-400" icon={faInfoCircle} />
+            <FontAwesomeIcon size="xs" className="text-mineshaft-400 ml-1" icon={faInfoCircle} />
           </Tooltip>
         </div>
         <Button
@@ -99,7 +99,7 @@ export const ConditionsFields = ({
             return (
               <div
                 key={el.id}
-                className="flex items-start gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+                className="bg-mineshaft-800 flex items-start gap-2 first:rounded-t-md last:rounded-b-md"
               >
                 <div className="w-1/4">
                   <Controller
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx
index d36562089..959f33e55 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx
@@ -158,12 +158,12 @@ export const DuplicateProjectRoleModal = ({ isOpen, onOpenChange, roleSlug }: Pr
         {isPending ? (
           <div className="flex h-full flex-col items-center justify-center py-2.5">
             <Spinner size="lg" className="text-mineshaft-500" />
-            <p className="mt-4 text-sm text-mineshaft-400">Loading Role...</p>
+            <p className="text-mineshaft-400 mt-4 text-sm">Loading Role...</p>
           </div>
         ) : role ? (
           <Content role={role!} onClose={() => onOpenChange(false)} />
         ) : (
-          <p className="w-full text-center text-red">
+          <p className="text-red w-full text-center">
             Error: could not find role with slug &#34;{roleSlug}&#34;
           </p>
         )}
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
index 61ae9891e..d1206ddc4 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
@@ -124,7 +124,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   };
 
   return (
-    <div className="overflow-clip border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md hover:bg-mineshaft-700">
+    <div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 overflow-clip border first:rounded-t-md last:rounded-b-md">
       <div
         className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
         role="button"
@@ -138,7 +138,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
       >
         <FontAwesomeIcon className="mr-6 w-4" icon={isOpen ? faChevronDown : faChevronRight} />
 
-        <div className="grow text-base select-none">{title}</div>
+        <div className="grow select-none text-base">{title}</div>
         {fields.length > 1 && (
           <div>
             <Tag size="xs" className="mr-2 px-2">
@@ -179,7 +179,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
         )}
       </div>
       {isOpen && (
-        <div key={`select-${subject}-type`} className="flex flex-col space-y-3 bg-bunker-700 p-3">
+        <div key={`select-${subject}-type`} className="bg-bunker-700 flex flex-col space-y-3 p-3">
           {fields.map((el, rootIndex) => {
             let isFullReadAccessEnabled = false;
 
@@ -193,9 +193,9 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
               <div
                 key={el.id}
                 className={twMerge(
-                  "relative rounded-md border-l-[6px] bg-mineshaft-800 px-5 py-4 transition-colors duration-300",
+                  "bg-mineshaft-800 relative rounded-md border-l-[6px] px-5 py-4 transition-colors duration-300",
                   isInverted ? "border-l-red-600/50" : "border-l-green-600/50",
-                  dragOverItem === rootIndex ? "border-2 border-primary/50" : "",
+                  dragOverItem === rootIndex ? "border-primary/50 border-2" : "",
                   draggedItem === rootIndex ? "opacity-50" : ""
                 )}
                 onDragOver={(e) => handleDragOver(e, rootIndex)}
@@ -237,7 +237,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                         <FontAwesomeIcon
                           icon={faInfoCircle}
                           size="sm"
-                          className="ml-2 text-bunker-400"
+                          className="text-bunker-400 ml-2"
                         />
                       </Tooltip>
                       {!isDisabled && (
@@ -247,7 +247,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                             colorSchema="danger"
                             variant="plain"
                             size="xs"
-                            className="mr-3 ml-auto rounded-sm"
+                            className="ml-auto mr-3 rounded-sm"
                             onClick={() => remove(rootIndex)}
                             isDisabled={isDisabled}
                           >
@@ -261,7 +261,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                             draggable
                             onDragStart={(e) => handleDragStart(e, rootIndex)}
                             onDragEnd={handleDragEnd}
-                            className="cursor-move text-bunker-300 hover:text-bunker-200"
+                            className="text-bunker-300 hover:text-bunker-200 cursor-move"
                           >
                             <FontAwesomeIcon icon={faGripVertical} />
                           </div>
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx
index 63853ad51..8b6705f89 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx
@@ -119,13 +119,13 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
           ) : null
         }
       />
-      <TableContainer className="mt-4 max-h-112 thin-scrollbar">
-        <div className="sticky top-0 z-30 flex justify-between border-b border-b-mineshaft-600 bg-mineshaft-800 py-3 pr-4 pl-5 font-inter text-sm font-medium text-bunker-300">
+      <TableContainer className="max-h-112 thin-scrollbar mt-4">
+        <div className="border-b-mineshaft-600 bg-mineshaft-800 font-inter text-bunker-300 sticky top-0 z-30 flex justify-between border-b py-3 pl-5 pr-4 text-sm font-medium">
           <span>Resource</span>
           <div className="flex gap-2">
             <Button
               variant="plain"
-              className="p-0 text-mineshaft-400"
+              className="text-mineshaft-400 p-0"
               size="xs"
               colorSchema="secondary"
               onClick={() => {
@@ -162,7 +162,7 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
                 key={`permission-add-${subject}`}
                 render={({ field: { value, onChange } }) => (
                   <Tr
-                    className={`${value ? "bg-mineshaft-600/30" : ""} cursor-pointer hover:bg-mineshaft-700`}
+                    className={`${value ? "bg-mineshaft-600/30" : ""} hover:bg-mineshaft-700 cursor-pointer`}
                     onClick={() => onChange(!value)}
                   >
                     <Td className={`${value ? "text-mineshaft-100" : "text-mineshaft-300"} w-full`}>
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicyTemplateModal.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicyTemplateModal.tsx
index 4af730947..695588ca6 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicyTemplateModal.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicyTemplateModal.tsx
@@ -135,16 +135,16 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
           <AccordionItem
             key={id}
             value={id}
-            className="m-0 border border-mineshaft-600 first:rounded-t last:rounded-b data-[state=open]:border-primary/40 data-[state=open]:bg-mineshaft-600/30"
+            className="border-mineshaft-600 data-[state=open]:border-primary/40 data-[state=open]:bg-mineshaft-600/30 m-0 border first:rounded-t last:rounded-b"
           >
-            <AccordionTrigger className="w-full justify-start p-4 py-8 text-mineshaft-100 hover:bg-mineshaft-700 hover:text-mineshaft-100 data-[state=open]:bg-primary/3 data-[state=open]:text-mineshaft-100">
+            <AccordionTrigger className="text-mineshaft-100 hover:bg-mineshaft-700 hover:text-mineshaft-100 data-[state=open]:bg-primary/3 data-[state=open]:text-mineshaft-100 w-full justify-start p-4 py-8">
               <div className="mr-auto flex flex-col py-2 text-left">
                 <span>{name}</span>
-                <span className="text-sm leading-3 text-mineshaft-400">{description}</span>
+                <span className="text-mineshaft-400 text-sm leading-3">{description}</span>
               </div>
             </AccordionTrigger>
-            <AccordionContent className="border-t border-mineshaft-600">
-              <div className="max-h-80 thin-scrollbar overflow-y-auto">
+            <AccordionContent className="border-mineshaft-600 border-t">
+              <div className="thin-scrollbar max-h-80 overflow-y-auto">
                 <span className="text-mineshaft-300">Grants the following permissions:</span>
                 <div className="grid grid-cols-2 gap-4 py-2">
                   {permissions
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
index fd95d2659..b2bb3f471 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
@@ -159,13 +159,13 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
     <div className="w-full">
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="flex h-full w-full flex-1 flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 py-4"
+        className="border-mineshaft-600 bg-mineshaft-900 flex h-full w-full flex-1 flex-col rounded-lg border py-4"
       >
         <FormProvider {...form}>
-          <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <div className="border-mineshaft-400 mx-4 flex items-center justify-between border-b pb-4">
             <div>
-              <h3 className="text-lg font-medium text-mineshaft-100">Policies</h3>
-              <p className="text-sm leading-3 text-mineshaft-400">
+              <h3 className="text-mineshaft-100 text-lg font-medium">Policies</h3>
+              <p className="text-mineshaft-400 text-sm leading-3">
                 Configure granular access policies
               </p>
             </div>
@@ -173,7 +173,7 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
               <div className="flex items-center gap-2">
                 {isDirty && (
                   <Button
-                    className="mr-4 text-mineshaft-300"
+                    className="text-mineshaft-300 mr-4"
                     variant="link"
                     isDisabled={isSubmitting}
                     isLoading={isSubmitting}
@@ -192,13 +192,13 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                 >
                   Save
                 </Button>
-                <div className="ml-2 border-l border-mineshaft-500 pl-4">
+                <div className="border-mineshaft-500 ml-2 border-l pl-4">
                   <AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
                 </div>
               </div>
             )}
           </div>
-          <div className="flex flex-1 flex-col overflow-hidden pr-1 pl-4">
+          <div className="flex flex-1 flex-col overflow-hidden pl-4 pr-1">
             <div className="thin-scrollbar flex-1 overflow-y-scroll py-4">
               {!isPending && <PermissionEmptyState />}
               {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])
diff --git a/frontend/src/pages/project/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx b/frontend/src/pages/project/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx
index eb5c98e6b..7316ac49d 100644
--- a/frontend/src/pages/project/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx
+++ b/frontend/src/pages/project/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx
@@ -85,11 +85,11 @@ export const AuditLogsRetentionSection = () => {
   const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
   return (
     <>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="flex w-full items-center justify-between">
           <p className="text-xl font-medium">Audit Logs Retention</p>
         </div>
-        <p className="mt-2 mb-4 max-w-2xl text-sm text-gray-400">
+        <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
           Set the number of days to keep your project audit logs.
         </p>
         <form onSubmit={handleSubmit(handleAuditLogsRetentionSubmit)} autoComplete="off">
diff --git a/frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx b/frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx
index 760c4b852..e3b90b1da 100644
--- a/frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx
+++ b/frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx
@@ -31,7 +31,7 @@ export const DeleteProjectProtection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <p className="mb-3 text-xl font-medium">Delete Protection</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
diff --git a/frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx b/frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
index fb66f0a74..d0f614efa 100644
--- a/frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
+++ b/frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
@@ -130,8 +130,8 @@ export const DeleteProjectSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-medium text-mineshaft-100">Danger Zone</p>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <p className="text-mineshaft-100 mb-4 text-xl font-medium">Danger Zone</p>
       <div className="space-x-4">
         <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
           {(isAllowed) => (
diff --git a/frontend/src/pages/public/ErrorPage/ErrorPage.tsx b/frontend/src/pages/public/ErrorPage/ErrorPage.tsx
index 1feeeb32a..998db175d 100644
--- a/frontend/src/pages/public/ErrorPage/ErrorPage.tsx
+++ b/frontend/src/pages/public/ErrorPage/ErrorPage.tsx
@@ -17,13 +17,13 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
   }
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
-      <div className="flex max-w-3xl flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-8 text-center text-mineshaft-200">
+    <div className="bg-mineshaft-900 flex h-screen w-screen items-center justify-center">
+      <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex max-w-3xl flex-col rounded-md border p-8 text-center">
         <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
         <p>
           Something went wrong. Please contact{" "}
           <a
-            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
             target="_blank"
             rel="noopener noreferrer"
             href="mailto:support@infisical.com"
@@ -33,7 +33,7 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
           , or{" "}
           <a
             href="https://infisical.com/slack"
-            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -49,8 +49,8 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
         </Link>
         {error?.message && (
           <>
-            <div className="my-4 h-px w-full bg-mineshaft-600" />
-            <p className="max-h-44 thin-scrollbar w-full overflow-auto rounded-md bg-mineshaft-700 p-2 text-ellipsis">
+            <div className="bg-mineshaft-600 my-4 h-px w-full" />
+            <p className="thin-scrollbar bg-mineshaft-700 max-h-44 w-full overflow-auto text-ellipsis rounded-md p-2">
               <code className="text-xs">
                 {window.location.pathname}
                 <br />
diff --git a/frontend/src/pages/public/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/public/NotFoundPage/NotFoundPage.tsx
index 9b7833f86..355be168a 100644
--- a/frontend/src/pages/public/NotFoundPage/NotFoundPage.tsx
+++ b/frontend/src/pages/public/NotFoundPage/NotFoundPage.tsx
@@ -3,13 +3,13 @@ import { Link } from "@tanstack/react-router";
 
 export const NotFoundPage = () => {
   return (
-    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
+    <div className="bg-bunker-800 flex flex-col justify-between md:h-screen">
       <Helmet>
         <title>Infisical | Page Not Found</title>
       </Helmet>
       <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
         <p className="mt-32 text-4xl">Oops, something went wrong</p>
-        <p className="mt-2 mb-1 text-lg">
+        <p className="mb-1 mt-2 text-lg">
           Think this is a mistake? Email{" "}
           <a className="text-primary underline underline-offset-4" href="mailto:team@infisical.com">
             team@infisical.com
@@ -17,7 +17,7 @@ export const NotFoundPage = () => {
           and we`ll fix it!{" "}
         </p>
         <Link to="/organization/projects">
-          <div className="diration-200 mt-8 cursor-default rounded-md bg-mineshaft-500 px-4 py-2 font-medium hover:bg-primary hover:text-black">
+          <div className="diration-200 bg-mineshaft-500 hover:bg-primary mt-8 cursor-default rounded-md px-4 py-2 font-medium hover:text-black">
             Go to Dashboard
           </div>
         </Link>
diff --git a/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx b/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx
index 9a427a053..d25277533 100644
--- a/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx
+++ b/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx
@@ -15,7 +15,7 @@ export const ShareSecretPage = () => {
         <meta name="og:description" content="" />
       </Helmet>
       <div className="dark h-full">
-        <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
+        <div className="bg-linear-to-tr from-mineshaft-700 to-bunker-800 dark:scheme-dark flex h-screen flex-col justify-between overflow-auto text-gray-200">
           <div />
           <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
             <div className="mb-8 text-center">
@@ -30,7 +30,7 @@ export const ShareSecretPage = () => {
                   />
                 </a>
               </div>
-              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
                 Share a secret
               </h1>
               <p className="text-md">
@@ -39,22 +39,22 @@ export const ShareSecretPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
                 >
                   Infisical &rarr;
                 </a>
               </p>
             </div>
-            <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+            <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
               <ShareSecretForm isPublic />
             </div>
             <div className="m-auto my-8 flex w-full">
-              <div className="w-full border-t border-mineshaft-600" />
+              <div className="border-mineshaft-600 w-full border-t" />
             </div>
-            <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-              <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
+            <div className="border-primary-500/30 bg-primary/5 m-auto flex w-full flex-col rounded-md border p-6 pt-5">
+              <p className="text-mineshaft-100 w-full pb-2 text-lg font-medium md:pb-3 md:text-xl">
                 Open source{" "}
-                <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+                <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
                   secret management
                 </span>{" "}
                 for developers
@@ -65,7 +65,7 @@ export const ShareSecretPage = () => {
                     href="https://github.com/infisical/infisical"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                    className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
                   >
                     Infisical
                   </a>{" "}
@@ -74,7 +74,7 @@ export const ShareSecretPage = () => {
                 </p>
                 <div className="mt-4 cursor-pointer sm:mt-0">
                   <a target="_blank" rel="noopener noreferrer" href="https://infisical.com">
-                    <div className="flex items-center justify-between rounded-md border border-mineshaft-400/40 bg-mineshaft-600 px-3 py-2 duration-200 hover:border-primary/60 hover:bg-primary/20 hover:text-white">
+                    <div className="border-mineshaft-400/40 bg-mineshaft-600 hover:border-primary/60 hover:bg-primary/20 flex items-center justify-between rounded-md border px-3 py-2 duration-200 hover:text-white">
                       <p className="mr-4 whitespace-nowrap">Try Infisical</p>
                       <FontAwesomeIcon icon={faArrowRight} />
                     </div>
@@ -84,8 +84,8 @@ export const ShareSecretPage = () => {
             </div>
           </div>
 
-          <div className="w-full bg-mineshaft-600 p-2">
-            <p className="text-center text-sm text-mineshaft-300">
+          <div className="bg-mineshaft-600 w-full p-2">
+            <p className="text-mineshaft-300 text-center text-sm">
               Made with ❤️ by{" "}
               <a className="text-primary" href="https://infisical.com">
                 Infisical
diff --git a/frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx b/frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx
index 54627888b..e68b9cac4 100644
--- a/frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx
+++ b/frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx
@@ -211,7 +211,7 @@ export const ShareSecretForm = ({
               <textarea
                 placeholder="Enter sensitive data to share via an encrypted link..."
                 {...field}
-                className="h-40 min-h-[70px] w-full rounded-md border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5 text-bunker-300 outline-hidden transition-all group-hover:mr-2 placeholder:text-mineshaft-400 hover:border-primary-400/30 focus:border-primary-400/50"
+                className="border-mineshaft-600 bg-mineshaft-900 text-bunker-300 outline-hidden placeholder:text-mineshaft-400 hover:border-primary-400/30 focus:border-primary-400/50 h-40 min-h-[70px] w-full rounded-md border px-2 py-1.5 transition-all group-hover:mr-2"
                 disabled={value !== undefined}
               />
             </FormControl>
@@ -257,7 +257,7 @@ export const ShareSecretForm = ({
                 isError={Boolean(error)}
               >
                 <Switch
-                  className={`mr-2 ml-0 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-primary ${!allowSecretSharingOutsideOrganization ? "opacity-50" : ""}`}
+                  className={`bg-mineshaft-400/50 data-[state=checked]:bg-primary ml-0 mr-2 shadow-inner ${!allowSecretSharingOutsideOrganization ? "opacity-50" : ""}`}
                   thumbClassName="bg-mineshaft-800"
                   containerClassName="flex-row-reverse w-fit"
                   isChecked={
@@ -436,7 +436,7 @@ export const ShareSecretForm = ({
           <span>Shared secret link has been emailed to select users.</span>
         </div>
         <Button
-          className="mt-6 w-full bg-mineshaft-700 py-3 text-bunker-200"
+          className="bg-mineshaft-700 text-bunker-200 mt-6 w-full py-3"
           colorSchema="primary"
           variant="outline_bg"
           size="sm"
@@ -465,7 +465,7 @@ export const ShareSecretForm = ({
         </IconButton>
       </div>
       <Button
-        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
+        className="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
diff --git a/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx b/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
index 0e88fe59e..0bf99963f 100644
--- a/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
+++ b/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
@@ -22,7 +22,7 @@ type VersionOption = {
 const formatVersionOption = (option: VersionOption) => (
   <div className="flex items-center justify-between">
     <span>{option.label}</span>
-    {option.isLatest && <span className="text-xs text-primary">(Latest)</span>}
+    {option.isLatest && <span className="text-primary text-xs">(Latest)</span>}
   </div>
 );
 interface UpgradeResult {
@@ -143,7 +143,7 @@ export const UpgradePathPage = () => {
         />
       </Helmet>
       <div className="dark h-full">
-        <div className="flex h-screen flex-col justify-between overflow-auto bg-mineshaft-900 text-bunker-200 dark:scheme-dark">
+        <div className="bg-mineshaft-900 text-bunker-200 dark:scheme-dark flex h-screen flex-col justify-between overflow-auto">
           <div />
           <div className="mx-auto w-full max-w-4xl px-4 py-4 md:px-0">
             {/* Header */}
@@ -159,14 +159,14 @@ export const UpgradePathPage = () => {
                   />
                 </a>
               </div>
-              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
                 Upgrade your Infisical Version
               </h1>
             </div>
 
             {/* Calculator Card */}
-            <div className="mb-8 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-6">
-              <h2 className="mb-6 text-xl font-medium text-bunker-200">Calculate Upgrade Path</h2>
+            <div className="border-mineshaft-600 bg-mineshaft-800 mb-8 rounded-lg border p-6">
+              <h2 className="text-bunker-200 mb-6 text-xl font-medium">Calculate Upgrade Path</h2>
               <div className="space-y-6">
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                   {/* From Version Selector */}
@@ -205,7 +205,7 @@ export const UpgradePathPage = () => {
                 <Button
                   onClick={handleCalculate}
                   isLoading={calculateMutation.isPending}
-                  className="w-full bg-primary font-medium text-black hover:bg-primary/80"
+                  className="bg-primary hover:bg-primary/80 w-full font-medium text-black"
                 >
                   {calculateMutation.isPending ? "Calculating..." : "Calculate Upgrade Path"}
                 </Button>
@@ -297,7 +297,7 @@ export const UpgradePathPage = () => {
                           >
                             {hasIssues ? "Action Required:" : "Ready to Upgrade:"}
                           </h3>
-                          <p className="mt-1 text-sm text-bunker-300">
+                          <p className="text-bunker-300 mt-1 text-sm">
                             {hasIssues
                               ? `Your upgrade path contains conflicts in the following versions: ${allConflictVersions.join(", ")}. Please review and resolve each item before proceeding to the next version.`
                               : "Your upgrade path is clear with no breaking changes or conflicts. You can proceed with the upgrade."}
@@ -309,10 +309,10 @@ export const UpgradePathPage = () => {
                 })()}
 
                 {/* Upgrade Steps */}
-                <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-6">
+                <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-6">
                   <div className="mb-6 flex items-center space-x-2">
                     <svg
-                      className="h-5 w-5 text-bunker-300"
+                      className="text-bunker-300 h-5 w-5"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -324,7 +324,7 @@ export const UpgradePathPage = () => {
                         d="M13 7l5 5m0 0l-5 5m5-5H6"
                       />
                     </svg>
-                    <h2 className="text-xl font-medium text-bunker-200">Upgrade Steps</h2>
+                    <h2 className="text-bunker-200 text-xl font-medium">Upgrade Steps</h2>
                   </div>
 
                   <div className="space-y-6">
@@ -411,13 +411,13 @@ export const UpgradePathPage = () => {
                         <div key={step.version} className="relative flex">
                           {/* Timeline Column */}
                           <div className="mr-4 flex flex-col items-center">
-                            <div className="z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-black">
+                            <div className="border-primary bg-primary z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-black">
                               <span className="text-xs font-bold">{index + 1}</span>
                             </div>
 
                             {/* Timeline Line */}
                             {!isLast && (
-                              <div className="-mt-4 -mb-4 h-full w-px flex-1 bg-mineshaft-500" />
+                              <div className="bg-mineshaft-500 -mb-4 -mt-4 h-full w-px flex-1" />
                             )}
                           </div>
 
@@ -425,14 +425,14 @@ export const UpgradePathPage = () => {
                           <div className="flex-1 pb-6">
                             {/* Version Header */}
                             <div className="flex items-center space-x-3">
-                              <h3 className="font-medium text-bunker-200">{step.version}</h3>
+                              <h3 className="text-bunker-200 font-medium">{step.version}</h3>
                               {isFirst && (
-                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
+                                <span className="border-primary/30 bg-primary/20 text-primary rounded-sm border px-2 py-1 text-xs font-medium">
                                   Starting Version
                                 </span>
                               )}
                               {isLast && (
-                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
+                                <span className="border-primary/30 bg-primary/20 text-primary rounded-sm border px-2 py-1 text-xs font-medium">
                                   Target Version
                                 </span>
                               )}
@@ -441,13 +441,13 @@ export const UpgradePathPage = () => {
                                   href={`https://github.com/Infisical/infisical/releases/tag/${step.version}`}
                                   target="_blank"
                                   rel="noopener noreferrer"
-                                  className="inline-flex items-center space-x-1 text-xs text-primary transition-colors hover:text-primary/80"
+                                  className="text-primary hover:text-primary/80 inline-flex items-center space-x-1 text-xs transition-colors"
                                 >
                                   <FontAwesomeIcon icon={faExternalLink} className="h-3 w-3" />
                                   <span>View Changelog</span>
                                 </a>
                               ) : (
-                                <span className="inline-flex items-center space-x-1 text-xs text-bunker-400">
+                                <span className="text-bunker-400 inline-flex items-center space-x-1 text-xs">
                                   <span>No GitHub Release</span>
                                 </span>
                               )}
@@ -464,8 +464,8 @@ export const UpgradePathPage = () => {
                               if (!notes) return null;
 
                               return (
-                                <div className="mt-3 rounded-sm border border-bunker-500/20 bg-bunker-700/20 p-3">
-                                  <div className="text-sm text-bunker-300">{notes}</div>
+                                <div className="border-bunker-500/20 bg-bunker-700/20 mt-3 rounded-sm border p-3">
+                                  <div className="text-bunker-300 text-sm">{notes}</div>
                                 </div>
                               );
                             })()}
@@ -476,7 +476,7 @@ export const UpgradePathPage = () => {
                                 <div className="mb-1 text-sm font-medium text-yellow-400">
                                   Database Schema Changes Required
                                 </div>
-                                <div className="mb-2 text-xs text-bunker-300">
+                                <div className="text-bunker-300 mb-2 text-xs">
                                   {typeof dbMigrationDescription === "string"
                                     ? dbMigrationDescription
                                     : "This version includes database schema changes that require migrations."}
@@ -517,7 +517,7 @@ export const UpgradePathPage = () => {
                                     <div className="mb-1 text-sm font-medium text-red-400">
                                       {change.title}
                                     </div>
-                                    <div className="mb-2 text-xs text-bunker-300">
+                                    <div className="text-bunker-300 mb-2 text-xs">
                                       {change.description}
                                     </div>
                                     <div className="text-xs font-medium text-red-400">
@@ -537,8 +537,8 @@ export const UpgradePathPage = () => {
               </div>
             )}
           </div>
-          <div className="w-full bg-mineshaft-800 p-2">
-            <p className="text-center text-sm text-bunker-400">
+          <div className="bg-mineshaft-800 w-full p-2">
+            <p className="text-bunker-400 text-center text-sm">
               Made with ❤️ by{" "}
               <a className="text-primary hover:text-primary/80" href="https://infisical.com">
                 Infisical
diff --git a/frontend/src/pages/public/ViewSecretRequestByIDPage/ViewSecretRequestByIDPage.tsx b/frontend/src/pages/public/ViewSecretRequestByIDPage/ViewSecretRequestByIDPage.tsx
index 011d6d20d..da388a4c2 100644
--- a/frontend/src/pages/public/ViewSecretRequestByIDPage/ViewSecretRequestByIDPage.tsx
+++ b/frontend/src/pages/public/ViewSecretRequestByIDPage/ViewSecretRequestByIDPage.tsx
@@ -79,7 +79,7 @@ export const ViewSecretRequestByIDPage = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Helmet>
-      <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
+      <div className="bg-linear-to-tr from-mineshaft-700 to-bunker-800 dark:scheme-dark flex h-screen flex-col justify-between overflow-auto text-gray-200">
         <div />
         <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
           <div className="mb-8 text-center">
@@ -94,10 +94,10 @@ export const ViewSecretRequestByIDPage = () => {
                 />
               </a>
             </div>
-            <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
               {step === "set-value" ? "Secret Request" : "Secret request shared"}
             </h1>
-            <p className="text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 text-sm">
               Secret requested by {secretRequest?.requester.username} from the{" "}
               {secretRequest?.requester.organizationName} organization
             </p>
@@ -107,7 +107,7 @@ export const ViewSecretRequestByIDPage = () => {
                 href="https://github.com/infisical/infisical"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
               >
                 Infisical &rarr;
               </a>
@@ -134,12 +134,12 @@ export const ViewSecretRequestByIDPage = () => {
             </>
           )}
           <div className="m-auto my-8 flex w-full">
-            <div className="w-full border-t border-mineshaft-600" />
+            <div className="border-mineshaft-600 w-full border-t" />
           </div>
-          <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-            <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
+          <div className="border-primary-500/30 bg-primary/5 m-auto flex w-full flex-col rounded-md border p-6 pt-5">
+            <p className="text-mineshaft-100 w-full pb-2 text-lg font-medium md:pb-3 md:text-xl">
               Open source{" "}
-              <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
                 secret management
               </span>{" "}
               for developers
@@ -150,7 +150,7 @@ export const ViewSecretRequestByIDPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
                 >
                   Infisical
                 </a>{" "}
@@ -159,7 +159,7 @@ export const ViewSecretRequestByIDPage = () => {
               </p>
               <div className="mt-4 cursor-pointer sm:mt-0">
                 <a target="_blank" rel="noopener noreferrer" href="https://infisical.com">
-                  <div className="flex items-center justify-between rounded-md border border-mineshaft-400/40 bg-mineshaft-600 px-3 py-2 duration-200 hover:border-primary/60 hover:bg-primary/20 hover:text-white">
+                  <div className="border-mineshaft-400/40 bg-mineshaft-600 hover:border-primary/60 hover:bg-primary/20 flex items-center justify-between rounded-md border px-3 py-2 duration-200 hover:text-white">
                     <p className="mr-4 whitespace-nowrap">Try Infisical</p>
                     <FontAwesomeIcon icon={faArrowRight} />
                   </div>
@@ -168,8 +168,8 @@ export const ViewSecretRequestByIDPage = () => {
             </div>
           </div>
         </div>
-        <div className="w-full bg-mineshaft-600 p-2">
-          <p className="text-center text-sm text-mineshaft-300">
+        <div className="bg-mineshaft-600 w-full p-2">
+          <p className="text-mineshaft-300 text-center text-sm">
             Made with ❤️ by{" "}
             <a className="text-primary" href="https://infisical.com">
               Infisical
diff --git a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretErrorContainer.tsx b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretErrorContainer.tsx
index c2e9ce475..fed962d50 100644
--- a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretErrorContainer.tsx
+++ b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretErrorContainer.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const SecretRequestErrorContainer = () => {
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
       <div className="text-center">
         <FontAwesomeIcon icon={faKey} size="2x" />
         <p className="mt-4">The secret request you are looking for is missing or has expired.</p>
diff --git a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestContainer.tsx b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestContainer.tsx
index b4d736aa8..114764b67 100644
--- a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestContainer.tsx
+++ b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestContainer.tsx
@@ -44,7 +44,7 @@ export const SecretRequestContainer = ({ onSuccess, secretRequestId }: Props) =>
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
           <div className="flex items-center justify-between rounded-md bg-white/5 p-2 text-base text-gray-400">
             <div className="w-full">
               <Controller
diff --git a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestSuccessContainer.tsx b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestSuccessContainer.tsx
index 073e81c44..7f35da0a1 100644
--- a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestSuccessContainer.tsx
+++ b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestSuccessContainer.tsx
@@ -7,13 +7,13 @@ type Props = {
 
 export const SecretRequestSuccessContainer = ({ requesterUsername }: Props) => {
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
       <div className="text-center">
-        <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 p-3">
+        <div className="border-mineshaft-800 bg-mineshaft-600 mx-auto w-min rounded-md border p-3">
           <FontAwesomeIcon icon={faCheck} size="2x" className="text-primary-500" />
         </div>
         <p className="text-md mt-2 font-medium">Secret Shared</p>
-        <p className="mt-2 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 mt-2 text-sm">
           <strong>{requesterUsername}</strong> has now been notified of your shared secret, and will
           be able to access it shortly.
         </p>
diff --git a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretValueAlreadySharedContainer.tsx b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretValueAlreadySharedContainer.tsx
index 12e57aebe..98d344c36 100644
--- a/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretValueAlreadySharedContainer.tsx
+++ b/frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretValueAlreadySharedContainer.tsx
@@ -3,13 +3,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const SecretValueAlreadySharedContainer = () => {
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
       <div className="text-center">
-        <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 p-3">
+        <div className="border-mineshaft-800 bg-mineshaft-600 mx-auto w-min rounded-md border p-3">
           <FontAwesomeIcon icon={faKey} size="2x" className="text-primary-500" />
         </div>
         <p className="text-md mt-2 font-medium">Secret Already Shared</p>
-        <p className="mt-2 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 mt-2 text-sm">
           A secret value has already been shared for this secret request.
         </p>
       </div>
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/ViewSharedSecretByIDPage.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/ViewSharedSecretByIDPage.tsx
index 25b28b645..5ab90bcfc 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/ViewSharedSecretByIDPage.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/ViewSharedSecretByIDPage.tsx
@@ -109,7 +109,7 @@ export const ViewSharedSecretByIDPage = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Helmet>
-      <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
+      <div className="bg-linear-to-tr from-mineshaft-700 to-bunker-800 dark:scheme-dark flex h-screen flex-col justify-between overflow-auto text-gray-200">
         <div />
         <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
           <div className="mb-8 text-center">
@@ -124,7 +124,7 @@ export const ViewSharedSecretByIDPage = () => {
                 />
               </a>
             </div>
-            <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
               View shared secret
             </h1>
             <p className="text-md">
@@ -133,7 +133,7 @@ export const ViewSharedSecretByIDPage = () => {
                 href="https://github.com/infisical/infisical"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
               >
                 Infisical &rarr;
               </a>
@@ -157,12 +157,12 @@ export const ViewSharedSecretByIDPage = () => {
             </>
           )}
           <div className="m-auto my-8 flex w-full">
-            <div className="w-full border-t border-mineshaft-600" />
+            <div className="border-mineshaft-600 w-full border-t" />
           </div>
-          <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-            <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
+          <div className="border-primary-500/30 bg-primary/5 m-auto flex w-full flex-col rounded-md border p-6 pt-5">
+            <p className="text-mineshaft-100 w-full pb-2 text-lg font-medium md:pb-3 md:text-xl">
               Open source{" "}
-              <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
                 secret management
               </span>{" "}
               for developers
@@ -173,7 +173,7 @@ export const ViewSharedSecretByIDPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent"
                 >
                   Infisical
                 </a>{" "}
@@ -182,7 +182,7 @@ export const ViewSharedSecretByIDPage = () => {
               </p>
               <div className="mt-4 cursor-pointer sm:mt-0">
                 <a target="_blank" rel="noopener noreferrer" href="https://infisical.com">
-                  <div className="flex items-center justify-between rounded-md border border-mineshaft-400/40 bg-mineshaft-600 px-3 py-2 duration-200 hover:border-primary/60 hover:bg-primary/20 hover:text-white">
+                  <div className="border-mineshaft-400/40 bg-mineshaft-600 hover:border-primary/60 hover:bg-primary/20 flex items-center justify-between rounded-md border px-3 py-2 duration-200 hover:text-white">
                     <p className="mr-4 whitespace-nowrap">Try Infisical</p>
                     <FontAwesomeIcon icon={faArrowRight} />
                   </div>
@@ -191,8 +191,8 @@ export const ViewSharedSecretByIDPage = () => {
             </div>
           </div>
         </div>
-        <div className="w-full bg-mineshaft-600 p-2">
-          <p className="text-center text-sm text-mineshaft-300">
+        <div className="bg-mineshaft-600 w-full p-2">
+          <p className="text-mineshaft-300 text-center text-sm">
             Made with ❤️ by{" "}
             <a className="text-primary" href="https://infisical.com">
               Infisical
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/PasswordContainer.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/PasswordContainer.tsx
index 8beb2e74b..648ff279c 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/PasswordContainer.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/PasswordContainer.tsx
@@ -32,7 +32,7 @@ export const PasswordContainer = ({
   };
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
       <form onSubmit={handleSubmit(onFormSubmit)}>
         <Controller
           control={control}
@@ -66,7 +66,7 @@ export const PasswordContainer = ({
         />
       </form>
       <Button
-        className="w-full bg-mineshaft-700 py-3 text-bunker-200"
+        className="bg-mineshaft-700 text-bunker-200 w-full py-3"
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
index 1b2e785fe..358d97081 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
@@ -44,9 +44,9 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
   const hiddenSecret = decryptedSecret ? "*".repeat(decryptedSecret.length) : "";
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
       <div className="flex items-center justify-between rounded-md bg-white/5 p-2 text-base text-gray-400">
-        <p className="break-all whitespace-pre-wrap">
+        <p className="whitespace-pre-wrap break-all">
           {isVisible ? decryptedSecret : hiddenSecret}
         </p>
         <div className="flex">
@@ -72,7 +72,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
         </div>
       </div>
       <Button
-        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
+        className="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretErrorContainer.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretErrorContainer.tsx
index 173fa1b78..1859bc27f 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretErrorContainer.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretErrorContainer.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const SecretErrorContainer = () => {
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
+    <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
       <div className="text-center">
         <FontAwesomeIcon icon={faKey} size="2x" />
         <p className="mt-4">The secret you are looking is missing or has expired</p>
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx
index 7c8bd2a02..e5d1b792e 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx
@@ -64,7 +64,7 @@ export const CommitDetailsPage = () => {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 text-white">
+    <div className="bg-bunker-800 mx-auto flex w-full max-w-7xl justify-center pb-4 pt-2 text-white">
       <div className="w-full max-w-[75vw]">
         <ProjectPermissionCan
           renderGuardBanner
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
index 714695890..17c6bd939 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
@@ -266,7 +266,7 @@ export const CommitDetailsTab = ({
             Commited by {actorDisplay} on{" "}
             {formatDisplayDate(parsedCommitDetails.changes?.createdAt || new Date().toISOString())}
             {parsedCommitDetails.changes?.isLatest && (
-              <span className="ml-1 text-mineshaft-400">(Latest)</span>
+              <span className="text-mineshaft-400 ml-1">(Latest)</span>
             )}
           </>
         }
@@ -291,10 +291,10 @@ export const CommitDetailsTab = ({
                   Restore Options
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="max-w-sm bg-bunker-500" sideOffset={2}>
+              <DropdownMenuContent align="end" className="bg-bunker-500 max-w-sm" sideOffset={2}>
                 {!parsedCommitDetails.changes.isLatest && (
                   <DropdownMenuItem
-                    className="group cursor-pointer border-b border-mineshaft-600 px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                    className="border-mineshaft-600 hover:bg-mineshaft-700 group cursor-pointer border-b px-3 py-3 transition-colors"
                     onClick={() => goToRollbackPreview()}
                   >
                     <div className="flex items-center space-x-3">
@@ -302,7 +302,7 @@ export const CommitDetailsTab = ({
                         <span className="text-sm font-medium text-white">
                           Roll back to this commit
                         </span>
-                        <span className="text-xs leading-snug break-words whitespace-normal text-gray-400">
+                        <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
                           Return this folder to its exact state at the time of this commit,
                           discarding all other changes made after it
                         </span>
@@ -311,13 +311,13 @@ export const CommitDetailsTab = ({
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem
-                  className="group cursor-pointer px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                  className="hover:bg-mineshaft-700 group cursor-pointer px-3 py-3 transition-colors"
                   onClick={() => handlePopUpOpen("revertChanges")}
                 >
                   <div className="flex items-center space-x-3">
                     <div className="flex flex-col">
                       <span className="text-sm font-medium text-white">Revert changes</span>
-                      <span className="text-xs leading-snug break-words whitespace-normal text-gray-400">
+                      <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
                         Will restore to the previous version of affected resources
                       </span>
                     </div>
@@ -328,9 +328,9 @@ export const CommitDetailsTab = ({
           )}
         </ProjectPermissionCan>
       </PageHeader>
-      <div className="flex w-full flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 pt-4">
-        <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
-          <h3 className="text-lg font-medium text-mineshaft-100">Commit Changes</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col rounded-lg border pt-4">
+        <div className="border-mineshaft-400 mx-4 flex items-center justify-between border-b pb-4">
+          <h3 className="text-mineshaft-100 text-lg font-medium">Commit Changes</h3>
         </div>
         <div className="flex flex-col overflow-hidden px-4">
           <div className="thin-scrollbar overflow-y-auto py-4">
@@ -339,7 +339,7 @@ export const CommitDetailsTab = ({
             ) : (
               <EmptyState
                 title="No changes found."
-                className="h-full pt-28 pb-0"
+                className="h-full pb-0 pt-28"
                 icon={faCodeCommit}
               />
             )}
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
index 89124e3b9..4c64df2b7 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
@@ -196,9 +196,9 @@ export const RollbackPreviewTab = (): JSX.Element => {
 
   const renderSidebar = (): JSX.Element => {
     return (
-      <div className="h-[70vh] w-72 overflow-y-auto bg-mineshaft-900">
+      <div className="bg-mineshaft-900 h-[70vh] w-72 overflow-y-auto">
         <div
-          className={`cursor-pointer border-b border-mineshaft-600 ${
+          className={`border-mineshaft-600 cursor-pointer border-b ${
             selectedFolderId === currentFolderChanges.folderId ? "bg-mineshaft-700" : ""
           }`}
           onClick={() => setSelectedFolderId(currentFolderChanges.folderId)}
@@ -211,7 +211,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
               </span>
             </div>
             {currentFolderChanges.changes.length > 0 && (
-              <span className="ml-2 rounded-full bg-mineshaft-600 px-2 py-0.5 text-xs text-gray-300">
+              <span className="bg-mineshaft-600 ml-2 rounded-full px-2 py-0.5 text-xs text-gray-300">
                 {currentFolderChanges.changes.length}
               </span>
             )}
@@ -220,13 +220,13 @@ export const RollbackPreviewTab = (): JSX.Element => {
 
         {deepRollback && nestedFolderChanges.length > 0 && (
           <>
-            <div className="border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2">
+            <div className="border-mineshaft-600 bg-mineshaft-800 border-b px-4 py-2">
               <span className="text-sm font-medium text-white">Child folders to be restored</span>
             </div>
             {nestedFolderChanges.map((folder) => (
               <div
                 key={folder.folderId}
-                className={`cursor-pointer border-b border-mineshaft-600 ${
+                className={`border-mineshaft-600 cursor-pointer border-b ${
                   selectedFolderId === folder.folderId ? "bg-mineshaft-700" : ""
                 }`}
                 onClick={() => setSelectedFolderId(folder.folderId)}
@@ -239,7 +239,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
                     </span>
                   </div>
                   {folder.changes.length > 0 && (
-                    <span className="rounded-full bg-mineshaft-600 px-2 py-0.5 text-xs text-gray-300">
+                    <span className="bg-mineshaft-600 rounded-full px-2 py-0.5 text-xs text-gray-300">
                       {folder.changes.length}
                     </span>
                   )}
@@ -265,14 +265,14 @@ export const RollbackPreviewTab = (): JSX.Element => {
 
     if (!selectedFolder || selectedFolderChanges.length === 0) {
       return (
-        <div className="flex h-[70vh] w-full items-center justify-center border border-mineshaft-600">
+        <div className="border-mineshaft-600 flex h-[70vh] w-full items-center justify-center border">
           <p className="text-gray-400">No changes in selected folder</p>
         </div>
       );
     }
 
     return (
-      <div className="h-[70vh] w-full overflow-y-auto border-l border-mineshaft-600">
+      <div className="border-mineshaft-600 h-[70vh] w-full overflow-y-auto border-l">
         <div className="space-y-4 p-4">
           {selectedFolderChanges.map((change) => (
             <div key={change.id} className="mb-4">
@@ -297,7 +297,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 text-white">
+    <div className="bg-bunker-800 mx-auto flex w-full max-w-7xl justify-center pb-4 pt-2 text-white">
       <ProjectPermissionCan
         renderGuardBanner
         I={ProjectPermissionCommitsActions.PerformRollback}
@@ -311,19 +311,19 @@ export const RollbackPreviewTab = (): JSX.Element => {
                 description={`Will return all changes in this folder to how they appeared at the point of commit ${selectedCommitId.substring(0, 8)}. Any modifications made after this commit will be undone.`}
               />
 
-              <div className="flex w-full border border-mineshaft-600">
+              <div className="border-mineshaft-600 flex w-full border">
                 {renderSidebar()}
                 {renderMainContent()}
               </div>
 
-              <div className="border-x border-mineshaft-600 bg-mineshaft-800 px-6 py-3">
+              <div className="border-mineshaft-600 bg-mineshaft-800 border-x px-6 py-3">
                 <div className="flex items-center justify-end">
                   <div className="flex items-center">
                     <Tooltip content="Will rollback all nested folders to their state at the time of this commit">
-                      <FontAwesomeIcon icon={faInfoCircle} className="mr-2 text-mineshaft-400" />
+                      <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 mr-2" />
                     </Tooltip>
                     <Switch
-                      className="ml-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
+                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/50 ml-2 shadow-inner"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={deepRollback}
                       onCheckedChange={setDeepRollback}
@@ -335,13 +335,13 @@ export const RollbackPreviewTab = (): JSX.Element => {
                 </div>
               </div>
 
-              <div className="border-t border-mineshaft-600 py-4">
+              <div className="border-mineshaft-600 border-t py-4">
                 <div className="flex w-full items-center justify-between gap-2">
                   <Input
                     placeholder="Restore Message"
                     value={message}
                     onChange={(e) => setMessage(e.target.value)}
-                    className="w-full border-mineshaft-500 bg-mineshaft-700 py-2 text-sm"
+                    className="border-mineshaft-500 bg-mineshaft-700 w-full py-2 text-sm"
                     maxLength={256}
                   />
                   <Button
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
index db9ab5f9b..a28e6e978 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
@@ -578,19 +578,19 @@ export const SecretVersionDiffView = ({
     if (item.isDeleted) {
       textStyle = "line-through text-red-300";
       changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
+        <span className="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
           {isSecret ? "Secret" : "Folder"} Deleted
         </span>
       );
     } else if (item.isAdded) {
       changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
+        <span className="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
           {isSecret ? "Secret" : "Folder"} Added
         </span>
       );
     } else if (item.isUpdated) {
       changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
+        <span className="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
           {isSecret ? "Secret" : "Folder"} Updated
         </span>
       );
@@ -598,7 +598,7 @@ export const SecretVersionDiffView = ({
 
     return (
       <div
-        className="flex cursor-pointer items-center justify-between p-4 hover:bg-mineshaft-700"
+        className="hover:bg-mineshaft-700 flex cursor-pointer items-center justify-between p-4"
         onClick={handleToggle}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -637,21 +637,21 @@ export const SecretVersionDiffView = ({
   };
 
   return (
-    <div className="overflow-hidden border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t last:rounded-b last:border-b">
+    <div className="border-mineshaft-600 bg-mineshaft-800 overflow-hidden border border-b-0 first:rounded-t last:rounded-b last:border-b">
       {showHeader && renderHeader()}
       {!collapsed && (
-        <div className="border-t border-mineshaft-700 bg-mineshaft-900 p-3 text-mineshaft-100">
+        <div className="border-mineshaft-700 bg-mineshaft-900 text-mineshaft-100 border-t p-3">
           <div className="flex gap-3">
             <div
               ref={oldContainerRef}
-              className="max-h-96 thin-scrollbar flex-1 overflow-auto whitespace-pre"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
             >
               {oldVersionContent}
             </div>
-            <div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
+            <div className="bg-mineshaft-600 max-h-96 w-[0.05rem] self-stretch" />
             <div
               ref={newContainerRef}
-              className="max-h-96 thin-scrollbar flex-1 overflow-auto whitespace-pre"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
             >
               {newVersionContent}
             </div>
diff --git a/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx b/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
index 2dba8ad55..d50d30c86 100644
--- a/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
+++ b/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
@@ -46,14 +46,14 @@ export const CommitsPage = () => {
   };
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
+    <div className="bg-bunker-800 mx-auto flex h-full w-full max-w-7xl justify-center py-4 text-white">
       <div className="w-full max-w-[75vw]">
         <PageHeader
           title="Commits"
           description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
         />
         <NoticeBannerV2 title="Secret Snapshots Update" className="mb-2">
-          <p className="my-1 text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 my-1 text-sm">
             Secret Snapshots have been officially renamed to Commits. Going forward, all secret
             changes will be tracked as Commits. If you made changes before this update, you can
             still access your older Secret Snapshots by temporarily re-enabling the legacy feature
diff --git a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx
index 3ca2f05e3..144006d7b 100644
--- a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx
@@ -34,21 +34,21 @@ const CommitItem = ({
         e.stopPropagation();
         onSelectCommit(commit.id, "tab-commit-details");
       }}
-      className="w-full border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b"
+      className="border-mineshaft-600 bg-mineshaft-800 w-full border border-b-0 first:rounded-t-md last:rounded-b-md last:border-b"
     >
       <div className="flex gap-2 px-4 py-3 transition-colors duration-200 hover:bg-zinc-800">
         <div className="flex min-w-0 flex-1 flex-col items-start">
-          <p className="block w-full truncate text-left text-sm text-mineshaft-100">
+          <p className="text-mineshaft-100 block w-full truncate text-left text-sm">
             {commit.message}
           </p>
-          <p className="text-left text-xs text-mineshaft-300">
+          <p className="text-mineshaft-300 text-left text-xs">
             {commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType}{" "}
             committed <time dateTime={commit.createdAt}>{formatTimeAgo(commit.createdAt)}</time>
           </p>
         </div>
 
         <div className="flex items-center space-x-2">
-          <code className="mt-0.5 font-mono text-xs text-mineshaft-400">
+          <code className="text-mineshaft-400 mt-0.5 font-mono text-xs">
             {commit.id?.substring(0, 11)}
           </code>
           <CopyButton
@@ -81,10 +81,10 @@ const DateGroup = ({
     <div className="mt-4 first:mt-0">
       <div className="mb-4 ml-[0.15rem] flex items-center">
         <FontAwesomeIcon icon={faCodeCommit} className="text-mineshaft-400" />
-        <h2 className="ml-4 text-sm text-mineshaft-400">Commits on {date}</h2>
+        <h2 className="text-mineshaft-400 ml-4 text-sm">Commits on {date}</h2>
       </div>
       <div className="relative">
-        <div className="absolute top-0 bottom-0 left-3 w-[0.1rem] bg-mineshaft-500" />
+        <div className="bg-mineshaft-500 absolute bottom-0 left-3 top-0 w-[0.1rem]" />
         <div className="ml-10">
           {commits.map((commit) => (
             <CommitItem key={commit.id} commit={commit} onSelectCommit={onSelectCommit} />
@@ -153,8 +153,8 @@ export const CommitHistoryTab = ({
   }, []);
 
   return (
-    <div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-medium text-mineshaft-100">Commit History</p>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 w-full rounded-lg border p-4">
+      <p className="text-mineshaft-100 mb-4 text-xl font-medium">Commit History</p>
       <div className="mb-4 flex flex-col sm:flex-row sm:justify-end">
         <div className="flex w-full flex-wrap items-center gap-2">
           <div className="relative grow">
@@ -203,7 +203,7 @@ export const CommitHistoryTab = ({
               <Button
                 variant="outline_bg"
                 size="sm"
-                className="mt-4 ml-10 w-full"
+                className="ml-10 mt-4 w-full"
                 onClick={() => fetchNextPage()}
                 disabled={isFetchingNextPage}
                 isLoading={isFetchingNextPage}
diff --git a/frontend/src/pages/secret-manager/IPAllowlistPage/IPAllowlistPage.tsx b/frontend/src/pages/secret-manager/IPAllowlistPage/IPAllowlistPage.tsx
index 6453e3118..d8f2ded84 100644
--- a/frontend/src/pages/secret-manager/IPAllowlistPage/IPAllowlistPage.tsx
+++ b/frontend/src/pages/secret-manager/IPAllowlistPage/IPAllowlistPage.tsx
@@ -14,7 +14,7 @@ export const IPAllowListPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
         <div className="w-full max-w-7xl px-6">
           <div className="my-6">
             <p className="text-3xl font-medium text-gray-200">IP Allowlist</p>
diff --git a/frontend/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistSection.tsx b/frontend/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistSection.tsx
index 470f09aef..a8606508a 100644
--- a/frontend/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistSection.tsx
+++ b/frontend/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistSection.tsx
@@ -53,7 +53,7 @@ export const IPAllowlistSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex items-center">
         <h2 className="flex-1 text-xl font-medium text-white">IP Allowlist</h2>
         <ProjectPermissionCan
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
index 98dc087ea..6a5f803d9 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
@@ -90,7 +90,7 @@ export const IntegrationDetailsByIDPage = () => {
         <meta property="og:title" content="Manage your .env files in seconds" />
         <meta name="og:description" content={t("integrations.description") as string} />
       </Helmet>
-      <div className="mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 mx-auto flex max-w-7xl flex-col justify-between text-white">
         {integration ? (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationAuditLogsSection.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationAuditLogsSection.tsx
index fcd080e65..aa30a695e 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationAuditLogsSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationAuditLogsSection.tsx
@@ -21,8 +21,8 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
 
   // eslint-disable-next-line no-nested-ternary
   return subscription?.auditLogs ? (
-    <div className="h-full w-full min-w-204 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+    <div className="min-w-204 border-mineshaft-600 bg-mineshaft-900 h-full w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
         <p className="text-lg font-medium text-gray-200">Integration Logs</p>
         <p className="text-xs text-gray-400">
           Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
@@ -42,8 +42,8 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
       />
     </div>
   ) : (
-    <div className="h-full w-full min-w-204 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 opacity-60">
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+    <div className="min-w-204 border-mineshaft-600 bg-mineshaft-900 h-full w-full rounded-lg border p-4 opacity-60">
+      <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
         <p className="text-lg font-medium text-gray-200">Integration Logs</p>
       </div>
       <EmptyState
@@ -55,7 +55,7 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
               {subscription && subscription.slug !== null ? (
                 <Link to="/organization/billing" target="_blank" rel="noopener noreferrer">
                   <a
-                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                    className="text-primary-500 hover:text-primary-600 cursor-pointer font-medium transition-all"
                     target="_blank"
                   >
                     upgrade your subscription
@@ -68,7 +68,7 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
                   rel="noopener noreferrer"
                 >
                   <a
-                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                    className="text-primary-500 hover:text-primary-600 cursor-pointer font-medium transition-all"
                     target="_blank"
                   >
                     upgrade your subscription
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationConnectionSection.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationConnectionSection.tsx
index a46e0a3fe..505edc2d1 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationConnectionSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationConnectionSection.tsx
@@ -15,19 +15,19 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     return (
       <div className="flex flex-row">
         <div className="flex flex-col">
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
-          <div className="text-sm text-mineshaft-300">{integration?.owner || "-"}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Organization" />
+          <div className="text-mineshaft-300 text-sm">{integration?.owner || "-"}</div>
         </div>
         <div className="flex flex-col">
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Project" />
-          <div className="text-sm text-mineshaft-300">{integration?.targetService || "-"}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Project" />
+          <div className="text-mineshaft-300 text-sm">{integration?.targetService || "-"}</div>
         </div>
         <div className="flex flex-col">
           <FormLabel
-            className="text-sm font-medium text-mineshaft-300"
+            className="text-mineshaft-300 text-sm font-medium"
             label="Target Environment"
           />
-          <div className="text-sm text-mineshaft-300">{integration?.targetEnvironment || "-"}</div>
+          <div className="text-mineshaft-300 text-sm">{integration?.targetEnvironment || "-"}</div>
         </div>
       </div>
     );
@@ -94,8 +94,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
 
     return (
       <div className="flex flex-col">
-        <FormLabel className="text-sm font-medium text-mineshaft-300" label={formLabel()} />
-        <div className="text-sm text-mineshaft-300">{contents()}</div>
+        <FormLabel className="text-mineshaft-300 text-sm font-medium" label={formLabel()} />
+        <div className="text-mineshaft-300 text-sm">{contents()}</div>
       </div>
     );
   };
@@ -104,8 +104,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "bitbucket") {
       return (
         <div className="flex flex-col">
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Workspace" />
-          <div className="text-sm text-mineshaft-300">
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Workspace" />
+          <div className="text-mineshaft-300 text-sm">
             {integration.targetEnvironment || integration.targetEnvironmentId}
           </div>
         </div>
@@ -115,8 +115,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "octopus-deploy") {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Space" />
-          <div className="text-sm text-mineshaft-300">{integration.targetEnvironment}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Space" />
+          <div className="text-mineshaft-300 text-sm">{integration.targetEnvironment}</div>
         </div>
       );
     }
@@ -128,10 +128,10 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
       return (
         <div className="flex flex-col">
           <FormLabel
-            className="text-sm font-medium text-mineshaft-300"
+            className="text-mineshaft-300 text-sm font-medium"
             label="Target Environment"
           />
-          <div className="text-sm text-mineshaft-300">
+          <div className="text-mineshaft-300 text-sm">
             {integration.targetEnvironment || integration.targetEnvironmentId}
           </div>
         </div>
@@ -145,8 +145,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "checkly" && integration.targetService) {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Group" />
-          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Group" />
+          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
         </div>
       );
     }
@@ -154,8 +154,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "circleci" && integration.owner) {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
-          <div className="text-sm text-mineshaft-300">{integration.owner}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Organization" />
+          <div className="text-mineshaft-300 text-sm">{integration.owner}</div>
         </div>
       );
     }
@@ -163,8 +163,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "terraform-cloud" && integration.targetService) {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Category" />
-          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Category" />
+          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
         </div>
       );
     }
@@ -172,8 +172,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "checkly" || integration.integration === "github") {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Suffix" />
-          <div className="text-sm text-mineshaft-300">
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Secret Suffix" />
+          <div className="text-mineshaft-300 text-sm">
             {integration?.metadata?.secretSuffix || "-"}
           </div>
         </div>
@@ -184,10 +184,10 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
       return (
         <div>
           <FormLabel
-            className="text-sm font-medium text-mineshaft-300"
+            className="text-mineshaft-300 text-sm font-medium"
             label="Deployment Environment"
           />
-          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
         </div>
       );
     }
@@ -195,8 +195,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "windmill" && integration.url) {
       return (
         <div>
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Instance URL" />
-          <div className="text-sm text-mineshaft-300">{integration.url}</div>
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Instance URL" />
+          <div className="text-mineshaft-300 text-sm">{integration.url}</div>
         </div>
       );
     }
@@ -205,29 +205,29 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
   };
 
   return (
-    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Connection</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Connection</h3>
       </div>
 
       <div className="mt-4">
         <FormLabel className="my-2" label="Source" />
 
-        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
+        <div className="border-mineshaft-700 bg-mineshaft-800 space-y-2 rounded-lg border p-2">
           <div className="flex flex-col">
-            <FormLabel className="text-sm font-medium text-mineshaft-300" label="Environment" />
-            <div className="text-sm text-mineshaft-300">{integration.environment.name}</div>
+            <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Environment" />
+            <div className="text-mineshaft-300 text-sm">{integration.environment.name}</div>
           </div>
           <div className="flex flex-col">
-            <FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Path" />
-            <div className="text-sm text-mineshaft-300">{integration.secretPath}</div>
+            <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Secret Path" />
+            <div className="text-mineshaft-300 text-sm">{integration.secretPath}</div>
           </div>
         </div>
 
         <FormLabel className="my-2" label="Destination" />
-        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
-          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Platform" />
-          <div className="text-sm text-mineshaft-300">
+        <div className="border-mineshaft-700 bg-mineshaft-800 space-y-2 rounded-lg border p-2">
+          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Platform" />
+          <div className="text-mineshaft-300 text-sm">
             {integrationSlugNameMapping?.[integration.integration]}
           </div>
 
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationDetailsSection.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationDetailsSection.tsx
index aa841a88d..456fdd0f4 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationDetailsSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationDetailsSection.tsx
@@ -14,20 +14,20 @@ type Props = {
 export const IntegrationDetailsSection = ({ integration }: Props) => {
   return (
     <div>
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-          <h3 className="text-lg font-medium text-mineshaft-100">Integration Details</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+          <h3 className="text-mineshaft-100 text-lg font-medium">Integration Details</h3>
         </div>
         <div className="mt-4">
           <div className="space-y-3">
             <div>
-              <p className="text-sm font-medium text-mineshaft-300">Name</p>
-              <p className="text-sm text-mineshaft-300">
+              <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+              <p className="text-mineshaft-300 text-sm">
                 {integrationSlugNameMapping[integration.integration]}
               </p>
             </div>
             <div>
-              <p className="text-sm font-medium text-mineshaft-300">Sync Status</p>
+              <p className="text-mineshaft-300 text-sm font-medium">Sync Status</p>
               <div className="flex items-center">
                 <p
                   className={twMerge(
@@ -46,10 +46,10 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
             </div>
             {integration.lastUsed && (
               <div>
-                <p className="text-sm font-medium text-mineshaft-300">Latest Successful Sync</p>
-                <div className="flex items-center gap-2 text-sm text-mineshaft-300">
+                <p className="text-mineshaft-300 text-sm font-medium">Latest Successful Sync</p>
+                <div className="text-mineshaft-300 flex items-center gap-2 text-sm">
                   {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
-                  <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
+                  <FontAwesomeIcon icon={faCalendarCheck} className="pr-2 pt-0.5 text-sm" />
                 </div>
               </div>
             )}
@@ -57,8 +57,8 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
             <div>
               {!integration.isSynced && integration.syncMessage && (
                 <>
-                  <p className="text-sm font-medium text-mineshaft-300">Latest Sync Error</p>
-                  <p className="text-sm text-mineshaft-300">{integration.syncMessage}</p>
+                  <p className="text-mineshaft-300 text-sm font-medium">Latest Sync Error</p>
+                  <p className="text-mineshaft-300 text-sm">{integration.syncMessage}</p>
                 </>
               )}
             </div>
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationSettingsSection.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationSettingsSection.tsx
index 8c2983783..228d3b33b 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationSettingsSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/IntegrationSettingsSection.tsx
@@ -80,8 +80,8 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
 
   // eslint-disable-next-line no-nested-ternary
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
         <p className="text-lg font-medium text-gray-200">Integration Settings</p>
       </div>
       <div className="grid grid-cols-2 gap-4">
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/OctopusDeployScopeValues.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/OctopusDeployScopeValues.tsx
index 23b02bded..f404e30a8 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/OctopusDeployScopeValues.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/components/OctopusDeployScopeValues.tsx
@@ -40,9 +40,9 @@ export const OctopusDeployScopeValues = ({ integration }: OctopusDeployScopeValu
   );
 
   if (!integration.metadata?.octopusDeployScopeValues)
-    return <span className="text-sm text-mineshaft-400">Not Configured</span>;
+    return <span className="text-mineshaft-400 text-sm">Not Configured</span>;
 
-  if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
+  if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
 
   const scopeValuesMap = new Map(
     Object.entries(scopeValues).map(([key, values]) => [
@@ -73,9 +73,9 @@ export const OctopusDeployScopeValues = ({ integration }: OctopusDeployScopeValu
 
         return (
           <div className="mt-4" key={key}>
-            <FormLabel className="text-sm font-medium text-mineshaft-200" label={getLabel(key)} />
+            <FormLabel className="text-mineshaft-200 text-sm font-medium" label={getLabel(key)} />
 
-            <div className="text-sm text-mineshaft-300">
+            <div className="text-mineshaft-300 text-sm">
               {values
                 .map((value) => scopeValuesMap.get(key)?.get(value))
                 .map((name) => (
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
index 647af2039..1b89edc6f 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -45,7 +45,7 @@ export const IntegrationsListPage = () => {
         <meta property="og:title" content="Manage your .env files in seconds" />
         <meta name="og:description" content={t("integrations.description") as string} />
       </Helmet>
-      <div className="relative container mx-auto max-w-7xl pb-12 text-white">
+      <div className="container relative mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
             title="Integrations"
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
index 9a6db9def..3b46d4b64 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -130,9 +130,9 @@ export const CloudIntegrationSection = ({
                 tabIndex={0}
                 className={`group relative ${
                   cloudIntegration.isAvailable
-                    ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
+                    ? "hover:bg-mineshaft-700 cursor-pointer duration-200"
                     : "opacity-50"
-                } flex h-36 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3`}
+                } border-mineshaft-600 bg-mineshaft-800 flex h-36 flex-col items-center justify-center rounded-md border p-3`}
                 onClick={() => {
                   if (isSyncAvailable) {
                     navigate({
@@ -180,9 +180,9 @@ export const CloudIntegrationSection = ({
                 </div>
                 {cloudIntegration.isAvailable &&
                   Boolean(integrationAuths?.[cloudIntegration.slug]) && (
-                    <div className="absolute top-0 right-0 z-30 h-full">
+                    <div className="absolute right-0 top-0 z-30 h-full">
                       <div className="relative h-full">
-                        <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden rounded-tr-md rounded-bl-md bg-primary px-2 py-0.5 text-xs whitespace-nowrap text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
+                        <div className="bg-primary absolute right-0 top-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-bl-md rounded-tr-md px-2 py-0.5 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
                           <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
                           Authorized
                         </div>
@@ -197,7 +197,7 @@ export const CloudIntegrationSection = ({
                                 provider: cloudIntegration.slug
                               });
                             }}
-                            className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 group-hover:h-full hover:opacity-100"
+                            className="bg-red absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
                           >
                             <FontAwesomeIcon icon={faXmark} size="xl" />
                           </div>
@@ -208,7 +208,7 @@ export const CloudIntegrationSection = ({
                 {isSyncAvailable && (
                   <div className="absolute bottom-0 left-0 z-30 h-full w-full">
                     <div className="relative h-full">
-                      <div className="absolute bottom-0 left-0 w-full flex-row overflow-hidden rounded-br-md rounded-bl-md bg-yellow/20 px-2 py-0.5 text-center text-xs whitespace-nowrap text-yellow">
+                      <div className="bg-yellow/20 text-yellow absolute bottom-0 left-0 w-full flex-row overflow-hidden whitespace-nowrap rounded-bl-md rounded-br-md px-2 py-0.5 text-center text-xs">
                         Secret Sync Available
                       </div>
                     </div>
@@ -230,7 +230,7 @@ export const CloudIntegrationSection = ({
           {Array.from({ length: 16 }).map((_, index) => (
             <div
               key={`dummy-cloud-integration-${index + 1}`}
-              className="h-32 animate-pulse rounded-md border border-mineshaft-600 bg-mineshaft-800"
+              className="border-mineshaft-600 bg-mineshaft-800 h-32 animate-pulse rounded-md border"
             />
           ))}
         </div>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationTab/FrameworkIntegrationTab.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationTab/FrameworkIntegrationTab.tsx
index 1b8522738..51f9130fc 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationTab/FrameworkIntegrationTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationTab/FrameworkIntegrationTab.tsx
@@ -22,7 +22,7 @@ export const FrameworkIntegrationTab = () => {
             href={framework.docsLink}
             rel="noopener noreferrer"
             target="_blank"
-            className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
+            className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
           >
             {framework?.image && (
               <img
@@ -44,7 +44,7 @@ export const FrameworkIntegrationTab = () => {
           href="https://infisical.com/docs/cli/commands/run"
           rel="noopener noreferrer"
           target="_blank"
-          className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
+          className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
         >
           <FontAwesomeIcon className="mt-auto text-5xl text-white/90" icon={faKeyboard} />
           <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
@@ -55,7 +55,7 @@ export const FrameworkIntegrationTab = () => {
           href="https://infisical.com/docs/sdks/overview"
           rel="noopener noreferrer"
           target="_blank"
-          className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
+          className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
         >
           <FontAwesomeIcon className="mt-auto text-5xl text-white/90" icon={faComputer} />
           <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationTab/InfrastructureIntegrationTab.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationTab/InfrastructureIntegrationTab.tsx
index 8a9e6250c..65b6ab35b 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationTab/InfrastructureIntegrationTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationTab/InfrastructureIntegrationTab.tsx
@@ -23,7 +23,7 @@ export const InfrastructureIntegrationTab = () => {
               onKeyDown={() => null}
               role="button"
               tabIndex={0}
-              className="group relative flex h-32 w-full cursor-pointer flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
+              className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 group relative flex h-32 w-full cursor-pointer flex-row items-center rounded-md border p-4 duration-200"
               key={integration?.name}
             >
               <img
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationDetails.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationDetails.tsx
index 4974ab824..6af2a2106 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationDetails.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationDetails.tsx
@@ -126,7 +126,7 @@ export const IntegrationDetails = ({ integration }: Props) => {
           </div>
         )}
       {integration.integration === "github" && integration.metadata?.githubVisibility ? (
-        <div className="mt-2 text-xs text-mineshaft-200">
+        <div className="text-mineshaft-200 mt-2 text-xs">
           {/* eslint-disable-next-line no-nested-ternary */}
           {integration.metadata?.githubVisibility === "selected"
             ? "* Syncing to selected repositories in the organization. "
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationRow.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationRow.tsx
index 1de01aeab..7314ea949 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationRow.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationRow.tsx
@@ -67,7 +67,7 @@ export const IntegrationRow = ({
         })
       }
       className={twMerge(
-        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
         isSynced === false && "bg-red/5 hover:bg-red/10"
       )}
       key={`integration-${id}`}
@@ -82,18 +82,18 @@ export const IntegrationRow = ({
           <span className="hidden lg:inline">{cloudIntegration?.name}</span>
         </div>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <Tooltip side="top" className="max-w-2xl break-words" content={secretPath}>
           <p className="truncate">{secretPath}</p>
         </Tooltip>{" "}
       </Td>
       <Td>{environment?.name ?? "-"}</Td>
-      <Td className="max-w-0 min-w-20!">
+      <Td className="min-w-20! max-w-0">
         <div className="flex items-center gap-2">
           <p className="truncate">{getIntegrationDestination(integration)}</p>
           <Tooltip
             position="left"
-            className="max-w-lg min-w-[20rem]"
+            className="min-w-[20rem] max-w-lg"
             content={<IntegrationDetails integration={integration} />}
           >
             <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
@@ -119,22 +119,22 @@ export const IntegrationRow = ({
                     >
                       <FontAwesomeIcon
                         icon={faCalendarCheck}
-                        className="ml-1 pt-0.5 pr-1.5 text-sm"
+                        className="ml-1 pr-1.5 pt-0.5 text-sm"
                       />
                       <div className="text-xs">Last Synced</div>
                     </div>
-                    <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
+                    <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
                       {format(new Date(integration.lastUsed!), "yyyy-MM-dd, hh:mm aaa")}
                     </div>
                   </div>
                 )}
                 {failureMessage && (
                   <div>
-                    <div className="mb-2 flex self-start text-red">
-                      <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+                    <div className="text-red mb-2 flex self-start">
+                      <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                       <div className="text-xs">Failure Reason</div>
                     </div>
-                    <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+                    <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
                   </div>
                 )}
               </div>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx
index 810edd110..be5fc7294 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx
@@ -257,7 +257,7 @@ export const IntegrationsTable = ({
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -266,7 +266,7 @@ export const IntegrationsTable = ({
               </Tooltip>
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
             {Object.values(IntegrationStatus).map((status) => (
               <DropdownMenuItem
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/NativeIntegrationsTab.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/NativeIntegrationsTab.tsx
index 97ebfbee5..40f97281c 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/NativeIntegrationsTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/NativeIntegrationsTab.tsx
@@ -166,9 +166,9 @@ export const NativeIntegrationsTab = () => {
   return (
     <>
       {view === IntegrationView.List ? (
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
-            <p className="text-xl font-medium text-mineshaft-100">Native Integrations</p>
+            <p className="text-mineshaft-100 text-xl font-medium">Native Integrations</p>
             <Button
               colorSchema="secondary"
               type="submit"
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/AwsSecretsManagerSyncDestinationCol.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/AwsSecretsManagerSyncDestinationCol.tsx
index 9cfe9af2b..71e50b690 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/AwsSecretsManagerSyncDestinationCol.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/AwsSecretsManagerSyncDestinationCol.tsx
@@ -25,7 +25,7 @@ export const AwsSecretsManagerSyncDestinationCol = ({ secretSync }: Props) => {
       infoBadge: "secondary",
       additionalTooltipContent: (
         <div className="mt-4">
-          <span className="text-xs text-bunker-300">Secret Name:</span>
+          <span className="text-bunker-300 text-xs">Secret Name:</span>
           <p className="text-sm">{destinationConfig.secretName}</p>
         </div>
       )
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx
index 60fb8b7aa..f709a1420 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx
@@ -139,7 +139,7 @@ export const SecretSyncRow = ({
         })
       }
       className={twMerge(
-        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
         syncStatus === SecretSyncStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`sync-${id}`}
@@ -151,7 +151,7 @@ export const SecretSyncRow = ({
           className="min-w-7"
         />
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div>
           <div className="flex w-full items-center">
             <p className="truncate">{name}</p>
@@ -160,12 +160,12 @@ export const SecretSyncRow = ({
                 <FontAwesomeIcon
                   icon={faInfoCircle}
                   size="xs"
-                  className="ml-1 text-mineshaft-400"
+                  className="text-mineshaft-400 ml-1"
                 />
               </Tooltip>
             )}
           </div>
-          <p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
+          <p className="text-bunker-300 truncate text-xs leading-4">{destinationDetails.name}</p>
         </div>
       </Td>
       {folder && environment ? (
@@ -194,7 +194,7 @@ export const SecretSyncRow = ({
               className="max-w-sm"
               content={
                 [SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].includes(syncStatus) ? (
-                  <div className="flex flex-col gap-2 py-1 whitespace-normal">
+                  <div className="flex flex-col gap-2 whitespace-normal py-1">
                     {lastSyncedAt && (
                       <div>
                         <div
@@ -202,22 +202,22 @@ export const SecretSyncRow = ({
                         >
                           <FontAwesomeIcon
                             icon={faCalendarCheck}
-                            className="ml-1 pt-0.5 pr-1.5 text-sm"
+                            className="ml-1 pr-1.5 pt-0.5 text-sm"
                           />
                           <div className="text-xs">Last Synced</div>
                         </div>
-                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
+                        <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
                           {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
                         </div>
                       </div>
                     )}
                     {failureMessage && (
                       <div>
-                        <div className="mb-2 flex self-start text-red">
-                          <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+                        <div className="text-red mb-2 flex self-start">
+                          <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                           <div className="text-xs">Failure Reason</div>
                         </div>
-                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+                        <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                           {failureMessage}
                         </div>
                       </div>
@@ -237,7 +237,7 @@ export const SecretSyncRow = ({
               content="Auto-Sync is disabled. Changes to the source location will not be automatically synced to the destination."
             >
               <div>
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                   <FontAwesomeIcon icon={faBan} />
                   {!syncStatus && "Auto-Sync Disabled"}
                 </Badge>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncTableCell.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncTableCell.tsx
index ee9cd8a5d..4c4bdacd0 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncTableCell.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncTableCell.tsx
@@ -23,7 +23,7 @@ export const SecretSyncTableCell = ({
   secondaryClassName
 }: SecretSyncTableCellProps) => {
   return (
-    <Td className="max-w-0 min-w-32!">
+    <Td className="min-w-32! max-w-0">
       <Tooltip
         side="left"
         className="max-w-2xl break-words"
@@ -31,7 +31,7 @@ export const SecretSyncTableCell = ({
           <>
             <p className="text-sm">{primaryText}</p>
             {secondaryText && (
-              <p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
+              <p className={twMerge("text-bunker-300 text-xs leading-3", secondaryClassName)}>
                 {secondaryText}
               </p>
             )}
@@ -46,20 +46,20 @@ export const SecretSyncTableCell = ({
               <FontAwesomeIcon
                 size="xs"
                 icon={faInfoCircle}
-                className="ml-1 inline-block text-bunker-300"
+                className="text-bunker-300 ml-1 inline-block"
               />
             )}
           </p>
           {secondaryText && (
             <p
-              className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
+              className={twMerge("text-bunker-300 truncate text-xs leading-4", secondaryClassName)}
             >
               {secondaryText}
               {infoBadge === "secondary" && (
                 <FontAwesomeIcon
                   size="xs"
                   icon={faInfoCircle}
-                  className="ml-1 inline-block text-bunker-300"
+                  className="text-bunker-300 ml-1 inline-block"
                 />
               )}
             </p>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx
index bdf92ef7f..47343aa4e 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx
@@ -294,14 +294,14 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
             {[SecretSyncStatus.Running, SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].map(
               (status) => (
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
index 8f4807c74..12f29a18a 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
@@ -88,17 +88,17 @@ export const SecretSyncsTab = () => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-start gap-1">
-              <p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
+              <p className="text-mineshaft-100 text-lg font-medium">Secret Syncs</p>
               <a
                 href="https://infisical.com/docs/integrations/secret-syncs/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -108,7 +108,7 @@ export const SecretSyncsTab = () => {
                 </div>
               </a>
             </div>
-            <p className="text-sm text-bunker-300">
+            <p className="text-bunker-300 text-sm">
               Use App Connections to sync secrets to third-party services.
             </p>
           </div>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
index 860f161e9..30363886b 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -884,7 +884,7 @@ export const OverviewPage = () => {
 
   if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
     return (
-      <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:scheme-dark">
+      <div className="text-mineshaft-50 dark:scheme-dark container mx-auto flex h-screen w-full items-center justify-center px-8">
         <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
       </div>
     );
@@ -900,7 +900,7 @@ export const OverviewPage = () => {
 
   if (!isProjectV3)
     return (
-      <div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
+      <div className="text-mineshaft-50 dark:scheme-dark flex h-full w-full flex-col items-center justify-center px-6">
         <SecretV2MigrationSection />
       </div>
     );
@@ -911,7 +911,7 @@ export const OverviewPage = () => {
         <meta property="og:title" content={String(t("dashboard.og-title"))} />
         <meta name="og:description" content={String(t("dashboard.og-description"))} />
       </Helmet>
-      <div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
+      <div className="text-mineshaft-50 dark:scheme-dark relative mx-auto max-w-7xl">
         <div className="flex w-full items-baseline justify-between">
           <PageHeader
             title="Secrets Overview"
@@ -919,7 +919,7 @@ export const OverviewPage = () => {
               <p className="text-md text-bunker-300">
                 Inject your secrets using
                 <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
                   href="https://infisical.com/docs/cli/overview"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -928,7 +928,7 @@ export const OverviewPage = () => {
                 </a>
                 ,
                 <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
                   href="https://infisical.com/docs/documentation/getting-started/api"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -937,7 +937,7 @@ export const OverviewPage = () => {
                 </a>
                 ,
                 <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
                   href="https://infisical.com/docs/sdks/overview"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -946,7 +946,7 @@ export const OverviewPage = () => {
                 </a>
                 , and
                 <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
                   href="https://infisical.com/docs/documentation/getting-started/introduction"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -994,7 +994,7 @@ export const OverviewPage = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
-                  className="max-h-[70vh] thin-scrollbar overflow-y-auto"
+                  className="thin-scrollbar max-h-[70vh] overflow-y-auto"
                   align="end"
                   sideOffset={2}
                 >
@@ -1113,7 +1113,7 @@ export const OverviewPage = () => {
                     <IconButton
                       ariaLabel="add-folder-or-import"
                       variant="outline_bg"
-                      className="rounded-l-none bg-mineshaft-600 p-3"
+                      className="bg-mineshaft-600 rounded-l-none p-3"
                     >
                       <FontAwesomeIcon icon={faAngleDown} />
                     </IconButton>
@@ -1204,7 +1204,7 @@ export const OverviewPage = () => {
         <div ref={tableRef} className="mt-4">
           <TableContainer
             onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
-            className="max-h-[66vh] thin-scrollbar overflow-y-auto rounded-b-none"
+            className="thin-scrollbar max-h-[66vh] overflow-y-auto rounded-b-none"
           >
             <Table>
               <THead
@@ -1221,7 +1221,7 @@ export const OverviewPage = () => {
                   >
                     <div
                       className={twMerge(
-                        "flex h-full border-b border-mineshaft-600 pr-5 pb-3 pl-3",
+                        "border-mineshaft-600 flex h-full border-b pb-3 pl-3 pr-5",
                         !collapseEnvironments && "border-r pt-3.5"
                       )}
                     >
@@ -1238,7 +1238,7 @@ export const OverviewPage = () => {
                               : ""
                           }
                         >
-                          <div className="mr-4 ml-2">
+                          <div className="ml-2 mr-4">
                             <Checkbox
                               isDisabled={totalCount === 0}
                               id="checkbox-select-all-rows"
@@ -1276,7 +1276,7 @@ export const OverviewPage = () => {
                           ariaLabel="Toggle Environment View"
                           variant="plain"
                           colorSchema="secondary"
-                          className="mt-auto ml-auto h-min p-1"
+                          className="ml-auto mt-auto h-min p-1"
                           onClick={handleToggleNarrowHeader}
                         >
                           <FontAwesomeIcon
@@ -1328,10 +1328,10 @@ export const OverviewPage = () => {
                         >
                           <div
                             className={twMerge(
-                              "border-b border-mineshaft-600",
+                              "border-mineshaft-600 border-b",
                               collapseEnvironments
                                 ? "relative"
-                                : "flex items-center justify-center px-5 pt-3.5 pb-[0.82rem]",
+                                : "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
                               collapseEnvironments && isLast && "overflow-clip"
                             )}
                             style={{
@@ -1355,7 +1355,7 @@ export const OverviewPage = () => {
                             <button
                               type="button"
                               className={twMerge(
-                                "duration-100 hover:text-mineshaft-100",
+                                "hover:text-mineshaft-100 duration-100",
                                 collapseEnvironments
                                   ? "absolute -rotate-[72.75deg] text-left text-sm font-normal"
                                   : "flex items-center text-center text-sm font-medium"
@@ -1374,7 +1374,7 @@ export const OverviewPage = () => {
                                 className="max-w-none lowercase"
                                 content={`${missingKeyCount} secrets missing\n compared to other environments`}
                               >
-                                <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-xs border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
+                                <div className="rounded-xs text-bunker-100 ml-2 flex h-[1.1rem] cursor-default items-center justify-center border border-red-400 bg-red-600 p-1 text-xs font-medium">
                                   <span className="text-bunker-100">{missingKeyCount}</span>
                                 </div>
                               </Tooltip>
@@ -1538,21 +1538,21 @@ export const OverviewPage = () => {
                 )}
               </TBody>
               <TFoot>
-                <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
-                  <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
+                <Tr className="bg-mineshaft-800 sticky bottom-0 z-10 border-0">
+                  <Td className="bg-mineshaft-800 sticky left-0 z-10 border-0 p-0">
                     <div
-                      className="w-full border-t border-r border-mineshaft-600"
+                      className="border-mineshaft-600 w-full border-r border-t"
                       style={{ height: "45px" }}
                     />
                   </Td>
                   {visibleEnvs?.map(({ name, slug }, i) => (
                     <Td
                       key={`explore-${name}-btn-${i + 1}`}
-                      className="border-0 border-r border-mineshaft-600 p-0"
+                      className="border-mineshaft-600 border-0 border-r p-0"
                     >
                       <div
                         className={twMerge(
-                          "flex w-full items-center justify-center border-t border-mineshaft-600 py-2"
+                          "border-mineshaft-600 flex w-full items-center justify-center border-t py-2"
                         )}
                       >
                         {collapseEnvironments ? (
@@ -1598,7 +1598,7 @@ export const OverviewPage = () => {
                   secretRotationCount={totalSecretRotationCount}
                 />
               }
-              className="rounded-b-md border-t border-solid border-t-mineshaft-600"
+              className="border-t-mineshaft-600 rounded-b-md border-t border-solid"
               count={totalCount}
               page={page}
               perPage={perPage}
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index 8eb6c5035..71b0f4fc0 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -227,7 +227,7 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
                     Secret key contains whitespaces.
                     <br />
                     <br /> If this is the desired format, you need to provide it as{" "}
-                    <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                    <code className="bg-mineshaft-500 rounded-md px-1 py-0.5">
                       {encodeURIComponent(secretKey.trim())}
                     </code>{" "}
                     when making API requests.
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
index 5648be172..ed1d8ec8c 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
@@ -23,7 +23,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) =>
   return (
     <div className="flex items-center space-x-2">
       <div
-        className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
+        className="breadcrumb border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 relative z-20 border-solid py-1 pl-5 pr-2 text-sm"
         onClick={() => onFolderCrumbClick(0)}
         onKeyDown={() => null}
         role="button"
@@ -39,7 +39,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) =>
             key={`secret-path-${index + 1}`}
             className={`breadcrumb relative z-20 ${
               index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
-            } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
+            } border-mineshaft-600 text-mineshaft-200 border-solid py-1 pl-5 pr-2 text-sm`}
             onClick={() => onFolderCrumbClick(index + 1)}
             onKeyDown={() => null}
             role="button"
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx
index d5d4ace3e..91c66980d 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx
@@ -17,8 +17,8 @@ export const SecretOverviewDynamicSecretRow = ({
 }: Props) => {
   return (
     <Tr isHoverable isSelectable className="group">
-      <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
-        <div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
+      <Td className="bg-mineshaft-800 group-hover:bg-mineshaft-700 sticky left-0 z-10 border-0 bg-clip-padding p-0">
+        <div className="border-mineshaft-600 flex items-center space-x-5 border-r px-5 py-2.5">
           <div className="text-yellow-700">
             <FontAwesomeIcon icon={faFingerprint} />
           </div>
@@ -32,7 +32,7 @@ export const SecretOverviewDynamicSecretRow = ({
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
-              "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+              "border-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
index a969edea8..ea6ccb673 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
@@ -34,8 +34,8 @@ export const SecretOverviewFolderRow = ({
   };
   return (
     <Tr isHoverable isSelectable className="group" onClick={handleClick}>
-      <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
-        <div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
+      <Td className="bg-mineshaft-800 group-hover:bg-mineshaft-700 sticky left-0 z-10 border-0 bg-clip-padding p-0">
+        <div className="border-mineshaft-600 flex items-center space-x-5 border-r px-5 py-2.5">
           <div className="text-yellow-700">
             <Checkbox
               id={`checkbox-${folderName}`}
@@ -75,7 +75,7 @@ export const SecretOverviewFolderRow = ({
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
-              "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+              "border-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewRotationSecretRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewRotationSecretRow.tsx
index c7fcae6b5..0d1f2a2b1 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewRotationSecretRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewRotationSecretRow.tsx
@@ -48,7 +48,7 @@ export const SecretOverviewRotationSecretRow = ({
       className="max-w-sm"
       content={secret ? undefined : "You do not have permission to view this secret."}
     >
-      <tr className="!last:border-b-0 h-full hover:bg-mineshaft-700">
+      <tr className="!last:border-b-0 hover:bg-mineshaft-700 h-full">
         <td className="flex h-full items-center" style={{ padding: "0.5rem 1rem" }}>
           <span className={twMerge(!secret && "blur-sm")}>{secret?.key ?? "********"}</span>
         </td>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx
index 7f7f2d633..8b4a171de 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx
@@ -62,8 +62,8 @@ export const SecretOverviewSecretRotationRow = ({
   return (
     <>
       <Tr isHoverable isSelectable onClick={setIsExpanded.toggle} className="group">
-        <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
-          <div className="flex w-full items-center space-x-5 border-r border-mineshaft-600 py-2.5 pr-2 pl-5">
+        <Td className="bg-mineshaft-800 group-hover:bg-mineshaft-700 sticky left-0 z-10 border-0 bg-clip-padding p-0">
+          <div className="border-mineshaft-600 flex w-full items-center space-x-5 border-r py-2.5 pl-5 pr-2">
             <div className="text-mineshaft-400">
               <FontAwesomeIcon icon={faRotate} />
             </div>
@@ -90,7 +90,7 @@ export const SecretOverviewSecretRotationRow = ({
             <Td
               key={`sec-overview-${slug}-${i + 1}-folder`}
               className={twMerge(
-                "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+                "border-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
                 isPresent ? "text-green-600" : "text-red-600"
               )}
             >
@@ -118,7 +118,7 @@ export const SecretOverviewSecretRotationRow = ({
             <Tr key={`secret-rotation-${slug}-${secretRotationName}`}>
               <Td
                 colSpan={totalCols}
-                className={`bg-bunker-600 px-0 py-0 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
+                className={`bg-bunker-600 px-0 py-0 ${isExpanded && "border-mineshaft-500 border-b-2"}`}
               >
                 <div style={getExpandedRowStyle(scrollOffset)} className="ml-2 p-2">
                   <TableContainer>
@@ -127,7 +127,7 @@ export const SecretOverviewSecretRotationRow = ({
                         <tr className="h-10">
                           <th
                             style={{ padding: "0.5rem 1rem" }}
-                            className="min-table-row min-w-[30vw] border-r-0!"
+                            className="min-table-row border-r-0! min-w-[30vw]"
                           >
                             <div className="flex w-full flex-wrap items-center">
                               <span>{envName}</span>
@@ -151,7 +151,7 @@ export const SecretOverviewSecretRotationRow = ({
                               )}
                             </div>
                           </th>
-                          <div className="absolute top-0.5 right-1 mt-1 mr-1 ml-auto w-min">
+                          <div className="absolute right-1 top-0.5 ml-auto mr-1 mt-1 w-min">
                             <div className="flex items-center gap-2">
                               <SecretRotationV2StatusBadge secretRotation={secretRotation} />
                               <Tooltip content={isSecretVisible ? "Hide Values" : "Reveal Values"}>
@@ -253,7 +253,7 @@ export const SecretOverviewSecretRotationRow = ({
                           </div>
                         </tr>
                       </thead>
-                      <tbody className="border-t-2 border-mineshaft-600">
+                      <tbody className="border-mineshaft-600 border-t-2">
                         {secrets.map((secret, index) => {
                           return (
                             <SecretOverviewRotationSecretRow
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index b0f9f7666..b6bcb14d1 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -300,7 +300,7 @@ export const SecretEditRow = ({
           <FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
         </Tooltip>
       )}
-      <div className="grow border-r border-r-mineshaft-600 pr-2 pl-1">
+      <div className="border-r-mineshaft-600 grow border-r pl-1 pr-2">
         <Controller
           control={control}
           name="value"
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx
index 2bc2bc29e..4342b8c28 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx
@@ -15,8 +15,8 @@ export const SecretNoAccessOverviewTableRow = ({ environments = [], count }: Pro
     <>
       {Array.from(Array(count)).map((_, j) => (
         <Tr key={`no-access-secret-overview-${j + 1}`} isHoverable isSelectable className="group">
-          <Td className="sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding px-0 py-0 group-hover:bg-mineshaft-700">
-            <div className="h-full w-full border-r border-mineshaft-600 px-5 py-2.5">
+          <Td className="bg-mineshaft-800 group-hover:bg-mineshaft-700 sticky left-0 z-10 bg-clip-padding px-0 py-0">
+            <div className="border-mineshaft-600 h-full w-full border-r px-5 py-2.5">
               <Tooltip
                 asChild
                 content="You do not have permission to view this secret"
@@ -35,9 +35,9 @@ export const SecretNoAccessOverviewTableRow = ({ environments = [], count }: Pro
             return (
               <Td
                 key={`sec-overview-${slug}-${i + 1}-value`}
-                className="px-0 py-0 group-hover:bg-mineshaft-700"
+                className="group-hover:bg-mineshaft-700 px-0 py-0"
               >
-                <div className="h-full w-full border-r border-mineshaft-600 px-5 py-[0.85rem]">
+                <div className="border-mineshaft-600 h-full w-full border-r px-5 py-[0.85rem]">
                   <div className="flex justify-center">
                     <FontAwesomeIcon icon={faCircle} />
                   </div>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index d134daf3f..495ec2e89 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -114,11 +114,11 @@ export const SecretOverviewTableRow = ({
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
         <Td
-          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding px-0 py-0 group-hover:bg-mineshaft-700 ${
-            isFormExpanded && "border-t-2 border-mineshaft-500"
+          className={`bg-mineshaft-800 group-hover:bg-mineshaft-700 sticky left-0 z-10 bg-clip-padding px-0 py-0 ${
+            isFormExpanded && "border-mineshaft-500 border-t-2"
           }`}
         >
-          <div className="h-full w-full border-r border-mineshaft-600 px-5 py-2.5">
+          <div className="border-mineshaft-600 h-full w-full border-r px-5 py-2.5">
             <div className="flex items-center space-x-5">
               <div className="text-bunker-300">
                 <Checkbox
@@ -152,8 +152,8 @@ export const SecretOverviewTableRow = ({
             <Td
               key={`sec-overview-${slug}-${i + 1}-value`}
               className={twMerge(
-                "border-r border-mineshaft-600 px-0 py-3 group-hover:bg-mineshaft-700",
-                isFormExpanded && "border-t-2 border-mineshaft-500",
+                "border-mineshaft-600 group-hover:bg-mineshaft-700 border-r px-0 py-3",
+                isFormExpanded && "border-mineshaft-500 border-t-2",
                 (isSecretPresent && !isSecretEmpty) || isSecretImported ? "text-green-600" : "",
                 isSecretPresent && isSecretEmpty && !isSecretImported ? "text-mineshaft-400" : "",
                 !isSecretPresent && !isSecretEmpty && !isSecretImported ? "text-red-600" : ""
@@ -195,7 +195,7 @@ export const SecretOverviewTableRow = ({
           <Td
             colSpan={totalCols}
             className={`bg-bunker-600 px-0 py-0 ${
-              isFormExpanded && "border-b-2 border-mineshaft-500"
+              isFormExpanded && "border-mineshaft-500 border-b-2"
             }`}
           >
             <div className="ml-2 p-2" style={getExpandedRowStyle(scrollOffset)}>
@@ -208,14 +208,14 @@ export const SecretOverviewTableRow = ({
               <TableContainer>
                 <table className="secret-table">
                   <thead>
-                    <tr className="h-10 border-b-2 border-mineshaft-600">
+                    <tr className="border-mineshaft-600 h-10 border-b-2">
                       <th style={{ padding: "0.5rem 1rem" }} className="min-table-row min-w-44">
                         Environment
                       </th>
                       <th style={{ padding: "0.5rem 1rem" }} className="border-none">
                         Value
                       </th>
-                      <div className="absolute top-0 right-0 mt-1 mr-1 ml-auto w-min">
+                      <div className="absolute right-0 top-0 ml-auto mr-1 mt-1 w-min">
                         <Button
                           variant="outline_bg"
                           className="p-1"
@@ -227,7 +227,7 @@ export const SecretOverviewTableRow = ({
                       </div>
                     </tr>
                   </thead>
-                  <tbody className="border-t-2 border-mineshaft-600">
+                  <tbody className="border-mineshaft-600 border-t-2">
                     {environments.map(({ name, slug }) => {
                       const secret = getSecretByKey(slug, secretKey);
                       const isCreatable = !secret;
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 5bb2d7e80..d10f354c5 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -150,10 +150,10 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
   return (
     <form
       onSubmit={handleSubmit(handleFormSubmit)}
-      className="relative mb-2 flex secret-table w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
+      className="secret-table border-mineshaft-700 bg-mineshaft-800 font-inter relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid"
     >
       <div className="flex h-11 flex-1 shrink-0 items-center">
-        <span className="flex h-full min-w-44 items-center justify-between gap-2 border-r-2 border-mineshaft-600 px-4">
+        <span className="border-mineshaft-600 flex h-full min-w-44 items-center justify-between gap-2 border-r-2 px-4">
           Key
           {currentSecretValue?.trim()?.includes(" ") &&
             currentSecretValue?.trim() !== secretKey && (
@@ -164,7 +164,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                     Secret key contains whitespaces.
                     <br />
                     <br /> If this is the desired format, you need to provide it as{" "}
-                    <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                    <code className="bg-mineshaft-500 rounded-md px-1 py-0.5">
                       {encodeURIComponent(secretKey.trim())}
                     </code>{" "}
                     when making API requests.
@@ -190,16 +190,16 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
               onKeyUp={() => trigger("key")}
               isError={Boolean(error)}
               {...field}
-              className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+              className="focus:text-bunker-100 w-full px-2 placeholder:text-red-500 focus:ring-transparent"
             />
           )}
         />
       </div>
 
       {isReadOnly || isOverriden ? (
-        <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
+        <span className="bg-mineshaft-500 mr-5 rounded-md px-2">Read Only</span>
       ) : (
-        <div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
+        <div className="border-mineshaft-500 group flex w-20 items-center justify-center border-l py-1">
           <AnimatePresence mode="wait">
             {!isDirty ? (
               <motion.div
@@ -239,7 +239,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                       type="submit"
                       size="md"
                       className={twMerge(
-                        "p-0 text-primary opacity-0 group-hover:opacity-100",
+                        "text-primary p-0 opacity-0 group-hover:opacity-100",
                         isDirty && "opacity-100"
                       )}
                       isDisabled={isSubmitting || Boolean(errors.key)}
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/SecretSearchInput.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/SecretSearchInput.tsx
index cf665ac0c..2465468b6 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/SecretSearchInput.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/SecretSearchInput.tsx
@@ -37,7 +37,7 @@ export const SecretSearchInput = ({
           <>
             <div className="flex w-full items-center whitespace-nowrap">
               <Tooltip content="Search Options">
-                <Combobox.Button className="button user-select-none relative inline-flex h-[2.42rem] cursor-pointer items-center justify-center rounded-md rounded-r-none border border-mineshaft-600 bg-mineshaft-600 p-3 font-inter text-sm font-medium text-bunker-200 transition-all duration-100 hover:border-primary-400/50 hover:bg-primary/10 hover:text-bunker-100">
+                <Combobox.Button className="button user-select-none border-mineshaft-600 bg-mineshaft-600 font-inter text-bunker-200 hover:border-primary-400/50 hover:bg-primary/10 hover:text-bunker-100 relative inline-flex h-[2.42rem] cursor-pointer items-center justify-center rounded-md rounded-r-none border p-3 text-sm font-medium transition-all duration-100">
                   <FontAwesomeIcon
                     icon={faSearch}
                     size="sm"
@@ -46,14 +46,14 @@ export const SecretSearchInput = ({
                   />
                 </Combobox.Button>
               </Tooltip>
-              <div className="relative inline-flex w-full items-center rounded-md rounded-l-none border border-mineshaft-500 bg-bunker-800 font-inter text-gray-400">
+              <div className="border-mineshaft-500 bg-bunker-800 font-inter relative inline-flex w-full items-center rounded-md rounded-l-none border text-gray-400">
                 <Combobox.Input
                   onKeyDown={(e) => {
                     if (activeIndex === 0 && e.key === "Enter") setIsOpen(true);
                   }}
                   autoComplete="off"
                   className={twMerge(
-                    "input text-md h-[2.3rem] w-full rounded-md rounded-l-none bg-mineshaft-800 py-1.5 pl-2.5 text-gray-400 placeholder-mineshaft-50/50 outline-hidden duration-200 placeholder:text-sm hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-1 focus:ring-primary-400/50",
+                    "input text-md bg-mineshaft-800 placeholder-mineshaft-50/50 outline-hidden hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-primary-400/50 h-[2.3rem] w-full rounded-md rounded-l-none py-1.5 pl-2.5 text-gray-400 duration-200 placeholder:text-sm focus:ring-1",
                     hasSearch ? "pr-8" : "pr-2.5"
                   )}
                   placeholder={
@@ -69,7 +69,7 @@ export const SecretSearchInput = ({
                     isRounded
                     variant="plain"
                     onClick={() => onChange("")}
-                    className="absolute right-2 text-primary"
+                    className="text-primary absolute right-2"
                     ariaLabel="Clear search"
                   >
                     <FontAwesomeIcon icon={faCircleXmark} />
@@ -82,17 +82,17 @@ export const SecretSearchInput = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Combobox.Options className="absolute z-30 mt-2 w-full min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm focus:outline-hidden">
+              <Combobox.Options className="border-mineshaft-600 bg-mineshaft-900 text-bunker-300 focus:outline-hidden absolute z-30 mt-2 w-full min-w-[220px] overflow-y-auto rounded-md border shadow-sm">
                 <Combobox.Option
                   onClick={() => setIsOpen(true)}
                   value={value}
                   className={({ active }) =>
-                    `flex w-full cursor-pointer items-start rounded-xs px-4 py-2 font-inter text-sm text-mineshaft-200 outline-hidden hover:bg-mineshaft-400 ${
+                    `rounded-xs font-inter text-mineshaft-200 outline-hidden hover:bg-mineshaft-400 flex w-full cursor-pointer items-start px-4 py-2 text-sm ${
                       active ? "bg-mineshaft-500" : ""
                     }`
                   }
                 >
-                  <FontAwesomeIcon icon={faFolderTree} className="mt-1 mr-2 text-yellow-700" />
+                  <FontAwesomeIcon icon={faFolderTree} className="mr-2 mt-1 text-yellow-700" />
                   {value.trim()
                     ? `Search for "${
                         value.length > 10 ? `${value.substring(0, 10)}...` : value
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx
index 79911b6ee..db67c045d 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx
@@ -35,7 +35,7 @@ export const QuickSearchDynamicSecretItem = ({
 
   return (
     <Tr
-      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
+      className="hover bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
       onClick={handleNavigate}
     >
       <Td className="w-full">
@@ -44,7 +44,7 @@ export const QuickSearchDynamicSecretItem = ({
             <FontAwesomeIcon className="mr-2 self-center text-yellow-700" icon={faFingerprint} />
             {groupDynamicSecret.name}
           </span>
-          <span className="text-xs text-mineshaft-400">
+          <span className="text-mineshaft-400 text-xs">
             <FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
             <Tooltip className="max-w-7xl" content={groupDynamicSecret.path}>
               <span>{reverseTruncate(groupDynamicSecret.path)}</span>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchFolderItem.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchFolderItem.tsx
index 92d2fac3e..8f4a852cc 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchFolderItem.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchFolderItem.tsx
@@ -27,7 +27,7 @@ export const QuickSearchFolderItem = ({ folderGroup, onClose }: Props) => {
 
   return (
     <Tr
-      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
+      className="hover bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
       onClick={handleNavigate}
     >
       <Td className="w-full whitespace-nowrap">
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchModal.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchModal.tsx
index c2e4c3793..10fcc140b 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchModal.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchModal.tsx
@@ -116,7 +116,7 @@ const Content = ({
     <div className="min-h-[14.6rem]">
       <div className="flex gap-2">
         <Input
-          className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+          className="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] duration-200"
           placeholder="Search by secret, folder or tag name..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
@@ -205,7 +205,7 @@ const Content = ({
                 </DropdownSubMenuTrigger>
                 <DropdownSubMenuContent
                   collisionPadding={{ right: Infinity }} // forces dropdown to left
-                  className="max-h-80 thin-scrollbar overflow-y-auto rounded-r-none"
+                  className="thin-scrollbar max-h-80 overflow-y-auto rounded-r-none"
                 >
                   <DropdownMenuLabel>Filter Secrets by Tag(s)</DropdownMenuLabel>
                   {tags.map(({ id, slug, color }) => (
@@ -234,12 +234,12 @@ const Content = ({
         </DropdownMenu>
       </div>
 
-      <div className="mt-4 max-h-76 min-h-76 overflow-auto">
+      <div className="max-h-76 min-h-76 mt-4 overflow-auto">
         {/* eslint-disable-next-line no-nested-ternary */}
         {isEnabled ? (
           // eslint-disable-next-line no-nested-ternary
           isPending ? (
-            <Spinner size="lg" className="mx-auto mt-24 text-mineshaft-900" />
+            <Spinner size="lg" className="text-mineshaft-900 mx-auto mt-24" />
           ) : isEmpty ? (
             <EmptyState
               className="mt-24"
@@ -247,7 +247,7 @@ const Content = ({
               icon={faMagnifyingGlass}
             />
           ) : (
-            <TableContainer className="h-full thin-scrollbar overflow-y-auto">
+            <TableContainer className="thin-scrollbar h-full overflow-y-auto">
               <Table>
                 {showFilter[RowType.Folder] &&
                   Object.entries(folders).map(([key, folderGroup]) => (
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx
index 8aadf6501..4d6c9cbcd 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx
@@ -115,16 +115,16 @@ export const QuickSearchSecretItem = ({
 
   return (
     <Tr
-      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
+      className="hover bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
       onClick={handleNavigate}
     >
       <Td className="w-full">
         <div className="inline-flex max-w-[20rem] flex-col">
           <span className="truncate">
-            <FontAwesomeIcon className="mr-2 self-center text-bunker-300" icon={faKey} />
+            <FontAwesomeIcon className="text-bunker-300 mr-2 self-center" icon={faKey} />
             {groupSecret.key}
           </span>
-          <span className="text-xs text-mineshaft-400">
+          <span className="text-mineshaft-400 text-xs">
             <FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
             <Tooltip className="max-w-7xl" content={groupSecret.path}>
               <span>{reverseTruncate(groupSecret.path ?? "")}</span>
@@ -241,7 +241,7 @@ export const QuickSearchSecretItem = ({
                   <Tooltip side="left" sideOffset={18} content="Click to copy to clipboard">
                     <div>
                       {!isSingleEnv && (
-                        <span className="text-xs text-mineshaft-400">
+                        <span className="text-mineshaft-400 text-xs">
                           {envSlugMap.get(secret.env)?.name}
                         </span>
                       )}
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretRotationItem.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretRotationItem.tsx
index fc4b66978..f8ceaa82d 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretRotationItem.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretRotationItem.tsx
@@ -31,16 +31,16 @@ export const QuickSearchSecretRotationItem = ({ secretRotationGroup, onClose }:
 
   return (
     <Tr
-      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
+      className="hover bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
       onClick={handleNavigate}
     >
       <Td className="w-full">
         <div className="inline-flex max-w-[20rem] flex-col">
           <span className="truncate">
-            <FontAwesomeIcon className="mr-2 self-center text-mineshaft-400" icon={faRotate} />
+            <FontAwesomeIcon className="text-mineshaft-400 mr-2 self-center" icon={faRotate} />
             {groupSecretRotation.name}
           </span>
-          <span className="text-xs text-mineshaft-400">
+          <span className="text-mineshaft-400 text-xs">
             <FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
             <Tooltip className="max-w-7xl" content={groupSecretRotation.folder.path}>
               <span>{reverseTruncate(groupSecretRotation.folder.path)}</span>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
index 76b4345c1..516bc669d 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
@@ -25,14 +25,14 @@ export const SecretTableResourceCount = ({
   secretRotationCount = 0
 }: Props) => {
   return (
-    <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
+    <div className="divide-mineshaft-500 text-mineshaft-400 flex items-center gap-2 divide-x text-sm">
       {importCount > 0 && (
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="text-center whitespace-nowrap">
+            <p className="whitespace-nowrap text-center">
               Total import count{" "}
-              <span className="text-center text-mineshaft-400">(matching filters)</span>
+              <span className="text-mineshaft-400 text-center">(matching filters)</span>
             </p>
           }
         >
@@ -46,9 +46,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="text-center whitespace-nowrap">
+            <p className="whitespace-nowrap text-center">
               Total folder count{" "}
-              <span className="text-center text-mineshaft-400">(matching filters)</span>
+              <span className="text-mineshaft-400 text-center">(matching filters)</span>
             </p>
           }
         >
@@ -62,9 +62,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="text-center whitespace-nowrap">
+            <p className="whitespace-nowrap text-center">
               Total dynamic secret count{" "}
-              <span className="text-center text-mineshaft-400">(matching filters)</span>
+              <span className="text-mineshaft-400 text-center">(matching filters)</span>
             </p>
           }
         >
@@ -78,9 +78,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="text-center whitespace-nowrap">
+            <p className="whitespace-nowrap text-center">
               Total secret rotation count{" "}
-              <span className="text-center text-mineshaft-400">(matching filters)</span>
+              <span className="text-mineshaft-400 text-center">(matching filters)</span>
             </p>
           }
         >
@@ -94,9 +94,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="text-center whitespace-nowrap">
+            <p className="whitespace-nowrap text-center">
               Total secret count{" "}
-              <span className="text-center text-mineshaft-400">(matching filters)</span>
+              <span className="text-mineshaft-400 text-center">(matching filters)</span>
             </p>
           }
         >
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx
index 98feebb7e..45b8e25f0 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx
@@ -83,9 +83,9 @@ export const SecretV2MigrationSection = () => {
 
   const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
   return (
-    <div className="mt-4 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
+    <div className="border-primary/50 bg-primary/10 mt-4 flex max-w-2xl flex-col rounded-lg border px-6 py-5">
       {isUpgrading && (
-        <div className="bg-opacity-80 absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500">
+        <div className="bg-bunker-500 absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-opacity-80">
           <Spinner size="lg" className="text-primary" />
           <div className="ml-4 flex flex-col space-y-1">
             <div className="text-3xl font-medium">Please wait</div>
@@ -94,18 +94,18 @@ export const SecretV2MigrationSection = () => {
         </div>
       )}
       <div className="mb-4 flex items-start gap-2">
-        <FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
+        <FontAwesomeIcon icon={faWarning} size="xl" className="text-primary mt-1" />
         <p className="text-xl font-medium">Upgrade secrets engine version</p>
       </div>
-      <p className="mx-1 mb-4 leading-7 text-mineshaft-100">
+      <p className="text-mineshaft-100 mx-1 mb-4 leading-7">
         Your existing workflows to fetch secrets will continue to work. However, viewing secrets on
         the UI requires you to upgrade your project&apos;s secrets engine version.
       </p>
-      <p className="mx-1 mb-4 leading-7 text-mineshaft-100">
+      <p className="text-mineshaft-100 mx-1 mb-4 leading-7">
         Upgrading is free and enables the use of Infisical&apos;s new secrets engine, which is 10x
         faster and allows you to encrypt secrets with your own KMS provider.
       </p>
-      <p className="mx-1 mb-6 leading-7 text-mineshaft-100">
+      <p className="text-mineshaft-100 mx-1 mb-6 leading-7">
         The upgrade takes only 1-2 minutes and will not cause any downtime.
       </p>
       <Button
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx
index 888c4c77d..4ba29b3cf 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx
@@ -231,17 +231,17 @@ export const SelectionPanel = ({
           isMultiSelectActive && "h-16"
         )}
       >
-        <div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 mt-3.5 flex items-center rounded-md border px-4 py-2">
           <div className="mr-2 text-sm">{selectedCount} Selected</div>
           <button
             type="button"
-            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
             onClick={resetSelectedEntries}
           >
             Unselect All
           </button>
           {isRotatedSecretSelected && (
-            <span className="text-sm text-mineshaft-400">
+            <span className="text-mineshaft-400 text-sm">
               Rotated Secrets will not be affected by action.
             </span>
           )}
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/components/MoveSecretsDialog/MoveSecretsDialog.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/components/MoveSecretsDialog/MoveSecretsDialog.tsx
index 34d056983..308838141 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/components/MoveSecretsDialog/MoveSecretsDialog.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/components/MoveSecretsDialog/MoveSecretsDialog.tsx
@@ -250,7 +250,7 @@ const Content = ({
     return (
       <div className="w-full">
         <div className="mb-2">Results</div>
-        <div className="mb-4 flex flex-col divide-y divide-mineshaft-600 rounded-sm bg-mineshaft-900 px-3 py-2">
+        <div className="divide-mineshaft-600 bg-mineshaft-900 mb-4 flex flex-col divide-y rounded-sm px-3 py-2">
           {moveResults.map(({ id, name, status, message }) => {
             let className: string;
             let icon: IconDefinition;
@@ -291,7 +291,7 @@ const Content = ({
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Moving secrets...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">Moving secrets...</p>
       </div>
     );
   }
@@ -327,8 +327,8 @@ const Content = ({
         />
       </FormControl>
       {Boolean(environmentsToBeSkipped.length) && (
-        <div className="rounded-sm bg-mineshaft-900 px-3 py-2">
-          <span className="text-sm text-yellow">
+        <div className="bg-mineshaft-900 rounded-sm px-3 py-2">
+          <span className="text-yellow text-sm">
             <FontAwesomeIcon icon={faWarning} className="mr-0.5" /> The following environments will
             not be affected
           </span>
@@ -355,7 +355,7 @@ const Content = ({
         }
       >
         <Switch
-          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-yellow/80"
+          className="bg-mineshaft-400/50 data-[state=checked]:bg-yellow/80 shadow-inner"
           id="overwrite-existing-secrets"
           thumbClassName="bg-mineshaft-800"
           onCheckedChange={setShouldOverwrite}
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
index 77106a57c..54b6cb0b3 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
@@ -38,7 +38,7 @@ export const SecretApprovalsPage = () => {
         <meta property="og:title" content={String(t("approval.og-title"))} />
         <meta name="og:description" content={String(t("approval.og-description"))} />
       </Helmet>
-      <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
+      <div className="bg-bunker-800 container mx-auto h-full w-full max-w-7xl text-white">
         <PageHeader
           title="Approval Workflows"
           description="Create approval policies for any modifications to secrets in sensitive environments and folders."
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
index fce55b077..875bcbc2d 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
@@ -72,11 +72,11 @@ const generateRequestText = (request: TAccessApprovalRequest) => {
     <div className="flex items-center justify-between text-sm">
       <div>
         Requested {isTemporary ? "temporary" : "permanent"} access to{" "}
-        <code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
+        <code className="bg-mineshaft-600 text-mineshaft-200 mx-1 rounded-sm px-1.5 py-0.5 font-mono text-[13px]">
           {request.policy.secretPath}
         </code>{" "}
         in{" "}
-        <code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
+        <code className="bg-mineshaft-600 text-mineshaft-200 mx-1 rounded-sm px-1.5 py-0.5 font-mono text-[13px]">
           {request.environmentName}
         </code>
       </div>
@@ -307,17 +307,17 @@ export const AccessApprovalRequest = ({
         exit={{ opacity: 0, translateX: 30 }}
         className="rounded-md text-gray-300"
       >
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
             <div>
               <div className="flex items-start gap-1">
-                <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
+                <p className="text-mineshaft-100 text-xl font-medium">Access Requests</p>
                 <a
                   href="https://infisical.com/docs/documentation/platform/access-controls/access-requests"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                  <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                     <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                     <span>Docs</span>
                     <FontAwesomeIcon
@@ -327,7 +327,7 @@ export const AccessApprovalRequest = ({
                   </div>
                 </a>
               </div>
-              <p className="text-sm text-bunker-300">
+              <p className="text-bunker-300 text-sm">
                 Request and review access to secrets in sensitive environments and folders
               </p>
             </div>
@@ -359,7 +359,7 @@ export const AccessApprovalRequest = ({
             className="flex-1"
             containerClassName="mb-4"
           />
-          <div className="flex items-center space-x-8 rounded-t-md border-x border-t border-mineshaft-600 bg-mineshaft-800 px-8 py-3 text-sm">
+          <div className="border-mineshaft-600 bg-mineshaft-800 flex items-center space-x-8 rounded-t-md border-x border-t px-8 py-3 text-sm">
             <div
               role="button"
               tabIndex={0}
@@ -405,9 +405,9 @@ export const AccessApprovalRequest = ({
                 <DropdownMenuContent
                   align="end"
                   sideOffset={1}
-                  className="max-h-80 thin-scrollbar overflow-y-auto"
+                  className="thin-scrollbar max-h-80 overflow-y-auto"
                 >
-                  <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                     Select an Environment
                   </DropdownMenuLabel>
                   {currentProject?.environments.map(({ slug, name }) => (
@@ -442,9 +442,9 @@ export const AccessApprovalRequest = ({
                   <DropdownMenuContent
                     align="end"
                     sideOffset={1}
-                    className="max-h-80 thin-scrollbar overflow-y-auto"
+                    className="thin-scrollbar max-h-80 overflow-y-auto"
                   >
-                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                       Select Requesting User
                     </DropdownMenuLabel>
                     {members?.map(({ user: membershipUser, id }) => (
@@ -470,7 +470,7 @@ export const AccessApprovalRequest = ({
               )}
             </div>
           </div>
-          <div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
+          <div className="border-mineshaft-600 bg-mineshaft-800 flex flex-col rounded-b-md border-x border-b border-t">
             {filteredRequests?.length === 0 && !isFiltered && (
               <div className="py-12">
                 <EmptyState
@@ -490,7 +490,7 @@ export const AccessApprovalRequest = ({
                 return (
                   <div
                     key={request.id}
-                    className="flex w-full cursor-pointer border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700 aria-disabled:opacity-80"
+                    className="border-mineshaft-600 hover:bg-mineshaft-700 flex w-full cursor-pointer border-b px-8 py-3 last:border-b-0 aria-disabled:opacity-80"
                     role="button"
                     tabIndex={0}
                     onClick={() => handleSelectRequest(request)}
@@ -506,7 +506,7 @@ export const AccessApprovalRequest = ({
                           <FontAwesomeIcon
                             icon={faLock}
                             size="xs"
-                            className="mr-1.5 text-mineshaft-300"
+                            className="text-mineshaft-300 mr-1.5"
                           />
                           {generateRequestText(request)}
                         </div>
@@ -526,7 +526,7 @@ export const AccessApprovalRequest = ({
                       </div>
                       <div className="flex items-center gap-3">
                         {request.requestedByUserId === user.id && (
-                          <div className="flex items-center gap-1.5 text-xs whitespace-nowrap text-bunker-300">
+                          <div className="text-bunker-300 flex items-center gap-1.5 whitespace-nowrap text-xs">
                             <FontAwesomeIcon icon={faUser} size="sm" />
                             <span>Requested By You</span>
                           </div>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/EditAccessRequestModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/EditAccessRequestModal.tsx
index 430ba080e..0de69323e 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/EditAccessRequestModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/EditAccessRequestModal.tsx
@@ -91,8 +91,8 @@ const Content = ({ accessRequest, onComplete, projectSlug }: ContentProps) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="mb-4 flex w-full items-start rounded-md border border-yellow/50 bg-yellow/30 px-4 py-2 text-sm text-yellow-200">
-        <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2.5 text-base text-yellow" />
+      <div className="border-yellow/50 bg-yellow/30 mb-4 flex w-full items-start rounded-md border px-4 py-2 text-sm text-yellow-200">
+        <FontAwesomeIcon icon={faWarning} className="text-yellow mr-2.5 mt-1 text-base" />
         Updating this access request will restart the review process and require all approvers to
         re-approve it.
       </div>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx
index 1b7e12a89..178d08f8c 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx
@@ -58,7 +58,7 @@ const getReviewedStatusSymbol = (status?: ApprovalStatus, isOrgMembershipActive?
       // Can't do a tooltip here because nested tooltips doesn't work properly as of yet.
       // TODO(daniel): Fix nested tooltips in the future.
 
-      <Badge className="flex h-4 items-center justify-center bg-mineshaft-400/50 text-bunker-300">
+      <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-4 items-center justify-center">
         <FontAwesomeIcon size="xs" icon={faUserSlash} />
       </Badge>
     );
@@ -287,7 +287,7 @@ export const ReviewAccessRequestModal = ({
         title="Review Request"
         subTitle="Review the request and approve or deny access."
       >
-        <div className="mb-4 rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5 text-sm">
+        <div className="border-l-primary bg-mineshaft-300/5 mb-4 rounded-r border-l-2 px-4 py-2.5 text-sm">
           {request.user &&
           (request.user.firstName || request.user.lastName) &&
           request.user.email ? (
@@ -300,7 +300,7 @@ export const ReviewAccessRequestModal = ({
           is requesting access to the following resource:
         </div>
         <div className="">
-          <div className="mt-4 mb-2 text-mineshaft-200">
+          <div className="text-mineshaft-200 mb-2 mt-4">
             <div className="flex flex-wrap gap-8">
               <GenericFieldLabel label="Environment">{accessDetails.env}</GenericFieldLabel>
               <GenericFieldLabel truncate label="Secret Path">
@@ -342,7 +342,7 @@ export const ReviewAccessRequestModal = ({
             </div>
           </div>
 
-          <div className="mt-4 flex items-center justify-between border-b-2 border-mineshaft-500 py-2">
+          <div className="border-mineshaft-500 mt-4 flex items-center justify-between border-b-2 py-2">
             <span>Approvers</span>
             {approverSequence.isMyReviewInThisSequence &&
               request.status === ApprovalStatus.PENDING && (
@@ -351,7 +351,7 @@ export const ReviewAccessRequestModal = ({
                 </Badge>
               )}
           </div>
-          <div className="max-h-[40vh] thin-scrollbar overflow-y-auto rounded-sm py-2">
+          <div className="thin-scrollbar max-h-[40vh] overflow-y-auto rounded-sm py-2">
             {approverSequence?.approvers &&
               approverSequence.approvers.map((approver, index) => {
                 const isInactive =
@@ -397,7 +397,7 @@ export const ReviewAccessRequestModal = ({
                     <Badge
                       className={
                         isInactive
-                          ? "py-auto my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200"
+                          ? "py-auto bg-mineshaft-400/50 text-bunker-200 my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 whitespace-nowrap text-center"
                           : ""
                       }
                     >
@@ -415,20 +415,20 @@ export const ReviewAccessRequestModal = ({
                       <div className="flex w-12 flex-col items-center gap-2 pr-4">
                         <div
                           className={twMerge(
-                            "grow border-mineshaft-600",
+                            "border-mineshaft-600 grow",
                             index !== 0 && "border-r"
                           )}
                         />
                         {StepComponent}
                         <div
                           className={twMerge(
-                            "grow border-mineshaft-600",
+                            "border-mineshaft-600 grow",
                             index < approverSequence.approvers!.length - 1 && "border-r"
                           )}
                         />
                       </div>
                     )}
-                    <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 p-4">
+                    <div className="border-mineshaft-600 grid flex-1 grid-cols-5 border-b p-4">
                       <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
                         {Boolean(approver.user.length) && (
                           <div className="flex flex-row flex-wrap gap-2">
@@ -448,7 +448,7 @@ export const ReviewAccessRequestModal = ({
                                     <span className="text-xs">
                                       <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
                                         <div>
-                                          <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                                          <Badge className="bg-mineshaft-400/50 text-bunker-300 pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                                             <FontAwesomeIcon icon={faBan} />
                                             Inactive
                                           </Badge>
@@ -479,8 +479,8 @@ export const ReviewAccessRequestModal = ({
                               className="max-w-lg"
                               content={
                                 <div>
-                                  <div className="mb-1 text-sm text-bunker-300">Reviewers</div>
-                                  <div className="flex max-h-64 thin-scrollbar flex-col divide-y divide-mineshaft-500 overflow-y-auto rounded-sm">
+                                  <div className="text-bunker-300 mb-1 text-sm">Reviewers</div>
+                                  <div className="thin-scrollbar divide-mineshaft-500 flex max-h-64 flex-col divide-y overflow-y-auto rounded-sm">
                                     {approver.reviewers.map((el, idx) => (
                                       <div
                                         key={`reviewer-${idx + 1}`}
@@ -517,7 +517,7 @@ export const ReviewAccessRequestModal = ({
           {shouldBlockRequestActions ? (
             <div
               className={twMerge(
-                "mt-2 rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm",
+                "bg-mineshaft-300/5 mt-2 rounded-r border-l-2 border-l-red-500 px-4 py-2.5 text-sm",
                 isReviewedByMe && "border-l-green-400",
                 !approverSequence.isMyReviewInThisSequence && "border-l-primary-400",
                 hasRejected && "border-l-red-500"
@@ -535,7 +535,7 @@ export const ReviewAccessRequestModal = ({
                     id="byPassApproval"
                     className={twMerge("mr-2", bypassApproval ? "border-red/50! bg-red/30!" : "")}
                   >
-                    <span className="text-xs text-red">
+                    <span className="text-red text-xs">
                       Approve without waiting for requirements to be met (bypass policy protection)
                     </span>
                   </Checkbox>
@@ -579,7 +579,7 @@ export const ReviewAccessRequestModal = ({
                   isLoading={isLoading === "rejected"}
                   isDisabled={!!isLoading || isRejectionDisabled}
                   onClick={() => handleReview("rejected")}
-                  className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
+                  className="text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200 mt-4 border-transparent bg-transparent"
                   size="sm"
                 >
                   Reject Request
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
index 3d2302535..13228127a 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
@@ -249,17 +249,17 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
         exit={{ opacity: 0, translateX: 30 }}
         className="rounded-md text-gray-300"
       >
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
           <div className="mb-4 flex items-center justify-between">
             <div>
               <div className="flex items-start gap-1">
-                <p className="text-xl font-medium text-mineshaft-100">Policies</p>
+                <p className="text-mineshaft-100 text-xl font-medium">Policies</p>
                 <a
                   href="https://infisical.com/docs/documentation/platform/pr-workflows"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                  <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                     <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                     <span>Docs</span>
                     <FontAwesomeIcon
@@ -269,7 +269,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
                   </div>
                 </a>
               </div>
-              <p className="text-sm text-bunker-300">
+              <p className="text-bunker-300 text-sm">
                 Implement granular policies for access requests and secrets management
               </p>
             </div>
@@ -310,7 +310,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
                   variant="plain"
                   size="sm"
                   className={twMerge(
-                    "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                    "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                     isTableFiltered && "border-primary/50 text-primary"
                   )}
                 >
@@ -318,7 +318,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
                 </IconButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="max-h-[70vh] thin-scrollbar overflow-y-auto"
+                className="thin-scrollbar max-h-[70vh] overflow-y-auto"
                 align="end"
               >
                 <DropdownMenuLabel>Policy Type</DropdownMenuLabel>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
index 30998aff4..42ce196ec 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
@@ -438,7 +438,7 @@ const Form = ({
                     onChange(val as PolicyType);
                     resetField("secretPath");
                   }}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {Object.values(PolicyType).map((policyType) => {
                     return (
@@ -555,17 +555,17 @@ const Form = ({
         </div>
         <div className="mb-2">
           <p>Approvers</p>
-          <p className="font-inter text-xs text-mineshaft-300 opacity-90">
+          <p className="font-inter text-mineshaft-300 text-xs opacity-90">
             Select members or groups that are allowed to approve requests from this policy.
           </p>
         </div>
         {isAccessPolicyType ? (
           <>
-            <div className="max-h-64 thin-scrollbar space-y-2 overflow-y-auto rounded-sm border border-mineshaft-600 bg-mineshaft-900 p-2">
+            <div className="thin-scrollbar border-mineshaft-600 bg-mineshaft-900 max-h-64 space-y-2 overflow-y-auto rounded-sm border p-2">
               {sequenceApproversFieldArray.fields.map((el, index) => (
                 <div
                   className={twMerge(
-                    "rounded-sm border border-mineshaft-500 bg-mineshaft-700 p-3 pb-0 shadow-inner",
+                    "border-mineshaft-500 bg-mineshaft-700 rounded-sm border p-3 pb-0 shadow-inner",
                     dragOverItem === index ? "border-2 border-blue-400" : "",
                     draggedItem === index ? "opacity-50" : ""
                   )}
@@ -576,8 +576,8 @@ const Form = ({
                   <div className="mb-3 flex items-center justify-between">
                     <Tag>Step {index + 1}</Tag>
                     <div className="flex items-center gap-3">
-                      <div className="inline text-xs text-mineshaft-400">Min. Approvals</div>
-                      <div className="mr-2 w-20 border-r border-mineshaft-400 pr-3">
+                      <div className="text-mineshaft-400 inline text-xs">Min. Approvals</div>
+                      <div className="border-mineshaft-400 mr-2 w-20 border-r pr-3">
                         <Controller
                           control={control}
                           name={`sequenceApprovers.${index}.approvals` as const}
@@ -853,7 +853,7 @@ const Form = ({
             </div>
 
             {bypasserCount <= 0 && (
-              <div className="mt-1 flex rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm text-bunker-300">
+              <div className="bg-mineshaft-300/5 text-bunker-300 mt-1 flex rounded-r border-l-2 border-l-red-500 px-4 py-2.5 text-sm">
                 Not selecting specific users or groups will allow anyone to bypass this policy.
               </div>
             )}
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx
index 0bd4c6af1..c9e760d4c 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx
@@ -182,33 +182,33 @@ export const ApprovalPolicyRow = ({
       <Tr>
         <Td colSpan={6} className="border-none! p-0">
           <div
-            className={`w-full overflow-hidden bg-mineshaft-900/75 transition-all duration-500 ease-in-out ${
+            className={`bg-mineshaft-900/75 w-full overflow-hidden transition-all duration-500 ease-in-out ${
               isExpanded ? "max-h-104 thin-scrollbar overflow-y-auto! opacity-100" : "max-h-0"
             }`}
           >
             <div className="p-4">
-              <div className="border-b-2 border-mineshaft-500 pb-2">Approvers</div>
+              <div className="border-mineshaft-500 border-b-2 pb-2">Approvers</div>
               {labels?.map((el, index) => (
                 <div key={`approval-list-${index + 1}`} className="flex">
                   {labels.length > 1 && (
                     <div className="flex w-12 flex-col items-center gap-2 pr-4">
                       <div
-                        className={twMerge("grow border-mineshaft-600", index !== 0 && "border-r")}
+                        className={twMerge("border-mineshaft-600 grow", index !== 0 && "border-r")}
                       />
                       {labels.length > 1 && (
-                        <Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200">
+                        <Badge className="bg-mineshaft-400/50 text-bunker-200 my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 whitespace-nowrap text-center">
                           <span>{index + 1}</span>
                         </Badge>
                       )}
                       <div
                         className={twMerge(
-                          "grow border-mineshaft-600",
+                          "border-mineshaft-600 grow",
                           index < labels.length - 1 && "border-r"
                         )}
                       />
                     </div>
                   )}
-                  <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 p-4">
+                  <div className="border-mineshaft-600 grid flex-1 grid-cols-5 border-b p-4">
                     <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
                       {Boolean(el.users.length) && (
                         <div className="flex flex-row flex-wrap gap-2">
@@ -225,7 +225,7 @@ export const ApprovalPolicyRow = ({
                                   <span className="text-xs">
                                     <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
                                       <div>
-                                        <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                                        <Badge className="bg-mineshaft-400/50 text-bunker-300 pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                                           <FontAwesomeIcon icon={faBan} />
                                           Inactive
                                         </Badge>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx
index 2b6a630b5..ed57ac722 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx
@@ -26,13 +26,13 @@ export const PolicyMemberOption = ({
           {children}
         </p>
         {!props.data.isOrgMembershipActive && (
-          <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+          <Badge className="bg-mineshaft-400/50 text-bunker-300 pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
             <FontAwesomeIcon icon={faBan} />
             Inactive
           </Badge>
         )}
         {isSelected && (
-          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/RemoveApprovalPolicyModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/RemoveApprovalPolicyModal.tsx
index db2406335..73c9a8607 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/RemoveApprovalPolicyModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/RemoveApprovalPolicyModal.tsx
@@ -95,7 +95,7 @@ export const RemoveApprovalPolicyModal = ({
       {isPending ? (
         <div className="mt-4 flex w-full items-center gap-2 p-2">
           <Spinner size="xs" className="text-mineshaft-600" />
-          <span className="text-sm text-mineshaft-400">Checking for open requests...</span>
+          <span className="text-mineshaft-400 text-sm">Checking for open requests...</span>
         </div>
       ) : (
         <div
@@ -114,7 +114,7 @@ export const RemoveApprovalPolicyModal = ({
                   This policy has {openCount} open request
                   {(openCount ?? 0) > 1 ? "s" : ""}
                 </span>
-                <p className="text-xs text-mineshaft-200">
+                <p className="text-mineshaft-200 text-xs">
                   Removing this policy will close all open requests.
                 </p>
               </div>
@@ -124,7 +124,7 @@ export const RemoveApprovalPolicyModal = ({
               <FontAwesomeIcon className="mt-1" icon={faCheck} />
               <div className="flex flex-col">
                 <span>This policy has no open requests</span>
-                <p className="text-xs text-mineshaft-200">This policy is safe to remove.</p>
+                <p className="text-mineshaft-200 text-xs">This policy is safe to remove.</p>
               </div>
             </>
           )}
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
index 509f5f289..e52d01920 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
@@ -155,17 +155,17 @@ export const SecretApprovalRequest = () => {
           exit={{ opacity: 0, translateX: 30 }}
           className="rounded-md text-gray-300"
         >
-          <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
             <div className="mb-4 flex items-center justify-between">
               <div>
                 <div className="flex items-start gap-1">
-                  <p className="text-xl font-medium text-mineshaft-100">Change Requests</p>
+                  <p className="text-mineshaft-100 text-xl font-medium">Change Requests</p>
                   <a
                     href="https://infisical.com/docs/documentation/platform/pr-workflows"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                    <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                       <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                       <span>Docs</span>
                       <FontAwesomeIcon
@@ -175,7 +175,7 @@ export const SecretApprovalRequest = () => {
                     </div>
                   </a>
                 </div>
-                <p className="text-sm text-bunker-300">Review pending and closed change requests</p>
+                <p className="text-bunker-300 text-sm">Review pending and closed change requests</p>
               </div>
             </div>
             <Input
@@ -186,7 +186,7 @@ export const SecretApprovalRequest = () => {
               className="flex-1"
               containerClassName="mb-4"
             />
-            <div className="flex items-center space-x-8 rounded-t-md border-x border-t border-mineshaft-600 bg-mineshaft-800 px-8 py-3 text-sm">
+            <div className="border-mineshaft-600 bg-mineshaft-800 flex items-center space-x-8 rounded-t-md border-x border-t px-8 py-3 text-sm">
               <div
                 role="button"
                 tabIndex={0}
@@ -234,9 +234,9 @@ export const SecretApprovalRequest = () => {
                   <DropdownMenuContent
                     align="end"
                     sideOffset={1}
-                    className="max-h-80 thin-scrollbar overflow-y-auto"
+                    className="thin-scrollbar max-h-80 overflow-y-auto"
                   >
-                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                       Select an Environment
                     </DropdownMenuLabel>
                     {currentProject?.environments.map(({ slug, name }) => (
@@ -271,9 +271,9 @@ export const SecretApprovalRequest = () => {
                     <DropdownMenuContent
                       align="end"
                       sideOffset={1}
-                      className="max-h-80 thin-scrollbar overflow-y-auto"
+                      className="thin-scrollbar max-h-80 overflow-y-auto"
                     >
-                      <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                      <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                         Select an Author
                       </DropdownMenuLabel>
                       {members?.map(({ user, id }) => (
@@ -295,7 +295,7 @@ export const SecretApprovalRequest = () => {
                 )}
               </div>
             </div>
-            <div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
+            <div className="border-mineshaft-600 bg-mineshaft-800 flex flex-col rounded-b-md border-x border-b border-t">
               {isRequestListEmpty && !isFiltered && (
                 <div className="py-12">
                   <EmptyState
@@ -321,7 +321,7 @@ export const SecretApprovalRequest = () => {
                 return (
                   <div
                     key={reqId}
-                    className="flex border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
+                    className="border-mineshaft-600 hover:bg-mineshaft-700 flex border-b px-8 py-3 last:border-b-0"
                     role="button"
                     tabIndex={0}
                     onClick={() => setSelectedApprovalId(secretApproval.id)}
@@ -334,12 +334,12 @@ export const SecretApprovalRequest = () => {
                         <FontAwesomeIcon
                           icon={faCodeBranch}
                           size="sm"
-                          className="mr-1.5 text-mineshaft-300"
+                          className="text-mineshaft-300 mr-1.5"
                         />
                         {secretApproval.isReplicated
                           ? `${commits.length} secret pending import`
                           : generateCommitText(commits)}
-                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                        <span className="text-bunker-300 text-xs"> #{secretApproval.slug}</span>
                       </div>
                       <span className="text-xs leading-3 text-gray-500">
                         Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
@@ -394,13 +394,13 @@ export const SecretApprovalRequest = () => {
                   {Array.apply(0, Array(3)).map((_x, index) => (
                     <div
                       key={`approval-request-loading-${index + 1}`}
-                      className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
+                      className="hover:bg-mineshaft-700 flex flex-col px-8 py-4"
                     >
                       <div className="mb-2 flex items-center">
                         <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
-                        <Skeleton className="w-1/4 bg-mineshaft-600" />
+                        <Skeleton className="bg-mineshaft-600 w-1/4" />
                       </div>
-                      <Skeleton className="w-1/2 bg-mineshaft-600" />
+                      <Skeleton className="bg-mineshaft-600 w-1/2" />
                     </div>
                   ))}
                 </div>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
index c2eb4c61f..f62df32b0 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
@@ -102,11 +102,11 @@ export const SecretApprovalRequestAction = ({
 
   if (!hasMerged && status === "open") {
     return (
-      <div className="flex w-full flex-col items-start justify-between py-4 text-mineshaft-100 transition-all">
+      <div className="text-mineshaft-100 flex w-full flex-col items-start justify-between py-4 transition-all">
         <div className="flex w-full flex-col justify-between xl:flex-row xl:items-center">
           <div className="mr-auto flex items-center space-x-4 px-4">
             <div
-              className={`flex items-center justify-center rounded-full ${isMergable ? "h-8 w-8 bg-green" : "h-10 w-10 bg-red-600"}`}
+              className={`flex items-center justify-center rounded-full ${isMergable ? "bg-green h-8 w-8" : "h-10 w-10 bg-red-600"}`}
             >
               <FontAwesomeIcon
                 icon={isMergable ? faCheck : faXmark}
@@ -118,7 +118,7 @@ export const SecretApprovalRequestAction = ({
                 {isMergable ? "Good to merge" : "Merging is blocked"}
               </p>
               {!isMergable && (
-                <span className="inline-block text-xs text-mineshaft-300">
+                <span className="text-mineshaft-300 inline-block text-xs">
                   At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by
                   eligible reviewers.
                   {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
@@ -156,12 +156,12 @@ export const SecretApprovalRequestAction = ({
                 </Button>
               </div>
             ) : (
-              <div className="text-sm text-mineshaft-400">Only approvers can merge</div>
+              <div className="text-mineshaft-400 text-sm">Only approvers can merge</div>
             )}
           </div>
         </div>
         {isSoftEnforcement && !isMergable && isBypasser && (
-          <div className="mt-4 w-full border-t border-mineshaft-600 px-5">
+          <div className="border-mineshaft-600 mt-4 w-full border-t px-5">
             <div className="mt-2 flex flex-col space-y-2 pt-2">
               <Checkbox
                 onCheckedChange={(checked) => setByPassApproval(checked === true)}
@@ -198,12 +198,12 @@ export const SecretApprovalRequestAction = ({
 
   if (hasMerged && status === "close")
     return (
-      <div className="flex w-full items-center justify-between rounded-md border border-green/60 bg-green/10">
+      <div className="border-green/60 bg-green/10 flex w-full items-center justify-between rounded-md border">
         <div className="flex items-start space-x-2 p-4">
-          <FontAwesomeIcon icon={faCheck} className="mt-0.5 text-xl text-green" />
+          <FontAwesomeIcon icon={faCheck} className="text-green mt-0.5 text-xl" />
           <span className="flex flex-col">
             Change request merged
-            <span className="inline-block text-xs text-mineshaft-300">
+            <span className="text-mineshaft-300 inline-block text-xs">
               Merged by {statusChangeByEmail}.
             </span>
           </span>
@@ -212,12 +212,12 @@ export const SecretApprovalRequestAction = ({
     );
 
   return (
-    <div className="flex w-full items-center justify-between rounded-md border border-yellow/60 bg-yellow/10">
+    <div className="border-yellow/60 bg-yellow/10 flex w-full items-center justify-between rounded-md border">
       <div className="flex items-start space-x-2 p-4">
-        <FontAwesomeIcon icon={faUserLock} className="mt-0.5 text-xl text-yellow" />
+        <FontAwesomeIcon icon={faUserLock} className="text-yellow mt-0.5 text-xl" />
         <span className="flex flex-col">
           Secret approval has been closed
-          <span className="inline-block text-xs text-mineshaft-300">
+          <span className="text-mineshaft-300 inline-block text-xs">
             Closed by {statusChangeByEmail}
           </span>
         </span>
@@ -227,7 +227,7 @@ export const SecretApprovalRequestAction = ({
         isLoading={isStatusChanging}
         variant="plain"
         colorSchema="secondary"
-        className="mr-4 text-yellow/60 hover:text-yellow"
+        className="text-yellow/60 hover:text-yellow mr-4"
         leftIcon={<FontAwesomeIcon icon={faLockOpen} />}
       >
         Reopen request
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
index c54ee8502..e8d1ba027 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -66,41 +66,41 @@ export const SecretApprovalRequestChangeItem = ({
   const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false);
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pt-2 pb-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border px-4 pb-4 pt-2">
       <div className="flex items-center px-1 py-1">
         <div className="grow">{generateItemTitle(op)}</div>
         {!hasMerged && isStale && (
-          <div className="flex items-center text-mineshaft-300">
+          <div className="text-mineshaft-300 flex items-center">
             <FontAwesomeIcon icon={faInfoCircle} className="text-xs" />
             <span className="ml-1 text-xs">Secret has been changed (stale)</span>
           </div>
         )}
         {hasMerged && hasConflict && (
-          <div className="flex items-center space-x-1 text-xs text-bunker-300">
+          <div className="text-bunker-300 flex items-center space-x-1 text-xs">
             <Tooltip content="Merge Conflict">
-              <FontAwesomeIcon icon={faExclamationTriangle} className="text-xs text-red" />
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-red text-xs" />
             </Tooltip>
             <div>{generateConflictText(op)}</div>
           </div>
         )}
       </div>
       <div>
-        <div className="flex flex-col space-y-4 space-x-0 xl:flex-row xl:space-y-0 xl:space-x-4">
+        <div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
           {op === CommitType.UPDATE || op === CommitType.DELETE ? (
             <div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
               <div className="mb-4 flex flex-row justify-between">
                 <span className="text-md font-medium">Previous Secret</span>
-                <div className="rounded-full bg-red px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
+                <div className="bg-red rounded-full px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
                   <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
                   Previous
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Key</div>
-                <p className="max-w-lg text-sm break-words">{secretVersion?.secretKey}</p>
+                <div className="text-mineshaft-300 text-sm font-medium">Key</div>
+                <p className="max-w-lg break-words text-sm">{secretVersion?.secretKey}</p>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Value</div>
                 <div className="text-sm">
                   {newVersion?.isRotatedSecret ? (
                     <span className="text-mineshaft-400">
@@ -109,13 +109,13 @@ export const SecretApprovalRequestChangeItem = ({
                   ) : (
                     <div className="relative">
                       {secretVersion?.secretValueHidden && (
-                        <div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
+                        <div className="absolute left-1 top-1/2 z-50 -translate-y-1/2">
                           <Tooltip
                             position="right"
                             content="You do not have access to view the old secret value."
                           >
                             <FontAwesomeIcon
-                              className="pl-2 text-mineshaft-300"
+                              className="text-mineshaft-300 pl-2"
                               size="sm"
                               icon={faEyeSlash}
                             />
@@ -128,18 +128,18 @@ export const SecretApprovalRequestChangeItem = ({
                         valueAlwaysHidden={secretVersion?.secretValueHidden}
                         value={secretVersion?.secretValue}
                         containerClassName={twMerge(
-                          "border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
-                          secretVersion?.secretValueHidden ? "pr-2 pl-8" : "px-2"
+                          "border-mineshaft-600 bg-bunker-700 text-bunker-300 hover:border-primary-400/50 border py-1.5",
+                          secretVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
                         )}
                       />
                       {!secretVersion?.secretValueHidden && (
                         <div
-                          className="absolute top-1 right-1"
+                          className="absolute right-1 top-1"
                           onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
                         >
                           <FontAwesomeIcon
                             icon={isOldSecretValueVisible ? faEyeSlash : faEye}
-                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                            className="border-mineshaft-500 bg-mineshaft-800 text-mineshaft-300 hover:bg-mineshaft-700 cursor-pointer rounded-md border p-1.5"
                           />
                         </div>
                       )}
@@ -148,20 +148,20 @@ export const SecretApprovalRequestChangeItem = ({
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
-                <div className="max-h-20 thin-scrollbar max-w-136 overflow-y-auto text-sm break-words xl:max-w-md">
+                <div className="text-mineshaft-300 text-sm font-medium">Comment</div>
+                <div className="thin-scrollbar max-w-136 max-h-20 overflow-y-auto break-words text-sm xl:max-w-md">
                   {secretVersion?.secretComment || (
-                    <span className="text-sm text-mineshaft-300">-</span>
+                    <span className="text-mineshaft-300 text-sm">-</span>
                   )}{" "}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Tags</div>
                 <div className="flex flex-wrap gap-y-2">
                   {(secretVersion?.tags?.length ?? 0) ? (
                     secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
-                        className="flex w-min items-center space-x-1.5 border border-mineshaft-500 bg-mineshaft-800"
+                        className="border-mineshaft-500 bg-mineshaft-800 flex w-min items-center space-x-1.5 border"
                         key={`${secretVersion.id}-${tagId}`}
                       >
                         <div
@@ -172,24 +172,24 @@ export const SecretApprovalRequestChangeItem = ({
                       </Tag>
                     ))
                   ) : (
-                    <span className="text-sm text-mineshaft-300">-</span>
+                    <span className="text-mineshaft-300 text-sm">-</span>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Metadata</div>
                 <div>
                   {secretVersion?.secretMetadata?.length ? (
-                    <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
                       {secretVersion.secretMetadata?.map((el) => (
                         <div key={el.key} className="flex items-center">
                           <Tag
                             size="xs"
-                            className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                            className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
                           >
                             <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                             <Tooltip
-                              className="max-w-lg break-words whitespace-normal"
+                              className="max-w-lg whitespace-normal break-words"
                               content={el.key}
                             >
                               <div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -199,10 +199,10 @@ export const SecretApprovalRequestChangeItem = ({
                           </Tag>
                           <Tag
                             size="xs"
-                            className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                            className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
                           >
                             <Tooltip
-                              className="max-w-lg break-words whitespace-normal"
+                              className="max-w-lg whitespace-normal break-words"
                               content={el.value}
                             >
                               <div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -214,21 +214,21 @@ export const SecretApprovalRequestChangeItem = ({
                       ))}
                     </div>
                   ) : (
-                    <p className="text-sm text-mineshaft-300">-</p>
+                    <p className="text-mineshaft-300 text-sm">-</p>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Multi-line Encoding</div>
                 <div className="text-sm">
                   {secretVersion?.skipMultilineEncoding?.toString() || (
-                    <span className="text-sm text-mineshaft-300">-</span>
+                    <span className="text-mineshaft-300 text-sm">-</span>
                   )}{" "}
                 </div>
               </div>
             </div>
           ) : (
-            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+            <div className="text-md border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 flex w-full items-center justify-center rounded-md border xl:w-1/2">
               Secret did not exist in the previous version.
             </div>
           )}
@@ -236,17 +236,17 @@ export const SecretApprovalRequestChangeItem = ({
             <div className="flex w-full cursor-default flex-col rounded-md border border-green-600/60 bg-green-600/10 p-4 xl:w-1/2">
               <div className="mb-4 flex flex-row justify-between">
                 <span className="text-md font-medium">New Secret</span>
-                <div className="rounded-full bg-green-600 px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
+                <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
                   <FontAwesomeIcon icon={faCircleCheck} className="pr-1 text-white" />
                   New
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Key</div>
-                <div className="max-w-md text-sm break-words">{newVersion?.secretKey} </div>
+                <div className="text-mineshaft-300 text-sm font-medium">Key</div>
+                <div className="max-w-md break-words text-sm">{newVersion?.secretKey} </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Value</div>
                 <div className="text-sm">
                   {newVersion?.isRotatedSecret ? (
                     <span className="text-mineshaft-400">
@@ -255,13 +255,13 @@ export const SecretApprovalRequestChangeItem = ({
                   ) : (
                     <div className="relative">
                       {newVersion?.secretValueHidden && (
-                        <div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
+                        <div className="absolute left-1 top-1/2 z-50 -translate-y-1/2">
                           <Tooltip
                             position="right"
                             content="You do not have access to view the new secret value."
                           >
                             <FontAwesomeIcon
-                              className="pl-2 text-mineshaft-300"
+                              className="text-mineshaft-300 pl-2"
                               size="sm"
                               icon={faEyeSlash}
                             />
@@ -274,18 +274,18 @@ export const SecretApprovalRequestChangeItem = ({
                         isVisible={isNewSecretValueVisible}
                         value={newVersion?.secretValue ?? secretVersion?.secretValue}
                         containerClassName={twMerge(
-                          "border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
-                          newVersion?.secretValueHidden ? "pr-2 pl-8" : "px-2"
+                          "border-mineshaft-600 bg-bunker-700 text-bunker-300 hover:border-primary-400/50 border py-1.5",
+                          newVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
                         )}
                       />
                       {!newVersion?.secretValueHidden && (
                         <div
-                          className="absolute top-1 right-1"
+                          className="absolute right-1 top-1"
                           onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
                         >
                           <FontAwesomeIcon
                             icon={isNewSecretValueVisible ? faEyeSlash : faEye}
-                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                            className="border-mineshaft-500 bg-mineshaft-800 text-mineshaft-300 hover:bg-mineshaft-700 cursor-pointer rounded-md border p-1.5"
                           />
                         </div>
                       )}
@@ -294,20 +294,20 @@ export const SecretApprovalRequestChangeItem = ({
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
-                <div className="max-h-20 thin-scrollbar max-w-136 overflow-y-auto text-sm break-words xl:max-w-md">
+                <div className="text-mineshaft-300 text-sm font-medium">Comment</div>
+                <div className="thin-scrollbar max-w-136 max-h-20 overflow-y-auto break-words text-sm xl:max-w-md">
                   {(newVersion?.secretComment ?? secretVersion?.secretComment) || (
-                    <span className="text-sm text-mineshaft-300">-</span>
+                    <span className="text-mineshaft-300 text-sm">-</span>
                   )}{" "}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Tags</div>
                 <div className="flex flex-wrap gap-y-2">
                   {(newVersion?.tags?.length ?? 0) ? (
                     newVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
-                        className="flex w-min items-center space-x-1.5 border border-mineshaft-500 bg-mineshaft-800"
+                        className="border-mineshaft-500 bg-mineshaft-800 flex w-min items-center space-x-1.5 border"
                         key={`${newVersion.id}-${tagId}`}
                       >
                         <div
@@ -318,23 +318,23 @@ export const SecretApprovalRequestChangeItem = ({
                       </Tag>
                     ))
                   ) : (
-                    <span className="text-sm text-mineshaft-300">-</span>
+                    <span className="text-mineshaft-300 text-sm">-</span>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Metadata</div>
                 {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.length ? (
-                  <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+                  <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
                     {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.map((el) => (
                       <div key={el.key} className="flex items-center">
                         <Tag
                           size="xs"
-                          className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                          className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
                         >
                           <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                           <Tooltip
-                            className="max-w-lg break-words whitespace-normal"
+                            className="max-w-lg whitespace-normal break-words"
                             content={el.key}
                           >
                             <div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -344,10 +344,10 @@ export const SecretApprovalRequestChangeItem = ({
                         </Tag>
                         <Tag
                           size="xs"
-                          className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                          className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
                         >
                           <Tooltip
-                            className="max-w-lg break-words whitespace-normal"
+                            className="max-w-lg whitespace-normal break-words"
                             content={el.value}
                           >
                             <div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -359,21 +359,21 @@ export const SecretApprovalRequestChangeItem = ({
                     ))}
                   </div>
                 ) : (
-                  <p className="text-sm text-mineshaft-300">-</p>
+                  <p className="text-mineshaft-300 text-sm">-</p>
                 )}
               </div>
               <div className="mb-2">
-                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
+                <div className="text-mineshaft-300 text-sm font-medium">Multi-line Encoding</div>
                 <div className="text-sm">
                   {newVersion?.skipMultilineEncoding?.toString() ??
                     secretVersion?.skipMultilineEncoding?.toString() ?? (
-                      <span className="text-sm text-mineshaft-300">-</span>
+                      <span className="text-mineshaft-300 text-sm">-</span>
                     )}{" "}
                 </div>
               </div>
             </div>
           ) : (
-            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+            <div className="text-md border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 flex w-full items-center justify-center rounded-md border xl:w-1/2">
               {" "}
               Secret did not exist in the previous version.
             </div>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
index 85b1e572a..5332c6d2f 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
@@ -228,7 +228,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
   return (
     <div className="flex flex-col space-x-6 lg:flex-row">
       <div className="flex-1 lg:max-w-[calc(100%-17rem)]">
-        <div className="sticky -top-8 z-20 flex items-center space-x-4 bg-bunker-800 pt-2 pb-6">
+        <div className="bg-bunker-800 sticky -top-8 z-20 flex items-center space-x-4 pb-6 pt-2">
           <IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
             <FontAwesomeIcon icon={faArrowLeft} />
           </IconButton>
@@ -292,7 +292,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                               {...field}
                               placeholder="Leave a comment..."
                               reSize="none"
-                              className="text-md mt-2 h-40 border border-mineshaft-600 bg-mineshaft-800 placeholder:text-mineshaft-400"
+                              className="text-md border-mineshaft-600 bg-mineshaft-800 placeholder:text-mineshaft-400 mt-2 h-40 border"
                             />
                           </FormControl>
                         )}
@@ -317,7 +317,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                                 <div className="flex items-center gap-2">
                                   <RadioGroupItem
                                     id="approve"
-                                    className="h-4 w-4 rounded-full border border-gray-400 text-green focus:ring-2 focus:ring-mineshaft-500"
+                                    className="text-green focus:ring-mineshaft-500 h-4 w-4 rounded-full border border-gray-400 focus:ring-2"
                                     value={ApprovalStatus.APPROVED}
                                     aria-labelledby="approve-label"
                                   >
@@ -342,7 +342,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                                 <div className="flex items-center gap-2">
                                   <RadioGroupItem
                                     id="reject"
-                                    className="h-4 w-4 rounded-full border border-gray-400 text-red focus:ring-2 focus:ring-mineshaft-500"
+                                    className="text-red focus:ring-mineshaft-500 h-4 w-4 rounded-full border border-gray-400 focus:ring-2"
                                     value={ApprovalStatus.REJECTED}
                                     aria-labelledby="reject-label"
                                   >
@@ -383,19 +383,19 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               </DropdownMenu>
             )}
         </div>
-        <div className="mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+        <div className="border-l-primary bg-mineshaft-300/5 mb-4 flex flex-col rounded-r border-l-2 px-4 py-2.5">
           <div>
             {secretApprovalRequestDetails.isReplicated ? (
-              <div className="text-sm text-bunker-300">
+              <div className="text-bunker-300 text-sm">
                 A secret import in
                 <p
-                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
+                  className="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
+                <div className="border-mineshaft-500 mr-1 inline-flex w-min items-center rounded-sm border pl-1.5 pr-2">
+                  <p className="border-mineshaft-500 cursor-default border-r pr-1.5">
                     <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={approvalSecretPath}>
@@ -409,13 +409,13 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                 </div>
                 has pending changes to be accepted from its source at{" "}
                 <p
-                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
+                  className="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
                   style={{ padding: "2px 4px" }}
                 >
                   {replicatedImport?.importEnv?.slug}
                 </p>
-                <div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
+                <div className="border-mineshaft-500 mr-1 inline-flex w-min items-center rounded-sm border pl-1.5 pr-2">
+                  <p className="border-mineshaft-500 cursor-default border-r pr-1.5">
                     <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={replicatedImport?.importPath}>
@@ -430,16 +430,16 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                 . Approving these changes will add them to that import.
               </div>
             ) : (
-              <div className="text-sm text-bunker-300">
+              <div className="text-bunker-300 text-sm">
                 <p className="inline">Secret(s) in</p>
                 <p
-                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
+                  className="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
-                  <p className="cursor-default border-r border-mineshaft-500 pr-1.5">
+                <div className="border-mineshaft-500 mr-1 inline-flex w-min items-center rounded-sm border pl-1.5 pr-2">
+                  <p className="border-mineshaft-500 cursor-default border-r pr-1.5">
                     <FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
                   </p>
                   <Tooltip content={formatReservedPaths(secretApprovalRequestDetails.secretPath)}>
@@ -474,14 +474,14 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
             )
           )}
         </div>
-        <div className="my-4 flex flex-col items-center rounded-lg border border-mineshaft-600">
+        <div className="border-mineshaft-600 my-4 flex flex-col items-center rounded-lg border">
           {secretApprovalRequestDetails?.policy?.approvers
             .filter((requiredApprover) => reviewedUsers?.[requiredApprover.userId])
             .map((requiredApprover) => {
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="flex w-full flex-col rounded-md bg-mineshaft-800 p-4 text-sm text-mineshaft-100"
+                  className="bg-mineshaft-800 text-mineshaft-100 flex w-full flex-col rounded-md p-4 text-sm"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div>
@@ -510,7 +510,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               );
             })}
         </div>
-        <div className="mt-2 flex items-center space-x-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+        <div className="border-mineshaft-600 bg-mineshaft-800 mt-2 flex items-center space-x-6 rounded-lg border">
           <SecretApprovalRequestAction
             canApprove={canApprove}
             isBypasser={isBypasser === undefined ? true : isBypasser}
@@ -524,8 +524,8 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
           />
         </div>
       </div>
-      <div className="sticky top-0 z-51 w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
-        <div className="text-sm text-bunker-300">Reviewers</div>
+      <div className="z-51 sticky top-0 w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
+        <div className="text-bunker-300 text-sm">Reviewers</div>
         <div className="mt-2 flex flex-col space-y-2 text-sm">
           {secretApprovalRequestDetails?.policy?.approvers
             .filter(
@@ -538,7 +538,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
 
               return (
                 <div
-                  className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
+                  className="border-mineshaft-600 bg-mineshaft-800 flex flex-nowrap items-center justify-between space-x-2 rounded-sm border px-2 py-1"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div
@@ -565,7 +565,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                           <FontAwesomeIcon
                             icon={faUserSlash}
                             size="xs"
-                            className="ml-1 text-mineshaft-300"
+                            className="text-mineshaft-300 ml-1"
                           />
                         )}
                       </div>
@@ -577,13 +577,13 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                         <FontAwesomeIcon
                           icon={faComment}
                           size="xs"
-                          className="mr-1.5 text-mineshaft-300"
+                          className="text-mineshaft-300 mr-1.5"
                         />
                       </Tooltip>
                     )}
                     <div className="flex gap-2">
                       <Tooltip
-                        className="relative z-500!"
+                        className="z-500! relative"
                         content={
                           <span className="text-sm">
                             Status:{" "}
@@ -612,7 +612,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               const { isOrgMembershipActive } = reviewer;
               return (
                 <div
-                  className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm bg-mineshaft-800 px-2 py-1"
+                  className="bg-mineshaft-800 flex flex-nowrap items-center justify-between space-x-2 rounded-sm px-2 py-1"
                   key={`required-approver-${reviewer.userId}`}
                 >
                   <div
@@ -622,7 +622,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                     )}
                   >
                     <Tooltip
-                      className="relative z-500!"
+                      className="z-500! relative"
                       content={
                         !isOrgMembershipActive
                           ? "This user has been deactivated and no longer has an active organization membership."
@@ -635,7 +635,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                           <FontAwesomeIcon
                             icon={faUserSlash}
                             size="xs"
-                            className="ml-1 text-mineshaft-300"
+                            className="text-mineshaft-300 ml-1"
                           />
                         )}
                       </div>
@@ -644,16 +644,16 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
 
                   <div>
                     {reviewer.comment && (
-                      <Tooltip className="relative z-500!" content={reviewer.comment}>
+                      <Tooltip className="z-500! relative" content={reviewer.comment}>
                         <FontAwesomeIcon
                           icon={faComment}
                           size="xs"
-                          className="mr-1 text-mineshaft-300"
+                          className="text-mineshaft-300 mr-1"
                         />
                       </Tooltip>
                     )}
                     <Tooltip
-                      className="relative z-500!"
+                      className="z-500! relative"
                       content={
                         <span className="text-sm">
                           Status:{" "}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
index 2760e8626..0709be795 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
@@ -754,20 +754,20 @@ const Page = () => {
 
   if (!(currentProject?.version === ProjectVersion.V3))
     return (
-      <div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
+      <div className="text-mineshaft-50 dark:scheme-dark flex h-full w-full flex-col items-center justify-center px-6">
         <SecretV2MigrationSection />
       </div>
     );
 
   return (
-    <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
+    <div className="text-mineshaft-50 dark:scheme-dark container mx-auto flex max-w-7xl flex-col">
       <PageHeader
         title="Secrets Management"
         description={
           <p className="text-md text-bunker-300">
             Inject your secrets using
             <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
               href="https://infisical.com/docs/cli/overview"
               target="_blank"
               rel="noopener noreferrer"
@@ -776,7 +776,7 @@ const Page = () => {
             </a>
             ,
             <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
               href="https://infisical.com/docs/documentation/getting-started/api"
               target="_blank"
               rel="noopener noreferrer"
@@ -785,7 +785,7 @@ const Page = () => {
             </a>
             ,
             <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
               href="https://infisical.com/docs/sdks/overview"
               target="_blank"
               rel="noopener noreferrer"
@@ -794,7 +794,7 @@ const Page = () => {
             </a>
             , and
             <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
               href="https://infisical.com/docs/documentation/getting-started/introduction"
               target="_blank"
               rel="noopener noreferrer"
@@ -847,7 +847,7 @@ const Page = () => {
           <div
             ref={tableRef}
             className={twMerge(
-              "mt-3 thin-scrollbar overflow-x-hidden overflow-y-auto rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
+              "thin-scrollbar bg-mineshaft-800 text-bunker-300 mt-3 overflow-y-auto overflow-x-hidden rounded-md text-left text-sm",
               isNotEmpty && "rounded-b-none"
             )}
           >
@@ -855,7 +855,7 @@ const Page = () => {
               {isNotEmpty && (
                 <div
                   className={twMerge(
-                    "sticky top-0 flex border-b border-mineshaft-600 bg-mineshaft-800 font-medium"
+                    "border-mineshaft-600 bg-mineshaft-800 sticky top-0 flex border-b font-medium"
                   )}
                 >
                   <Tooltip
@@ -888,11 +888,11 @@ const Page = () => {
                       }`}
                       onMouseDown={handleMouseDown}
                     />
-                    <div className="pointer-events-none absolute top-2 -right-[0.04rem] z-30">
+                    <div className="pointer-events-none absolute -right-[0.04rem] top-2 z-30">
                       <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
                     </div>
                     <div
-                      className="flex shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
+                      className="border-mineshaft-600 flex shrink-0 items-center border-r py-2 pl-4"
                       style={{ width: colWidth }}
                       role="button"
                       tabIndex={0}
@@ -916,14 +916,14 @@ const Page = () => {
                 (!canReadSecret ? (
                   <div
                     className={twMerge(
-                      "flex border-l-2 border-l-primary bg-mineshaft-700 px-4 py-2",
-                      isNotEmpty ? "border-b border-b-mineshaft-600" : ""
+                      "border-l-primary bg-mineshaft-700 flex border-l-2 px-4 py-2",
+                      isNotEmpty ? "border-b-mineshaft-600 border-b" : ""
                     )}
                   >
                     <div className="flex items-center text-sm">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
-                        className="mr-[1.65rem] ml-[0.15rem] text-primary"
+                        className="text-primary ml-[0.15rem] mr-[1.65rem]"
                       />
                       <span>You do not have permission to read secrets in this folder</span>
                     </div>
@@ -939,11 +939,11 @@ const Page = () => {
                     </Button>
                   </div>
                 ) : !canEditSecrets || !canDeleteSecrets ? (
-                  <div className="flex border-b border-l-2 border-b-mineshaft-600 border-l-primary bg-mineshaft-700 px-4 py-2">
+                  <div className="border-b-mineshaft-600 border-l-primary bg-mineshaft-700 flex border-b border-l-2 px-4 py-2">
                     <div className="flex items-center text-sm">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
-                        className="mr-[1.65rem] ml-[0.15rem] text-primary"
+                        className="text-primary ml-[0.15rem] mr-[1.65rem]"
                       />
                       <span>
                         You do not have permission to {!canEditSecrets ? "edit" : ""}
@@ -1049,7 +1049,7 @@ const Page = () => {
                     secretRotationCount={totalSecretRotationCount}
                   />
                 }
-                className="rounded-b-md border-t border-solid border-t-mineshaft-600"
+                className="border-t-mineshaft-600 rounded-b-md border-t border-solid"
                 count={totalCount + pendingChanges.secrets.length + pendingChanges.folders.length}
                 page={page}
                 perPage={perPage}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
index d31c83512..ccdf56982 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
@@ -779,8 +779,8 @@ export const ActionBar = ({
                       {Boolean(filteredTags) && <Badge>{filteredTags} Applied</Badge>}
                     </div>
                   </DropdownSubMenuTrigger>
-                  <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
-                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
+                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
                       <div className="flex w-full items-center justify-between">
                         <span>Filter by Secret Tags</span>
                         <Tooltip content="Matches secrets with one or more of the applied tags">
@@ -921,7 +921,7 @@ export const ActionBar = ({
               <IconButton
                 ariaLabel="add-folder-or-import"
                 variant="outline_bg"
-                className="rounded-l-none bg-mineshaft-600 p-3"
+                className="bg-mineshaft-600 rounded-l-none p-3"
               >
                 <FontAwesomeIcon icon={faAngleDown} />
               </IconButton>
@@ -1065,11 +1065,11 @@ export const ActionBar = ({
           isMultiSelectActive && "h-16"
         )}
       >
-        <div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 mt-3.5 flex items-center rounded-md border px-4 py-2">
           <div className="mr-2 text-sm">{Object.keys(selectedSecrets).length} Selected</div>
           <button
             type="button"
-            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
             onClick={resetSelectedSecret}
           >
             Unselect All
@@ -1256,7 +1256,7 @@ export const ActionBar = ({
         onOpenChange={(open) => handlePopUpToggle("requestAccess", open)}
       >
         <ModalContent title="Access Restricted">
-          <p className="mb-2 text-bunker-300">You do not have permission to perform this action.</p>
+          <p className="text-bunker-300 mb-2">You do not have permission to perform this action.</p>
           <p className="text-bunker-300">Request access to perform this action in this folder.</p>
           <div className="mt-8 flex items-center gap-4">
             <ModalClose asChild>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx
index 692493980..bcbb1682e 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx
@@ -189,7 +189,7 @@ export const AwsElastiCacheInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -273,7 +273,7 @@ export const AwsElastiCacheInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify ElastiCache Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx
index 9f9cc01aa..2bc9cf322 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx
@@ -245,7 +245,7 @@ export const AwsIamInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -261,7 +261,7 @@ export const AwsIamInputForm = ({
                     <Select
                       value={value}
                       onValueChange={(val) => onChange(val)}
-                      className="w-full border border-mineshaft-500"
+                      className="border-mineshaft-500 w-full border"
                       position="popper"
                       dropdownContainerClassName="max-w-none"
                     >
@@ -289,7 +289,7 @@ export const AwsIamInputForm = ({
                       <Select
                         value={value}
                         onValueChange={(val) => onChange(val)}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         position="popper"
                         dropdownContainerClassName="max-w-none"
                       >
@@ -300,7 +300,7 @@ export const AwsIamInputForm = ({
                           Temporary Credentials
                         </SelectItem>
                       </Select>
-                      <div className="mt-1 text-xs text-mineshaft-300">
+                      <div className="text-mineshaft-300 mt-1 text-xs">
                         {value === DynamicSecretAwsIamCredentialType.IamUser
                           ? "Creates temporary IAM users with access keys"
                           : "Uses STS to generate temporary credentials from your connection. Duration is controlled by the Default TTL setting above."}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx
index 05f85a9e6..1a3973acb 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx
@@ -199,7 +199,7 @@ export const AzureEntraIdInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -267,10 +267,10 @@ export const AzureEntraIdInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Select Users
             </div>
-            <div className="mb-4 flex items-center text-sm font-normal text-mineshaft-400">
+            <div className="text-mineshaft-400 mb-4 flex items-center text-sm font-normal">
               &nbsp; We create a unique dynamic secret for each user in Entra Id.
             </div>
             <div className="flex flex-col">
@@ -300,7 +300,7 @@ export const AzureEntraIdInputForm = ({
                                   }
                                   return icon;
                                 })()}
-                                <span className="ml-4 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
+                                <span className="text-mineshaft-300 hover:text-mineshaft-200 ml-4 cursor-default">
                                   {(() => {
                                     let message;
                                     if (loading) {
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureSqlDatabaseInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureSqlDatabaseInputForm.tsx
index 56a914977..3ca7bdc0e 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureSqlDatabaseInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureSqlDatabaseInputForm.tsx
@@ -253,7 +253,7 @@ export const AzureSqlDatabaseInputForm = ({
           </div>
           <MetadataForm control={control} />
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div>
@@ -281,7 +281,7 @@ export const AzureSqlDatabaseInputForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -389,14 +389,14 @@ export const AzureSqlDatabaseInputForm = ({
                 </div>
               </div>
               <div>
-                <div className="mt-2 mb-2">
+                <div className="mb-2 mt-2">
                   <Controller
                     control={control}
                     name="provider.sslEnabled"
                     render={({ field: { value, onChange }, fieldState: { error } }) => (
                       <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                         <Switch
-                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                          className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                           id="azure-sql-ds-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={value}
@@ -427,7 +427,7 @@ export const AzureSqlDatabaseInputForm = ({
                     )}
                   />
                 )}
-                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -452,7 +452,7 @@ export const AzureSqlDatabaseInputForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Customize SQL statements for managing Azure SQL Database user lifecycle
                       </div>
                       <Controller
@@ -534,11 +534,11 @@ export const AzureSqlDatabaseInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Set constraints on the generated database password
                       </div>
                       <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx
index ef05d8a83..99fad395b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx
@@ -190,7 +190,7 @@ export const CassandraInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -301,7 +301,7 @@ export const CassandraInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify CQL Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CouchbaseInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CouchbaseInputForm.tsx
index 3cc41bf2c..5c130d473 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CouchbaseInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CouchbaseInputForm.tsx
@@ -53,7 +53,7 @@ const BucketScopesConfiguration = ({
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-mineshaft-300">Scopes</label>
+        <label className="text-mineshaft-300 text-sm font-medium">Scopes</label>
         <Button
           type="button"
           variant="outline_bg"
@@ -68,10 +68,10 @@ const BucketScopesConfiguration = ({
       {scopeFields.map((_scope: any, scopeIndex: number) => (
         <div
           key={`scope-${scopeIndex + 1}`}
-          className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
+          className="border-mineshaft-600 bg-mineshaft-700 space-y-3 rounded-sm border p-3"
         >
           <div className="flex items-center justify-between">
-            <h5 className="text-xs font-medium text-mineshaft-200">Scope {scopeIndex + 1}</h5>
+            <h5 className="text-mineshaft-200 text-xs font-medium">Scope {scopeIndex + 1}</h5>
             <IconButton
               type="button"
               variant="plain"
@@ -95,7 +95,7 @@ const BucketScopesConfiguration = ({
 
           <div className="space-y-2 pl-4">
             <div className="flex items-center justify-between">
-              <label className="text-xs font-medium text-mineshaft-300">Collections</label>
+              <label className="text-mineshaft-300 text-xs font-medium">Collections</label>
               <Button
                 type="button"
                 variant="outline_bg"
@@ -146,7 +146,7 @@ const BucketScopesConfiguration = ({
 
             {(!scopeFields[scopeIndex]?.collections ||
               scopeFields[scopeIndex].collections.length === 0) && (
-              <div className="text-xs text-mineshaft-400 italic">
+              <div className="text-mineshaft-400 text-xs italic">
                 No collections specified (access to all collections in scope)
               </div>
             )}
@@ -155,8 +155,8 @@ const BucketScopesConfiguration = ({
       ))}
 
       {scopeFields.length === 0 && (
-        <div className="rounded-sm border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
-          <p className="mb-2 text-xs text-mineshaft-400">
+        <div className="border-mineshaft-600 bg-mineshaft-700 rounded-sm border border-dashed p-4 text-center">
+          <p className="text-mineshaft-400 mb-2 text-xs">
             No scopes configured (access to all scopes in bucket)
           </p>
           <Button
@@ -462,7 +462,7 @@ export const CouchbaseInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -615,10 +615,10 @@ export const CouchbaseInputForm = ({
                   <div className="space-y-4">
                     <div className="flex items-center justify-between">
                       <div>
-                        <div className="text-sm font-medium text-mineshaft-200">
+                        <div className="text-mineshaft-200 text-sm font-medium">
                           Advanced Bucket Configuration
                         </div>
-                        <div className="text-sm text-mineshaft-400">
+                        <div className="text-mineshaft-400 text-sm">
                           Configure specific buckets with their scopes and collections. Leave scopes
                           empty for access to all scopes in a bucket.
                         </div>
@@ -639,10 +639,10 @@ export const CouchbaseInputForm = ({
                         (bucketsValue as any[]).map((_, bucketIndex) => (
                           <div
                             key={`bucket-${bucketIndex + 1}`}
-                            className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
+                            className="border-mineshaft-600 bg-mineshaft-800 space-y-4 rounded-sm border p-4"
                           >
                             <div className="flex items-center justify-between">
-                              <h4 className="text-sm font-medium text-mineshaft-200">
+                              <h4 className="text-mineshaft-200 text-sm font-medium">
                                 Bucket {bucketIndex + 1}
                               </h4>
                               <IconButton
@@ -683,8 +683,8 @@ export const CouchbaseInputForm = ({
                         ))}
 
                       {(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
-                        <div className="rounded-sm border border-dashed border-mineshaft-600 p-8 text-center">
-                          <p className="mb-2 text-sm text-mineshaft-400">No buckets configured</p>
+                        <div className="border-mineshaft-600 rounded-sm border border-dashed p-8 text-center">
+                          <p className="text-mineshaft-400 mb-2 text-sm">No buckets configured</p>
                           <Button
                             type="button"
                             variant="outline_bg"
@@ -741,23 +741,23 @@ export const CouchbaseInputForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                 <AccordionItem value="password-config">
                   <AccordionTrigger>
                     <div className="flex items-center space-x-2">
                       <span>Password Configuration (optional)</span>
                       <Tooltip content="Couchbase password requirements: minimum 8 characters, at least 1 uppercase, 1 lowercase, 1 digit, 1 special character. Cannot contain: < > ; . * & | £">
-                        <div className="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-mineshaft-600 text-xs text-mineshaft-300">
+                        <div className="bg-mineshaft-600 text-mineshaft-300 flex h-4 w-4 cursor-help items-center justify-center rounded-full text-xs">
                           ?
                         </div>
                       </Tooltip>
                     </div>
                   </AccordionTrigger>
                   <AccordionContent>
-                    <div className="mb-4 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 mb-4 text-sm">
                       Set constraints on the generated Couchbase user password (8-128 characters)
                       <br />
-                      <span className="text-xs text-mineshaft-400">
+                      <span className="text-mineshaft-400 text-xs">
                         Forbidden characters: &lt; &gt; ; . * &amp; | £
                       </span>
                     </div>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
index 3a9b8729a..6b8e6f6f3 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
@@ -210,8 +210,8 @@ export const CreateDynamicSecretForm = ({
               className="mb-0.5 ml-1.5"
               rel="noopener noreferrer"
             >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+              <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
                 <span>Docs</span>
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
@@ -233,12 +233,12 @@ export const CreateDynamicSecretForm = ({
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
+              <div className="text-mineshaft-300 mb-4">Select a service to connect to:</div>
               <div className="flex flex-wrap items-center gap-4">
                 {DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
                   <div
                     key={`dynamic-secret-provider-${provider}`}
-                    className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="border-mineshaft-500 bg-bunker-600 hover:border-primary/70 hover:bg-primary/10 flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border p-6 transition-all hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -253,7 +253,7 @@ export const CreateDynamicSecretForm = ({
                     }}
                   >
                     {icon}
-                    <div className="text-center text-sm whitespace-pre-wrap">{title}</div>
+                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
index 31d68e877..6d78eee05 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
@@ -212,7 +212,7 @@ export const ElasticSearchInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -342,7 +342,7 @@ export const ElasticSearchInputForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="cursor-pointer text-primary-400">
+                          <span className="text-primary-400 cursor-pointer">
                             read more about roles here
                           </span>
                         </a>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GcpIamInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GcpIamInputForm.tsx
index a208b1973..59b10dd73 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GcpIamInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GcpIamInputForm.tsx
@@ -162,7 +162,7 @@ export const GcpIamInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
 
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GithubInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GithubInputForm.tsx
index 776511ac4..49a32d19b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GithubInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/GithubInputForm.tsx
@@ -125,7 +125,7 @@ export const GithubInputForm = ({
                         <FontAwesomeIcon
                           icon={faQuestionCircle}
                           size="sm"
-                          className="relative right-1 bottom-px"
+                          className="relative bottom-px right-1"
                         />
                       </Tooltip>
                     }
@@ -137,7 +137,7 @@ export const GithubInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
 
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx
index 8e9206695..f291535fe 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/KubernetesInputForm.tsx
@@ -286,7 +286,7 @@ export const KubernetesInputForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -317,7 +317,7 @@ export const KubernetesInputForm = ({
                                   isDisabled={!isAllowed}
                                   value={value}
                                   onValueChange={onChange}
-                                  className="w-full border border-mineshaft-500"
+                                  className="border-mineshaft-500 w-full border"
                                   dropdownContainerClassName="max-w-none"
                                   isLoading={isGatewaysLoading}
                                   placeholder="Default: Internet Gateway"
@@ -383,7 +383,7 @@ export const KubernetesInputForm = ({
                       )}
                     />
                     <div className="mb-2 flex items-center">
-                      <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                      <span className="text-mineshaft-400 mr-3 flex items-center text-sm">
                         Enable SSL
                         <Tooltip
                           className="ml-1 max-w-md"
@@ -402,7 +402,7 @@ export const KubernetesInputForm = ({
                         control={control}
                         render={({ field: { value, onChange } }) => (
                           <Switch
-                            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                            className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                             id="ssl-enabled"
                             thumbClassName="bg-mineshaft-800"
                             isChecked={value}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx
index 824538706..a5b386d55 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx
@@ -216,7 +216,7 @@ export const LdapInputForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoAtlasInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoAtlasInputForm.tsx
index e19c09576..d43eedf1f 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoAtlasInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoAtlasInputForm.tsx
@@ -221,7 +221,7 @@ export const MongoAtlasInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -277,7 +277,7 @@ export const MongoAtlasInputForm = ({
                 {roleFields.fields.map(({ id: roleFieldId }, i) => (
                   <div key={roleFieldId} className="flex items-end space-x-2">
                     <div className="grow">
-                      {i === 0 && <span className="text-xs text-mineshaft-400">Database Name</span>}
+                      {i === 0 && <span className="text-mineshaft-400 text-xs">Database Name</span>}
                       <Controller
                         control={control}
                         name={`provider.roles.${i}.databaseName`}
@@ -296,7 +296,7 @@ export const MongoAtlasInputForm = ({
                       {i === 0 && (
                         <FormLabel
                           label="Collection Name"
-                          className="text-xs text-mineshaft-400"
+                          className="text-mineshaft-400 text-xs"
                           isOptional
                         />
                       )}
@@ -318,7 +318,7 @@ export const MongoAtlasInputForm = ({
                       {i === 0 && (
                         <FormLabel
                           label="Role"
-                          className="text-xs text-mineshaft-400"
+                          className="text-mineshaft-400 text-xs"
                           tooltipClassName="max-w-md whitespace-pre-line"
                           tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
 														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
@@ -366,7 +366,7 @@ export const MongoAtlasInputForm = ({
                   </Button>
                 </div>
               </div>
-              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                 <AccordionItem value="advance-section">
                   <AccordionTrigger>Advanced</AccordionTrigger>
                   <AccordionContent>
@@ -403,7 +403,7 @@ export const MongoAtlasInputForm = ({
                             {i === 0 && (
                               <FormLabel
                                 label="Label"
-                                className="text-xs text-mineshaft-400"
+                                className="text-mineshaft-400 text-xs"
                                 tooltipClassName="max-w-md whitespace-pre-line"
                                 tooltipText="Human-readable label that identifies the cluster or MongoDB Atlas Data Lake that this database user can access."
                               />
@@ -423,7 +423,7 @@ export const MongoAtlasInputForm = ({
                             />
                           </div>
                           <div className="grow">
-                            {i === 0 && <span className="text-xs text-mineshaft-400">Type</span>}
+                            {i === 0 && <span className="text-mineshaft-400 text-xs">Type</span>}
                             <Controller
                               control={control}
                               name={`provider.scopes.${i}.type`}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx
index 0cdb72e27..3e1577c62 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx
@@ -198,7 +198,7 @@ export const MongoDBDatabaseInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -283,7 +283,7 @@ export const MongoDBDatabaseInputForm = ({
                 tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
 														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
               />
-              <div className="mt-1 mb-3 flex flex-col space-y-2">
+              <div className="mb-3 mt-1 flex flex-col space-y-2">
                 {roleFields.fields.map(({ id: roleFieldId }, i) => (
                   <div key={roleFieldId} className="flex items-end space-x-2">
                     <div className="grow">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx
index 137ee0d95..fcea731fc 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx
@@ -201,7 +201,7 @@ export const RabbitMqInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -349,7 +349,7 @@ export const RabbitMqInputForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="cursor-pointer text-primary-400">
+                          <span className="text-primary-400 cursor-pointer">
                             Read more about management tags here
                           </span>
                         </a>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx
index 940c43c9c..354da8178 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx
@@ -183,7 +183,7 @@ export const RedisInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -268,7 +268,7 @@ export const RedisInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify Redis Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx
index b6909af2a..a97d221c9 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx
@@ -184,7 +184,7 @@ sp_droplogin '{{username}}';`
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -265,7 +265,7 @@ sp_droplogin '{{username}}';`
                 />
               </div>
               <div>
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx
index 66b974f66..c9f9abe7a 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx
@@ -184,7 +184,7 @@ DROP USER {{username}};`,
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -266,7 +266,7 @@ DROP USER {{username}};`,
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx
index abbb115a3..547d29160 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx
@@ -181,7 +181,7 @@ export const SnowflakeInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -249,7 +249,7 @@ export const SnowflakeInputForm = ({
                   )}
                 />
               </div>
-              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                   <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
index 4119cf94d..cf0009681 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
@@ -308,7 +308,7 @@ export const SqlDatabaseInputForm = ({
           </div>
           <MetadataForm control={control} />
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div>
@@ -336,7 +336,7 @@ export const SqlDatabaseInputForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -363,7 +363,7 @@ export const SqlDatabaseInputForm = ({
               </OrgPermissionCan>
             </div>
             <div className="flex flex-col">
-              <div className="pb-0.5 pl-1 text-sm text-mineshaft-400">Service</div>
+              <div className="text-mineshaft-400 pb-0.5 pl-1 text-sm">Service</div>
               <Controller
                 control={control}
                 name="provider.client"
@@ -376,7 +376,7 @@ export const SqlDatabaseInputForm = ({
                         onChange(val);
                         handleDatabaseChange(val as SqlProviders);
                       }}
-                      className="w-full border border-mineshaft-500"
+                      className="border-mineshaft-500 w-full border"
                     >
                       <SelectItem value={SqlProviders.Postgres}>PostgreSQL</SelectItem>
                       <SelectItem value={SqlProviders.MySql}>MySQL</SelectItem>
@@ -462,14 +462,14 @@ export const SqlDatabaseInputForm = ({
               </div>
               <div>
                 {selectedClient === SqlProviders.MsSQL && (
-                  <div className="mt-2 mb-2">
+                  <div className="mb-2 mt-2">
                     <Controller
                       control={control}
                       name="provider.sslEnabled"
                       render={({ field: { value, onChange }, fieldState: { error } }) => (
                         <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                           <Switch
-                            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                            className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                             id="sql-ds-ssl-enabled"
                             thumbClassName="bg-mineshaft-800"
                             isChecked={value}
@@ -499,7 +499,7 @@ export const SqlDatabaseInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -524,7 +524,7 @@ export const SqlDatabaseInputForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Customize SQL statements for managing database user lifecycle
                       </div>
                       <Controller
@@ -587,11 +587,11 @@ export const SqlDatabaseInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Set constraints on the generated database password
                       </div>
                       <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx
index 7f5693e33..ca5605779 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx
@@ -142,7 +142,7 @@ export const TotpInputForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/VerticaInputForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/VerticaInputForm.tsx
index 98cd41165..54a5e566d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/VerticaInputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/VerticaInputForm.tsx
@@ -222,7 +222,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div>
@@ -250,7 +250,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -353,7 +353,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
                 />
               </div>
               <div>
-                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
@@ -415,11 +415,11 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Set constraints on the generated database password
                       </div>
                       <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx
index 68d2d8cd0..52a56ff64 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx
@@ -161,7 +161,7 @@ export const CreateSecretImportForm = ({
                 <Select
                   value={value ? "true" : "false"}
                   onValueChange={(val) => onChange(val === "true")}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   <SelectItem value="false">Ignore secret approval policies</SelectItem>
                   <SelectItem value="true">Respect secret approval policies</SelectItem>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/FolderForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/FolderForm.tsx
index c51461fb0..421e801db 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/FolderForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/FolderForm.tsx
@@ -114,7 +114,7 @@ export const FolderForm = ({
               rows={3}
               ref={descriptionRef}
               onInput={handleInput}
-              className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
+              className="thin-scrollbar resize-none! bg-mineshaft-900 w-full"
               maxLength={255}
             />
           </FormControl>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx
index d0a9ed886..b5a1f6fc2 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx
@@ -261,7 +261,7 @@ export const ReplicateFolderFromBoard = ({
               )}
             />
           </div>
-          <div className="border-t border-mineshaft-600 pt-4">
+          <div className="border-mineshaft-600 border-t pt-4">
             <Controller
               control={control}
               name="secrets"
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx
index bfbb582a3..724c440eb 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx
@@ -113,7 +113,7 @@ const Folder: React.FC<FolderProps> = ({
           <CollapsibleTrigger asChild>
             <button
               type="button"
-              className="mr-1 flex h-6 w-6 items-center justify-center rounded-sm focus:outline-hidden"
+              className="focus:outline-hidden mr-1 flex h-6 w-6 items-center justify-center rounded-sm"
               disabled={!hasContents}
               aria-label={open ? "Collapse folder" : "Expand folder"}
             >
@@ -149,7 +149,7 @@ const Folder: React.FC<FolderProps> = ({
           </label>
 
           {allItemIds.length > 0 && (
-            <span className="ml-2 text-xs text-mineshaft-400">
+            <span className="text-mineshaft-400 ml-2 text-xs">
               {allItemIds.length} {allItemIds.length === 1 ? "item" : "items"}
             </span>
           )}
@@ -157,10 +157,10 @@ const Folder: React.FC<FolderProps> = ({
 
         <CollapsibleContent className="overflow-hidden transition-all duration-300 ease-in-out">
           <div className="relative mt-1">
-            <div className="absolute top-0 bottom-0 left-5 w-px bg-mineshaft-600" />
+            <div className="bg-mineshaft-600 absolute bottom-0 left-5 top-0 w-px" />
             {structure.items.map((item) => (
               <div key={item.id} className="group ml-6 flex items-center rounded-sm px-2 py-1">
-                <div className="mr-2 ml-6">
+                <div className="ml-6 mr-2">
                   <FontAwesomeIcon icon={faKey} className="h-3 w-3" />
                 </div>
                 {!isDisabled && (
@@ -294,11 +294,11 @@ export const SecretTreeView: React.FC<TreeViewProps> = ({
   }, [selectedItems]);
 
   return (
-    <div className="flex w-full items-start gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900">
-      <div className={`w-full rounded-lg shadow-xs ${className}`}>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full items-start gap-3 rounded-lg border">
+      <div className={`shadow-xs w-full rounded-lg ${className}`}>
         <div className="h-[25vh] overflow-auto p-3">
           {isEmptyData ? (
-            <div className="flex h-full w-full items-center justify-center text-center text-mineshaft-300">
+            <div className="text-mineshaft-300 flex h-full w-full items-center justify-center text-center">
               <p>No secrets or folders available</p>
             </div>
           ) : (
@@ -321,8 +321,8 @@ export const SecretTreeView: React.FC<TreeViewProps> = ({
         </div>
 
         {!isDisabled && (
-          <div className="flex justify-end pt-2 pr-2 pb-2">
-            <h3 className="flex items-center text-mineshaft-400">
+          <div className="flex justify-end pb-2 pr-2 pt-2">
+            <h3 className="text-mineshaft-400 flex items-center">
               {selectedItems.length} Item{selectedItems.length === 1 ? "" : "s"} Selected
             </h3>
           </div>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index 18f83cc20..8aa947d84 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -323,33 +323,33 @@ export const CommitForm: React.FC<CommitFormProps> = ({
               animate={{ opacity: 1, translateY: 0 }}
               exit={{ opacity: 0, translateY: -30 }}
             >
-              <div className="rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl">
+              <div className="border-yellow/30 bg-mineshaft-800 rounded-lg border shadow-2xl">
                 <div className="flex items-center justify-between p-4">
                   {/* Left Content */}
                   <div className="flex-1">
                     {/* Header */}
                     <div className="flex items-center gap-2">
                       <div className="h-2 w-2 rounded-full bg-yellow-500" />
-                      <span className="font-medium text-mineshaft-100">Pending Changes</span>
+                      <span className="text-mineshaft-100 font-medium">Pending Changes</span>
                       <Badge variant="primary" className="text-xs">
                         {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
                       </Badge>
                     </div>
 
                     {/* Description */}
-                    <p className="text-sm leading-5 text-mineshaft-400">
+                    <p className="text-mineshaft-400 text-sm leading-5">
                       Review pending changes and commit them to apply the updates.
                     </p>
                   </div>
 
                   {/* Right Buttons */}
-                  <div className="mt-0.5 ml-6 flex items-center gap-3">
+                  <div className="ml-6 mt-0.5 flex items-center gap-3">
                     <Button
                       size="sm"
                       onClick={() => clearAllPendingChanges({ projectId, environment, secretPath })}
                       isDisabled={totalChangesCount === 0}
                       variant="outline_bg"
-                      className="px-4 hover:border-red/40 hover:bg-red/10"
+                      className="hover:border-red/40 hover:bg-red/10 px-4"
                     >
                       Discard
                     </Button>
@@ -392,7 +392,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
                 {/* Folder Changes */}
                 {pendingChanges.folders.length > 0 && (
                   <div>
-                    <h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-medium text-mineshaft-200">
+                    <h4 className="border-mineshaft-700 text-mineshaft-200 mb-4 flex items-center gap-2 border-b pb-2 text-sm font-medium">
                       <FontAwesomeIcon icon={faFolder} className="text-mineshaft-300" />
                       Folders ({pendingChanges.folders.length})
                     </h4>
@@ -413,8 +413,8 @@ export const CommitForm: React.FC<CommitFormProps> = ({
                 {/* Secret Changes */}
                 {pendingChanges.secrets.length > 0 && (
                   <div>
-                    <h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-medium text-mineshaft-200">
-                      <FontAwesomeIcon icon={faKey} className="mr-1 text-mineshaft-300" />
+                    <h4 className="border-mineshaft-700 text-mineshaft-200 mb-4 flex items-center gap-2 border-b pb-2 text-sm font-medium">
+                      <FontAwesomeIcon icon={faKey} className="text-mineshaft-300 mr-1" />
                       Secrets ({pendingChanges.secrets.length})
                     </h4>
                     <div>
@@ -435,7 +435,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
 
             {/* Commit Message */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-mineshaft-200">
+              <label className="text-mineshaft-200 mb-2 block text-sm font-medium">
                 Commit Message <span className="text-red-400">*</span>
               </label>
               <Input
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx
index 45f1128ed..d66b69d8d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx
@@ -295,7 +295,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
               secretRotationCount={totalSecretRotationCount}
             />
           }
-          className="rounded-b-lg border border-solid border-mineshaft-500 bg-mineshaft-700"
+          className="border-mineshaft-500 bg-mineshaft-700 rounded-b-lg border border-solid"
           count={totalCount}
           page={page}
           perPage={perPage}
@@ -303,11 +303,11 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
           onChangePerPage={handlePerPageChange}
         />
       )}
-      <div className="flex thin-scrollbar flex-1 flex-col overflow-y-auto">
+      <div className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
         <TableContainer
           ref={tableRef}
           className={twMerge(
-            "mt-4 flex flex-1 flex-col border-mineshaft-500 bg-mineshaft-700",
+            "border-mineshaft-500 bg-mineshaft-700 mt-4 flex flex-1 flex-col",
             !isTableEmpty && "rounded-b-none"
           )}
         >
@@ -323,7 +323,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
           ) : isTableEmpty ? (
             <EmptyState
               titleClassName="text-base"
-              className="m-auto bg-mineshaft-700 text-lg"
+              className="bg-mineshaft-700 m-auto text-lg"
               title={
                 isTableFiltered
                   ? "No secrets to compare with current filters"
@@ -331,7 +331,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
               }
             />
           ) : (
-            <Table className="border-collapse bg-mineshaft-700">
+            <Table className="bg-mineshaft-700 border-collapse">
               <THead className="sticky top-0 z-20">
                 <Tr className="sticky top-0 z-20">
                   <Th className="sticky left-0 z-10 border-none p-0" style={{ width: colWidth }}>
@@ -344,14 +344,14 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                         }`}
                         onMouseDown={handleMouseDown}
                       />
-                      <div className="pointer-events-none absolute top-[0.67rem] -right-[0.02rem] z-30">
+                      <div className="pointer-events-none absolute -right-[0.02rem] top-[0.67rem] z-30">
                         <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
                       </div>
-                      <div className="flex h-full items-center border-r border-b-2 border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
+                      <div className="border-mineshaft-500 bg-mineshaft-700 flex h-full items-center border-b-2 border-r bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
                         Name
                         <IconButton
                           variant="plain"
-                          className="mt-[0.1rem] ml-1"
+                          className="ml-1 mt-[0.1rem]"
                           ariaLabel="sort"
                           onClick={() =>
                             setOrderDirection((prev) =>
@@ -376,12 +376,12 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
 
                     return (
                       <Th
-                        className="border-none p-0 text-center whitespace-nowrap"
+                        className="whitespace-nowrap border-none p-0 text-center"
                         key={`environment-${slug}`}
                       >
                         <div
                           className={twMerge(
-                            "flex h-full w-full items-center justify-center gap-x-2 border-b-2 border-mineshaft-500 bg-mineshaft-700 p-0 px-4 py-2.5 text-center text-sm normal-case",
+                            "border-mineshaft-500 bg-mineshaft-700 flex h-full w-full items-center justify-center gap-x-2 border-b-2 p-0 px-4 py-2.5 text-center text-sm normal-case",
                             index < compareEnvironments.length - 1 && "border-r"
                           )}
                         >
@@ -398,7 +398,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                             >
                               <Badge
                                 variant="primary"
-                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] leading-3 font-normal"
+                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] font-normal leading-3"
                               >
                                 <FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
                                 {missingKeyCount}
@@ -513,7 +513,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
-              className="max-h-[70vh] thin-scrollbar overflow-y-auto"
+              className="thin-scrollbar max-h-[70vh] overflow-y-auto"
               align="end"
               sideOffset={2}
             >
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/DynamicSecretRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/DynamicSecretRow.tsx
index 16de6533b..9e0e364d5 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/DynamicSecretRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/DynamicSecretRow/DynamicSecretRow.tsx
@@ -18,7 +18,7 @@ export const DynamicSecretRow = ({
   colWidth
 }: Props) => {
   return (
-    <Tr isHoverable className="group border-mineshaft-500">
+    <Tr isHoverable className="border-mineshaft-500 group">
       <ResourceNameCell
         label={dynamicSecretName}
         icon={faFingerprint}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/FolderRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/FolderRow.tsx
index a3d672e13..dbc48a6ac 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/FolderRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/FolderRow/FolderRow.tsx
@@ -18,7 +18,7 @@ export const FolderRow = ({
   colWidth
 }: Props) => {
   return (
-    <Tr isHoverable className="group border-mineshaft-500">
+    <Tr isHoverable className="border-mineshaft-500 group">
       <ResourceNameCell
         label={folderName}
         icon={faFolder}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/SecretRotationRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/SecretRotationRow.tsx
index fe2295fa7..ad7bd01ba 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/SecretRotationRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRotationRow/SecretRotationRow.tsx
@@ -76,7 +76,7 @@ export const SecretRotationRow = ({
                   style={{ minWidth: tableWidth, maxWidth: tableWidth }}
                   className="sticky left-0 bg-clip-padding px-0 py-0"
                 >
-                  <div className="flex h-[40px]! items-center justify-between gap-x-2 bg-mineshaft-800 px-4">
+                  <div className="h-[40px]! bg-mineshaft-800 flex items-center justify-between gap-x-2 px-4">
                     <div className="w-full">
                       <div className="flex w-full flex-wrap items-center gap-x-2.5">
                         <span>{envName}</span>
@@ -110,8 +110,8 @@ export const SecretRotationRow = ({
                     </Tooltip>
                   </div>
                   <TableContainer className="rounded-none border-0">
-                    <table className="secret-table w-full border-b-0 bg-mineshaft-900!">
-                      <tbody className="!last:border-b-0 w-full border-t-2 border-mineshaft-600">
+                    <table className="secret-table bg-mineshaft-900! w-full border-b-0">
+                      <tbody className="!last:border-b-0 border-mineshaft-600 w-full border-t-2">
                         {secrets.map((secret, index) => {
                           return (
                             <Tooltip
@@ -129,10 +129,10 @@ export const SecretRotationRow = ({
                                   style={{
                                     width: colWidth
                                   }}
-                                  className="h-px! border-none p-0!"
+                                  className="h-px! p-0! border-none"
                                 >
                                   <div
-                                    className="flex h-full flex-1 items-center border-r border-mineshaft-500 px-4 py-1"
+                                    className="border-mineshaft-500 flex h-full flex-1 items-center border-r px-4 py-1"
                                     style={{
                                       width: colWidth
                                     }}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/EnvironmentSecretRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/EnvironmentSecretRow.tsx
index 073dfd725..87db191f6 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/EnvironmentSecretRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/EnvironmentSecretRow.tsx
@@ -30,7 +30,7 @@ export const EnvironmentSecretRow = ({
           <FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
         </Tooltip>
       )}
-      <div className="flex-1 pr-2 pl-3">
+      <div className="flex-1 pl-3 pr-2">
         <InfisicalSecretInput
           onChange={() => {}}
           isReadOnly
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretNoAccessRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretNoAccessRow.tsx
index 075726d1b..179ae05fc 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretNoAccessRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretNoAccessRow.tsx
@@ -19,7 +19,7 @@ export const SecretNoAccessRow = ({ environments = [], count, colWidth }: Props)
           key={`no-access-secret-${j + 1}`}
           isHoverable
           isSelectable
-          className="group border-mineshaft-500"
+          className="border-mineshaft-500 group"
         >
           <ResourceNameCell
             label={<Blur />}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretRow.tsx
index 2313e2694..1d047f201 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/SecretRow/SecretRow.tsx
@@ -79,7 +79,7 @@ export const SecretRow = ({
         isHoverable
         isSelectable
         onClick={() => setIsFormExpanded.toggle()}
-        className="group border-mineshaft-500"
+        className="border-mineshaft-500 group"
       >
         <ResourceNameCell
           colWidth={colWidth}
@@ -131,7 +131,7 @@ export const SecretRow = ({
               <TableContainer className="rounded-none border-0">
                 <table className="secret-table bg-mineshaft-900">
                   <thead>
-                    <tr className="h-10 border-b-2 border-mineshaft-600 bg-mineshaft-800">
+                    <tr className="border-mineshaft-600 bg-mineshaft-800 h-10 border-b-2">
                       <th
                         style={{
                           width: colWidth
@@ -143,7 +143,7 @@ export const SecretRow = ({
                       <th style={{ padding: "0.5rem 1rem" }} className="border-none">
                         Value
                       </th>
-                      <div className="absolute top-[4px] right-3 mt-1 mr-1 ml-auto w-min">
+                      <div className="absolute right-3 top-[4px] ml-auto mr-1 mt-1 w-min">
                         <Tooltip
                           side="left"
                           content={isSecretVisible ? "Hide Values" : "Reveal Values"}
@@ -160,7 +160,7 @@ export const SecretRow = ({
                       </div>
                     </tr>
                   </thead>
-                  <tbody className="border-t-2 border-mineshaft-600">
+                  <tbody className="border-mineshaft-600 border-t-2">
                     {environments.map(({ name, slug }) => {
                       const secret = getSecretByKey(slug, secretKey);
 
@@ -170,10 +170,10 @@ export const SecretRow = ({
                       return (
                         <tr
                           key={`secret-expanded-${slug}-${secretKey}`}
-                          className="h-full hover:bg-mineshaft-700/70"
+                          className="hover:bg-mineshaft-700/70 h-full"
                         >
                           <td
-                            className="h-px border-none p-0!"
+                            className="p-0! h-px border-none"
                             style={{
                               width: colWidth
                             }}
@@ -183,7 +183,7 @@ export const SecretRow = ({
                               style={{
                                 width: colWidth
                               }}
-                              className="flex h-full min-h-[40px] w-32 items-center space-x-2 border-r border-mineshaft-500 px-4"
+                              className="border-mineshaft-500 flex h-full min-h-[40px] w-32 items-center space-x-2 border-r px-4"
                             >
                               <span className="truncate">{name}</span>
                               {isImportedSecret && (
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/EnvironmentStatusCell.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/EnvironmentStatusCell.tsx
index fa5d2f8bb..21087cd6a 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/EnvironmentStatusCell.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/EnvironmentStatusCell.tsx
@@ -51,7 +51,7 @@ export const EnvironmentStatusCell = ({ isLast, status }: Props) => {
   return (
     <Td
       className={twMerge(
-        "border-b border-mineshaft-500 bg-clip-padding p-0 group-hover:bg-mineshaft-600",
+        "border-mineshaft-500 group-hover:bg-mineshaft-600 border-b bg-clip-padding p-0",
         (status === "present" || status === "imported") && "text-green-600",
         status === "empty" && "text-yellow",
         status === "missing" && "text-red-600",
@@ -60,7 +60,7 @@ export const EnvironmentStatusCell = ({ isLast, status }: Props) => {
     >
       <div
         className={twMerge(
-          "flex h-10 items-center justify-center border-mineshaft-500 px-0 py-3",
+          "border-mineshaft-500 flex h-10 items-center justify-center px-0 py-3",
           !isLast && "border-r"
         )}
       >
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/ResourceNameCell.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/ResourceNameCell.tsx
index 079b563d5..d92d8e269 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/ResourceNameCell.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/components/shared/ResourceNameCell.tsx
@@ -24,7 +24,7 @@ export const ResourceNameCell = ({
 }: Props) => {
   return (
     <Td
-      className="sticky left-0 z-10 border-b border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 group-hover:bg-mineshaft-600"
+      className="border-mineshaft-500 bg-mineshaft-700 group-hover:bg-mineshaft-600 sticky left-0 z-10 border-b bg-clip-padding p-0"
       style={{
         width: colWidth
       }}
@@ -34,7 +34,7 @@ export const ResourceNameCell = ({
           style={{
             width: colWidth
           }}
-          className="flex h-10 items-center space-x-5 border-r border-mineshaft-600 px-4 py-2.5"
+          className="border-mineshaft-600 flex h-10 items-center space-x-5 border-r px-4 py-2.5"
         >
           <div className="w-5 min-w-5">
             <FontAwesomeIcon className={iconClassName} icon={isRowExpanded ? faAngleDown : icon} />
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
index dd0561495..2227c6f8d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -187,7 +187,7 @@ export const CreateSecretForm = ({
                     Secret key contains whitespaces.
                     <br />
                     <br /> If this is the desired format, you need to provide it as{" "}
-                    <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                    <code className="bg-mineshaft-500 rounded-md px-1 py-0.5">
                       {encodeURIComponent(secretKey.trim())}
                     </code>{" "}
                     when making API requests.
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
index 1a16e6e4e..15e2588f3 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
@@ -49,7 +49,7 @@ const OutputDisplay = ({
           ariaLabel="Copy to clipboard"
           variant="plain"
           size="md"
-          className="absolute top-7 right-2"
+          className="absolute right-2 top-7"
           onClick={() => {
             navigator.clipboard.writeText(value as string);
             setCopyText("Copied");
@@ -167,7 +167,7 @@ const renderOutputForm = (
         <OutputDisplay label="AWS IAM Access Key" value={ACCESS_KEY} />
         <OutputDisplay label="AWS IAM Secret Key" value={SECRET_ACCESS_KEY} />
         {SESSION_TOKEN && <OutputDisplay label="AWS IAM Session Token" value={SESSION_TOKEN} />}
-        <div className="mt-2 text-xs text-mineshaft-300">
+        <div className="text-mineshaft-300 mt-2 text-xs">
           Important: Copy these credentials now. You will not be able to see them again after you
           close the modal.
         </div>
@@ -642,7 +642,7 @@ export const CreateDynamicSecretLease = ({
   const isOutputMode = Boolean(createDynamicSecretLease?.data);
 
   if (isPreloading) {
-    return <Spinner className="mx-auto h-40 text-mineshaft-700" />;
+    return <Spinner className="text-mineshaft-700 mx-auto h-40" />;
   }
 
   // Github tokens are fixed to 1 hour
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx
index 1ef140193..27ec6241e 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx
@@ -92,7 +92,7 @@ export const DynamicSecretListView = ({
             onOpenChange={(state) => handlePopUpToggle("dynamicSecretLeases", state)}
           >
             <div
-              className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+              className="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
               role="button"
               tabIndex={0}
               onKeyDown={(evt) => {
@@ -182,7 +182,7 @@ export const DynamicSecretListView = ({
                   </Tooltip>
                 )}
               </div>
-              <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
+              <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
                 <ProjectPermissionCan
                   I={ProjectPermissionDynamicSecretActions.EditRootCredential}
                   a={subject(ProjectPermissionSub.DynamicSecrets, {
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsElastiCacheProviderForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsElastiCacheProviderForm.tsx
index f741e8215..4c12bd16c 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsElastiCacheProviderForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsElastiCacheProviderForm.tsx
@@ -181,7 +181,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -265,7 +265,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify ElastiCache Statements</AccordionTrigger>
                   <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx
index 687d0d52b..91fe4535e 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx
@@ -221,7 +221,7 @@ export const EditDynamicSecretAwsIamForm = ({
           </div>
         </div>
         <div>
-          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
           <div className="flex flex-col">
             <Controller
               name="inputs.method"
@@ -235,7 +235,7 @@ export const EditDynamicSecretAwsIamForm = ({
                   <Select
                     value={value}
                     onValueChange={(val) => onChange(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     position="popper"
                     dropdownContainerClassName="max-w-none"
                   >
@@ -263,7 +263,7 @@ export const EditDynamicSecretAwsIamForm = ({
                     <Select
                       value={value}
                       onValueChange={(val) => onChange(val)}
-                      className="w-full border border-mineshaft-500"
+                      className="border-mineshaft-500 w-full border"
                       position="popper"
                       dropdownContainerClassName="max-w-none"
                     >
@@ -274,7 +274,7 @@ export const EditDynamicSecretAwsIamForm = ({
                         Temporary Credentials
                       </SelectItem>
                     </Select>
-                    <div className="mt-1 text-xs text-mineshaft-300">
+                    <div className="text-mineshaft-300 mt-1 text-xs">
                       {value === DynamicSecretAwsIamCredentialType.IamUser
                         ? "Creates temporary IAM users with access keys"
                         : "Uses STS to generate temporary credentials from your connection. Duration is controlled by the Default TTL setting above."}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureSqlDatabaseForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureSqlDatabaseForm.tsx
index 36be1b8e5..c6d772d98 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureSqlDatabaseForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureSqlDatabaseForm.tsx
@@ -245,7 +245,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
           </div>
           <MetadataForm control={control} />
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div>
@@ -272,7 +272,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -376,14 +376,14 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                 </div>
               </div>
               <div>
-                <div className="mt-2 mb-2">
+                <div className="mb-2 mt-2">
                   <Controller
                     control={control}
                     name="inputs.sslEnabled"
                     render={({ field: { value, onChange }, fieldState: { error } }) => (
                       <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                         <Switch
-                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                          className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                           id="azure-sql-edit-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={value}
@@ -414,7 +414,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                     )}
                   />
                 )}
-                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -438,7 +438,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Customize SQL statements for managing Azure SQL Database user lifecycle
                       </div>
                       <Controller
@@ -520,11 +520,11 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Set constraints on the generated database password
                       </div>
                       <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx
index 3b95dc8d3..408844105 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx
@@ -183,7 +183,7 @@ export const EditDynamicSecretCassandraForm = ({
           </div>
         </div>
         <div>
-          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
           <div className="flex flex-col">
             <div className="flex items-center space-x-2">
               <Controller
@@ -296,7 +296,7 @@ export const EditDynamicSecretCassandraForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="w-full bg-mineshaft-700">
+              <Accordion type="multiple" className="bg-mineshaft-700 w-full">
                 <AccordionItem value="modify-sql-statement">
                   <AccordionTrigger>Modify CQL Statements</AccordionTrigger>
                   <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCouchbaseForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCouchbaseForm.tsx
index 4282ae256..536809921 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCouchbaseForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCouchbaseForm.tsx
@@ -53,7 +53,7 @@ const BucketScopesConfiguration = ({
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-mineshaft-300">Scopes</label>
+        <label className="text-mineshaft-300 text-sm font-medium">Scopes</label>
         <Button
           type="button"
           variant="outline_bg"
@@ -68,10 +68,10 @@ const BucketScopesConfiguration = ({
       {scopeFields.map((_scope: any, scopeIndex: number) => (
         <div
           key={`scope-${scopeIndex + 1}`}
-          className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
+          className="border-mineshaft-600 bg-mineshaft-700 space-y-3 rounded-sm border p-3"
         >
           <div className="flex items-center justify-between">
-            <h5 className="text-xs font-medium text-mineshaft-200">Scope {scopeIndex + 1}</h5>
+            <h5 className="text-mineshaft-200 text-xs font-medium">Scope {scopeIndex + 1}</h5>
             <IconButton
               type="button"
               variant="plain"
@@ -95,7 +95,7 @@ const BucketScopesConfiguration = ({
 
           <div className="space-y-2 pl-4">
             <div className="flex items-center justify-between">
-              <label className="text-xs font-medium text-mineshaft-300">Collections</label>
+              <label className="text-mineshaft-300 text-xs font-medium">Collections</label>
               <Button
                 type="button"
                 variant="outline_bg"
@@ -145,7 +145,7 @@ const BucketScopesConfiguration = ({
 
             {(!scopeFields[scopeIndex]?.collections ||
               scopeFields[scopeIndex].collections.length === 0) && (
-              <div className="text-xs text-mineshaft-400 italic">
+              <div className="text-mineshaft-400 text-xs italic">
                 No collections specified (access to all collections in scope)
               </div>
             )}
@@ -154,8 +154,8 @@ const BucketScopesConfiguration = ({
       ))}
 
       {scopeFields.length === 0 && (
-        <div className="rounded-sm border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
-          <p className="mb-2 text-xs text-mineshaft-400">
+        <div className="border-mineshaft-600 bg-mineshaft-700 rounded-sm border border-dashed p-4 text-center">
+          <p className="text-mineshaft-400 mb-2 text-xs">
             No scopes configured (access to all scopes in bucket)
           </p>
           <Button
@@ -474,7 +474,7 @@ export const EditDynamicSecretCouchbaseForm = ({
           </div>
           <MetadataForm control={control} />
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col space-y-4">
@@ -622,10 +622,10 @@ export const EditDynamicSecretCouchbaseForm = ({
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <div className="text-sm font-medium text-mineshaft-200">
+                      <div className="text-mineshaft-200 text-sm font-medium">
                         Advanced Bucket Configuration
                       </div>
-                      <div className="text-sm text-mineshaft-400">
+                      <div className="text-mineshaft-400 text-sm">
                         Configure specific buckets with their scopes and collections. Leave scopes
                         empty for access to all scopes in a bucket.
                       </div>
@@ -646,10 +646,10 @@ export const EditDynamicSecretCouchbaseForm = ({
                       (bucketsValue as any[]).map((_, bucketIndex) => (
                         <div
                           key={`bucket-${bucketIndex + 1}`}
-                          className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
+                          className="border-mineshaft-600 bg-mineshaft-800 space-y-4 rounded-sm border p-4"
                         >
                           <div className="flex items-center justify-between">
-                            <h4 className="text-sm font-medium text-mineshaft-200">
+                            <h4 className="text-mineshaft-200 text-sm font-medium">
                               Bucket {bucketIndex + 1}
                             </h4>
                             <IconButton
@@ -690,8 +690,8 @@ export const EditDynamicSecretCouchbaseForm = ({
                       ))}
 
                     {(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
-                      <div className="rounded-sm border border-dashed border-mineshaft-600 p-8 text-center">
-                        <p className="mb-2 text-sm text-mineshaft-400">No buckets configured</p>
+                      <div className="border-mineshaft-600 rounded-sm border border-dashed p-8 text-center">
+                        <p className="text-mineshaft-400 mb-2 text-sm">No buckets configured</p>
                         <Button
                           type="button"
                           variant="outline_bg"
@@ -745,23 +745,23 @@ export const EditDynamicSecretCouchbaseForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                 <AccordionItem value="password-config">
                   <AccordionTrigger>
                     <div className="flex items-center space-x-2">
                       <span>Password Configuration (optional)</span>
                       <Tooltip content="Couchbase password requirements: minimum 8 characters, at least 1 uppercase, 1 lowercase, 1 digit, 1 special character. Cannot contain: < > ; . * & | �">
-                        <div className="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-mineshaft-600 text-xs text-mineshaft-300">
+                        <div className="bg-mineshaft-600 text-mineshaft-300 flex h-4 w-4 cursor-help items-center justify-center rounded-full text-xs">
                           ?
                         </div>
                       </Tooltip>
                     </div>
                   </AccordionTrigger>
                   <AccordionContent>
-                    <div className="mb-4 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 mb-4 text-sm">
                       Set constraints on the generated Couchbase user password (8-128 characters)
                       <br />
-                      <span className="text-xs text-mineshaft-400">
+                      <span className="text-mineshaft-400 text-xs">
                         Forbidden characters: &lt; &gt; ; . * &amp; | �
                       </span>
                     </div>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
index e519423a5..c02aa9000 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
@@ -210,7 +210,7 @@ export const EditDynamicSecretElasticSearchForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -332,7 +332,7 @@ export const EditDynamicSecretElasticSearchForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="cursor-pointer text-primary-400">
+                          <span className="text-primary-400 cursor-pointer">
                             read more about roles here
                           </span>
                         </a>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGcpIamForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGcpIamForm.tsx
index fb313f730..6ba10d051 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGcpIamForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGcpIamForm.tsx
@@ -155,7 +155,7 @@ export const EditDynamicSecretGcpIamForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
 
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGithubForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGithubForm.tsx
index 434bc9465..c30337714 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGithubForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretGithubForm.tsx
@@ -115,7 +115,7 @@ export const EditDynamicSecretGithubForm = ({
                         <FontAwesomeIcon
                           icon={faQuestionCircle}
                           size="sm"
-                          className="relative right-1 bottom-px"
+                          className="relative bottom-px right-1"
                         />
                       </Tooltip>
                     }
@@ -127,7 +127,7 @@ export const EditDynamicSecretGithubForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
 
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretKubernetesForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretKubernetesForm.tsx
index 0858816bf..933519dbf 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretKubernetesForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretKubernetesForm.tsx
@@ -278,7 +278,7 @@ export const EditDynamicSecretKubernetesForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -309,7 +309,7 @@ export const EditDynamicSecretKubernetesForm = ({
                                     isDisabled={!isAllowed}
                                     value={value}
                                     onValueChange={onChange}
-                                    className="w-full border border-mineshaft-500"
+                                    className="border-mineshaft-500 w-full border"
                                     dropdownContainerClassName="max-w-none"
                                     isLoading={isGatewaysLoading}
                                     placeholder="Default: Internet Gateway"
@@ -376,7 +376,7 @@ export const EditDynamicSecretKubernetesForm = ({
                       />
 
                       <div className="mb-2 flex items-center">
-                        <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                        <span className="text-mineshaft-400 mr-3 flex items-center text-sm">
                           Enable SSL
                           <Tooltip
                             className="ml-1 max-w-md"
@@ -395,7 +395,7 @@ export const EditDynamicSecretKubernetesForm = ({
                           control={control}
                           render={({ field: { value, onChange } }) => (
                             <Switch
-                              className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                              className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                               id="ssl-enabled"
                               thumbClassName="bg-mineshaft-800"
                               isChecked={value}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx
index c381f395c..530e1ac87 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx
@@ -222,7 +222,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -278,7 +278,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
               {roleFields.fields.map(({ id: roleFieldId }, i) => (
                 <div key={roleFieldId} className="flex items-end space-x-2">
                   <div className="grow">
-                    {i === 0 && <span className="text-xs text-mineshaft-400">Database Name</span>}
+                    {i === 0 && <span className="text-mineshaft-400 text-xs">Database Name</span>}
                     <Controller
                       control={control}
                       name={`inputs.roles.${i}.databaseName`}
@@ -297,7 +297,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                     {i === 0 && (
                       <FormLabel
                         label="Collection Name"
-                        className="text-xs text-mineshaft-400"
+                        className="text-mineshaft-400 text-xs"
                         isOptional
                       />
                     )}
@@ -319,7 +319,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                     {i === 0 && (
                       <FormLabel
                         label="Role"
-                        className="text-xs text-mineshaft-400"
+                        className="text-mineshaft-400 text-xs"
                         tooltipClassName="max-w-md whitespace-pre-line"
                         tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
 														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
@@ -367,7 +367,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                 </Button>
               </div>
             </div>
-            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+            <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
               <AccordionItem value="advance-section">
                 <AccordionTrigger>Advanced</AccordionTrigger>
                 <AccordionContent>
@@ -403,7 +403,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                           {i === 0 && (
                             <FormLabel
                               label="Label"
-                              className="text-xs text-mineshaft-400"
+                              className="text-mineshaft-400 text-xs"
                               tooltipClassName="max-w-md whitespace-pre-line"
                               tooltipText="Human-readable label that identifies the cluster or MongoDB Atlas Data Lake that this database user can access."
                             />
@@ -423,7 +423,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                           />
                         </div>
                         <div className="grow">
-                          {i === 0 && <span className="text-xs text-mineshaft-400">Type</span>}
+                          {i === 0 && <span className="text-mineshaft-400 text-xs">Type</span>}
                           <Controller
                             control={control}
                             name={`inputs.scopes.${i}.type`}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx
index 689a56b95..77ff94581 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx
@@ -193,7 +193,7 @@ export const EditDynamicSecretMongoDBForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -278,7 +278,7 @@ export const EditDynamicSecretMongoDBForm = ({
               tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
 														Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
             />
-            <div className="mt-1 mb-3 flex flex-col space-y-2">
+            <div className="mb-3 mt-1 flex flex-col space-y-2">
               {roleFields.fields.map(({ id: roleFieldId }, i) => (
                 <div key={roleFieldId} className="flex items-end space-x-2">
                   <div className="grow">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx
index ab40914f4..e0f35b990 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx
@@ -186,7 +186,7 @@ export const EditDynamicSecretRabbitMqForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -334,7 +334,7 @@ export const EditDynamicSecretRabbitMqForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="cursor-pointer text-primary-400">
+                          <span className="text-primary-400 cursor-pointer">
                             Read more about management tags here
                           </span>
                         </a>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx
index d77c605e1..2583c2289 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx
@@ -183,7 +183,7 @@ export const EditDynamicSecretRedisProviderForm = ({
           </div>
         </div>
         <div>
-          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+          <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -267,7 +267,7 @@ export const EditDynamicSecretRedisProviderForm = ({
                 </FormControl>
               )}
             />
-            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+            <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
               <AccordionItem value="advance-statements">
                 <AccordionTrigger>Modify Redis Statements</AccordionTrigger>
                 <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx
index 86327a767..daf834e96 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx
@@ -185,7 +185,7 @@ export const EditDynamicSecretSapAseForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -280,7 +280,7 @@ export const EditDynamicSecretSapAseForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx
index 8051f883c..c245f3120 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx
@@ -185,7 +185,7 @@ export const EditDynamicSecretSapHanaForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -267,7 +267,7 @@ export const EditDynamicSecretSapHanaForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx
index 5e23cb2a3..a297b4551 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx
@@ -182,7 +182,7 @@ export const EditDynamicSecretSnowflakeForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -249,7 +249,7 @@ export const EditDynamicSecretSnowflakeForm = ({
                 />
               </div>
 
-              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
                 <AccordionItem value="advance-statements">
                   <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                   <AccordionContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx
index 6beeba169..119ad0f56 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx
@@ -253,7 +253,7 @@ export const EditDynamicSecretSqlProviderForm = ({
         </div>
         <MetadataForm control={control} />
         <div>
-          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
           <div>
             <OrgPermissionCan
               I={OrgGatewayPermissionActions.AttachGateways}
@@ -284,7 +284,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                             isDisabled={!isAllowed}
                             value={value || undefined}
                             onValueChange={onChange}
-                            className="w-full border border-mineshaft-500"
+                            className="border-mineshaft-500 w-full border"
                             dropdownContainerClassName="max-w-none"
                             isLoading={isGatewaysLoading}
                             placeholder="Default: Internet Gateway"
@@ -321,7 +321,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                     isDisabled
                     value={value}
                     onValueChange={(val) => onChange(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                   >
                     <SelectItem value={SqlProviders.Postgres}>PostgreSQL</SelectItem>
                     <SelectItem value={SqlProviders.MySql}>MySQL</SelectItem>
@@ -411,14 +411,14 @@ export const EditDynamicSecretSqlProviderForm = ({
             </div>
             <div>
               {selectedClient === SqlProviders.MsSQL && (
-                <div className="mt-2 mb-2">
+                <div className="mb-2 mt-2">
                   <Controller
                     control={control}
                     name="inputs.sslEnabled"
                     render={({ field: { value, onChange }, fieldState: { error } }) => (
                       <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
                         <Switch
-                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                          className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                           id="sql-ds-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={Boolean(value)}
@@ -448,7 +448,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                 <AccordionItem value="advanced">
                   <AccordionTrigger>
                     Creation, Revocation & Renew Statements (optional)
@@ -472,7 +472,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                         </FormControl>
                       )}
                     />
-                    <div className="mb-4 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 mb-4 text-sm">
                       Customize SQL statements for managing database user lifecycle
                     </div>
                     <Controller
@@ -542,11 +542,11 @@ export const EditDynamicSecretSqlProviderForm = ({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
-              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                 <AccordionItem value="password-config">
                   <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                   <AccordionContent>
-                    <div className="mb-4 text-sm text-mineshaft-300">
+                    <div className="text-mineshaft-300 mb-4 text-sm">
                       Set constraints on the generated database password
                     </div>
                     <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
index 7b4a4dac3..d4509dc35 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
@@ -134,7 +134,7 @@ export const EditDynamicSecretTotpForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div className="flex flex-col">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretVertica.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretVertica.tsx
index e2f3e5b4d..06305b49a 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretVertica.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretVertica.tsx
@@ -231,7 +231,7 @@ export const EditDynamicSecretVerticaForm = ({
             </div>
           </div>
           <div>
-            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
               Configuration
             </div>
             <div>
@@ -264,7 +264,7 @@ export const EditDynamicSecretVerticaForm = ({
                               isDisabled={!isAllowed}
                               value={value || undefined}
                               onValueChange={onChange}
-                              className="w-full border border-mineshaft-500"
+                              className="border-mineshaft-500 w-full border"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -365,7 +365,7 @@ export const EditDynamicSecretVerticaForm = ({
                 />
               </div>
               <div>
-                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
@@ -426,11 +426,11 @@ export const EditDynamicSecretVerticaForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
+                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="mb-4 text-sm text-mineshaft-300">
+                      <div className="text-mineshaft-300 mb-4 text-sm">
                         Set constraints on the generated database password
                       </div>
                       <div className="space-y-4">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm.tsx
index 8eb799bf2..18a56bf6b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm.tsx
@@ -26,7 +26,7 @@ export const MetadataForm = ({
         {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
           <div key={metadataFieldId} className="flex items-end space-x-2">
             <div className="grow">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
               <Controller
                 control={control}
                 name={`${name}.${i}.key`}
@@ -45,7 +45,7 @@ export const MetadataForm = ({
               {i === 0 && (
                 <FormLabel
                   label="Value"
-                  className="text-xs text-mineshaft-400"
+                  className="text-mineshaft-400 text-xs"
                   isOptional={!isValueRequired}
                 />
               )}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx
index 9fee4ed92..09b95055b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx
@@ -148,12 +148,12 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
                 </Tab>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="max-h-[70vh] thin-scrollbar overflow-y-auto"
+                className="thin-scrollbar max-h-[70vh] overflow-y-auto"
                 sideOffset={2}
                 align="center"
               >
                 <DropdownMenuLabel>Environments</DropdownMenuLabel>
-                <div className="max-h-[40vh] thin-scrollbar overflow-auto">
+                <div className="thin-scrollbar max-h-[40vh] overflow-auto">
                   {dropdownEnvironments.map((environment) => (
                     <DropdownMenuItem
                       key={environment.id}
@@ -166,7 +166,7 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
                     </DropdownMenuItem>
                   ))}
                 </div>
-                <div className="h-1 border-t border-mineshaft-600" />
+                <div className="border-mineshaft-600 h-1 border-t" />
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Create}
                   a={ProjectPermissionSub.Environments}
@@ -217,7 +217,7 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
         <ModalContent
           title="Compare Environments"
           subTitle="Compare secrets across multiple environments"
-          className="flex h-full w-[95vw]! max-w-none flex-col"
+          className="w-[95vw]! flex h-full max-w-none flex-col"
           bodyClassName="flex-1 flex flex-col overflow-hidden"
         >
           <CompareEnvironments secretPath={secretPath} />
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
index 7dc189c42..03dd951fc 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx
@@ -22,7 +22,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/" }: Props) => {
   return (
     <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-3">
       <div
-        className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
+        className="breadcrumb border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 relative z-20 border-solid py-1 pl-5 pr-2 text-sm"
         onClick={() => onFolderCrumbClick(0)}
         onKeyDown={() => null}
         role="button"
@@ -38,7 +38,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/" }: Props) => {
             key={`secret-path-${index + 1}`}
             className={`breadcrumb relative z-20 ${
               index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
-            } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
+            } border-mineshaft-600 text-mineshaft-200 border-solid py-1 pl-5 pr-2 text-sm`}
             onClick={() => onFolderCrumbClick(index + 1)}
             onKeyDown={() => null}
             role="button"
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx
index bd812b837..3f53b5f9b 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx
@@ -207,7 +207,7 @@ export const FolderListView = ({
         <div
           key={id}
           className={twMerge(
-            "group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700",
+            "border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b",
             isPending && "bg-mineshaft-700/60",
             pendingAction === PendingAction.Delete && "border-l-2 border-l-red-600/75",
             pendingAction === PendingAction.Update && "border-l-2 border-l-yellow-600/75",
@@ -230,15 +230,15 @@ export const FolderListView = ({
             {description && (
               <Tooltip
                 position="right"
-                className="flex max-w-lg items-center space-x-4 py-4 whitespace-pre-wrap"
+                className="flex max-w-lg items-center space-x-4 whitespace-pre-wrap py-4"
                 content={description}
               >
-                <FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
+                <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
               </Tooltip>
             )}
           </div>
           {isPending ? (
-            <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
+            <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
               <IconButton
                 ariaLabel="edit-folder"
                 variant="plain"
@@ -261,7 +261,7 @@ export const FolderListView = ({
               </IconButton>
             </div>
           ) : (
-            <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
+            <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
               <ProjectPermissionCan
                 I={ProjectPermissionActions.Edit}
                 a={subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
index bda170e6e..a07498834 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -41,13 +41,13 @@ export const PitDrawer = ({
       >
         <div className="flex flex-col space-y-2">
           <NoticeBannerV2 title="Snapshots are being deprecated" className="mb-2">
-            <p className="my-1 text-sm text-mineshaft-300">
+            <p className="text-mineshaft-300 my-1 text-sm">
               Snapshots will be replaced by{" "}
               <a
                 target="_blank"
                 href="https://infisical.com/docs/documentation/platform/pit-recovery"
                 rel="noopener noreferrer"
-                className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+                className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
               >
                 Commits
               </a>{" "}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/CopySecretsFromBoard.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/CopySecretsFromBoard.tsx
index ef56c2e3b..18e6d3c47 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/CopySecretsFromBoard.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/CopySecretsFromBoard.tsx
@@ -190,7 +190,7 @@ export const CopySecretsFromBoard = ({
               )}
             />
           </div>
-          <div className="border-t border-mineshaft-600 pt-4">
+          <div className="border-mineshaft-600 border-t pt-4">
             <div className="mb-4 flex items-center justify-between">
               <div>Secrets</div>
             </div>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/PasteSecretEnvModal.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/PasteSecretEnvModal.tsx
index c31afc983..31e77a06d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/PasteSecretEnvModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/PasteSecretEnvModal.tsx
@@ -72,7 +72,7 @@ const PasteEnvForm = ({ onParsedEnv }: Pick<Props, "onParsedEnv">) => {
         tooltipText={
           <div className="flex flex-col gap-2">
             <p>Example Formats:</p>
-            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+            <pre className="bg-mineshaft-900 rounded-md p-3 text-xs">
               {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}
               <p className="text-mineshaft-400">// .json</p>
               {JSON.stringify(
@@ -85,13 +85,13 @@ const PasteEnvForm = ({ onParsedEnv }: Pick<Props, "onParsedEnv">) => {
                 2
               )}
             </pre>
-            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+            <pre className="bg-mineshaft-900 rounded-md p-3 text-xs">
               <p className="text-mineshaft-400"># .env</p>
               <p>APP_NAME=&quot;example-service&quot;</p>
               <p>APP_VERSION=&quot;1.2.3&quot;</p>
               <p>NODE_ENV=&quot;production&quot;</p>
             </pre>
-            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+            <pre className="bg-mineshaft-900 rounded-md p-3 text-xs">
               <p className="text-mineshaft-400"># .yml</p>
               <p>APP_NAME: example-service</p>
               <p>APP_VERSION: 1.2.3</p>
@@ -103,7 +103,7 @@ const PasteEnvForm = ({ onParsedEnv }: Pick<Props, "onParsedEnv">) => {
         <TextArea
           {...register("value")}
           placeholder="Paste secrets in .json, .yml or .env format..."
-          className="h-[60vh] resize-none!"
+          className="resize-none! h-[60vh]"
         />
       </FormControl>
       <Button isDisabled={!isDirty} type="submit">
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx
index 319c2c9bf..4116114d0 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx
@@ -89,7 +89,7 @@ const MatrixImportModalTableRow = ({
               [mapKey]: v ? parseInt(v, 10) : null
             }))
           }
-          className="w-full border border-mineshaft-500"
+          className="border-mineshaft-500 w-full border"
           position="popper"
           placeholder="Select an option..."
           dropdownContainerClassName="max-w-none"
@@ -104,14 +104,14 @@ const MatrixImportModalTableRow = ({
           })}
         </Select>
       </td>
-      <td className="pr-5 pl-5 whitespace-nowrap">
+      <td className="whitespace-nowrap pl-5 pr-5">
         <div className="flex items-center justify-center">
           <FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
         </div>
       </td>
       <td className="whitespace-nowrap">
         <div className="flex h-full items-start justify-center">
-          <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
+          <Badge className="border-mineshaft-600 bg-mineshaft-600 text-bunker-200 pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border">
             {mapKey === "key" && (
               <>
                 <FontAwesomeIcon icon={faKey} />
@@ -400,7 +400,7 @@ export const SecretDropzone = ({
         onDragOver={handleDrag}
         onDrop={handleDrop}
         className={twMerge(
-          "relative mx-0.5 mt-4 mb-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 px-2 py-4 text-sm text-mineshaft-200 opacity-60 outline-2 outline-chicago-600 duration-200 outline-dashed hover:opacity-100",
+          "bg-mineshaft-900 text-mineshaft-200 outline-chicago-600 relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md px-2 py-4 text-sm opacity-60 outline-dashed outline-2 duration-200 hover:opacity-100",
           isDragActive && "opacity-100",
           !isSmaller && "mx-auto mt-40 w-full max-w-3xl flex-col space-y-4 py-20",
           isLoading && "bg-bunker-800"
@@ -444,9 +444,9 @@ export const SecretDropzone = ({
                 isSmaller && "py-1"
               )}
             >
-              <div className="w-1/5 border-t border-mineshaft-700" />
-              <p className="mx-4 text-xs text-mineshaft-400">OR</p>
-              <div className="w-1/5 border-t border-mineshaft-700" />
+              <div className="border-mineshaft-700 w-1/5 border-t" />
+              <p className="text-mineshaft-400 mx-4 text-xs">OR</p>
+              <div className="border-mineshaft-700 w-1/5 border-t" />
             </div>
             <div className="flex flex-col items-center justify-center gap-4 lg:flex-row">
               <PasteSecretEnvModal
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx
index d4e7d42d5..a7b5690c7 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx
@@ -59,7 +59,7 @@ export const EnvFolderIcon = ({
   <div className="inline-flex items-center space-x-2">
     <div style={{ minWidth: "96px" }}>{env || "-"}</div>
     {secretPath && (
-      <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
+      <div className="border-mineshaft-600 inline-flex items-center space-x-2 border-l pl-2">
         {/* {isReplication && <Tag size="xs">Replication Mode</Tag>} */}
         <FontAwesomeIcon icon={faFolder} className="text-md text-green-700" />
         <span>{secretPath}</span>
@@ -154,7 +154,7 @@ export const SecretImportItem = ({
     <>
       <div
         className={twMerge(
-          "group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700",
+          "border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b",
           isReserved && "hidden"
         )}
         role="button"
@@ -171,7 +171,7 @@ export const SecretImportItem = ({
         <div className="flex w-11 items-center py-2 pl-5 text-green-700">
           <FontAwesomeIcon icon={faFileImport} />
         </div>
-        <div className="flex grow items-center py-2 pr-2 pl-4">
+        <div className="flex grow items-center py-2 pl-4 pr-2">
           <EnvFolderIcon
             env={importEnv.slug || ""}
             secretPath={secretImport?.importPath || ""}
@@ -182,11 +182,11 @@ export const SecretImportItem = ({
           {lastReplicated && (
             <Tooltip
               position="left"
-              className="max-w-md break-words whitespace-normal"
+              className="max-w-md whitespace-normal break-words"
               content={
                 <div className="flex max-h-40 flex-col overflow-auto">
                   <div className="flex self-start">
-                    <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
+                    <FontAwesomeIcon icon={faCalendarCheck} className="pr-2 pt-0.5 text-sm" />
                     <div className="text-sm">Last Replication</div>
                   </div>
                   <div className="pl-5 text-left text-xs">
@@ -197,7 +197,7 @@ export const SecretImportItem = ({
                   {!isReplicationSuccess && (
                     <>
                       <div className="mt-2 flex self-start">
-                        <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
+                        <FontAwesomeIcon icon={faXmark} className="pr-2 pt-1 text-sm" />
                         <div className="text-sm">Fail reason</div>
                       </div>
                       <div className="pl-5 text-left text-xs">{replicationStatus}</div>
@@ -242,7 +242,7 @@ export const SecretImportItem = ({
             </ProjectPermissionCan>
           )}
         </div>
-        <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 py-3.5 pr-3 pl-4">
+        <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l py-3.5 pl-4 pr-3">
           <ProjectPermissionCan
             I={ProjectPermissionActions.Edit}
             a={subject(ProjectPermissionSub.SecretImports, {
@@ -295,9 +295,9 @@ export const SecretImportItem = ({
       {!isReplication && (isReplicationExpand || isExpanded) && !isDragging && (
         <td
           colSpan={3}
-          className={`bg-bunker-800 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
+          className={`bg-bunker-800 ${isExpanded && "border-mineshaft-500 border-b-2"}`}
         >
-          <div className="rounded-md bg-bunker-700 p-1">
+          <div className="bg-bunker-700 rounded-md p-1">
             <TableContainer>
               <table className="secret-table">
                 <thead>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx
index a9693f48d..46ee79389 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx
@@ -205,9 +205,9 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
         </div>
       </div>
 
-      <div className="max-h-64 overflow-y-auto rounded-md border border-mineshaft-700">
+      <div className="border-mineshaft-700 max-h-64 overflow-y-auto rounded-md border">
         <Table>
-          <THead className="sticky -top-1 bg-bunker-800">
+          <THead className="bg-bunker-800 sticky -top-1">
             <Th className="px-4">Type</Th>
             <Th className="px-4">Environment</Th>
             <Th className="truncate px-4">Path</Th>
@@ -218,7 +218,7 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
               <Tr
                 key={item.id}
                 onClick={() => handlePathClick(item)}
-                className="cursor-pointer hover:bg-mineshaft-700"
+                className="hover:bg-mineshaft-700 cursor-pointer"
                 title={
                   item.type === ItemType.SecretSync
                     ? "Navigate to Secret Sync"
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm.tsx
index 3f7727290..350aa2a50 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm.tsx
@@ -320,7 +320,7 @@ export const CreateReminderForm = ({
                     onChange(val);
                     handleReminderTypeChange(val);
                   }}
-                  className="w-full border border-mineshaft-500 capitalize"
+                  className="border-mineshaft-500 w-full border capitalize"
                   position="popper"
                   placeholder="Select reminder recurrence"
                   dropdownContainerClassName="max-w-none"
@@ -365,7 +365,7 @@ export const CreateReminderForm = ({
                     {/* Interval description */}
                     <div
                       className={twMerge(
-                        "mt-2 ml-1 text-xs",
+                        "ml-1 mt-2 text-xs",
                         field.value ? "opacity-60" : "opacity-0"
                       )}
                     >
@@ -444,7 +444,7 @@ export const CreateReminderForm = ({
           <FormControl label="Note" className="mb-0">
             <TextArea
               placeholder="Remember to rotate the AWS secret every month."
-              className="border border-mineshaft-600 text-sm"
+              className="border-mineshaft-600 border text-sm"
               rows={DEFAULT_TEXTAREA_ROWS}
               reSize="none"
               cols={30}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/GenRandomNumber.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/GenRandomNumber.tsx
index 5e7671f63..5f0cf805a 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/GenRandomNumber.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/GenRandomNumber.tsx
@@ -30,8 +30,8 @@ export const GenRandomNumber = ({ onGenerate }: Props) => {
       >
         {t("dashboard.sidebar.generate-random-hex")}
       </Button>
-      <div className="rounded-r-md bg-mineshaft p-2">
-        <div className="flex rounded-md border-mineshaft-400 bg-bunker-800 p-1 px-2">
+      <div className="bg-mineshaft rounded-r-md p-2">
+        <div className="border-mineshaft-400 bg-bunker-800 flex rounded-md p-1 px-2">
           <button type="button" onClick={() => setValue((val) => val - 1)}>
             <FontAwesomeIcon icon={faMinus} size="xs" />
           </button>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
index 09aa0fb7f..14e8831ce 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
@@ -352,7 +352,7 @@ export const SecretDetailSidebar = ({
       >
         <DrawerContent
           title={`Secret – ${secret?.key}`}
-          className="h-full thin-scrollbar"
+          className="thin-scrollbar h-full"
           cardBodyClassName="pb-0"
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
@@ -360,7 +360,7 @@ export const SecretDetailSidebar = ({
             onSubmit={handleSubmit(handleFormSubmit)}
             className="flex h-full flex-1 flex-col gap-y-4"
           >
-            <span className="text-sm text-bunker-300">
+            <span className="text-bunker-300 text-sm">
               Changes will automatically be applied for commit
             </span>
             <ProjectPermissionCan
@@ -454,7 +454,7 @@ export const SecretDetailSidebar = ({
                 />
               )}
             </ProjectPermissionCan>
-            <div className="rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="border-mineshaft-600 bg-mineshaft-900 rounded-md border p-4">
               <Controller
                 control={control}
                 name="skipMultilineEncoding"
@@ -470,7 +470,7 @@ export const SecretDetailSidebar = ({
                   >
                     {(isAllowed) => (
                       <div className="flex items-center justify-between">
-                        <span className="w-max text-sm text-mineshaft-300">
+                        <span className="text-mineshaft-300 w-max text-sm">
                           Multi-line encoding
                           <Tooltip
                             content="When enabled, multiline secrets will be handled by escaping newlines and enclosing the entire value in double quotes."
@@ -493,12 +493,12 @@ export const SecretDetailSidebar = ({
                 )}
               />
             </div>
-            <div className="flex flex-col rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
+            <div className="border-mineshaft-600 bg-mineshaft-900 flex flex-col rounded-md border p-4 px-0 pb-0">
               <div
-                className={`flex justify-between px-4 text-mineshaft-100 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+                className={`text-mineshaft-100 flex justify-between px-4 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
               >
                 <div
-                  className={`text-sm text-mineshaft-300 ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                  className={`text-mineshaft-300 text-sm ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
                 >
                   Tags
                 </div>
@@ -604,13 +604,13 @@ export const SecretDetailSidebar = ({
                 </div>
               </div>
               <div
-                className={`mb-4 w-full border-t border-mineshaft-600 ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
+                className={`border-mineshaft-600 mb-4 w-full border-t ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
               />
               <div
-                className={`flex justify-between px-4 text-mineshaft-100 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+                className={`text-mineshaft-100 flex justify-between px-4 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
               >
                 <div
-                  className={`text-sm text-mineshaft-300 ${metadataFormFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                  className={`text-mineshaft-300 text-sm ${metadataFormFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
                 >
                   Metadata
                 </div>
@@ -619,7 +619,7 @@ export const SecretDetailSidebar = ({
                     {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
                       <div key={metadataFieldId} className="flex items-end space-x-2">
                         <div className="grow">
-                          {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+                          {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
                           <Controller
                             control={control}
                             name={`secretMetadata.${i}.key`}
@@ -638,7 +638,7 @@ export const SecretDetailSidebar = ({
                           {i === 0 && (
                             <FormLabel
                               label="Value"
-                              className="text-xs text-mineshaft-400"
+                              className="text-mineshaft-400 text-xs"
                               isOptional
                             />
                           )}
@@ -692,7 +692,7 @@ export const SecretDetailSidebar = ({
                   className="mb-0 h-[125px] pb-0"
                 >
                   <TextArea
-                    className="mb-0 resize-none! border border-mineshaft-600 bg-mineshaft-900 text-sm"
+                    className="resize-none! border-mineshaft-600 bg-mineshaft-900 mb-0 border text-sm"
                     readOnly={isReadOnly}
                     placeholder="add a comment or note to this secret..."
                     rows={4}
@@ -701,9 +701,9 @@ export const SecretDetailSidebar = ({
                 </FormControl>
               )}
             />
-            <div className="dark flex max-h-96 flex-1 cursor-default flex-col text-sm text-bunker-300">
-              <div className="mb-0.5 text-mineshaft-400">Version History</div>
-              <div className="flex thin-scrollbar flex-1 flex-col space-y-2 overflow-x-hidden overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:scheme-dark">
+            <div className="text-bunker-300 dark flex max-h-96 flex-1 cursor-default flex-col text-sm">
+              <div className="text-mineshaft-400 mb-0.5">Version History</div>
+              <div className="thin-scrollbar border-mineshaft-600 bg-mineshaft-900 dark:scheme-dark flex flex-1 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border p-4">
                 {secretVersion?.map((version) => (
                   <SecretVersionItem
                     canReadValue={!cannotReadSecretValue}
@@ -721,8 +721,8 @@ export const SecretDetailSidebar = ({
                 ))}
               </div>
             </div>
-            <div className="dark flex flex-col text-sm text-bunker-300">
-              <div className="mb-0.5 text-mineshaft-400">
+            <div className="text-bunker-300 dark flex flex-col text-sm">
+              <div className="text-mineshaft-400 mb-0.5">
                 Access List
                 <Tooltip
                   content="Lists all users, machine identities, and groups that have been granted any permission level (read, create, edit, or delete) for this secret."
@@ -732,13 +732,13 @@ export const SecretDetailSidebar = ({
                 </Tooltip>
               </div>
               {secretAccessList ? (
-                <div className="flex flex-col space-y-2 overflow-x-hidden overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:scheme-dark">
+                <div className="border-mineshaft-600 bg-mineshaft-900 dark:scheme-dark flex flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border p-4">
                   {secretAccessList.users.length > 0 && (
                     <div className="pb-3">
                       <div className="mb-2 font-bold">Users</div>
                       <div className="flex flex-wrap gap-2">
                         {secretAccessList.users.map((user) => (
-                          <div className="rounded-md bg-bunker-500">
+                          <div className="bg-bunker-500 rounded-md">
                             <Tooltip
                               side="left"
                               content={user.allowedActions
@@ -746,7 +746,7 @@ export const SecretDetailSidebar = ({
                                 .join(", ")}
                               className="z-100 capitalize"
                             >
-                              <div className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100">
+                              <div className="text-secondary/80 border-mineshaft-600 bg-mineshaft-700 hover:text-mineshaft-100 rounded-md border px-1 py-0.5 text-sm">
                                 {user.name}
                               </div>
                             </Tooltip>
@@ -760,7 +760,7 @@ export const SecretDetailSidebar = ({
                       <div className="mb-2 font-bold">Identities</div>
                       <div className="flex flex-wrap gap-2">
                         {secretAccessList.identities.map((identity) => (
-                          <div className="rounded-md bg-bunker-500">
+                          <div className="bg-bunker-500 rounded-md">
                             <Tooltip
                               side="left"
                               content={identity.allowedActions
@@ -779,7 +779,7 @@ export const SecretDetailSidebar = ({
                                   projectId: currentProject.id,
                                   identityId: identity.id
                                 }}
-                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
+                                className="text-secondary/80 border-mineshaft-600 bg-mineshaft-700 hover:text-mineshaft-100 rounded-md border px-1 py-0.5 text-sm"
                               >
                                 {identity.name}
                               </Link>
@@ -794,7 +794,7 @@ export const SecretDetailSidebar = ({
                       <div className="mb-2 font-bold">Groups</div>
                       <div className="flex flex-wrap gap-2">
                         {secretAccessList.groups.map((group) => (
-                          <div className="rounded-md bg-bunker-500">
+                          <div className="bg-bunker-500 rounded-md">
                             <Tooltip
                               side="left"
                               content={group.allowedActions
@@ -810,7 +810,7 @@ export const SecretDetailSidebar = ({
                                 params={{
                                   groupId: group.id
                                 }}
-                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
+                                className="text-secondary/80 border-mineshaft-600 bg-mineshaft-700 hover:text-mineshaft-100 rounded-md border px-1 py-0.5 text-sm"
                               >
                                 {group.name}
                               </Link>
@@ -876,7 +876,7 @@ export const SecretDetailSidebar = ({
                       colorSchema="danger"
                       variant="outline_bg"
                       ariaLabel="Delete Secret"
-                      className="h-min border border-mineshaft-600 bg-mineshaft-700 hover:border-red-500/70 hover:bg-red-600/20"
+                      className="border-mineshaft-600 bg-mineshaft-700 h-min border hover:border-red-500/70 hover:bg-red-600/20"
                       isDisabled={!isAllowed}
                       onClick={onDeleteSecret}
                     >
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 613c04e6d..04a750ffc 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -426,7 +426,7 @@ export const SecretItem = memo(
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div
           className={twMerge(
-            "border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700",
+            "border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 border-b shadow-none",
             isDirty && "border-primary-400/50",
             isRotatedSecret && "bg-mineshaft-700/60",
             isPending && "bg-mineshaft-700/60",
@@ -438,7 +438,7 @@ export const SecretItem = memo(
           <div className="group flex">
             <div
               className={twMerge(
-                "flex h-11 w-11 items-center justify-center px-4 py-3 text-mineshaft-300",
+                "text-mineshaft-300 flex h-11 w-11 items-center justify-center px-4 py-3",
                 isDirty && "text-primary",
                 isPending && "ml-[-2px]"
               )}
@@ -449,7 +449,7 @@ export const SecretItem = memo(
                   <FontAwesomeIcon
                     icon={faRotate}
                     size="xs"
-                    className="absolute -right-[0.2rem] -bottom-[0.05rem] text-mineshaft-400"
+                    className="text-mineshaft-400 absolute -bottom-[0.05rem] -right-[0.2rem]"
                   />
                 </div>
               ) : (
@@ -494,7 +494,7 @@ export const SecretItem = memo(
                               Secret key contains whitespaces.
                               <br />
                               <br /> If this is the desired format, you need to provide it as{" "}
-                              <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                              <code className="bg-mineshaft-500 rounded-md px-1 py-0.5">
                                 {encodeURIComponent(field.value.trim())}
                               </code>{" "}
                               when making API requests.
@@ -509,13 +509,13 @@ export const SecretItem = memo(
                       ) : undefined
                     }
                     {...field}
-                    className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+                    className="focus:text-bunker-100 w-full px-0 placeholder:text-red-500 focus:ring-transparent"
                   />
                 )}
               />
             </div>
             <div
-              className="flex w-80 grow items-center border-x border-mineshaft-600 py-1 pr-2 pl-4"
+              className="border-mineshaft-600 flex w-80 grow items-center border-x py-1 pl-4 pr-2"
               tabIndex={0}
               role="button"
             >
@@ -617,7 +617,7 @@ export const SecretItem = memo(
                       <IconButton
                         className={twMerge(
                           "w-0 overflow-hidden p-0 group-hover:w-5",
-                          secret.reminder && "w-5 text-primary"
+                          secret.reminder && "text-primary w-5"
                         )}
                         onClick={() => handlePopUpOpen("reminder")}
                         variant="plain"
@@ -675,7 +675,7 @@ export const SecretItem = memo(
                             size="sm"
                             className={twMerge(
                               "w-0 overflow-hidden p-0 group-hover:w-5 data-[state=open]:w-5",
-                              hasTagsApplied && "w-5 text-primary"
+                              hasTagsApplied && "text-primary w-5"
                             )}
                             isDisabled={!isAllowed || isOverridden}
                           >
@@ -756,7 +756,7 @@ export const SecretItem = memo(
                         onClick={handleOverrideClick}
                         className={twMerge(
                           "w-0 overflow-hidden p-0 group-hover:w-5",
-                          isOverridden && "w-5 text-primary"
+                          isOverridden && "text-primary w-5"
                         )}
                       >
                         <Tooltip content={`${isOverridden ? "Remove" : "Add"} Override`}>
@@ -783,7 +783,7 @@ export const SecretItem = memo(
                           <IconButton
                             className={twMerge(
                               "w-0 overflow-hidden p-0 group-hover:w-5",
-                              hasComment && "w-5 text-primary"
+                              hasComment && "text-primary w-5"
                             )}
                             variant="plain"
                             size="md"
@@ -830,12 +830,12 @@ export const SecretItem = memo(
                       </Tooltip>
                     </IconButton>
                     <PopoverContent
-                      className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
+                      className="border-mineshaft-600 bg-mineshaft-800 w-auto border p-2 drop-shadow-2xl"
                       sticky="always"
                     >
                       <FormControl label="Comment" className="mb-0">
                         <TextArea
-                          className="border border-mineshaft-600 text-sm"
+                          className="border-mineshaft-600 border text-sm"
                           rows={8}
                           cols={30}
                           {...register("comment")}
@@ -868,7 +868,7 @@ export const SecretItem = memo(
                             size="sm"
                             className={twMerge(
                               "w-0 overflow-hidden p-0 group-hover:w-5 data-[state=open]:w-5",
-                              hasTagsApplied && "w-5 text-primary"
+                              hasTagsApplied && "text-primary w-5"
                             )}
                             isDisabled={!isAllowed}
                           >
@@ -1068,7 +1068,7 @@ export const SecretItem = memo(
                       type="submit"
                       size="md"
                       className={twMerge(
-                        "p-0 text-primary opacity-0 group-hover:opacity-100",
+                        "text-primary p-0 opacity-0 group-hover:opacity-100",
                         isDirty && "opacity-100"
                       )}
                       isDisabled={isSubmitting || Boolean(errors.key)}
@@ -1079,7 +1079,7 @@ export const SecretItem = memo(
                         <FontAwesomeSymbol
                           symbolName={FontAwesomeSpriteName.Check}
                           className={twMerge(
-                            "h-4 w-4 text-primary",
+                            "text-primary h-4 w-4",
                             Boolean(Object.keys(errors || {}).length) && "text-red"
                           )}
                         />
@@ -1100,7 +1100,7 @@ export const SecretItem = memo(
                     >
                       <FontAwesomeSymbol
                         symbolName={FontAwesomeSpriteName.Close}
-                        className="h-4 w-4 text-primary"
+                        className="text-primary h-4 w-4"
                       />
                     </IconButton>
                   </Tooltip>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretNoAccessListView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretNoAccessListView.tsx
index fa75168f5..c57b709ab 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretNoAccessListView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretNoAccessListView.tsx
@@ -24,7 +24,7 @@ export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
         >
           <div
             className={twMerge(
-              "flex border-b border-mineshaft-600 shadow-none hover:bg-mineshaft-700",
+              "border-mineshaft-600 hover:bg-mineshaft-700 flex border-b shadow-none",
               isRotationView ? "bg-mineshaft-700/60" : "bg-mineshaft-800"
             )}
           >
@@ -39,7 +39,7 @@ export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
                   <FontAwesomeIcon
                     icon={faRotate}
                     size="xs"
-                    className="absolute -right-[0.2rem] -bottom-[0.05rem] text-mineshaft-400"
+                    className="text-mineshaft-400 absolute -bottom-[0.05rem] -right-[0.2rem]"
                   />
                 </div>
               ) : (
@@ -49,14 +49,14 @@ export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
                 />
               )}
             </div>
-            <div className="ml-[0.05rem] flex h-11 w-80 shrink-0 items-center border-r border-mineshaft-600 px-4 py-2">
+            <div className="border-mineshaft-600 ml-[0.05rem] flex h-11 w-80 shrink-0 items-center border-r px-4 py-2">
               <Input
                 autoComplete="off"
                 isReadOnly
                 variant="plain"
                 value="NO ACCESS"
                 isDisabled
-                className="w-full px-0 blur-xs placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+                className="blur-xs focus:text-bunker-100 w-full px-0 placeholder:text-red-500 focus:ring-transparent"
               />
             </div>
             <Blur className="pl-8" />
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretVersionItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretVersionItem.tsx
index a2c25b13a..e1667eceb 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretVersionItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretVersionItem.tsx
@@ -142,7 +142,7 @@ export const SecretVersionItem = ({
       <div className="flex w-full flex-col space-y-1">
         <div className="flex items-center">
           <div className="w-10">
-            <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
+            <div className="border-mineshaft-600 bg-mineshaft-700 text-mineshaft-300 w-fit rounded-md border px-1 text-sm">
               v{version}
             </div>
           </div>
@@ -150,7 +150,7 @@ export const SecretVersionItem = ({
         </div>
         <div className="flex w-full cursor-default">
           <div className="relative w-10">
-            <div className="absolute top-0 bottom-0 left-3 mt-0.5 border-l border-mineshaft-400/60" />
+            <div className="border-mineshaft-400/60 absolute bottom-0 left-3 top-0 mt-0.5 border-l" />
           </div>
           <div className="flex w-full cursor-default flex-col">
             {actor && (
@@ -172,14 +172,14 @@ export const SecretVersionItem = ({
               </div>
             )}
             <div className="flex flex-row">
-              <div className="h-min w-fit rounded-xs bg-primary-500/10 px-1 text-primary-300/70">
+              <div className="rounded-xs bg-primary-500/10 text-primary-300/70 h-min w-fit px-1">
                 Value:
               </div>
-              <div className="group pl-1 font-mono break-all">
+              <div className="group break-all pl-1 font-mono">
                 <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
                   <button
                     type="button"
-                    className="text-left select-none"
+                    className="select-none text-left"
                     onClick={async (e) => {
                       if (secretValueHidden) return;
 
@@ -194,7 +194,7 @@ export const SecretVersionItem = ({
                     }}
                   >
                     <span
-                      className={twMerge(secretValueHidden && "text-xs text-bunker-300 opacity-40")}
+                      className={twMerge(secretValueHidden && "text-bunker-300 text-xs opacity-40")}
                     >
                       {/* eslint-disable-next-line no-nested-ternary */}
                       {secretValueHidden
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx
index 62b708215..8e082715d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx
@@ -44,11 +44,11 @@ export const SecretRotationItem = ({
 
   return (
     <>
-      <div className={twMerge("group flex border-b border-mineshaft-600 hover:bg-mineshaft-700")}>
-        <div className="text- flex w-11 items-center py-2 pl-5 text-mineshaft-400">
+      <div className={twMerge("border-mineshaft-600 hover:bg-mineshaft-700 group flex border-b")}>
+        <div className="text- text-mineshaft-400 flex w-11 items-center py-2 pl-5">
           <FontAwesomeIcon icon={faRotate} />
         </div>
-        <div className="flex grow items-center py-2 pr-2 pl-4">
+        <div className="flex grow items-center py-2 pl-4 pr-2">
           <div className="flex w-full flex-wrap items-center">
             <span>{name}</span>
             <Tag className="mx-2.5 flex items-center gap-1 px-1.5 py-0 text-xs normal-case">
@@ -141,7 +141,7 @@ export const SecretRotationItem = ({
         <AnimatePresence mode="wait">
           <motion.div
             key="options"
-            className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-2 py-3"
+            className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-2 py-3"
             initial={{ x: 0, opacity: 0 }}
             animate={{ x: 0, opacity: 1 }}
             exit={{ x: 10, opacity: 0 }}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationSecretRow.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationSecretRow.tsx
index 7bc5b8705..70b7aede1 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationSecretRow.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationSecretRow.tsx
@@ -48,7 +48,7 @@ export const SecretRotationSecretRow = ({
       className="max-w-sm"
       content={secret ? undefined : "You do not have permission to view this secret."}
     >
-      <tr className="h-full last:border-b-0! hover:bg-mineshaft-700">
+      <tr className="last:border-b-0! hover:bg-mineshaft-700 h-full">
         <td className="flex h-full items-center" style={{ padding: "0.5rem 1rem" }}>
           <span className={twMerge(!secret && "blur-sm")}>{secret?.key ?? "********"}</span>
         </td>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SecretItem.tsx
index d272279c8..50adca575 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SecretItem.tsx
@@ -61,7 +61,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
   return (
     <>
       <div
-        className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+        className="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
         role="button"
         tabIndex={0}
         onClick={setIsExpanded.toggle}
@@ -79,13 +79,13 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
           {mode === "modified" && !preSecret?.isRotatedSecret ? (
             <>
               <div>{preSecret?.key}</div>
-              <div className="rounded-lg bg-primary px-1 py-0.5 text-xs font-bold text-black">
+              <div className="bg-primary rounded-lg px-1 py-0.5 text-xs font-bold text-black">
                 v{preSecret?.version}
               </div>
               <div>
                 <FontAwesomeIcon icon={faChevronRight} size="sm" className="text-orange-700" />
               </div>
-              <div className="rounded-lg bg-primary px-1 py-0.5 text-xs font-bold text-black">
+              <div className="bg-primary rounded-lg px-1 py-0.5 text-xs font-bold text-black">
                 v{postSecret?.version}
               </div>
             </>
@@ -93,7 +93,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
             <>
               {postSecret.key}
               {postSecret.isRotatedSecret && (
-                <span className="ml-2 text-mineshaft-400">
+                <span className="text-mineshaft-400 ml-2">
                   Rotated Secrets are not affected by Rollback
                 </span>
               )}
@@ -102,14 +102,14 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
         </div>
       </div>
       {isExpanded && (
-        <div className="flex cursor-pointer bg-bunker-600 p-4">
+        <div className="bg-bunker-600 flex cursor-pointer p-4">
           <TableContainer>
             <Table>
               <THead>
-                <Th className="min-table-row min-w-44 border-r border-mineshaft-600">Type</Th>
+                <Th className="min-table-row border-mineshaft-600 min-w-44 border-r">Type</Th>
                 {isModified ? (
                   <>
-                    <Th className="border-r border-mineshaft-600">Before rollback</Th>
+                    <Th className="border-mineshaft-600 border-r">Before rollback</Th>
                     <Th>After rollback</Th>
                   </>
                 ) : (
@@ -118,16 +118,16 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
               </THead>
               <TBody>
                 <Tr>
-                  <Td className="border-r border-mineshaft-600">Key</Td>
+                  <Td className="border-mineshaft-600 border-r">Key</Td>
                   {isModified && (
-                    <Td className="border-r border-mineshaft-600">{preSecret?.key}</Td>
+                    <Td className="border-mineshaft-600 border-r">{preSecret?.key}</Td>
                   )}
                   <Td>{postSecret.key}</Td>
                 </Tr>
                 <Tr>
-                  <Td className="border-r border-mineshaft-600">Value</Td>
+                  <Td className="border-mineshaft-600 border-r">Value</Td>
                   {isModified && (
-                    <Td className="border-r border-mineshaft-600">
+                    <Td className="border-mineshaft-600 border-r">
                       {preSecret?.secretValueHidden ? (
                         <Blur
                           className="w-min"
@@ -151,9 +151,9 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                 </Tr>
                 {Boolean(preSecret?.idOverride || postSecret?.idOverride) && (
                   <Tr>
-                    <Td className="border-r border-mineshaft-600">Override</Td>
+                    <Td className="border-mineshaft-600 border-r">Override</Td>
                     {isModified && (
-                      <Td className="border-r border-mineshaft-600">
+                      <Td className="border-mineshaft-600 border-r">
                         <SecretInput value={preSecret?.valueOverride} />
                       </Td>
                     )}
@@ -163,16 +163,16 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   </Tr>
                 )}
                 <Tr>
-                  <Td className="border-r border-mineshaft-600">Comment</Td>
+                  <Td className="border-mineshaft-600 border-r">Comment</Td>
                   {isModified && (
-                    <Td className="border-r border-mineshaft-600">{preSecret?.comment}</Td>
+                    <Td className="border-mineshaft-600 border-r">{preSecret?.comment}</Td>
                   )}
                   <Td>{postSecret?.comment}</Td>
                 </Tr>
                 <Tr>
-                  <Td className="border-r border-mineshaft-600">Tags</Td>
+                  <Td className="border-mineshaft-600 border-r">Tags</Td>
                   {isModified && (
-                    <Td className="border-r border-mineshaft-600">
+                    <Td className="border-mineshaft-600 border-r">
                       {preSecret?.tags?.map(({ slug, id: tagId, color }) => (
                         <Tag
                           className="flex w-min items-center space-x-2"
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
index eed335fa8..e49dbc4e4 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
@@ -160,13 +160,13 @@ export const SnapshotView = ({
         <Tag colorSchema="green">{new Date(snapshotData?.createdAt || "").toLocaleString()}</Tag>
       </div>
       <NoticeBannerV2 title="Snapshots are being deprecated" className="my-2">
-        <p className="my-1 text-sm text-mineshaft-300">
+        <p className="text-mineshaft-300 my-1 text-sm">
           Snapshots will be replaced by{" "}
           <a
             target="_blank"
             href="https://infisical.com/docs/documentation/platform/pit-recovery"
             rel="noopener noreferrer"
-            className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+            className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
           >
             Commits
           </a>{" "}
@@ -176,7 +176,7 @@ export const SnapshotView = ({
       <div className="mt-4 flex items-center space-x-2">
         <div className="w-2/5">
           <Input
-            className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+            className="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 duration-200"
             placeholder="Search by folder name, key name ..."
             leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
             value={search}
@@ -227,9 +227,9 @@ export const SnapshotView = ({
           </ProjectPermissionCan>
         </div>
       </div>
-      <div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
+      <div className="bg-mineshaft-800 text-bunker-300 mt-4 rounded-md text-left text-sm">
         <div className="flex flex-col">
-          <div className="flex border-b border-mineshaft-600 font-medium">
+          <div className="border-mineshaft-600 flex border-b font-medium">
             <div className="w-12 shrink-0" />
             <div className="w-12 shrink-0" />
             <div className="flex grow items-center px-4 py-2">Changes</div>
@@ -239,7 +239,7 @@ export const SnapshotView = ({
             .filter((a) => a.post.name.toLowerCase().includes(search.toLowerCase()))
             .map(({ mode, pre, post }, index) => (
               <div
-                className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+                className="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
                 key={`folder-${mode}-${index + 1}`}
               >
                 <div className="w-12 shrink-0 px-4 py-3">
diff --git a/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx b/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
index 0b9263803..7f09a1f2c 100644
--- a/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
@@ -145,7 +145,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto w-full max-w-7xl text-white">
       <PageHeader
         title="Secret Rotation"
         description="Stop manually rotating secrets and automate credential rotation."
@@ -155,7 +155,7 @@ const Page = () => {
           rel="noopener noreferrer"
           href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
         >
-          <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+          <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
             Documentation
             <FontAwesomeIcon
               icon={faArrowUpRightFromSquare}
@@ -165,13 +165,13 @@ const Page = () => {
         </a>
       </PageHeader>
       <NoticeBannerV2 title="Secret Rotations Update">
-        <p className="text-sm text-bunker-200">
+        <p className="text-bunker-200 text-sm">
           Infisical is revamping its Secret Rotation experience.
         </p>
-        <p className="mt-2 text-sm text-bunker-200">
+        <p className="text-bunker-200 mt-2 text-sm">
           PostgreSQL and Microsoft SQL Server Rotations can now be created from the{" "}
           <Link
-            className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+            className="text-mineshaft-100 decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
             to="/projects/secret-management/$projectId/overview"
             params={{ projectId: currentProject.id }}
           >
@@ -181,7 +181,7 @@ const Page = () => {
         </p>
       </NoticeBannerV2>
       <div className="mb-6">
-        <div className="mt-6 mb-2 text-xl font-medium text-gray-200">Rotated Secrets</div>
+        <div className="mb-2 mt-6 text-xl font-medium text-gray-200">Rotated Secrets</div>
         <div className="flex flex-col space-y-2">
           <TableContainer>
             <Table>
@@ -233,9 +233,9 @@ const Page = () => {
                             .toUpperCase()}
                         </Td>
                         <Td>
-                          <div className="flex w-min items-center rounded-sm border border-bunker-400 p-1 px-2">
+                          <div className="border-bunker-400 flex w-min items-center rounded-sm border p-1 px-2">
                             <div>{environment.slug}</div>
-                            <div className="ml-1 flex items-center border-l border-bunker-400 pl-1 text-xs">
+                            <div className="border-bunker-400 ml-1 flex items-center border-l pl-1 text-xs">
                               <FontAwesomeIcon icon={faFolder} className="mr-1" />
                               {secretPath}
                             </div>
@@ -250,7 +250,7 @@ const Page = () => {
                                 <FontAwesomeIcon
                                   icon={faExclamationTriangle}
                                   size="sm"
-                                  className="ml-2 text-red"
+                                  className="text-red ml-2"
                                 />
                               </Tooltip>
                             )}
@@ -318,7 +318,7 @@ const Page = () => {
           </TableContainer>
         </div>
       </div>
-      <div className="mt-12 mb-2 text-xl font-medium text-gray-200">
+      <div className="mb-2 mt-12 text-xl font-medium text-gray-200">
         Infisical Rotation Providers
       </div>
       <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
@@ -329,7 +329,7 @@ const Page = () => {
         {!isRotationProviderLoading &&
           secretRotationProviders?.providers.map((provider) => (
             <div
-              className="group relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 hover:border-primary/40 hover:bg-primary/10"
+              className="border-mineshaft-600 bg-mineshaft-800 hover:border-primary/40 hover:bg-primary/10 group relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md border p-4"
               key={`infisical-rotation-provider-${provider.name}`}
               tabIndex={0}
               role="button"
@@ -358,7 +358,7 @@ const Page = () => {
               <div className="ml-4 max-w-xs text-xl font-medium text-gray-300 duration-200 group-hover:text-gray-200">
                 {provider.title}
               </div>
-              <div className="absolute top-1 right-1.5 opacity-0 transition-all group-hover:opacity-100">
+              <div className="absolute right-1.5 top-1 opacity-0 transition-all group-hover:opacity-100">
                 <Tooltip content={provider.description} sideOffset={10}>
                   <FontAwesomeIcon icon={faInfoCircle} className="text-primary" />
                 </Tooltip>
@@ -370,8 +370,8 @@ const Page = () => {
           rel="noopener noreferrer"
           href="https://github.com/Infisical/infisical/issues"
         >
-          <div className="group relative flex h-32 cursor-pointer flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 hover:border-primary/40 hover:bg-primary/10">
-            <FontAwesomeIcon icon={faPlus} className="pr-2 pl-3 text-3xl text-gray-300" />
+          <div className="border-mineshaft-600 bg-mineshaft-800 hover:border-primary/40 hover:bg-primary/10 group relative flex h-32 cursor-pointer flex-row items-center rounded-md border p-4">
+            <FontAwesomeIcon icon={faPlus} className="pl-3 pr-2 text-3xl text-gray-300" />
             <div className="ml-4 max-w-xs text-xl font-medium text-gray-300 duration-200 group-hover:text-gray-200">
               Request or create your own template
             </div>
@@ -406,7 +406,7 @@ const Page = () => {
             <p className="text-mineshaft-200">
               Infisical is revamping its Secret Rotation experience. Navigate to the{" "}
               <Link
-                className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+                className="text-mineshaft-100 decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
                 to="/projects/secret-management/$projectId/overview"
                 params={{ projectId: currentProject.id }}
               >
@@ -414,7 +414,7 @@ const Page = () => {
               </Link>{" "}
               to create a {popUp.secretRotationV2.data} Rotation.
             </p>
-            <div className="overflow-clip rounded-sm border border-mineshaft-600">
+            <div className="border-mineshaft-600 overflow-clip rounded-sm border">
               <img
                 src="/images/secretRotation/secret-rotations-v2-location.png"
                 alt="Secret Rotation V2 location"
diff --git a/frontend/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx b/frontend/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx
index 412365028..0f485554f 100644
--- a/frontend/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx
@@ -55,7 +55,7 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               defaultValue={environments?.[0]?.slug}
               position="popper"
             >
@@ -96,9 +96,9 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
           </FormControl>
         )}
       />
-      <div className="mt-4 mb-2 flex flex-col border-t border-bunker-300/30 pt-4">
+      <div className="border-bunker-300/30 mb-2 mt-4 flex flex-col border-t pt-4">
         <div>Mapping</div>
-        <div className="text-sm text-bunker-300">Select keys for rotated value to get saved</div>
+        <div className="text-bunker-300 text-sm">Select keys for rotated value to get saved</div>
       </div>
       {Object.keys(outputSchema).map((outputName) => (
         <Controller
@@ -110,7 +110,7 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
               <Select
                 value={value}
                 onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
                 position="popper"
               >
                 {!isSecretsLoading &&
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
index 548c1c847..fd87bbfb5 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
@@ -72,7 +72,7 @@ const PageContent = () => {
 
   return (
     <>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
+      <div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <Button
             variant="link"
@@ -96,11 +96,11 @@ const PageContent = () => {
             <img
               alt={`${destinationDetails.name} sync`}
               src={`/images/integrations/${destinationDetails.image}`}
-              className="mt-3 ml-1 w-16"
+              className="ml-1 mt-3 w-16"
             />
             <div>
               <p className="text-3xl font-medium text-white">{secretSync.name}</p>
-              <p className="leading-3 text-bunker-300">{destinationDetails.name} Sync</p>
+              <p className="text-bunker-300 leading-3">{destinationDetails.name} Sync</p>
             </div>
             <SecretSyncActionTriggers secretSync={secretSync} />
           </div>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx
index 76a185fe2..b2694adc2 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx
@@ -139,7 +139,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
 
   return (
     <>
-      <div className="mt-4 ml-auto flex flex-wrap items-center justify-end gap-2">
+      <div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
         <SecretSyncImportStatusBadge secretSync={secretSync} />
         <SecretSyncRemoveStatusBadge secretSync={secretSync} />
         {secretSync.isAutoSyncEnabled ? (
@@ -156,7 +156,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
             content="Auto-Sync is disabled. Changes to the source location will not be automatically synced to the destination."
           >
             <div>
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faBan} />
                 <span>Auto-Sync Disabled</span>
               </Badge>
@@ -173,7 +173,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
                 variant="outline_bg"
                 leftIcon={<FontAwesomeIcon icon={faRotate} />}
                 onClick={handleTriggerSync}
-                className="h-9 rounded-r-none bg-mineshaft-500"
+                className="bg-mineshaft-500 h-9 rounded-r-none"
                 isDisabled={!isAllowed}
               >
                 Trigger Sync
@@ -185,7 +185,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               <IconButton
                 ariaLabel="add-folder-or-import"
                 variant="outline_bg"
-                className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
+                className="border-mineshaft border-l-mineshaft-700 bg-mineshaft-500 h-9 w-10 rounded-l-none border-l-2"
               >
                 <FontAwesomeIcon icon={faEllipsisV} />
               </IconButton>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncAuditLogsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncAuditLogsSection.tsx
index a08d88139..be040b893 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncAuditLogsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncAuditLogsSection.tsx
@@ -24,11 +24,11 @@ export const SecretSyncAuditLogsSection = ({ secretSync }: Props) => {
   const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
 
   return (
-    <div className="flex max-h-full w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Sync Logs</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex max-h-full w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Sync Logs</h3>
         {subscription.auditLogs && (
-          <p className="text-xs text-bunker-300">
+          <p className="text-bunker-300 text-xs">
             Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
           </p>
         )}
@@ -47,7 +47,7 @@ export const SecretSyncAuditLogsSection = ({ secretSync }: Props) => {
           }}
         />
       ) : (
-        <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
+        <div className="bg-mineshaft-800 text-mineshaft-200 flex h-full items-center justify-center rounded-lg text-sm">
           <div className="flex flex-col items-center gap-4 py-20">
             <FontAwesomeIcon size="2x" icon={faFingerprint} />
             <p>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection.tsx
index 0fb7e5619..488645022 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection.tsx
@@ -34,7 +34,7 @@ export const GitHubSyncDestinationSection = ({ secretSync }: Props) => {
                 side="bottom"
                 content={<GitHubSyncSelectedRepositoriesTooltipContent secretSync={secretSync} />}
               >
-                <FontAwesomeIcon size="xs" className="ml-1 text-bunker-300" icon={faInfoCircle} />
+                <FontAwesomeIcon size="xs" className="text-bunker-300 ml-1" icon={faInfoCircle} />
               </Tooltip>
             </GenericFieldLabel>
           )}
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx
index 3855a551c..8a987ae26 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx
@@ -13,7 +13,7 @@ export const OCIVaultSyncDestinationSection = ({ secretSync }: Props) => {
 
   return (
     <>
-      <Tooltip side="bottom" className="max-w-sm break-words select-text" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
         <div>
           <GenericFieldLabel label="Compartment OCID">
             {compartmentOcid.substring(0, 21)}...
@@ -21,7 +21,7 @@ export const OCIVaultSyncDestinationSection = ({ secretSync }: Props) => {
           </GenericFieldLabel>
         </div>
       </Tooltip>
-      <Tooltip side="bottom" className="max-w-sm break-words select-text" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
         <div>
           <GenericFieldLabel label="Vault OCID">
             {vaultOcid.substring(0, 15)}...
@@ -29,7 +29,7 @@ export const OCIVaultSyncDestinationSection = ({ secretSync }: Props) => {
           </GenericFieldLabel>
         </div>
       </Tooltip>
-      <Tooltip side="bottom" className="max-w-sm break-words select-text" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
         <div>
           <GenericFieldLabel label="Key OCID">
             {keyOcid.substring(0, 13)}...
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
index 7ab07c8d1..50324594a 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
@@ -161,9 +161,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
       : ProjectPermissionSub.SecretSyncs;
 
   return (
-    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Destination Configuration</h3>
         <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx
index cbe6855e4..01da3212f 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx
@@ -43,9 +43,9 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
       : ProjectPermissionSub.SecretSyncs;
 
   return (
-    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-        <h3 className="font-medium text-mineshaft-100">Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <h3 className="text-mineshaft-100 font-medium">Details</h3>
         <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
@@ -76,7 +76,7 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
           )}
           {syncStatus === SecretSyncStatus.Failed && failureMessage && (
             <GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
-              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
+              <p className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
                 {failureMessage}
               </p>
             </GenericFieldLabel>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx
index 930c06b2f..abacc928a 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx
@@ -25,7 +25,7 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -40,7 +40,7 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsSecretsManagerSyncOptionsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsSecretsManagerSyncOptionsSection.tsx
index b22755269..d98745fa2 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsSecretsManagerSyncOptionsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsSecretsManagerSyncOptionsSection.tsx
@@ -25,7 +25,7 @@ export const AwsSecretsManagerSyncOptionsSection = ({ secretSync }: Props) => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -40,7 +40,7 @@ export const AwsSecretsManagerSyncOptionsSection = ({ secretSync }: Props) => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
index 1d3f10188..a43037613 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
@@ -87,9 +87,9 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
 
   return (
     <div>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <h3 className="font-medium text-mineshaft-100">Sync Options</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+          <h3 className="text-mineshaft-100 font-medium">Sync Options</h3>
           <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
             {(isAllowed) => (
               <IconButton
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx
index e4b787281..71ce301d0 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx
@@ -27,9 +27,9 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
 
   return (
     <div>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <h3 className="font-medium text-mineshaft-100">Source</h3>
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+          <h3 className="text-mineshaft-100 font-medium">Source</h3>
           <div>
             {(!folder || !environment) && (
               <Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
diff --git a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
index ad037b125..8ee08a3c6 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
@@ -36,7 +36,7 @@ export const SettingsPage = () => {
   ];
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
index 49e93bef1..e94b0b781 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
@@ -36,7 +36,7 @@ export const AutoCapitalizationSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <p className="mb-3 text-xl font-medium">{t("settings.project.enforce-capitalization")}</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx
index 26f5c7fc9..81ea30922 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx
@@ -23,11 +23,11 @@ export const BackfillSecretReferenceSecretion = () => {
 
   const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Index Secret References</p>
       </div>
-      <p className="mt-2 mb-4 max-w-2xl text-sm text-gray-400">
+      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
         This will index all secret references, enabling integrations to be triggered when their
         values change going forward. This happens automatically when secrets are created or updated.
       </p>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx
index 9e4627d26..2fc7848b8 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx
@@ -83,7 +83,7 @@ const BackupConfirmationModal = ({
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent title="Create KMS backup">
-        <p className="mb-6 text-bunker-300">
+        <p className="text-bunker-300 mb-6">
           In case of interruptions with your configured external KMS, you can load a backup to set
           the project&apos;s KMS back to the default Infisical KMS.
         </p>
@@ -176,7 +176,7 @@ const LoadBackupModal = ({
       }}
     >
       <ModalContent title="Load KMS backup">
-        <p className="mb-6 text-bunker-300">
+        <p className="text-bunker-300 mb-6">
           By loading a backup, the project&apos;s KMS will be switched to the default Infisical KMS.
         </p>
         <div className="flex justify-center">
@@ -262,9 +262,9 @@ export const EncryptionTab = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="flex justify-between">
-        <h2 className="mb-2 flex-1 text-xl font-medium text-mineshaft-100">Key Management</h2>
+        <h2 className="text-mineshaft-100 mb-2 flex-1 text-xl font-medium">Key Management</h2>
         {kmsKeyId !== INTERNAL_KMS_KEY_ID && (
           <div className="space-x-2">
             <Button colorSchema="secondary" onClick={() => handlePopUpOpen("loadBackup")}>
@@ -297,7 +297,7 @@ export const EncryptionTab = () => {
                       isDisabled={!isAllowed || isUpdatingProjectKms}
                       onValueChange={onChange}
                       isLoading={isUpdatingProjectKms}
-                      className="w-3/4 bg-mineshaft-600"
+                      className="bg-mineshaft-600 w-3/4"
                     >
                       <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
                         Default Infisical KMS
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
index ff9d217cb..f4dbde2fd 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -65,10 +65,10 @@ export const EnvironmentSection = () => {
   return (
     <div
       id="environments"
-      className="mb-6 scroll-m-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 scroll-m-6 rounded-lg border p-4"
     >
       <div className="mb-8 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Environments</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Environments</p>
         <div>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/PointInTimeVersionLimitSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/PointInTimeVersionLimitSection.tsx
index e647ff481..9c2c858a6 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/PointInTimeVersionLimitSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/PointInTimeVersionLimitSection.tsx
@@ -54,11 +54,11 @@ export const PointInTimeVersionLimitSection = () => {
 
   const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Version Retention</p>
       </div>
-      <p className="mt-2 mb-4 max-w-2xl text-sm text-gray-400">
+      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
         This defines the maximum number of recent secret versions to keep per folder. Excess
         versions will be removed at midnight (UTC) each day.
       </p>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/SecretDetectionIgnoreValuesSection/SecretDetectionIgnoreValuesSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/SecretDetectionIgnoreValuesSection/SecretDetectionIgnoreValuesSection.tsx
index e086834a1..194b626a4 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretDetectionIgnoreValuesSection/SecretDetectionIgnoreValuesSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretDetectionIgnoreValuesSection/SecretDetectionIgnoreValuesSection.tsx
@@ -78,11 +78,11 @@ export const SecretDetectionIgnoreValuesSection = () => {
   if (!currentProject) return null;
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Secret Detection</p>
       </div>
-      <p className="mt-2 mb-4 max-w-2xl text-sm text-gray-400">
+      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
         Define secret values to ignore when scanning designated parameter folders. Add values here
         to prevent false positives or allow approved sensitive data. These ignored values will not
         trigger policy violation alerts.
@@ -94,7 +94,7 @@ export const SecretDetectionIgnoreValuesSection = () => {
             {ignoreValuesFormFields.fields.map(({ id: ignoreValueFieldId }, i) => (
               <div key={ignoreValueFieldId} className="flex items-end space-x-2">
                 <div className="grow">
-                  {i === 0 && <span className="text-xs text-mineshaft-400">Secret Value</span>}
+                  {i === 0 && <span className="text-mineshaft-400 text-xs">Secret Value</span>}
                   <Controller
                     control={control}
                     name={`ignoreValues.${i}.value`}
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx
index bd8928823..2e5d9a615 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx
@@ -42,7 +42,7 @@ export const SecretSharingSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <p className="mb-3 text-xl font-medium">Allow Secret Sharing</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
index 553f17d54..c7a8f5080 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
@@ -42,7 +42,7 @@ export const SecretSnapshotsLegacySection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <p className="mb-3 text-xl font-medium">Show Secret Snapshots ( legacy )</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsSection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
index 508ef2867..2b094f69b 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
@@ -51,7 +51,7 @@ export const SecretTagsSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex justify-between">
         <p className="mb-3 text-xl font-medium">Secret Tags</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Tags}>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WebhooksTab/WebhooksTab.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WebhooksTab/WebhooksTab.tsx
index 517f9e624..26f8ebec1 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WebhooksTab/WebhooksTab.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WebhooksTab/WebhooksTab.tsx
@@ -139,9 +139,9 @@ export const WebhooksTab = withProjectPermission(
     };
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
         <div className="flex justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">{t("settings.webhooks.title")}</p>
+          <p className="text-mineshaft-100 text-xl font-medium">{t("settings.webhooks.title")}</p>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}
             a={ProjectPermissionSub.Webhooks}
@@ -194,7 +194,7 @@ export const WebhooksTab = withProjectPermission(
                       <Tr key={id}>
                         <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
                           {url}
-                          <p className="text-xs text-mineshaft-400">{id}</p>
+                          <p className="text-mineshaft-400 text-xs">{id}</p>
                         </Td>
                         <Td>{environment.slug}</Td>
                         <Td>{secretPath}</Td>
@@ -202,7 +202,7 @@ export const WebhooksTab = withProjectPermission(
                           {!lastStatus ? (
                             "-"
                           ) : (
-                            <div className="inline-flex w-min items-center rounded-sm bg-mineshaft-600 px-2 py-0.5 text-sm">
+                            <div className="bg-mineshaft-600 inline-flex w-min items-center rounded-sm px-2 py-0.5 text-sm">
                               {lastStatus}{" "}
                               <Tooltip
                                 content={
@@ -212,7 +212,7 @@ export const WebhooksTab = withProjectPermission(
                                       {format(new Date(updatedAt), "yyyy-MM-dd, hh:mm aaa")}
                                     </div>
                                     {lastRunErrorMessage && (
-                                      <div className="mt-2 text-red">
+                                      <div className="text-red mt-2">
                                         Error: {lastRunErrorMessage}
                                       </div>
                                     )}
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
index fb48717cc..8e9af13c6 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
@@ -83,9 +83,9 @@ export const WorkflowIntegrationTab = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Workflow Integrations</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Workflow Integrations</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Settings}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/AddWorkflowIntegrationModal.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/AddWorkflowIntegrationModal.tsx
index 3ebeba766..768f9a2a5 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/AddWorkflowIntegrationModal.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/AddWorkflowIntegrationModal.tsx
@@ -75,7 +75,7 @@ export const AddWorkflowIntegrationModal = ({ isOpen, onToggle }: Props) => {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <div className="mb-4 text-mineshaft-300">Select a workflow integration</div>
+              <div className="text-mineshaft-300 mb-4">Select a workflow integration</div>
               <div className="flex items-center space-x-4">
                 {PLATFORM_LIST.map(({ icon, platform, title }) => {
                   const isConfigured =
@@ -87,7 +87,7 @@ export const AddWorkflowIntegrationModal = ({ isOpen, onToggle }: Props) => {
                     <div className="relative" key={platform}>
                       <div
                         className={twMerge(
-                          "flex h-32 w-36 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white",
+                          "border-mineshaft-500 bg-bunker-600 hover:border-primary/70 hover:bg-primary/10 flex h-32 w-36 cursor-pointer flex-col items-center space-y-4 rounded-sm border p-6 transition-all hover:text-white",
                           isConfigured && "border-primary/50 opacity-60"
                         )}
                         role="button"
@@ -104,12 +104,12 @@ export const AddWorkflowIntegrationModal = ({ isOpen, onToggle }: Props) => {
                         }}
                       >
                         <div>{icon}</div>
-                        <div className="text-center text-sm whitespace-pre-wrap">{title}</div>
+                        <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
                       </div>
                       {isConfigured && (
-                        <div className="absolute right-0 bottom-0 left-0 z-30 h-full">
+                        <div className="absolute bottom-0 left-0 right-0 z-30 h-full">
                           <div className="relative h-full">
-                            <div className="absolute right-0 bottom-0 w-full flex-row items-center overflow-hidden rounded-b-md bg-primary px-2 py-0.5 text-center text-xs whitespace-nowrap text-black">
+                            <div className="bg-primary absolute bottom-0 right-0 w-full flex-row items-center overflow-hidden whitespace-nowrap rounded-b-md px-2 py-0.5 text-center text-xs text-black">
                               Already Configured
                             </div>
                           </div>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
index ef7617d52..5e5fc454f 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
@@ -96,7 +96,7 @@ export const MicrosoftTeamsConfigRow = ({
       <Td>
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="rounded-lg">
-            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+            <div className="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
               <FontAwesomeIcon size="sm" icon={faEllipsis} />
             </div>
           </DropdownMenuTrigger>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx
index c638b65a7..abe1e2860 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx
@@ -277,7 +277,7 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => {
       </div>
       {selectedMicrosoftTeamsIntegrationId && (
         <>
-          <h2 className="mb-2 flex-1 text-sm text-mineshaft-400">Configure Events</h2>
+          <h2 className="text-mineshaft-400 mb-2 flex-1 text-sm">Configure Events</h2>
           <Controller
             control={control}
             name="isSecretRequestNotificationEnabled"
@@ -286,7 +286,7 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => {
                 <FormControl
                   isError={Boolean(error)}
                   errorText={error?.message}
-                  className="mt-3 mb-2"
+                  className="mb-2 mt-3"
                 >
                   <Switch
                     id="secret-approval-notification"
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
index df7211f99..3b13b33ab 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
@@ -93,7 +93,7 @@ export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackCon
       <Td>
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="rounded-lg">
-            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+            <div className="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
               <FontAwesomeIcon size="sm" icon={faEllipsis} />
             </div>
           </DropdownMenuTrigger>
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx
index bcc2d81b5..b59dd57ff 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx
@@ -188,7 +188,7 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
       </div>
       {selectedSlackIntegrationId && (
         <>
-          <h2 className="mb-2 flex-1 text-sm text-mineshaft-400">Configure Events</h2>
+          <h2 className="text-mineshaft-400 mb-2 flex-1 text-sm">Configure Events</h2>
           <Controller
             control={control}
             name="isSecretRequestNotificationEnabled"
@@ -197,7 +197,7 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
                 <FormControl
                   isError={Boolean(error)}
                   errorText={error?.message}
-                  className="mt-3 mb-2"
+                  className="mb-2 mt-3"
                 >
                   <Switch
                     id="secret-approval-notification"
diff --git a/frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/AwsParameterStoreAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/AwsParameterStoreAuthorizePage.tsx
index eb8b27432..6ca234d87 100644
--- a/frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/AwsParameterStoreAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/AwsParameterStoreAuthorizePage.tsx
@@ -86,7 +86,7 @@ export const AWSParameterStoreAuthorizeIntegrationPage = () => {
       <Helmet>
         <title>Authorize AWS Parameter Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -106,7 +106,7 @@ export const AWSParameterStoreAuthorizeIntegrationPage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/aws-parameter-store"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -194,7 +194,7 @@ export const AWSParameterStoreAuthorizeIntegrationPage = () => {
               type="submit"
               colorSchema="primary"
               variant="outline_bg"
-              className="mt-2 mr-6 mb-6 ml-auto w-min"
+              className="mb-6 ml-auto mr-6 mt-2 w-min"
               isLoading={formState.isSubmitting}
             >
               Connect to AWS Parameter Store
diff --git a/frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx
index 0b8433d56..62e7d15ac 100644
--- a/frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx
@@ -174,7 +174,7 @@ export const AWSParameterStoreConfigurePage = () => {
       <Helmet>
         <title>Set Up AWS Parameter Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Parameter Store."
@@ -194,7 +194,7 @@ export const AWSParameterStoreConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -207,7 +207,7 @@ export const AWSParameterStoreConfigurePage = () => {
         </CardTitle>
         <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
+            <div className="border-mineshaft-600 flex w-full flex-row border-b">
               <Tab value={TabSections.Connection}>Connection</Tab>
               <Tab value={TabSections.Options}>Options</Tab>
             </div>
@@ -224,7 +224,7 @@ export const AWSParameterStoreConfigurePage = () => {
                 <Select
                   value={selectedSourceEnvironment}
                   onValueChange={(val) => setSelectedSourceEnvironment(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {currentProject?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -250,7 +250,7 @@ export const AWSParameterStoreConfigurePage = () => {
                     setSelectedAWSRegion(val);
                     setKmsKeyId("");
                   }}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {awsRegions.map((awsRegion) => (
                     <SelectItem value={awsRegion.slug} key={`aws-environment-${awsRegion.slug}`}>
@@ -278,7 +278,7 @@ export const AWSParameterStoreConfigurePage = () => {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: 30 }}
             >
-              <div className="mt-2 ml-1">
+              <div className="ml-1 mt-2">
                 <Switch
                   id="delete-aws"
                   onCheckedChange={setShouldDisableDelete}
@@ -287,7 +287,7 @@ export const AWSParameterStoreConfigurePage = () => {
                   Disable deleting secrets in AWS Parameter Store
                 </Switch>
               </div>
-              <div className="mt-4 ml-1">
+              <div className="ml-1 mt-4">
                 <Switch id="tag-aws" onCheckedChange={setShouldTag} isChecked={shouldTag}>
                   Tag in AWS Parameter Store
                 </Switch>
@@ -316,7 +316,7 @@ export const AWSParameterStoreConfigurePage = () => {
                   onValueChange={(e) => {
                     setKmsKeyId(e);
                   }}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {integrationAuthAwsKmsKeys?.length ? (
                     integrationAuthAwsKmsKeys.map((key) => {
@@ -342,19 +342,19 @@ export const AWSParameterStoreConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in AWS Parameter Store with secrets from
           Infisical.
@@ -374,12 +374,12 @@ export const AWSParameterStoreConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/AwsSecretManagerAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/AwsSecretManagerAuthorizePage.tsx
index 24c1905cc..016b6c2a6 100644
--- a/frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/AwsSecretManagerAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/AwsSecretManagerAuthorizePage.tsx
@@ -84,7 +84,7 @@ export const AWSSecretManagerAuthorizePage = () => {
       <Helmet>
         <title>Authorize AWS Secrets Manager Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -104,7 +104,7 @@ export const AWSSecretManagerAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -192,7 +192,7 @@ export const AWSSecretManagerAuthorizePage = () => {
               type="submit"
               colorSchema="primary"
               variant="outline_bg"
-              className="mt-2 mr-6 mb-6 ml-auto w-min"
+              className="mb-6 ml-auto mr-6 mt-2 w-min"
               isLoading={formState.isSubmitting}
             >
               Connect to AWS Secrets Manager
diff --git a/frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx
index 9ff3677c7..b6410c5ae 100644
--- a/frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx
@@ -223,7 +223,7 @@ export const AwsSecretManagerConfigurePage = () => {
         <title>Set Up AWS Secrets Manager Integration</title>
       </Helmet>
       <form onSubmit={handleSubmit(handleButtonClick)}>
-        <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <Card className="border-mineshaft-600 max-w-lg rounded-md border">
           <CardTitle
             className="px-6 text-left text-xl"
             subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
@@ -243,7 +243,7 @@ export const AwsSecretManagerConfigurePage = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   Docs
                   <FontAwesomeIcon
@@ -256,7 +256,7 @@ export const AwsSecretManagerConfigurePage = () => {
           </CardTitle>
           <Tabs defaultValue={TabSections.Connection} className="px-6">
             <TabList>
-              <div className="flex w-full flex-row border-b border-mineshaft-600">
+              <div className="border-mineshaft-600 flex w-full flex-row border-b">
                 <Tab value={TabSections.Connection}>Connection</Tab>
                 <Tab value={TabSections.Options}>Options</Tab>
               </div>
@@ -279,7 +279,7 @@ export const AwsSecretManagerConfigurePage = () => {
                       isError={Boolean(error)}
                     >
                       <Select
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         dropdownContainerClassName="max-w-full"
                         value={field.value}
                         onValueChange={(val) => {
@@ -323,7 +323,7 @@ export const AwsSecretManagerConfigurePage = () => {
                       <Select
                         defaultValue={field.value}
                         onValueChange={(e) => onChange(e)}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         dropdownContainerClassName="max-w-full"
                       >
                         {awsRegions.map((awsRegion) => (
@@ -356,7 +356,7 @@ export const AwsSecretManagerConfigurePage = () => {
                           }
                           onChange(e);
                         }}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         dropdownContainerClassName="max-w-full"
                       >
                         {mappingBehaviors.map((option) => (
@@ -402,7 +402,7 @@ export const AwsSecretManagerConfigurePage = () => {
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-                <div className="mt-2 mb-3 ml-1">
+                <div className="mb-3 ml-1 mt-2">
                   <Controller
                     control={control}
                     name="shouldTag"
@@ -445,7 +445,7 @@ export const AwsSecretManagerConfigurePage = () => {
                               setValue("tags", []);
                               onChange(e);
                             }}
-                            className="w-full border border-mineshaft-500"
+                            className="border-mineshaft-500 w-full border"
                             dropdownContainerClassName="max-w-full"
                           >
                             <SelectItem
@@ -525,7 +525,7 @@ export const AwsSecretManagerConfigurePage = () => {
                       <Select
                         defaultValue={field.value}
                         onValueChange={(e) => onChange(e)}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                         dropdownContainerClassName="max-w-full"
                       >
                         {integrationAuthAwsKmsKeys?.length ? (
@@ -556,19 +556,19 @@ export const AwsSecretManagerConfigurePage = () => {
             color="mineshaft"
             variant="outline_bg"
             type="submit"
-            className="mt-2 mr-6 mb-6 ml-auto"
+            className="mb-6 ml-auto mr-6 mt-2"
             isLoading={isSubmitting}
           >
             Create Integration
           </Button>
         </Card>
-        <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-        <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+        <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+        <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
           <div className="flex flex-row items-center">
-            <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-            <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+            <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+            <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
           </div>
-          <span className="mt-4 text-sm text-mineshaft-300">
+          <span className="text-mineshaft-300 mt-4 text-sm">
             After creating an integration, your secrets will start syncing immediately. This might
             cause an unexpected override of current secrets in AWS Secrets Manager with secrets from
             Infisical.
@@ -589,12 +589,12 @@ export const AwsSecretManagerConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/AzureAppConfigurationConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/AzureAppConfigurationConfigurePage.tsx
index 8e0336797..d013e8043 100644
--- a/frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/AzureAppConfigurationConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/AzureAppConfigurationConfigurePage.tsx
@@ -152,7 +152,7 @@ export const AzureAppConfigurationConfigurePage = () => {
       <Helmet>
         <title>Set Up Azure App Configuration Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="text-left text-xl"
           subTitle="Choose which environment in Infisical you want to sync to your Azure App Configuration."
@@ -172,7 +172,7 @@ export const AzureAppConfigurationConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -195,7 +195,7 @@ export const AzureAppConfigurationConfigurePage = () => {
                   isError={Boolean(error)}
                 >
                   <Select
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     dropdownContainerClassName="max-w-full"
                     value={field.value}
                     onValueChange={(val) => {
@@ -294,7 +294,7 @@ export const AzureAppConfigurationConfigurePage = () => {
                 <Select
                   defaultValue={field.value}
                   onValueChange={(e) => onChange(e)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   dropdownContainerClassName="max-w-full"
                 >
                   {initialSyncBehaviors.map((b) => {
@@ -316,7 +316,7 @@ export const AzureAppConfigurationConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mt-4 mb-6 ml-auto"
+            className="mb-6 ml-auto mt-4"
             isLoading={isSubmitting}
           >
             Create Integration
diff --git a/frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/AzureDevopsAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/AzureDevopsAuthorizePage.tsx
index 1877b4dbb..be0275290 100644
--- a/frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/AzureDevopsAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/AzureDevopsAuthorizePage.tsx
@@ -57,7 +57,7 @@ export const AzureDevopsAuthorizePage = () => {
       <Helmet>
         <title>Authorize Azure DevOps Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -77,7 +77,7 @@ export const AzureDevopsAuthorizePage = () => {
               href="https://infisical.com/docs/integrations/cloud/azure-devops"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -113,7 +113,7 @@ export const AzureDevopsAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Connect to Azure DevOps
diff --git a/frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/AzureDevopsConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/AzureDevopsConfigurePage.tsx
index 3730bfdab..973a38841 100644
--- a/frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/AzureDevopsConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/AzureDevopsConfigurePage.tsx
@@ -102,7 +102,7 @@ export const AzureDevopsConfigurePage = () => {
       <Helmet>
         <title>Set Up Azure DevOps Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment in Infisical you want to sync to secrets in Azure DevOps."
@@ -122,7 +122,7 @@ export const AzureDevopsConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -137,7 +137,7 @@ export const AzureDevopsConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {workspace?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -160,7 +160,7 @@ export const AzureDevopsConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -183,7 +183,7 @@ export const AzureDevopsConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Create Integration
diff --git a/frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/AzureKeyVaultAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/AzureKeyVaultAuthorizePage.tsx
index 74fbf7384..a3e7544b0 100644
--- a/frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/AzureKeyVaultAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/AzureKeyVaultAuthorizePage.tsx
@@ -40,7 +40,7 @@ export function AzureKeyVaultAuthorizePage() {
         <title>Authorize Azure Key Vault Integration</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Authenticate with a specific tenant ID or let OAuth handle it automatically."
@@ -60,7 +60,7 @@ export function AzureKeyVaultAuthorizePage() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/AzureKeyVaultConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/AzureKeyVaultConfigurePage.tsx
index 91f0d5440..d9ced7172 100644
--- a/frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/AzureKeyVaultConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/AzureKeyVaultConfigurePage.tsx
@@ -109,7 +109,7 @@ export const AzureKeyVaultConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {workspace?.environments.map((sourceEnvironment) => (
               <SelectItem
diff --git a/frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/BitbucketConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/BitbucketConfigurePage.tsx
index 8d855f284..022a8e8d7 100644
--- a/frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/BitbucketConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/BitbucketConfigurePage.tsx
@@ -200,7 +200,7 @@ export const BitbucketConfigurePage = () => {
     >
       <Card className="max-w-md rounded-md p-8 pt-4">
         <CardTitle className="text-center">
-          <SiBitbucket size="1.2rem" className="mr-2 mb-1 inline-block" />
+          <SiBitbucket size="1.2rem" className="mb-1 mr-2 inline-block" />
           Bitbucket Integration
         </CardTitle>
         <Controller
diff --git a/frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/ChecklyAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/ChecklyAuthorizePage.tsx
index b3a1c5b59..1c6d0a43b 100644
--- a/frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/ChecklyAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/ChecklyAuthorizePage.tsx
@@ -54,7 +54,7 @@ export const ChecklyAuthorizePage = () => {
       <Helmet>
         <title>Authorize Checkly Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -74,7 +74,7 @@ export const ChecklyAuthorizePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/checkly"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -103,7 +103,7 @@ export const ChecklyAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/ChecklyConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/ChecklyConfigurePage.tsx
index d57ed0834..0d4090f6b 100644
--- a/frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/ChecklyConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/ChecklyConfigurePage.tsx
@@ -132,11 +132,11 @@ export const ChecklyConfigurePage = () => {
     integrationAuthApps &&
     integrationAuthGroups &&
     targetAppId ? (
-    <div className="flex h-full w-full flex-col items-center justify-center bg-linear-to-tr from-mineshaft-900 to-bunker-900 py-6">
+    <div className="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full flex-col items-center justify-center py-6">
       <Helmet>
         <title>Set Up Checkly Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment in Infisical you want to sync to Checkly environment variables."
@@ -156,7 +156,7 @@ export const ChecklyConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -169,7 +169,7 @@ export const ChecklyConfigurePage = () => {
         </CardTitle>
         <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
+            <div className="border-mineshaft-600 flex w-full flex-row border-b">
               <Tab value={TabSections.Connection}>Connection</Tab>
               <Tab value={TabSections.Options}>Options</Tab>
             </div>
@@ -186,7 +186,7 @@ export const ChecklyConfigurePage = () => {
                 <Select
                   value={selectedSourceEnvironment}
                   onValueChange={(val) => setSelectedSourceEnvironment(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {workspace?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -209,7 +209,7 @@ export const ChecklyConfigurePage = () => {
                 <Select
                   value={targetAppId}
                   onValueChange={(val) => setTargetAppId(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   isDisabled={integrationAuthApps.length === 0}
                 >
                   {integrationAuthApps.length > 0 ? (
@@ -232,7 +232,7 @@ export const ChecklyConfigurePage = () => {
                 <Select
                   value={targetGroupId}
                   onValueChange={(val) => setTargetGroupId(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {integrationAuthGroups.length > 0 ? (
                     integrationAuthGroups.map((integrationAuthGroup) => (
@@ -274,7 +274,7 @@ export const ChecklyConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6"
           isFullWidth={false}
           isLoading={isLoading}
         >
@@ -295,12 +295,12 @@ export const ChecklyConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/CircleCIAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/CircleCIAuthorizePage.tsx
index 627daf7a0..78708fcd7 100644
--- a/frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/CircleCIAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/CircleCIAuthorizePage.tsx
@@ -54,7 +54,7 @@ export const CircleCIAuthorizePage = () => {
       <Helmet>
         <title>Authorize CircleCI Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your API Token, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -74,7 +74,7 @@ export const CircleCIAuthorizePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cicd/circleci"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -97,7 +97,7 @@ export const CircleCIAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Connect to CircleCI
diff --git a/frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx
index 7df2ae35c..186ad173d 100644
--- a/frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx
@@ -154,7 +154,7 @@ export const CircleCIConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 flex cursor-pointer flex-row items-center gap-0.5 rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 flex cursor-pointer flex-row items-center gap-0.5 rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -241,7 +241,7 @@ export const CircleCIConfigurePage = () => {
                 onValueChange={(e) => {
                   onChange(e);
                 }}
-                className="w-full border border-mineshaft-500"
+                className="border-mineshaft-500 w-full border"
               >
                 <SelectItem value={CircleCiScope.Project}>Project</SelectItem>
                 <SelectItem value={CircleCiScope.Context}>Context</SelectItem>
diff --git a/frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/Cloud66ConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/Cloud66ConfigurePage.tsx
index 68535d70e..41a25da44 100644
--- a/frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/Cloud66ConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/Cloud66ConfigurePage.tsx
@@ -96,7 +96,7 @@ export const Cloud66ConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -119,7 +119,7 @@ export const Cloud66ConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/CloudflarePagesAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/CloudflarePagesAuthorizePage.tsx
index 74e9f3d27..1fbf6db5a 100644
--- a/frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/CloudflarePagesAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/CloudflarePagesAuthorizePage.tsx
@@ -56,7 +56,7 @@ export const CloudflarePagesAuthorizePage = () => {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left"
           subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -89,7 +89,7 @@ export const CloudflarePagesAuthorizePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/CloudflarePagesConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/CloudflarePagesConfigurePage.tsx
index 0a0d08863..b446ce43a 100644
--- a/frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/CloudflarePagesConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/CloudflarePagesConfigurePage.tsx
@@ -125,8 +125,8 @@ export const CloudflarePagesConfigurePage = () => {
     integrationAuthApps &&
     targetEnvironment &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center bg-linear-to-tr from-mineshaft-900 to-bunker-900">
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+    <div className="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full items-center justify-center">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left"
           subTitle="Choose which environment in Infisical you want to sync with your Cloudflare Pages project."
@@ -137,7 +137,7 @@ export const CloudflarePagesConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {workspace?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -161,7 +161,7 @@ export const CloudflarePagesConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -184,7 +184,7 @@ export const CloudflarePagesConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {cloudflareEnvironments.map((cloudflareEnvironment) => (
               <SelectItem
@@ -211,7 +211,7 @@ export const CloudflarePagesConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/CloudflareWorkersAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/CloudflareWorkersAuthorizePage.tsx
index 67b62293e..8c3f53746 100644
--- a/frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/CloudflareWorkersAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/CloudflareWorkersAuthorizePage.tsx
@@ -56,7 +56,7 @@ export const CloudflareWorkersAuthorizePage = () => {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left"
           subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -89,7 +89,7 @@ export const CloudflareWorkersAuthorizePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/CloudflareWorkersConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/CloudflareWorkersConfigurePage.tsx
index 58bc8596b..5e2ba6d2c 100644
--- a/frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/CloudflareWorkersConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/CloudflareWorkersConfigurePage.tsx
@@ -93,8 +93,8 @@ export const CloudflareWorkersConfigurePage = () => {
   };
 
   return integrationAuth && selectedSourceEnvironment && integrationAuthApps && targetApp ? (
-    <div className="flex h-full w-full items-center justify-center bg-linear-to-tr from-mineshaft-900 to-bunker-900">
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+    <div className="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full items-center justify-center">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left"
           subTitle="Choose which environment in Infisical you want to sync with your Cloudflare Workers project."
@@ -105,7 +105,7 @@ export const CloudflareWorkersConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -129,7 +129,7 @@ export const CloudflareWorkersConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -152,7 +152,7 @@ export const CloudflareWorkersConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/CodefreshConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/CodefreshConfigurePage.tsx
index 80a54b621..dff20c62a 100644
--- a/frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/CodefreshConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/CodefreshConfigurePage.tsx
@@ -92,7 +92,7 @@ export const CodefreshConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -115,7 +115,7 @@ export const CodefreshConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/DatabricksAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/DatabricksAuthorizePage.tsx
index c4f503e41..01e28784c 100644
--- a/frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/DatabricksAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/DatabricksAuthorizePage.tsx
@@ -58,7 +58,7 @@ export const DatabricksAuthorizePage = () => {
       <Helmet>
         <title>Authorize Databricks Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your Access Token, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -78,7 +78,7 @@ export const DatabricksAuthorizePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/databricks"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -118,7 +118,7 @@ export const DatabricksAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isPending}
           isDisabled={isPending}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/DatabricksConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/DatabricksConfigurePage.tsx
index 1f5a3c40a..c30464c98 100644
--- a/frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/DatabricksConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/DatabricksConfigurePage.tsx
@@ -105,7 +105,7 @@ export const DatabricksConfigurePage = () => {
       <Helmet>
         <title>Set Up Databricks Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment or folder in Infisical you want to sync to which Databricks secrets scope."
@@ -125,7 +125,7 @@ export const DatabricksConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -141,7 +141,7 @@ export const DatabricksConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -168,7 +168,7 @@ export const DatabricksConfigurePage = () => {
               onValueChange={(val) => {
                 setTargetScope(val);
               }}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               placeholder={
                 integrationAuthScopes.length === 0 ? "No scopes found." : "Select scope..."
               }
@@ -192,24 +192,24 @@ export const DatabricksConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isPending}
           isDisabled={integrationAuthScopes.length === 0 || isPending}
         >
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           When integrating with Databricks, Infisical is intended to be the source of truth for the
           secrets in the configured Databricks scope.
         </span>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           Any secrets not present in Infisical will be removed from the specified scope. To prevent
           removal of secrets not managed by Infisical, Infisical recommends creating a designated
           secret scope for your integration.
@@ -229,12 +229,12 @@ export const DatabricksConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/DigitalOceanAppPlatformConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/DigitalOceanAppPlatformConfigurePage.tsx
index 2c6f08348..7a564d0bc 100644
--- a/frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/DigitalOceanAppPlatformConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/DigitalOceanAppPlatformConfigurePage.tsx
@@ -93,7 +93,7 @@ export const DigitalOceanAppPlatformConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const DigitalOceanAppPlatformConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/FlyioAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/FlyioAuthorizePage.tsx
index cdd0a14db..b84ab4a66 100644
--- a/frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/FlyioAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/FlyioAuthorizePage.tsx
@@ -63,7 +63,7 @@ export const FlyioAuthorizePage = () => {
       <Helmet>
         <title>Authorize Fly.io Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your access token, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -78,7 +78,7 @@ export const FlyioAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/FlyioConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/FlyioConfigurePage.tsx
index 7ae55c53c..2134c4012 100644
--- a/frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/FlyioConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/FlyioConfigurePage.tsx
@@ -104,7 +104,7 @@ export const FlyioConfigurePage = () => {
       <Helmet>
         <title>Set Up Fly.io Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment or folder in Infisical you want to sync to Fly.io environment variables."
@@ -119,7 +119,7 @@ export const FlyioConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -142,7 +142,7 @@ export const FlyioConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -165,7 +165,7 @@ export const FlyioConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -188,20 +188,20 @@ export const FlyioConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in Fly.io with secrets from Infisical.
         </span>
@@ -220,12 +220,12 @@ export const FlyioConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/GcpSecretManagerAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/GcpSecretManagerAuthorizePage.tsx
index d4d166bde..cc16a046a 100644
--- a/frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/GcpSecretManagerAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/GcpSecretManagerAuthorizePage.tsx
@@ -89,7 +89,7 @@ export const GcpSecretManagerAuthorizePage = () => {
       <Helmet>
         <title>Authorize GCP Secret Manager Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Connect Infisical to GCP Secret Manager to sync secrets."
@@ -109,7 +109,7 @@ export const GcpSecretManagerAuthorizePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/gcp-secret-manager"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -131,9 +131,9 @@ export const GcpSecretManagerAuthorizePage = () => {
             Continue with OAuth
           </Button>
           <div className="my-4 flex w-full flex-row items-center py-2">
-            <div className="w-full border-t border-mineshaft-400/40" />
-            <span className="mx-2 text-xs text-mineshaft-400">or</span>
-            <div className="w-full border-t border-mineshaft-400/40" />
+            <div className="border-mineshaft-400/40 w-full border-t" />
+            <span className="text-mineshaft-400 mx-2 text-xs">or</span>
+            <div className="border-mineshaft-400/40 w-full border-t" />
           </div>
         </div>
         <form onSubmit={handleSubmit(onFormSubmit)} className="px-6 pb-8 text-right">
@@ -148,7 +148,7 @@ export const GcpSecretManagerAuthorizePage = () => {
               >
                 <TextArea
                   {...field}
-                  className="h-48 border border-mineshaft-600 bg-bunker-900/80"
+                  className="border-mineshaft-600 bg-bunker-900/80 h-48 border"
                 />
               </FormControl>
             )}
diff --git a/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx
index 44e8347c3..287584c1b 100644
--- a/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx
@@ -177,7 +177,7 @@ export const GcpSecretManagerConfigurePage = () => {
       })}
       className="flex h-full w-full flex-col items-center justify-center"
     >
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <Helmet>
           <title>Set Up GCP Secret Manager Integration</title>
         </Helmet>
@@ -200,7 +200,7 @@ export const GcpSecretManagerConfigurePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/gcp-secret-manager"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -213,7 +213,7 @@ export const GcpSecretManagerConfigurePage = () => {
         </CardTitle>
         <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
+            <div className="border-mineshaft-600 flex w-full flex-row border-b">
               <Tab value={TabSections.Connection}>Connection</Tab>
               <Tab value={TabSections.Options}>Options</Tab>
             </div>
@@ -344,7 +344,7 @@ export const GcpSecretManagerConfigurePage = () => {
                   </FormControl>
                 )}
               />
-              <div className="mt-8 mb-[2.36rem]">
+              <div className="mb-[2.36rem] mt-8">
                 <Controller
                   control={control}
                   name="shouldLabel"
@@ -395,7 +395,7 @@ export const GcpSecretManagerConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mr-6 mb-8 ml-auto w-min"
+          className="mb-8 ml-auto mr-6 w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -458,12 +458,12 @@ export const GcpSecretManagerConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/GithubAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/GithubAuthorizePage.tsx
index c76092415..b822b8132 100644
--- a/frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/GithubAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/GithubAuthorizePage.tsx
@@ -38,7 +38,7 @@ export const GithubAuthorizePage = () => {
       <Helmet>
         <title>Select GitHub Integration Auth</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select how you'd like to integrate with GitHub. We recommend using the GitHub App method for fine-grained access."
@@ -53,7 +53,7 @@ export const GithubAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -71,7 +71,7 @@ export const GithubAuthorizePage = () => {
               onValueChange={(val) => {
                 setSelectedAuthMethod(val as AuthMethod);
               }}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
             >
               <SelectItem value={AuthMethod.APP}>GitHub App (Recommended)</SelectItem>
               <SelectItem value={AuthMethod.OAUTH}>OAuth</SelectItem>
@@ -110,7 +110,7 @@ export const GithubAuthorizePage = () => {
               }}
               colorSchema="primary"
               variant="outline_bg"
-              className="mt-4 ml-auto w-min"
+              className="ml-auto mt-4 w-min"
             >
               Connect to GitHub
             </Button>
diff --git a/frontend/src/pages/secret-manager/integrations/GithubConfigurePage/GithubConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/GithubConfigurePage/GithubConfigurePage.tsx
index 5e9871ade..8dd9736e8 100644
--- a/frontend/src/pages/secret-manager/integrations/GithubConfigurePage/GithubConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GithubConfigurePage/GithubConfigurePage.tsx
@@ -306,14 +306,14 @@ export const GithubConfigurePage = () => {
       <Helmet>
         <title>Set Up GitHub Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
           <CardTitle
             className="px-0 text-left text-xl"
             subTitle="Choose which environment in Infisical you want to sync to environment variables in GitHub."
           >
             <div className="flex flex-row items-center">
-              <div className="flex items-center rounded-full bg-mineshaft-200">
+              <div className="bg-mineshaft-200 flex items-center rounded-full">
                 <img
                   src="/images/integrations/GitHub.png"
                   height={30}
@@ -327,7 +327,7 @@ export const GithubConfigurePage = () => {
                 rel="noopener noreferrer"
                 href="https://infisical.com/docs/integrations/cicd/githubactions"
               >
-                <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   Docs
                   <FontAwesomeIcon
@@ -340,7 +340,7 @@ export const GithubConfigurePage = () => {
           </CardTitle>
           <Tabs defaultValue={TabSections.Connection}>
             <TabList>
-              <div className="flex w-full flex-row border-b border-mineshaft-600">
+              <div className="border-mineshaft-600 flex w-full flex-row border-b">
                 <Tab value={TabSections.Connection}>Connection</Tab>
                 <Tab value={TabSections.Options}>Options</Tab>
               </div>
@@ -365,7 +365,7 @@ export const GithubConfigurePage = () => {
                       <Select
                         defaultValue={field.value}
                         onValueChange={onChange}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                       >
                         {currentProject?.environments.map((sourceEnvironment) => (
                           <SelectItem
@@ -403,7 +403,7 @@ export const GithubConfigurePage = () => {
                           setValue("repoIds", []);
                           onChange(e);
                         }}
-                        className="w-full border border-mineshaft-500"
+                        className="border-mineshaft-500 w-full border"
                       >
                         <SelectItem value="github-org">Organization</SelectItem>
                         <SelectItem value="github-repo">Repository</SelectItem>
@@ -425,7 +425,7 @@ export const GithubConfigurePage = () => {
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                             {integrationAuthApps.length > 0 ? (
-                              <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
+                              <div className="border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-pointer items-center justify-between rounded-md border px-3 py-2 text-sm font-normal">
                                 {repoIds?.length === 1
                                   ? integrationAuthApps?.reduce(
                                       (acc, { appId, name, owner }) =>
@@ -436,14 +436,14 @@ export const GithubConfigurePage = () => {
                                 <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
                               </div>
                             ) : (
-                              <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
+                              <div className="border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-default items-center justify-between rounded-md border px-3 py-2 text-sm font-normal">
                                 No repositories found
                               </div>
                             )}
                           </DropdownMenuTrigger>
                           <DropdownMenuContent
                             align="start"
-                            className="z-100 max-h-80 thin-scrollbar overflow-y-scroll"
+                            className="z-100 thin-scrollbar max-h-80 overflow-y-scroll"
                           >
                             {integrationAuthApps.length > 0 ? (
                               integrationAuthApps.map((integrationAuthApp) => {
@@ -473,7 +473,7 @@ export const GithubConfigurePage = () => {
                                       isSelected ? (
                                         <FontAwesomeIcon
                                           icon={faCheckCircle}
-                                          className="pr-0.5 text-primary"
+                                          className="text-primary pr-0.5"
                                         />
                                       ) : (
                                         <div className="pl-[1.01rem]" />
@@ -511,7 +511,7 @@ export const GithubConfigurePage = () => {
                           <Select
                             value={field.value}
                             onValueChange={onChange}
-                            className="w-full border border-mineshaft-500"
+                            className="border-mineshaft-500 w-full border"
                           >
                             {integrationAuthOrgs &&
                               integrationAuthOrgs.map(({ name, orgId }) => (
@@ -537,7 +537,7 @@ export const GithubConfigurePage = () => {
                           <Select
                             value={field.value}
                             onValueChange={onChange}
-                            className="w-full border border-mineshaft-500"
+                            className="border-mineshaft-500 w-full border"
                           >
                             {secretsVisibility.map(({ label, value }) => (
                               <SelectItem key={`github-visibility-${value}`} value={value}>
@@ -562,7 +562,7 @@ export const GithubConfigurePage = () => {
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
                                 {integrationAuthApps.length > 0 ? (
-                                  <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
+                                  <div className="border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-pointer items-center justify-between rounded-md border px-3 py-2 text-sm font-normal">
                                     {repoIds?.length === 1
                                       ? integrationAuthApps?.reduce(
                                           (acc, { appId, name, owner }) =>
@@ -573,14 +573,14 @@ export const GithubConfigurePage = () => {
                                     <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
                                   </div>
                                 ) : (
-                                  <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
+                                  <div className="border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-default items-center justify-between rounded-md border px-3 py-2 text-sm font-normal">
                                     No repositories found
                                   </div>
                                 )}
                               </DropdownMenuTrigger>
                               <DropdownMenuContent
                                 align="start"
-                                className="z-100 max-h-80 thin-scrollbar overflow-y-scroll"
+                                className="z-100 thin-scrollbar max-h-80 overflow-y-scroll"
                               >
                                 {selectedOrganization ? (
                                   selectedOrganization.map((integrationAuthApp) => {
@@ -610,7 +610,7 @@ export const GithubConfigurePage = () => {
                                           isSelected ? (
                                             <FontAwesomeIcon
                                               icon={faCheckCircle}
-                                              className="pr-0.5 text-primary"
+                                              className="text-primary pr-0.5"
                                             />
                                           ) : (
                                             <div className="pl-[1.01rem]" />
@@ -652,7 +652,7 @@ export const GithubConfigurePage = () => {
                             setValue("repoOwner", selectedRepo?.owner);
                             onChange(e);
                           }}
-                          className="w-full border border-mineshaft-500"
+                          className="border-mineshaft-500 w-full border"
                         >
                           {integrationAuthApps?.length ? (
                             integrationAuthApps.map((app) => {
@@ -693,7 +693,7 @@ export const GithubConfigurePage = () => {
                           onValueChange={onChange}
                           isDisabled={!repoId}
                           className={twMerge(
-                            "w-full border border-mineshaft-500",
+                            "border-mineshaft-500 w-full border",
                             !repoId && "h-10 cursor-not-allowed"
                           )}
                         >
@@ -775,13 +775,13 @@ export const GithubConfigurePage = () => {
           </div>
         </form>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in GitHub with secrets from Infisical.
         </span>
@@ -800,12 +800,12 @@ export const GithubConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="li my-2 inline text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/GitlabAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/GitlabAuthorizePage.tsx
index 4b1c0e2a4..3ab945e45 100644
--- a/frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/GitlabAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/GitlabAuthorizePage.tsx
@@ -65,7 +65,7 @@ export const GitlabAuthorizePage = () => {
       <Helmet>
         <title>Authorize GitLab Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Authorize this integration to sync secrets from Infisical to GitLab. If no self-hosted GitLab URL is specified, then Infisical will connect you to GitLab Cloud."
@@ -80,7 +80,7 @@ export const GitlabAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/GitlabConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/GitlabConfigurePage.tsx
index 2f6382215..5b651f337 100644
--- a/frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/GitlabConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/GitlabConfigurePage.tsx
@@ -211,7 +211,7 @@ export const GitlabConfigurePage = () => {
       <Helmet>
         <title>Set Up GitLab Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select which environment or folder in Infisical you want to sync to GitLab's environment variables."
@@ -226,7 +226,7 @@ export const GitlabConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -239,7 +239,7 @@ export const GitlabConfigurePage = () => {
         </CardTitle>
         <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
+            <div className="border-mineshaft-600 flex w-full flex-row border-b">
               <Tab value={TabSections.Connection}>Connection</Tab>
               <Tab value={TabSections.Options}>Options</Tab>
             </div>
@@ -411,7 +411,7 @@ export const GitlabConfigurePage = () => {
                     <Select
                       defaultValue={field.value}
                       onValueChange={(e) => onChange(e)}
-                      className="w-full border border-mineshaft-500"
+                      className="border-mineshaft-500 w-full border"
                       dropdownContainerClassName="max-w-full"
                     >
                       {initialSyncBehaviors.map((b) => {
@@ -457,7 +457,7 @@ export const GitlabConfigurePage = () => {
                   )}
                 />
               </div>
-              <div className="mt-4 mb-5 ml-1">
+              <div className="mb-5 ml-1 mt-4">
                 <Controller
                   control={control}
                   name="shouldProtectSecrets"
@@ -504,7 +504,7 @@ export const GitlabConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mr-6 mb-8 ml-auto w-min"
+          className="mb-8 ml-auto mr-6 w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -555,12 +555,12 @@ export const GitlabConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/GitlabOauthCallbackPage/GitlabOauthCallbackPage.tsx b/frontend/src/pages/secret-manager/integrations/GitlabOauthCallbackPage/GitlabOauthCallbackPage.tsx
index e312f0438..51b2eec4c 100644
--- a/frontend/src/pages/secret-manager/integrations/GitlabOauthCallbackPage/GitlabOauthCallbackPage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/GitlabOauthCallbackPage/GitlabOauthCallbackPage.tsx
@@ -92,7 +92,7 @@ export const GitLabOAuthCallbackPage = () => {
   return (
     <div className="flex h-screen items-center justify-center">
       <div className="text-center">
-        <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+        <div className="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
         <p className="text-gray-600">Connecting to GitLab...</p>
       </div>
     </div>
diff --git a/frontend/src/pages/secret-manager/integrations/HashicorpVaultAuthorizePage/HashicorpVaultAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/HashicorpVaultAuthorizePage/HashicorpVaultAuthorizePage.tsx
index 4b922a9bc..c613827d0 100644
--- a/frontend/src/pages/secret-manager/integrations/HashicorpVaultAuthorizePage/HashicorpVaultAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HashicorpVaultAuthorizePage/HashicorpVaultAuthorizePage.tsx
@@ -79,7 +79,7 @@ export const HashicorpVaultAuthorizePage = () => {
       <Helmet>
         <title>Authorize Vault Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -99,7 +99,7 @@ export const HashicorpVaultAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -110,7 +110,7 @@ export const HashicorpVaultAuthorizePage = () => {
             </a>
           </div>
         </CardTitle>
-        <CardBody className="px-6 pt-0 pb-6">
+        <CardBody className="px-6 pb-6 pt-0">
           <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
             <Controller
               control={control}
diff --git a/frontend/src/pages/secret-manager/integrations/HashicorpVaultConfigurePage/HashicorpVaultConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/HashicorpVaultConfigurePage/HashicorpVaultConfigurePage.tsx
index 0dfcbb0bf..832ecd3f0 100644
--- a/frontend/src/pages/secret-manager/integrations/HashicorpVaultConfigurePage/HashicorpVaultConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HashicorpVaultConfigurePage/HashicorpVaultConfigurePage.tsx
@@ -129,7 +129,7 @@ export const HashicorpVaultConfigurePage = () => {
       <Helmet>
         <title>Set Up Vault Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select which environment or folder in Infisical you want to sync to which path in HashiCorp Vault."
@@ -149,7 +149,7 @@ export const HashicorpVaultConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -175,7 +175,7 @@ export const HashicorpVaultConfigurePage = () => {
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                   >
                     {currentProject?.environments.map((sourceEnvironment) => (
                       <SelectItem
@@ -249,13 +249,13 @@ export const HashicorpVaultConfigurePage = () => {
           </form>
         </CardBody>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in Vault with secrets from Infisical.
         </span>
@@ -274,12 +274,12 @@ export const HashicorpVaultConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/HasuraCloudAuthorizePage/HasuraCloudAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/HasuraCloudAuthorizePage/HasuraCloudAuthorizePage.tsx
index 5dd17cc4d..c17882257 100644
--- a/frontend/src/pages/secret-manager/integrations/HasuraCloudAuthorizePage/HasuraCloudAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HasuraCloudAuthorizePage/HasuraCloudAuthorizePage.tsx
@@ -61,7 +61,7 @@ export const HasuraCloudAuthorizePage = () => {
       <Helmet>
         <title>Authorize {APP_NAME} Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your access token, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -81,7 +81,7 @@ export const HasuraCloudAuthorizePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/hasura-cloud"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/secret-manager/integrations/HasuraCloudConfigurePage/HasuraCloudConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/HasuraCloudConfigurePage/HasuraCloudConfigurePage.tsx
index d216a11ab..9daa6103c 100644
--- a/frontend/src/pages/secret-manager/integrations/HasuraCloudConfigurePage/HasuraCloudConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HasuraCloudConfigurePage/HasuraCloudConfigurePage.tsx
@@ -88,7 +88,7 @@ export const HasuraCloudConfigurePage = () => {
       <Helmet>
         <title>Set Up {APP_NAME} Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle={`Choose which environment or folder in Infisical you want to sync to ${APP_NAME} environment variables.`}
@@ -108,7 +108,7 @@ export const HasuraCloudConfigurePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/hasura-cloud"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -131,7 +131,7 @@ export const HasuraCloudConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   value={field.value}
                   onValueChange={(val) => {
                     field.onChange(val);
@@ -170,7 +170,7 @@ export const HasuraCloudConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   value={field.value}
                   isDisabled={integrationAuthApps?.length === 0}
                   onValueChange={(val) => {
@@ -191,7 +191,7 @@ export const HasuraCloudConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mt-2 mb-6 ml-auto"
+            className="mb-6 ml-auto mt-2"
             isLoading={isSubmitting}
           >
             Create Integration
@@ -212,12 +212,12 @@ export const HasuraCloudConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/HerokuConfigurePage/HerokuConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/HerokuConfigurePage/HerokuConfigurePage.tsx
index d653011dd..92f8bd540 100644
--- a/frontend/src/pages/secret-manager/integrations/HerokuConfigurePage/HerokuConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HerokuConfigurePage/HerokuConfigurePage.tsx
@@ -116,7 +116,7 @@ export const HerokuConfigurePage = () => {
       <Helmet>
         <title>Set Up Heroku Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select which environment or folder in Infisical you want to sync to Heroku's environment variables."
@@ -131,7 +131,7 @@ export const HerokuConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -241,7 +241,7 @@ export const HerokuConfigurePage = () => {
           <Button
             colorSchema="primary"
             variant="outline_bg"
-            className="mt-2 mb-6 ml-auto"
+            className="mb-6 ml-auto mt-2"
             size="sm"
             type="submit"
             isLoading={isLoading}
@@ -277,12 +277,12 @@ export const HerokuConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/HerokuOauthCallbackPage/HerokuOauthCallbackPage.tsx b/frontend/src/pages/secret-manager/integrations/HerokuOauthCallbackPage/HerokuOauthCallbackPage.tsx
index 91e2b9d88..76a37fc4a 100644
--- a/frontend/src/pages/secret-manager/integrations/HerokuOauthCallbackPage/HerokuOauthCallbackPage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/HerokuOauthCallbackPage/HerokuOauthCallbackPage.tsx
@@ -93,7 +93,7 @@ export const HerokuOAuthCallbackPage = () => {
   return (
     <div className="flex h-screen items-center justify-center">
       <div className="text-center">
-        <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+        <div className="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
         <p className="text-gray-600">Connecting to Heroku...</p>
       </div>
     </div>
diff --git a/frontend/src/pages/secret-manager/integrations/LaravelForgeConfigurePage/LaravelForgeConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/LaravelForgeConfigurePage/LaravelForgeConfigurePage.tsx
index 55a5ac360..fd02d34bc 100644
--- a/frontend/src/pages/secret-manager/integrations/LaravelForgeConfigurePage/LaravelForgeConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/LaravelForgeConfigurePage/LaravelForgeConfigurePage.tsx
@@ -93,7 +93,7 @@ export const LaravelForgeConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const LaravelForgeConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/NetlifyConfigurePage/NetlifyConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/NetlifyConfigurePage/NetlifyConfigurePage.tsx
index 40ecc3bc5..5cf005747 100644
--- a/frontend/src/pages/secret-manager/integrations/NetlifyConfigurePage/NetlifyConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/NetlifyConfigurePage/NetlifyConfigurePage.tsx
@@ -104,7 +104,7 @@ export const NetlifyConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -127,7 +127,7 @@ export const NetlifyConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -150,7 +150,7 @@ export const NetlifyConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {netlifyEnvironments.map((netlifyEnvironment) => (
               <SelectItem
diff --git a/frontend/src/pages/secret-manager/integrations/NorthflankConfigurePage/NorthflankConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/NorthflankConfigurePage/NorthflankConfigurePage.tsx
index 9ff1e18c8..6618a0e15 100644
--- a/frontend/src/pages/secret-manager/integrations/NorthflankConfigurePage/NorthflankConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/NorthflankConfigurePage/NorthflankConfigurePage.tsx
@@ -114,7 +114,7 @@ export const NorthflankConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -137,7 +137,7 @@ export const NorthflankConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -161,7 +161,7 @@ export const NorthflankConfigurePage = () => {
             <Select
               value={targetSecretGroupId}
               onValueChange={(val) => setTargetSecretGroupId(val)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               isDisabled={integrationAuthSecretGroups.length === 0}
             >
               {integrationAuthSecretGroups.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/OctopusDeployAuthorizePage/OctopusDeployAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/OctopusDeployAuthorizePage/OctopusDeployAuthorizePage.tsx
index 21851e4cd..4bae39ced 100644
--- a/frontend/src/pages/secret-manager/integrations/OctopusDeployAuthorizePage/OctopusDeployAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/OctopusDeployAuthorizePage/OctopusDeployAuthorizePage.tsx
@@ -63,7 +63,7 @@ export const OctopusDeployAuthorizePage = () => {
       <Helmet>
         <title>Authorize Octopus Deploy Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your credentials, you will be prompted to set up an integration for a particular environment and secret path."
@@ -83,7 +83,7 @@ export const OctopusDeployAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -131,7 +131,7 @@ export const OctopusDeployAuthorizePage = () => {
           type="submit"
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isPending}
           isDisabled={isPending}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx
index 5b531ac2d..19e6c8742 100644
--- a/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx
@@ -178,7 +178,7 @@ export const OctopusDeployConfigurePage = () => {
     >
       <Card className="max-w-4xl rounded-md p-8 pt-4">
         <CardTitle className="text-center">
-          <SiOctopusdeploy size="1.2rem" className="mr-2 mb-1 inline-block" />
+          <SiOctopusdeploy size="1.2rem" className="mb-1 mr-2 inline-block" />
           Octopus Deploy Integration
         </CardTitle>
         <div className="grid grid-cols-2 gap-4">
@@ -218,9 +218,9 @@ export const OctopusDeployConfigurePage = () => {
             )}
           />
           <div className="col-span-2 flex w-full flex-row items-center pb-2">
-            <div className="w-full border-t border-mineshaft-500" />
-            <span className="mx-2 text-xs whitespace-nowrap text-mineshaft-400">Sync To</span>
-            <div className="w-full border-t border-mineshaft-500" />
+            <div className="border-mineshaft-500 w-full border-t" />
+            <span className="text-mineshaft-400 mx-2 whitespace-nowrap text-xs">Sync To</span>
+            <div className="border-mineshaft-500 w-full border-t" />
           </div>
           <Controller
             control={control}
diff --git a/frontend/src/pages/secret-manager/integrations/QoveryAuthorizePage/QoveryAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/QoveryAuthorizePage/QoveryAuthorizePage.tsx
index 128fbaf47..a2d6a04f2 100644
--- a/frontend/src/pages/secret-manager/integrations/QoveryAuthorizePage/QoveryAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/QoveryAuthorizePage/QoveryAuthorizePage.tsx
@@ -54,7 +54,7 @@ export const QoveryAuthorizePage = () => {
       <Helmet>
         <title>Authorize Qovery Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -69,7 +69,7 @@ export const QoveryAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -98,7 +98,7 @@ export const QoveryAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isFullWidth={false}
           isLoading={isLoading}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/QoveryConfigurePage/QoveryConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/QoveryConfigurePage/QoveryConfigurePage.tsx
index 20c6deba8..7caf34087 100644
--- a/frontend/src/pages/secret-manager/integrations/QoveryConfigurePage/QoveryConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/QoveryConfigurePage/QoveryConfigurePage.tsx
@@ -190,11 +190,11 @@ export const QoveryConfigurePage = () => {
   };
 
   return integrationAuth && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full flex-col items-center justify-center bg-linear-to-tr from-mineshaft-900 to-bunker-900">
+    <div className="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full flex-col items-center justify-center">
       <Helmet>
         <title>Set Up Qovery Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment in Infisical you want to sync to Checkly environment variables."
@@ -209,7 +209,7 @@ export const QoveryConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -222,7 +222,7 @@ export const QoveryConfigurePage = () => {
         </CardTitle>
         <Tabs defaultValue={TabSections.InfisicalSettings} className="px-6">
           <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
+            <div className="border-mineshaft-600 flex w-full flex-row border-b">
               <Tab value={TabSections.InfisicalSettings}>Infisical Settings</Tab>
               <Tab value={TabSections.QoverySettings}>Qovery Settings</Tab>
             </div>
@@ -239,7 +239,7 @@ export const QoveryConfigurePage = () => {
                 <Select
                   value={selectedSourceEnvironment}
                   onValueChange={(val) => setSelectedSourceEnvironment(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {currentProject?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -272,7 +272,7 @@ export const QoveryConfigurePage = () => {
                 <Select
                   value={scope}
                   onValueChange={(val) => setScope(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                 >
                   {qoveryScopes.map((qoveryScope) => (
                     <SelectItem value={qoveryScope.value} key={`target-app-${qoveryScope.value}`}>
@@ -286,7 +286,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetOrgId}
                     onValueChange={(val) => setTargetOrgId(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     isDisabled={integrationAuthOrgs.length === 0}
                   >
                     {integrationAuthOrgs.length > 0 ? (
@@ -311,7 +311,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetProjectId}
                     onValueChange={(val) => setTargetProjectId(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     isDisabled={integrationAuthProjects.length === 0}
                   >
                     {integrationAuthProjects.length > 0 ? (
@@ -336,7 +336,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetEnvironmentId}
                     onValueChange={(val) => setTargetEnvironmentId(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     isDisabled={integrationAuthEnvironments.length === 0}
                   >
                     {integrationAuthEnvironments.length > 0 ? (
@@ -361,7 +361,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetAppId}
                     onValueChange={(val) => setTargetAppId(val)}
-                    className="w-full border border-mineshaft-500"
+                    className="border-mineshaft-500 w-full border"
                     isDisabled={integrationAuthApps.length === 0}
                   >
                     {integrationAuthApps.length > 0 ? (
@@ -388,7 +388,7 @@ export const QoveryConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6"
           isFullWidth={false}
           isLoading={isLoading}
         >
@@ -414,12 +414,12 @@ export const QoveryConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/RailwayConfigurePage/RailwayConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/RailwayConfigurePage/RailwayConfigurePage.tsx
index 1d24f7ce7..b0d491481 100644
--- a/frontend/src/pages/secret-manager/integrations/RailwayConfigurePage/RailwayConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/RailwayConfigurePage/RailwayConfigurePage.tsx
@@ -137,7 +137,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -160,7 +160,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -183,7 +183,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetEnvironmentId}
             onValueChange={(val) => setTargetEnvironmentId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={targetEnvironments.length === 0}
           >
             {targetEnvironments.length > 0 ? (
@@ -206,7 +206,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetServiceId}
             onValueChange={(val) => setTargetServiceId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={targetServices.length === 0}
           >
             {filteredTargetServices.map((targetService) => (
diff --git a/frontend/src/pages/secret-manager/integrations/RenderAuthorizePage/RenderAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/RenderAuthorizePage/RenderAuthorizePage.tsx
index f1feca04a..a99130712 100644
--- a/frontend/src/pages/secret-manager/integrations/RenderAuthorizePage/RenderAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/RenderAuthorizePage/RenderAuthorizePage.tsx
@@ -54,7 +54,7 @@ export const RenderAuthorizePage = () => {
       <Helmet>
         <title>Authorize Render Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -69,7 +69,7 @@ export const RenderAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -98,7 +98,7 @@ export const RenderAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Connect to Render
diff --git a/frontend/src/pages/secret-manager/integrations/RenderConfigurePage/RenderConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/RenderConfigurePage/RenderConfigurePage.tsx
index 7066c860e..a552ea506 100644
--- a/frontend/src/pages/secret-manager/integrations/RenderConfigurePage/RenderConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/RenderConfigurePage/RenderConfigurePage.tsx
@@ -125,7 +125,7 @@ export const RenderConfigurePage = () => {
       <Helmet>
         <title>Set Up Render Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment or folder in Infisical you want to sync to Render environment variables."
@@ -140,7 +140,7 @@ export const RenderConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -230,7 +230,7 @@ export const RenderConfigurePage = () => {
               );
             }}
           />
-          <div className="mt-8 mb-[2.36rem] ml-1">
+          <div className="mb-[2.36rem] ml-1 mt-8">
             <Controller
               control={control}
               name="shouldAutoRedeploy"
@@ -249,7 +249,7 @@ export const RenderConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-4 mr-6 mb-8 ml-auto w-min"
+          className="mb-8 ml-auto mr-6 mt-4 w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -258,13 +258,13 @@ export const RenderConfigurePage = () => {
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in Render with secrets from Infisical.
         </span>
@@ -283,12 +283,12 @@ export const RenderConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/RundeckAuthorizePage/RundeckAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/RundeckAuthorizePage/RundeckAuthorizePage.tsx
index 2a76b32fc..b9e01512b 100644
--- a/frontend/src/pages/secret-manager/integrations/RundeckAuthorizePage/RundeckAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/RundeckAuthorizePage/RundeckAuthorizePage.tsx
@@ -66,7 +66,7 @@ export const RundeckAuthorizePage = () => {
       <Helmet>
         <title>Authorize Rundeck Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding your URL and auth token, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -86,7 +86,7 @@ export const RundeckAuthorizePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
diff --git a/frontend/src/pages/secret-manager/integrations/RundeckConfigurePage/RundeckConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/RundeckConfigurePage/RundeckConfigurePage.tsx
index 6944bb79f..9f78c7cb6 100644
--- a/frontend/src/pages/secret-manager/integrations/RundeckConfigurePage/RundeckConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/RundeckConfigurePage/RundeckConfigurePage.tsx
@@ -89,7 +89,7 @@ export const RundeckConfigurePage = () => {
       <Helmet>
         <title>Set Up Rundeck Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment or folder in Infisical you want to sync to the Rundeck Key Storage."
@@ -109,7 +109,7 @@ export const RundeckConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -132,7 +132,7 @@ export const RundeckConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   value={field.value}
                   onValueChange={(val) => {
                     field.onChange(val);
@@ -184,7 +184,7 @@ export const RundeckConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mt-2 mb-6 ml-auto"
+            className="mb-6 ml-auto mt-2"
             isLoading={isSubmitting}
           >
             Create Integration
@@ -205,12 +205,12 @@ export const RundeckConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/SelectIntegrationAuthPage/SelectIntegrationAuthPage.tsx b/frontend/src/pages/secret-manager/integrations/SelectIntegrationAuthPage/SelectIntegrationAuthPage.tsx
index b2db178c6..d6dc5e979 100644
--- a/frontend/src/pages/secret-manager/integrations/SelectIntegrationAuthPage/SelectIntegrationAuthPage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/SelectIntegrationAuthPage/SelectIntegrationAuthPage.tsx
@@ -159,7 +159,7 @@ export const SelectIntegrationAuthPage = () => {
       <Helmet>
         <title>Select Connection</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select an existing connection below or create a new one for your integration."
@@ -196,9 +196,9 @@ export const SelectIntegrationAuthPage = () => {
               })
             : undefined}
           <div className="mt-6 flex w-full flex-row items-center justify-center">
-            <div className="w-1/5 border-t border-mineshaft-400" />
+            <div className="border-mineshaft-400 w-1/5 border-t" />
             <p className="mx-4 text-xs text-gray-400">OR</p>
-            <div className="w-1/5 border-t border-mineshaft-400" />
+            <div className="border-mineshaft-400 w-1/5 border-t" />
           </div>
           <Button
             colorSchema="primary"
diff --git a/frontend/src/pages/secret-manager/integrations/SupabaseConfigurePage/SupabaseConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/SupabaseConfigurePage/SupabaseConfigurePage.tsx
index 38183a5ad..68b10ee9e 100644
--- a/frontend/src/pages/secret-manager/integrations/SupabaseConfigurePage/SupabaseConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/SupabaseConfigurePage/SupabaseConfigurePage.tsx
@@ -92,7 +92,7 @@ export const SupabaseConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -115,7 +115,7 @@ export const SupabaseConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/TeamcityAuthorizePage/TeamcityAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/TeamcityAuthorizePage/TeamcityAuthorizePage.tsx
index 44146ee4b..94100dad8 100644
--- a/frontend/src/pages/secret-manager/integrations/TeamcityAuthorizePage/TeamcityAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/TeamcityAuthorizePage/TeamcityAuthorizePage.tsx
@@ -64,7 +64,7 @@ export const TeamcityAuthorizePage = () => {
       <Helmet>
         <title>Authorize TeamCity Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -84,7 +84,7 @@ export const TeamcityAuthorizePage = () => {
               href="https://infisical.com/docs/integrations/cloud/teamcity"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -123,7 +123,7 @@ export const TeamcityAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Connect to TeamCity
diff --git a/frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/TeamcityConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/TeamcityConfigurePage.tsx
index b4fce5e94..7c81a43cb 100644
--- a/frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/TeamcityConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/TeamcityConfigurePage.tsx
@@ -112,7 +112,7 @@ export const TeamcityConfigurePage = () => {
       <Helmet>
         <title>Set Up TeamCity Integration</title>
       </Helmet>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Choose which environment or folders in Infisical you want to sync to which project in TeamCity."
@@ -132,7 +132,7 @@ export const TeamcityConfigurePage = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -147,7 +147,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -170,7 +170,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -193,7 +193,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={targetBuildConfigId}
             onValueChange={(val) => setTargetBuildConfigId(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={targetBuildConfigs.length === 0}
           >
             {targetBuildConfigs.length ? (
@@ -216,7 +216,7 @@ export const TeamcityConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -237,12 +237,12 @@ export const TeamcityConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/TerraformCloudAuthorizePage/TerraformCloudAuthorizePage.tsx b/frontend/src/pages/secret-manager/integrations/TerraformCloudAuthorizePage/TerraformCloudAuthorizePage.tsx
index 60245a252..d1b188407 100644
--- a/frontend/src/pages/secret-manager/integrations/TerraformCloudAuthorizePage/TerraformCloudAuthorizePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/TerraformCloudAuthorizePage/TerraformCloudAuthorizePage.tsx
@@ -64,7 +64,7 @@ export const TerraformCloudAuthorizePage = () => {
       <Helmet>
         <title>Authorize Terraform Cloud Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
@@ -84,7 +84,7 @@ export const TerraformCloudAuthorizePage = () => {
               href="https://infisical.com/docs/integrations/cloud/terraform-cloud"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -125,7 +125,7 @@ export const TerraformCloudAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
         >
           Connect to Terraform Cloud
diff --git a/frontend/src/pages/secret-manager/integrations/TerraformCloudConfigurePage/TerraformCloudConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/TerraformCloudConfigurePage/TerraformCloudConfigurePage.tsx
index c33b7cdd6..01f577e06 100644
--- a/frontend/src/pages/secret-manager/integrations/TerraformCloudConfigurePage/TerraformCloudConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/TerraformCloudConfigurePage/TerraformCloudConfigurePage.tsx
@@ -123,7 +123,7 @@ export const TerraformCloudConfigurePage = () => {
       <Helmet>
         <title>Create Terraform Cloud Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Specify the encironment and path within Infisical that you want to push to which project in Terraform."
@@ -143,7 +143,7 @@ export const TerraformCloudConfigurePage = () => {
               rel="noopener noreferrer"
               href="https://infisical.com/docs/integrations/cloud/terraform-cloud"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -158,7 +158,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -186,7 +186,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={variableType}
             onValueChange={(val) => setVariableType(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {variableTypes.map((variable) => (
               <SelectItem value={variable.name} key={`target-app-${variable.name}`}>
@@ -199,7 +199,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -222,7 +222,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={initialSyncBehavior}
             onValueChange={(e) => setInitialSyncBehavior(e)}
-            className="w-full border border-mineshaft-600"
+            className="border-mineshaft-600 w-full border"
           >
             {initialSyncBehaviors.map((b) => {
               return (
@@ -237,7 +237,7 @@ export const TerraformCloudConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto w-min"
+          className="mb-6 ml-auto mr-6 mt-2 w-min"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
diff --git a/frontend/src/pages/secret-manager/integrations/TravisCIConfigurePage/TravisCIConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/TravisCIConfigurePage/TravisCIConfigurePage.tsx
index e71a6ab31..23aa86372 100644
--- a/frontend/src/pages/secret-manager/integrations/TravisCIConfigurePage/TravisCIConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/TravisCIConfigurePage/TravisCIConfigurePage.tsx
@@ -93,7 +93,7 @@ export const TravisCIConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const TravisCIConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
index 8c00a84ff..92f1bbd9a 100644
--- a/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
@@ -174,7 +174,7 @@ export const VercelConfigurePage = () => {
       <Helmet>
         <title>Set Up Vercel Integration</title>
       </Helmet>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
         <CardTitle
           className="px-6 text-left text-xl"
           subTitle="Select which environment or folder in Infisical you want to sync to Vercel's environment variables."
@@ -189,7 +189,7 @@ export const VercelConfigurePage = () => {
               href="https://infisical.com/docs/integrations/cloud/vercel"
               rel="noopener noreferrer"
             >
-              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow mb-1 ml-2 inline-block cursor-default rounded-md px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -204,7 +204,7 @@ export const VercelConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -247,7 +247,7 @@ export const VercelConfigurePage = () => {
 
               setTargetAppId(val);
             }}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -270,7 +270,7 @@ export const VercelConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {selectedVercelEnvironments.map((vercelEnvironment) => (
               <SelectItem
@@ -287,7 +287,7 @@ export const VercelConfigurePage = () => {
             <Select
               value={targetBranch}
               onValueChange={(val) => setTargetBranch(val)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
             >
               {filteredBranches.map((branchName) => (
                 <SelectItem value={branchName} key={`target-branch-${branchName}`}>
@@ -302,7 +302,7 @@ export const VercelConfigurePage = () => {
           <Select
             value={initialSyncBehavior}
             onValueChange={(val) => setInitialSyncBehavior(val as IntegrationSyncBehavior)}
-            className="w-full border border-mineshaft-500 text-sm"
+            className="border-mineshaft-500 w-full border text-sm"
           >
             {initialSyncBehaviors.map((syncBehavior) => (
               <SelectItem value={syncBehavior.value} key={`sync-behavior-${syncBehavior.value}`}>
@@ -316,20 +316,20 @@ export const VercelConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mr-6 mb-6 ml-auto"
+          className="mb-6 ml-auto mr-6 mt-2"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
-      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="border-mineshaft-800 mt-6 w-full max-w-md border-t" />
+      <div className="border-mineshaft-600 bg-mineshaft-800 mt-6 flex w-full max-w-lg flex-col rounded-md border p-4">
         <div className="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
+          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
         </div>
-        <span className="mt-4 text-sm text-mineshaft-300">
+        <span className="text-mineshaft-300 mt-4 text-sm">
           After creating an integration, your secrets will start syncing immediately. This might
           cause an unexpected override of current secrets in Vercel with secrets from Infisical.
         </span>
@@ -348,12 +348,12 @@ export const VercelConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+        <div className="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
               target="_blank"
               rel="noopener noreferrer"
               href="mailto:support@infisical.com"
diff --git a/frontend/src/pages/secret-manager/integrations/WindmillConfigurePage/WindmillConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/WindmillConfigurePage/WindmillConfigurePage.tsx
index 7f781c89e..575867fee 100644
--- a/frontend/src/pages/secret-manager/integrations/WindmillConfigurePage/WindmillConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/WindmillConfigurePage/WindmillConfigurePage.tsx
@@ -95,7 +95,7 @@ export const WindmillConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -118,7 +118,7 @@ export const WindmillConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+            className="border-mineshaft-500 w-full border"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/SecretScanningDataSourceByIdPage.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/SecretScanningDataSourceByIdPage.tsx
index 8ab394f2b..7f4187cbc 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/SecretScanningDataSourceByIdPage.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/SecretScanningDataSourceByIdPage.tsx
@@ -55,7 +55,7 @@ const PageContent = () => {
   }
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
+    <div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <Button
           variant="link"
@@ -76,11 +76,11 @@ const PageContent = () => {
           <img
             alt={`${details.name} data source`}
             src={`/images/integrations/${details.image}`}
-            className="mt-3 ml-1 w-14"
+            className="ml-1 mt-3 w-14"
           />
           <div>
             <p className="text-3xl font-medium text-white">{dataSource.name}</p>
-            <p className="leading-3 text-bunker-300">{details.name} Data Source</p>
+            <p className="text-bunker-300 leading-3">{details.name} Data Source</p>
           </div>
         </div>
         <div className="flex justify-center">
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningDataSourceSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningDataSourceSection.tsx
index 583cf69f4..3c3536265 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningDataSourceSection.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningDataSourceSection.tsx
@@ -23,10 +23,10 @@ export const SecretScanningDataSourceSection = ({ dataSource }: Props) => {
 
   return (
     <>
-      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
+        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
           <div className="mr-2 flex flex-1 items-center justify-between">
-            <h3 className="font-medium text-mineshaft-100">Details</h3>
+            <h3 className="text-mineshaft-100 font-medium">Details</h3>
             {isDisconnected && (
               <Tooltip
                 className="text-xs"
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSection = ({ dataSource }: Props) => {
                   <span>Enabled</span>
                 </Badge>
               ) : (
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                   <FontAwesomeIcon icon={faBan} />
                   <span>Disabled</span>
                 </Badge>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceRow.tsx
index 7e9164257..69ea17eec 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceRow.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceRow.tsx
@@ -128,12 +128,12 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => {
   return (
     <Tr
       className={twMerge(
-        "group h-10 transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 transition-colors duration-100",
         lastScanStatus === SecretScanningScanStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`resource-${id}`}
     >
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex w-full items-center">
           <p className="truncate">{name}</p>
         </div>
@@ -143,7 +143,7 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => {
         {lastScanStatus?.match(/queued|scanning/) ? (
           <Badge
             variant="primary"
-            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
+            className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min animate-pulse items-center gap-1.5 whitespace-nowrap"
           >
             <FontAwesomeIcon icon={faSearch} />
             <span>Scanning For Leaks</span>
@@ -210,7 +210,7 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => {
               content={`This ${resourceDetails.singularNoun} will not be scanned due to exclusion in Data Source configuration.`}
             >
               <div className="ml-auto">
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                   <FontAwesomeIcon icon={faBan} />
                   <span>Inactive</span>
                 </Badge>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceSection.tsx
index 5616c956a..b87004721 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceSection.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceSection.tsx
@@ -44,11 +44,11 @@ export const SecretScanningResourceSection = ({ dataSource }: Props) => {
   const resourceDetails = RESOURCE_DESCRIPTION_HELPER[dataSource.type];
 
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-xl font-medium text-mineshaft-100">{resourceDetails.pluralTitle}</p>
-          <p className="text-sm text-bunker-300">
+          <p className="text-mineshaft-100 text-xl font-medium">{resourceDetails.pluralTitle}</p>
+          <p className="text-bunker-300 text-sm">
             {resourceDetails.pluralTitle} associated with this{" "}
             {SECRET_SCANNING_DATA_SOURCE_MAP[dataSource.type].name} Data Source
           </p>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceTable.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceTable.tsx
index 9b94759a4..1926fb8d8 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceTable.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceTable.tsx
@@ -217,14 +217,14 @@ export const SecretScanningResourcesTable = ({ dataSource }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel className="flex w-full items-center justify-between">
               Status
               <Tooltip
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx
index e174aa0ed..1c6a5d8be 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx
@@ -65,7 +65,7 @@ export const SecretScanningScanRow = ({ scan }: Props) => {
   return (
     <Tr
       className={twMerge(
-        "group h-10 transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 transition-colors duration-100",
         status === SecretScanningScanStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`scan-${id}`}
@@ -76,7 +76,7 @@ export const SecretScanningScanRow = ({ scan }: Props) => {
           <span className="text-mineshaft-300">{format(createdAt, "h:mm aa")}</span>
         </p>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex flex-col">
           <p className="truncate">{resourceName}</p>
         </div>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanSection.tsx
index c008e385d..3b193abcf 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanSection.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanSection.tsx
@@ -11,11 +11,11 @@ export const SecretScanningScanSection = ({ dataSource }: Props) => {
   const resourceDetails = RESOURCE_DESCRIPTION_HELPER[dataSource.type];
 
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-xl font-medium text-mineshaft-100">Scan History</p>
-          <p className="text-sm text-bunker-300">
+          <p className="text-mineshaft-100 text-xl font-medium">Scan History</p>
+          <p className="text-bunker-300 text-sm">
             Detailed history of when {resourceDetails.singularNoun} scans occurred and their
             findings
           </p>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanTable.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanTable.tsx
index dbeef5065..edbfbed51 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanTable.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanTable.tsx
@@ -177,14 +177,14 @@ export const SecretScanningScanTable = ({ dataSource }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>{resourceDetails.pluralTitle}</DropdownMenuLabel>
             {scans.length ? (
               [...new Set(scans.map(({ resourceName }) => resourceName))].map((resourceName) => {
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
index d681c34af..227fa8551 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
@@ -22,8 +22,8 @@ export const SecretScanningDataSourcesPage = () => {
         I={ProjectPermissionSecretScanningDataSourceActions.Read}
         a={ProjectPermissionSub.SecretScanningDataSources}
       >
-        <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="bg-bunker-800 h-full">
+          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
                 title="Data Sources"
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx
index d14d3a656..d4768305c 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx
@@ -111,12 +111,12 @@ export const SecretScanningDataSourceRow = ({
         })
       }
       className={twMerge(
-        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
+        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
         lastScanStatus === SecretScanningScanStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`data-source-${id}`}
     >
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex w-full items-center">
           <img
             alt={`${sourceDetails.name} Data Source`}
@@ -126,12 +126,12 @@ export const SecretScanningDataSourceRow = ({
           <p className="ml-2 truncate">{sourceDetails.name}</p>
         </div>
       </Td>
-      <Td className="max-w-0 min-w-32!">
+      <Td className="min-w-32! max-w-0">
         <div className="flex w-full items-center">
           <p className="truncate">{name}</p>
           {description && (
             <Tooltip content={description}>
-              <FontAwesomeIcon icon={faInfoCircle} size="xs" className="ml-1 text-mineshaft-400" />
+              <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-mineshaft-400 ml-1" />
             </Tooltip>
           )}
         </div>
@@ -141,7 +141,7 @@ export const SecretScanningDataSourceRow = ({
         {lastScanStatus?.match(/queued|scanning/) ? (
           <Badge
             variant="primary"
-            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
+            className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min animate-pulse items-center gap-1.5 whitespace-nowrap"
           >
             <FontAwesomeIcon icon={faSearch} />
             <span>Scanning For Leaks</span>
@@ -207,7 +207,7 @@ export const SecretScanningDataSourceRow = ({
               content={`Auto-Scan is disabled. Scans will not be automatically triggered when a ${autoScanDescription.verb} occurs to ${autoScanDescription.pluralNoun} associated with this data source`}
             >
               <div className="ml-auto">
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                   <FontAwesomeIcon icon={faBan} />
                   <span>Auto-Scan Disabled</span>
                 </Badge>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx
index 380ac70bd..7b7cf58ba 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx
@@ -37,17 +37,17 @@ export const SecretScanningDataSourcesSection = () => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Data Sources</p>
+              <p className="text-mineshaft-100 text-xl font-medium">Data Sources</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -57,7 +57,7 @@ export const SecretScanningDataSourcesSection = () => {
                 </div>
               </a>
             </div>
-            <p className="text-sm text-bunker-300">
+            <p className="text-bunker-300 text-sm">
               Configure Data Sources to scan for secret leaks from third-party services.
             </p>
           </div>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesTable.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesTable.tsx
index 8e879acce..798791722 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesTable.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesTable.tsx
@@ -241,14 +241,14 @@ export const SecretScanningDataSourcesTable = ({ dataSources }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Platform</DropdownMenuLabel>
             {dataSources.length ? (
               [...new Set(dataSources.map(({ type }) => type))].map((type) => {
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
index 1eddf5eee..61807be8f 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
@@ -20,8 +20,8 @@ export const SecretScanningFindingsPage = () => {
         I={ProjectPermissionSecretScanningFindingActions.Read}
         a={ProjectPermissionSub.SecretScanningFindings}
       >
-        <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="bg-bunker-800 h-full">
+          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader title="Findings" description="View Secret Leaks across your project." />
               <SecretScanningFindingsSection />
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx
index 579c4ee12..73045b841 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx
@@ -88,7 +88,7 @@ export const SecretScanningFindingRow = ({
       <Tr
         onClick={setIsExpanded.toggle}
         className={twMerge(
-          "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+          "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
         )}
         key={`resource-${id}`}
       >
@@ -102,7 +102,7 @@ export const SecretScanningFindingRow = ({
             }}
           />
         </Td>
-        <Td className="max-w-0 min-w-16!">
+        <Td className="min-w-16! max-w-0">
           <div className="flex w-full items-center">
             <img
               alt={`${sourceDetails.name} Data Source`}
@@ -118,10 +118,10 @@ export const SecretScanningFindingRow = ({
             <p className="text-mineshaft-300">{format(createdAt, "h:mm aa")}</p>
           </div>
         </Td>
-        <Td className="max-w-0 min-w-32!">
+        <Td className="min-w-32! max-w-0">
           <div className="w-full items-center">
             <p className="truncate">{resourceName}</p>
-            <p className="truncate text-xs text-mineshaft-400">{dataSourceName}</p>
+            <p className="text-mineshaft-400 truncate text-xs">{dataSourceName}</p>
           </div>
         </Td>
         <Td className="whitespace-nowrap">{rule}</Td>
@@ -174,7 +174,7 @@ export const SecretScanningFindingRow = ({
       <Tr>
         <Td colSpan={6} className="border-none! p-0">
           <div
-            className={`w-full overflow-hidden bg-mineshaft-900/75 transition-all duration-500 ${
+            className={`bg-mineshaft-900/75 w-full overflow-hidden transition-all duration-500 ${
               isExpanded ? "max-h-200 opacity-100" : "max-h-0"
             }`}
           >
@@ -208,13 +208,13 @@ export const SecretScanningFindingRow = ({
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="cursor-pointer text-mineshaft-300 underline underline-offset-2 hover:text-mineshaft-100"
+                  className="text-mineshaft-300 hover:text-mineshaft-100 cursor-pointer underline underline-offset-2"
                   href={details.link}
                 >
                   {details.link}
                 </a>
               </GenericFieldLabel>
-              <div className="col-span-full flex items-center border-t border-mineshaft-500" />
+              <div className="border-mineshaft-500 col-span-full flex items-center border-t" />
               <ProjectPermissionCan
                 I={ProjectPermissionSecretScanningFindingActions.Update}
                 a={ProjectPermissionSub.SecretScanningFindings}
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx
index d66dc46cb..091d68cfb 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx
@@ -20,17 +20,17 @@ export const SecretScanningFindingsSection = () => {
   if (isFindingsPending) return <ContentLoader />;
 
   return (
-    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-1">
-            <p className="text-xl font-medium text-mineshaft-100">Findings</p>
+            <p className="text-mineshaft-100 text-xl font-medium">Findings</p>
             <a
               href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="bg-yellow/20 text-yellow ml-1 mt-[0.32rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -40,7 +40,7 @@ export const SecretScanningFindingsSection = () => {
               </div>
             </a>
           </div>
-          <p className="text-sm text-bunker-300">
+          <p className="text-bunker-300 text-sm">
             Secret leaks discovered across your data sources
           </p>
         </div>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx
index d9ae0e433..4829556e1 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsTable.tsx
@@ -210,14 +210,14 @@ export const SecretScanningFindingsTable = ({ findings }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
             {Object.values(SecretScanningFindingStatus).map((status) => (
               <DropdownMenuItem
@@ -422,7 +422,7 @@ export const SecretScanningFindingsTable = ({ findings }: Props) => {
         findings={popUp.updateFinding.data}
       />
       {selectedRows.length > 0 && (
-        <div className="mt-4 flex items-center justify-between rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-2 pl-4">
+        <div className="border-mineshaft-600 bg-mineshaft-800 mt-4 flex items-center justify-between rounded-lg border p-2 pl-4">
           <span>
             {selectedRows.length} finding{selectedRows.length === 1 ? "" : "s"} selected
           </span>
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx
index 11894db7e..7ba2dcf66 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningUpdateFindingModal.tsx
@@ -102,7 +102,7 @@ const Content = ({ findings, onComplete }: ContentProps) => {
                 value={value}
                 placeholder="Select status..."
                 onValueChange={onChange}
-                className="w-full border border-mineshaft-500 capitalize"
+                className="border-mineshaft-500 w-full border capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
                 icon={value ? SECRET_SCANNING_FINDING_STATUS_ICON_MAP[value].icon : undefined}
@@ -128,7 +128,7 @@ const Content = ({ findings, onComplete }: ContentProps) => {
         render={({ field, fieldState: { error } }) => {
           return (
             <FormControl label="Remarks" isError={Boolean(error)} errorText={error?.message}>
-              <TextArea className="h-40 resize-none!" {...field} />
+              <TextArea className="resize-none! h-40" {...field} />
             </FormControl>
           );
         }}
diff --git a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
index 07161c360..237935e06 100644
--- a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
@@ -13,7 +13,7 @@ export const SettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx b/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx
index b87b29b7c..699238313 100644
--- a/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx
+++ b/frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/SecretScanningConfigForm.tsx
@@ -58,18 +58,18 @@ export const SecretScanningConfigForm = ({ config }: Props) => {
   };
 
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="mb-4">
         <div className="flex items-center gap-2">
-          <h2 className="text-xl font-medium text-mineshaft-100">Project Configuration</h2>
+          <h2 className="text-mineshaft-100 text-xl font-medium">Project Configuration</h2>
           <a
             target="_blank"
             href="https://infisical.com/docs/documentation/platform/secret-scanning/overview#configuration"
             className="mt-[0.02rem]"
             rel="noopener noreferrer"
           >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -78,7 +78,7 @@ export const SecretScanningConfigForm = ({ config }: Props) => {
             </div>
           </a>
         </div>
-        <p className="leading-5 text-mineshaft-400">
+        <p className="text-mineshaft-400 leading-5">
           Configure rules and exceptions to customize scanning
         </p>
       </div>
@@ -99,7 +99,7 @@ export const SecretScanningConfigForm = ({ config }: Props) => {
                       }
                       {...field}
                       rows={3}
-                      className="min-h-144 thin-scrollbar w-full resize-none! resize-y!"
+                      className="min-h-144 thin-scrollbar resize-none! resize-y! w-full"
                       isDisabled={!isAllowed}
                     />
                   </FormControl>
diff --git a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
index 841bb119f..ae7520d78 100644
--- a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
@@ -12,7 +12,7 @@ export const SettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+    <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
diff --git a/frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/ProjectSshConfigCasSection.tsx b/frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/ProjectSshConfigCasSection.tsx
index 86bdf3c34..83ecadb21 100644
--- a/frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/ProjectSshConfigCasSection.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/ProjectSshConfigCasSection.tsx
@@ -68,7 +68,7 @@ export const ProjectSshConfigCasSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <p className="mb-8 text-xl font-medium">Certificate Authorities</p>
       <form onSubmit={handleSubmit(onFormSubmit)}>
         <Controller
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx b/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
index 06567b121..cd2160583 100644
--- a/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
@@ -67,7 +67,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.friendlyName}>
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCaDetailsSection.tsx b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCaDetailsSection.tsx
index 96ba2c493..73b5382c1 100644
--- a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCaDetailsSection.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCaDetailsSection.tsx
@@ -32,9 +32,9 @@ export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
   };
 
   return ca ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">SSH CA Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">SSH CA Details</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Edit}
           a={ProjectPermissionSub.SshCertificateAuthorities}
@@ -63,9 +63,9 @@ export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">SSH CA ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">SSH CA ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{ca.id}</p>
+            <p className="text-mineshaft-300 text-sm">{ca.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -84,23 +84,23 @@ export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Friendly Name</p>
-          <p className="text-sm text-mineshaft-300">{ca.friendlyName}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Friendly Name</p>
+          <p className="text-mineshaft-300 text-sm">{ca.friendlyName}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Status</p>
-          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
+          <p className="text-mineshaft-300 text-sm">{caStatusToNameMap[ca.status]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
-          <p className="text-sm text-mineshaft-300">
+          <p className="text-mineshaft-300 text-sm font-medium">Key Algorithm</p>
+          <p className="text-mineshaft-300 text-sm">
             {sshCertKeyAlgorithmToNameMap[ca.keyAlgorithm]}
           </p>
         </div>
         <div>
-          <p className="text-sm font-medium text-mineshaft-300">Public Key</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Public Key</p>
           <div className="group flex align-top">
-            <p className="flex-1 text-sm text-mineshaft-300">{ca.publicKey.substring(0, 20)}...</p>
+            <p className="text-mineshaft-300 flex-1 text-sm">{ca.publicKey.substring(0, 20)}...</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={downloadText}>
                 <IconButton
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateContent.tsx b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateContent.tsx
index 9a7eaa58e..83aff5730 100644
--- a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateContent.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateContent.tsx
@@ -93,7 +93,7 @@ export const SshCertificateContent = ({
         </div>
       </div>
       <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-        <p className="mr-4 break-all whitespace-pre-wrap">{signedKey}</p>
+        <p className="mr-4 whitespace-pre-wrap break-all">{signedKey}</p>
       </div>
       {privateKey && (
         <>
@@ -128,7 +128,7 @@ export const SshCertificateContent = ({
             </div>
           </div>
           <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all whitespace-pre-wrap">{privateKey}</p>
+            <p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
           </div>
         </>
       )}
@@ -165,7 +165,7 @@ export const SshCertificateContent = ({
             </div>
           </div>
           <div className="flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all whitespace-pre-wrap">{publicKey}</p>
+            <p className="mr-4 whitespace-pre-wrap break-all">{publicKey}</p>
           </div>
         </>
       )}
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx
index 792c6ad3b..05dfb8c4c 100644
--- a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx
@@ -83,9 +83,9 @@ export const SshCertificateTemplatesSection = ({ caId }: Props) => {
   };
 
   return (
-    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">Certificate Templates</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 h-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">Certificate Templates</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.SshCertificateTemplates}
diff --git a/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx b/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
index 669e26404..476fd19bc 100644
--- a/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
+++ b/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
@@ -12,8 +12,8 @@ export const SshCasPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "SSH" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 h-full">
+        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
               title="SSH Certificate Authorities"
diff --git a/frontend/src/pages/ssh/SshCasPage/components/SshCaSection.tsx b/frontend/src/pages/ssh/SshCasPage/components/SshCaSection.tsx
index b1d24e8f3..46a47f043 100644
--- a/frontend/src/pages/ssh/SshCasPage/components/SshCaSection.tsx
+++ b/frontend/src/pages/ssh/SshCasPage/components/SshCaSection.tsx
@@ -61,9 +61,9 @@ export const SshCaSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Certificate Authorities</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Certificate Authorities</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.SshCertificateAuthorities}
diff --git a/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx b/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx
index c94f73664..01a168cbb 100644
--- a/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx
+++ b/frontend/src/pages/ssh/SshCasPage/components/SshCaTable.tsx
@@ -57,7 +57,7 @@ export const SshCaTable = ({ handlePopUpOpen }: Props) => {
               data.map((ca) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`ca-${ca.id}`}
                     onClick={() =>
                       navigate({
diff --git a/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx b/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
index 617f480a3..e1f793b34 100644
--- a/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
+++ b/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
@@ -12,8 +12,8 @@ export const SshCertsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "Certificates" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 h-full">
+        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
               title="SSH Certificates"
diff --git a/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx b/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx
index a9bf71a84..914039432 100644
--- a/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx
+++ b/frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx
@@ -12,9 +12,9 @@ import { SshCertificatesTable } from "./SshCertificatesTable";
 export const SshCertificatesSection = () => {
   const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["sshCertificate"] as const);
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Certificates</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Certificates</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.SshCertificates}
diff --git a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
index 1605286a8..2cf985522 100644
--- a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
@@ -68,7 +68,7 @@ const Page = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader title={data.name}>
diff --git a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupDetailsSection.tsx b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupDetailsSection.tsx
index a2d9c32c0..103a32407 100644
--- a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupDetailsSection.tsx
+++ b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupDetailsSection.tsx
@@ -21,9 +21,9 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
   const { data: sshHostGroup } = useGetSshHostGroupById(sshHostGroupId);
 
   return sshHostGroup ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">SSH Host Group Details</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">SSH Host Group Details</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Edit}
           a={ProjectPermissionSub.SshHostGroups}
@@ -52,9 +52,9 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
       </div>
       <div className="pt-4">
         <div className="mb-4">
-          <p className="text-sm font-medium text-mineshaft-300">SSH Host Group ID</p>
+          <p className="text-mineshaft-300 text-sm font-medium">SSH Host Group ID</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{sshHostGroup.id}</p>
+            <p className="text-mineshaft-300 text-sm">{sshHostGroup.id}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextId}>
                 <IconButton
@@ -73,8 +73,8 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
           </div>
         </div>
         <div>
-          <p className="text-sm font-medium text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{sshHostGroup.name}</p>
+          <p className="text-mineshaft-300 text-sm font-medium">Name</p>
+          <p className="text-mineshaft-300 text-sm">{sshHostGroup.name}</p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupHostsSection.tsx b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupHostsSection.tsx
index 6bfad3205..7520ce933 100644
--- a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupHostsSection.tsx
+++ b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupHostsSection.tsx
@@ -62,9 +62,9 @@ export const SshHostGroupHostsSection = ({ sshHostGroupId }: Props) => {
   };
 
   return (
-    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-medium text-mineshaft-100">SSH Hosts</h3>
+    <div className="border-mineshaft-600 bg-mineshaft-900 h-full rounded-lg border p-4">
+      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+        <h3 className="text-mineshaft-100 text-lg font-medium">SSH Hosts</h3>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Edit}
           a={ProjectPermissionSub.SshHostGroups}
diff --git a/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx b/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
index c6efa9670..d140f972b 100644
--- a/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
@@ -12,8 +12,8 @@ export const SshHostsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: "SSH" })}</title>
       </Helmet>
-      <div className="h-full bg-bunker-800">
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="bg-bunker-800 h-full">
+        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
               title="Hosts"
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx
index 6e65dd532..84cbc1864 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx
@@ -255,12 +255,12 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
             {loginMappingsFormFields.fields.map(({ id: metadataFieldId }, i) => (
               <div
                 key={metadataFieldId}
-                className="flex flex-col space-y-2 rounded-md border border-mineshaft-600 p-4"
+                className="border-mineshaft-600 flex flex-col space-y-2 rounded-md border p-4"
               >
                 <div className="mb-2 flex items-center justify-between">
                   <button
                     type="button"
-                    className="flex cursor-pointer items-center py-1 text-sm text-mineshaft-200"
+                    className="text-mineshaft-200 flex cursor-pointer items-center py-1 text-sm"
                     onClick={() => toggleMapping(i)}
                   >
                     <FontAwesomeIcon
@@ -272,7 +272,7 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                       control={control}
                       name={`loginMappings.${i}.loginUser`}
                       render={({ field }) => (
-                        <span className="text-sm leading-tight font-medium">
+                        <span className="text-sm font-medium leading-tight">
                           {field.value || "New Login Mapping"}
                         </span>
                       )}
@@ -290,7 +290,7 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                 {expandedMappings[i] && (
                   <>
                     <div>
-                      <span className="text-xs text-mineshaft-400">Login User</span>
+                      <span className="text-mineshaft-400 text-xs">Login User</span>
                       <Controller
                         control={control}
                         name={`loginMappings.${i}.loginUser`}
@@ -326,10 +326,10 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                       />
                     </div>
                     <div className="flex flex-col space-y-2">
-                      <div className="mt-4 mb-2 flex items-center justify-between">
+                      <div className="mb-2 mt-4 flex items-center justify-between">
                         <FormLabel
                           label="Allowed Principals"
-                          className="text-xs text-mineshaft-400"
+                          className="text-mineshaft-400 text-xs"
                         />
                         <Button
                           leftIcon={<FontAwesomeIcon icon={faPlus} />}
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx
index 0d0bd8e50..830c955e4 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx
@@ -53,16 +53,16 @@ export const SshHostGroupsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Host Groups</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Host Groups</p>
         <div className="flex justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://infisical.com/docs/documentation/platform/ssh/host-groups"
           >
-            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+            <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
               Documentation{" "}
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx
index b568b9fd1..2a2c8f579 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx
@@ -63,7 +63,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
               data.map((group) => {
                 return (
                   <Tr
-                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
                     key={`ssh-host-group-${group.id}`}
                     onClick={() =>
                       navigate({
@@ -95,7 +95,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
                                 <div className="flex items-center gap-1.5">
                                   <FontAwesomeIcon
                                     icon={faUser}
-                                    className="text-xs text-yellow/80"
+                                    className="text-yellow/80 text-xs"
                                   />
                                   <span>{username}</span>
                                   <Badge variant="primary">user</Badge>
@@ -113,7 +113,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
                                 <div className="flex items-center gap-1.5">
                                   <FontAwesomeIcon
                                     icon={faUsers}
-                                    className="text-xs text-green/80"
+                                    className="text-green/80 text-xs"
                                   />
                                   <span>{allowedGroup}</span>
                                   <Badge variant="success">group</Badge>
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx
index e9b0d870a..56fe604a9 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx
@@ -326,12 +326,12 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
             {loginMappingsFormFields.fields.map(({ id: metadataFieldId }, i) => (
               <div
                 key={metadataFieldId}
-                className="flex flex-col space-y-2 rounded-md border border-mineshaft-600 p-4"
+                className="border-mineshaft-600 flex flex-col space-y-2 rounded-md border p-4"
               >
                 <div className="mb-2 flex items-center justify-between">
                   <button
                     type="button"
-                    className="flex cursor-pointer items-center py-1 text-sm text-mineshaft-200"
+                    className="text-mineshaft-200 flex cursor-pointer items-center py-1 text-sm"
                     onClick={() => toggleMapping(i)}
                   >
                     <FontAwesomeIcon
@@ -343,11 +343,11 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                       control={control}
                       name={`loginMappings.${i}.loginUser`}
                       render={({ field }) => (
-                        <span className="text-sm leading-tight font-medium">
+                        <span className="text-sm font-medium leading-tight">
                           {field.value || "New Login Mapping"}
                           {loginMappingsFormFields.fields[i].source ===
                             LoginMappingSource.HOST_GROUP && (
-                            <span className="ml-2 text-xs text-mineshaft-400">
+                            <span className="text-mineshaft-400 ml-2 text-xs">
                               (inherited from host group)
                             </span>
                           )}
@@ -370,7 +370,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                 {expandedMappings[i] && (
                   <>
                     <div>
-                      <span className="text-xs text-mineshaft-400">Login User</span>
+                      <span className="text-mineshaft-400 text-xs">Login User</span>
                       <Controller
                         control={control}
                         name={`loginMappings.${i}.loginUser`}
@@ -419,10 +419,10 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                       />
                     </div>
                     <div className="flex flex-col space-y-2">
-                      <div className="mt-4 mb-2 flex items-center justify-between">
+                      <div className="mb-2 mt-4 flex items-center justify-between">
                         <FormLabel
                           label="Allowed Principals"
-                          className="text-xs text-mineshaft-400"
+                          className="text-mineshaft-400 text-xs"
                         />
                         {loginMappingsFormFields.fields[i].source === LoginMappingSource.HOST && (
                           <Button
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsSection.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsSection.tsx
index 0f57cbeb2..b23416c38 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsSection.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsSection.tsx
@@ -39,16 +39,16 @@ export const SshHostsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Hosts</p>
+        <p className="text-mineshaft-100 text-xl font-medium">Hosts</p>
         <div className="flex justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://infisical.com/docs/documentation/platform/ssh"
           >
-            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+            <span className="border-mineshaft-500 bg-mineshaft-600 text-mineshaft-200 hover:border-primary/40 hover:bg-primary/10 flex w-max cursor-pointer items-center rounded-md border px-4 py-2 duration-200 hover:text-white">
               Documentation{" "}
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
diff --git a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx
index 182ceebb2..6520c3df9 100644
--- a/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx
@@ -155,7 +155,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                                 <div className="text-mineshaft-200">
                                   {loginUser}
                                   {source === LoginMappingSource.HOST_GROUP && (
-                                    <span className="ml-2 text-xs text-mineshaft-400">
+                                    <span className="text-mineshaft-400 ml-2 text-xs">
                                       (inherited from host group)
                                     </span>
                                   )}
@@ -171,7 +171,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                                     <div className="flex items-center gap-1.5">
                                       <FontAwesomeIcon
                                         icon={faUser}
-                                        className="text-xs text-yellow/80"
+                                        className="text-yellow/80 text-xs"
                                       />
                                       <span>{username}</span>
                                       <Badge variant="primary">user</Badge>
@@ -189,7 +189,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                                     <div className="flex items-center gap-1.5">
                                       <FontAwesomeIcon
                                         icon={faUsers}
-                                        className="text-xs text-green/80"
+                                        className="text-green/80 text-xs"
                                       />
                                       <span>{group}</span>
                                       <Badge variant="success">group</Badge>
diff --git a/frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx b/frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx
index c2963494f..5006dc009 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx
@@ -7,14 +7,14 @@ export const PersonalSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800 text-white">
+    <div className="bg-bunker-800 h-full text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+      <div className="bg-bunker-800 flex w-full justify-center px-6 text-white">
         <div className="w-full max-w-6xl">
-          <div className="mt-6 mb-6">
+          <div className="mb-6 mt-6">
             <p className="text-3xl font-medium text-gray-200">{t("settings.personal.title")}</p>
           </div>
           <PersonalTabGroup />
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeySection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeySection.tsx
index 582da840a..252028243 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeySection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeySection.tsx
@@ -13,9 +13,9 @@ export const APIKeySection = () => {
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">
+        <p className="text-mineshaft-100 text-xl font-medium">
           {t("settings.personal.api-keys.title")}
         </p>
         <Tooltip content="API Keys are deprecated and will be removed in the future.">
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/AddAPIKeyModal.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/AddAPIKeyModal.tsx
index 213479b47..8fb0632c7 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/AddAPIKeyModal.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/AddAPIKeyModal.tsx
@@ -164,7 +164,7 @@ export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
             </div>
           </form>
         ) : (
-          <div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
             <p className="mr-4 break-all">{newAPIKey}</p>
             <IconButton
               ariaLabel="copy icon"
@@ -173,7 +173,7 @@ export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
               onClick={copyTokenToClipboard}
             >
               <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
-              <span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
+              <span className="group-hover:animate-fade-in bg-bunker-800 absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
                 Click to copy
               </span>
             </IconButton>
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/AuthMethodSection/AuthMethodSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/AuthMethodSection/AuthMethodSection.tsx
index 9996f2380..16da0405c 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/AuthMethodSection/AuthMethodSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/AuthMethodSection/AuthMethodSection.tsx
@@ -92,8 +92,8 @@ export const AuthMethodSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Authentication methods</h2>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Authentication methods</h2>
       <p className="mb-4 text-gray-400">
         By enabling a SSO provider, you are allowing an account with that provider which uses the
         same email address as your existing Infisical account to be able to log in to Infisical.
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/ChangeEmailSection/ChangeEmailSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/ChangeEmailSection/ChangeEmailSection.tsx
index c9d457e44..a676d46f6 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/ChangeEmailSection/ChangeEmailSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/ChangeEmailSection/ChangeEmailSection.tsx
@@ -166,8 +166,8 @@ export const ChangeEmailSection = () => {
 
   return (
     <>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Change email</h2>
+      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+        <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Change email</h2>
 
         <form onSubmit={emailForm.handleSubmit(handleEmailSubmit)}>
           <div className="max-w-md">
@@ -203,7 +203,7 @@ export const ChangeEmailSection = () => {
           >
             Send Verification Code
           </Button>
-          <p className="mt-2 font-inter text-sm text-mineshaft-400">
+          <p className="font-inter text-mineshaft-400 mt-2 text-sm">
             We&apos;ll send an 6-digit verification code to your new email address.
           </p>
         </form>
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/ChangePasswordSection/ChangePasswordSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/ChangePasswordSection/ChangePasswordSection.tsx
index 552eab741..20370b002 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/ChangePasswordSection/ChangePasswordSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/ChangePasswordSection/ChangePasswordSection.tsx
@@ -117,9 +117,9 @@ export const ChangePasswordSection = () => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
-      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Change password</h2>
+      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Change password</h2>
       <div className="max-w-md">
         <Controller
           defaultValue=""
@@ -162,7 +162,7 @@ export const ChangePasswordSection = () => {
               return (
                 <div className="items-top ml-1 flex flex-row justify-start" key={key}>
                   <div>
-                    <FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
+                    <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
                   </div>
                   <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
                 </div>
@@ -176,12 +176,12 @@ export const ChangePasswordSection = () => {
       <Button type="submit" colorSchema="secondary" isLoading={isLoading} isDisabled={isLoading}>
         Save
       </Button>
-      <p className="mt-2 font-inter text-sm text-mineshaft-400">
+      <p className="font-inter text-mineshaft-400 mt-2 text-sm">
         Need to setup a password?{" "}
         <button
           onClick={onSetupPassword}
           type="button"
-          className="underline underline-offset-2 hover:text-mineshaft-200"
+          className="hover:text-mineshaft-200 underline underline-offset-2"
         >
           Click here
         </button>
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/DeleteAccountSection/DeleteAccountSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/DeleteAccountSection/DeleteAccountSection.tsx
index 5761a772a..deabb7c74 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/DeleteAccountSection/DeleteAccountSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/DeleteAccountSection/DeleteAccountSection.tsx
@@ -35,8 +35,8 @@ export const DeleteAccountSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-medium text-mineshaft-100">Danger Zone</p>
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <p className="text-mineshaft-100 mb-4 text-xl font-medium">Danger Zone</p>
       <Button
         isLoading={isPending}
         colorSchema="danger"
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx
index ea8422a12..8809811ed 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx
@@ -29,7 +29,7 @@ export const PersonalTabGroup = () => {
       </TabPanel>
       <TabPanel value={tabs[2].key}>
         <div className="space-y-3">
-          <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+          <div className="border-primary-600/70 bg-primary/[.07] mt-4 flex w-full flex-row items-center rounded-md border p-4 text-base text-white">
             <FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
             <div className="flex w-full flex-col text-sm">
               <span className="mb-4 text-lg font-medium">Deprecation Notice</span>
@@ -41,7 +41,7 @@ export const PersonalTabGroup = () => {
                 <a
                   href="https://infisical.com/blog/deprecating-api-keys"
                   target="_blank"
-                  className="font-medium text-primary-400"
+                  className="text-primary-400 font-medium"
                   rel="noreferrer"
                 >
                   here
@@ -51,7 +51,7 @@ export const PersonalTabGroup = () => {
                 <a
                   href="https://infisical.com/docs/documentation/platform/identities/overview"
                   target="_blank"
-                  className="font-medium text-primary-400"
+                  className="text-primary-400 font-medium"
                   rel="noreferrer"
                 >
                   Learn more about Machine Identities
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/SecuritySection/MFASection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/SecuritySection/MFASection.tsx
index ef29f3ff6..4a83870be 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/SecuritySection/MFASection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/SecuritySection/MFASection.tsx
@@ -282,9 +282,9 @@ export const MFASection = () => {
           e.preventDefault();
           handleSaveChanges();
         }}
-        className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
       >
-        <h2 className="mb-6 text-xl font-medium text-mineshaft-100">Two-factor Authentication</h2>
+        <h2 className="text-mineshaft-100 mb-6 text-xl font-medium">Two-factor Authentication</h2>
 
         {user && (
           <div className="space-y-4">
@@ -332,15 +332,15 @@ export const MFASection = () => {
 
             {showMobileAuthSetup && !totpConfiguration?.isVerified && (
               <div className="space-y-6">
-                <h3 className="mb-6 text-lg font-medium text-mineshaft-100">
+                <h3 className="text-mineshaft-100 mb-6 text-lg font-medium">
                   Setup Mobile Authenticator
                 </h3>
 
                 <div className="mb-8">
-                  <h4 className="mb-2 text-sm font-medium text-mineshaft-200">
+                  <h4 className="text-mineshaft-200 mb-2 text-sm font-medium">
                     Step 1: Scan QR Code
                   </h4>
-                  <p className="mb-4 text-sm text-mineshaft-300">
+                  <p className="text-mineshaft-300 mb-4 text-sm">
                     Download a two-factor authentication app (Google Authenticator, Authy, etc.) and
                     scan the QR code below
                   </p>
@@ -364,9 +364,9 @@ export const MFASection = () => {
                         </div>
                         {totpRegistration?.otpUrl && (
                           <div>
-                            <p className="mb-2 text-xs text-mineshaft-400">
+                            <p className="text-mineshaft-400 mb-2 text-xs">
                               Can&apos;t scan? Enter this code manually:{" "}
-                              <code className="rounded-sm bg-mineshaft-700 px-3 py-1 font-mono text-sm text-mineshaft-100">
+                              <code className="bg-mineshaft-700 text-mineshaft-100 rounded-sm px-3 py-1 font-mono text-sm">
                                 {totpRegistration.otpUrl.split("secret=")[1]?.split("&")[0] ||
                                   "Loading..."}
                               </code>
@@ -379,10 +379,10 @@ export const MFASection = () => {
                 </div>
 
                 <div>
-                  <h4 className="mb-2 text-sm font-medium text-mineshaft-200">
+                  <h4 className="text-mineshaft-200 mb-2 text-sm font-medium">
                     Step 2: Enter verification code
                   </h4>
-                  <p className="mb-4 text-sm text-mineshaft-300">
+                  <p className="text-mineshaft-300 mb-4 text-sm">
                     Enter the 6-digit code from your authenticator app to complete setup
                   </p>
 
@@ -445,8 +445,8 @@ export const MFASection = () => {
             )}
 
             {user?.isMfaEnabled && totpConfiguration?.isVerified && (
-              <div className="mt-8 border-t border-mineshaft-600 pt-6">
-                <h3 className="mb-4 text-lg font-medium text-mineshaft-100">
+              <div className="border-mineshaft-600 mt-8 border-t pt-6">
+                <h3 className="text-mineshaft-100 mb-4 text-lg font-medium">
                   Mobile Authenticator Management
                 </h3>
 
@@ -476,11 +476,11 @@ export const MFASection = () => {
                   </div>
 
                   {shouldShowRecoveryCodes && (
-                    <div className="w-fit rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4 pr-8">
+                    <div className="border-mineshaft-600 bg-mineshaft-800 w-fit rounded-lg border p-4 pr-8">
                       <div className="grid grid-cols-2 gap-x-6 gap-y-2 font-mono text-sm">
                         {totpConfiguration.recoveryCodes.map((code, index) => (
-                          <div key={code} className="flex items-center text-mineshaft-200">
-                            <span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
+                          <div key={code} className="text-mineshaft-200 flex items-center">
+                            <span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
                             <span className="pl-2">{code}</span>
                           </div>
                         ))}
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/SessionsSection/SessionsSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/SessionsSection/SessionsSection.tsx
index 08cf20df8..1ba14f83b 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/SessionsSection/SessionsSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/SessionsSection/SessionsSection.tsx
@@ -19,9 +19,9 @@ export const SessionsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex justify-between">
-        <h2 className="flex-1 text-xl font-medium text-mineshaft-100">Sessions</h2>
+        <h2 className="text-mineshaft-100 flex-1 text-xl font-medium">Sessions</h2>
         <Button
           colorSchema="secondary"
           type="submit"
diff --git a/frontend/src/pages/user/PersonalSettingsPage/components/UserNameSection/UserNameSection.tsx b/frontend/src/pages/user/PersonalSettingsPage/components/UserNameSection/UserNameSection.tsx
index df0dae9cb..5e6310ae2 100644
--- a/frontend/src/pages/user/PersonalSettingsPage/components/UserNameSection/UserNameSection.tsx
+++ b/frontend/src/pages/user/PersonalSettingsPage/components/UserNameSection/UserNameSection.tsx
@@ -48,9 +48,9 @@ export const UserNameSection = (): JSX.Element => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
-      <p className="mb-4 text-xl font-medium text-mineshaft-100">Name</p>
+      <p className="text-mineshaft-100 mb-4 text-xl font-medium">Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""