diff --git a/.github/workflows/check-fe-ts-and-lint.yml b/.github/workflows/check-fe-ts-and-lint.yml
index deb605a9a..c9b38d068 100644
--- a/.github/workflows/check-fe-ts-and-lint.yml
+++ b/.github/workflows/check-fe-ts-and-lint.yml
@@ -30,6 +30,6 @@ jobs:
       - name: 🏗️ Run Type check
         run: npm run type:check
         working-directory: frontend
-      - name: 🏗️ Run Link check
+      - name: 🏗️ Run Lint check
         run: npm run lint
         working-directory: frontend
diff --git a/frontend/src/components/app-connections/AppConnectionOption.tsx b/frontend/src/components/app-connections/AppConnectionOption.tsx
index cce6d2d37..30a37425c 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="text-mineshaft-400 flex items-center gap-x-1">
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
             <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="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">
+                <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">
                     <FontAwesomeIcon icon={faBuilding} size="sm" />
                     Organization
                   </Badge>
@@ -35,7 +35,7 @@ export const AppConnectionOption = ({
               </Tooltip>
             )}
             {isSelected && (
-              <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
             )}
           </>
         )}
diff --git a/frontend/src/components/auth/CodeInputStep.tsx b/frontend/src/components/auth/CodeInputStep.tsx
index c11b8ca47..297a9f883 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 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>
+      <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>
       <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="mb-2 mt-6"
+          className="mt-6 mb-2"
         />
       </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="mb-2 mt-2"
+          className="mt-2 mb-2"
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}
-      <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="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="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 text-bunker-400 mt-2 flex flex-row">
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
+        <p className="pb-2 text-sm text-bunker-400">{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 809114dea..01b7006d3 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="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-xl font-medium text-transparent">
+        <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 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="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
+            <p className="mt-1.5 ml-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 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="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="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 mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
+      <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">
         <Link to="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <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">
+            <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">
               {t("signup.already-have-account")}
             </span>
           </button>
diff --git a/frontend/src/components/auth/InitialSignupStep.tsx b/frontend/src/components/auth/InitialSignupStep.tsx
index f86243052..91a597f07 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="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 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="text-bunker-400 mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs lg:w-1/6">
+      <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
         {t("signup.create-policy")}
       </div>
-      <div className="text-bunker-400 mt-2 flex flex-row text-xs">
+      <div className="mt-2 flex flex-row text-xs text-bunker-400">
         <Link to="/login">
-          <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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 cc77c0a02..4577f4ece 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 pb-4 pt-4 md:mb-16 md:px-8">
+        <div className="mx-auto w-max pt-4 pb-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 pb-6 pt-6 md:mb-16 md:px-8">
+    <div className="mx-auto w-max pt-6 pb-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 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>
+          <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>
         </>
       )}
       {method === MfaMethod.TOTP && (
         <div className="mb-8 text-center">
-          <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">
+          <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">
             {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="mb-2 mt-6"
+                className="mt-6 mb-2"
                 {...codeInputProps}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mb-6 mt-8 flex justify-center">
+            <div className="mt-8 mb-6 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="mb-2 mt-2"
+                className="mt-2 mb-2"
                 {...codeInputPropsPhone}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mb-6 mt-4 flex justify-center">
+            <div className="mt-4 mb-6 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="shadow-xs h-11 rounded-lg font-medium transition-all duration-200 hover:shadow-md"
+            className="h-11 rounded-lg font-medium shadow-xs 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 hover:text-bunker-200 hover:decoration-primary-700 transition-colors duration-200 hover:underline hover:underline-offset-4"
+            className="text-bunker-400 transition-colors duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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="text-bunker-400 hover:text-bunker-200 cursor-help transition-colors duration-200">
+              <span className="cursor-help text-bunker-400 transition-colors duration-200 hover:text-bunker-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 text-bunker-400 mt-2 flex flex-row">
+            <div className="text-md mt-2 flex flex-row text-bunker-400">
               <button disabled={isLoadingResend} onClick={handleResendMfaCode} type="button">
-                <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+                <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
+          <p className="pb-2 text-sm text-bunker-400">{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 7a108a41a..ccb1e6f57 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="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">
+    <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">
         {t("signup.step5-invite-team")}
       </p>
-      <p className="text-bunker-400 mb-6 mt-4 flex justify-center text-center md:mx-8">
+      <p className="mt-4 mb-6 flex justify-center text-center text-bunker-400 md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <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 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>
-          <div className="text-bunker-300 pb-1 pl-1 text-sm font-medium">
+          <div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
             <span>Emails</span>
           </div>
           <textarea
-            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"
+            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"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <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">
+        <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">
           <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 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">
+      <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">
         <Button
           onClick={redirectToHome}
           size="sm"
diff --git a/frontend/src/components/auth/UserInfoStep.tsx b/frontend/src/components/auth/UserInfoStep.tsx
index 4d117234d..021a7c231 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 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">
+      <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">
         {t("signup.step3-message")}
       </p>
-      <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="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="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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Your Name
           </p>
           <Input
@@ -156,13 +156,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {nameError && (
-            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+            <p className="mt-1 ml-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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Organization Name
           </p>
           <Input
@@ -174,13 +174,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {organizationNameError && (
-            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+            <p className="mt-1 ml-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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             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 text-red ml-0.5 mr-2.5"
+                          className="text-md mr-2.5 ml-0.5 text-red"
                         />
                       </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 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="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="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 573179f60..1ef937e4a 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="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>}
+      <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>}
     </div>
   );
 };
diff --git a/frontend/src/components/basic/InputField.tsx b/frontend/src/components/basic/InputField.tsx
index 65ae8d21f..b9ad8b41c 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 bg-bunker-800 outline-hidden w-full min-w-16 rounded-md border border-gray-600 p-2 text-gray-400"
+          className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-hidden"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -59,7 +59,7 @@ const InputField = ({
   }
   return (
     <div className="w-full flex-col">
-      <div className="text-mineshaft-300 mb-0.5 flex flex-row items-center">
+      <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
         <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 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
+              ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } 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`}
+          } 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`}
           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 text-clip rounded-md 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 rounded-md text-clip 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="text-red mx-0 mb-2 mt-0.5 max-w-xs text-xs">{errorText}</p>}
+      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
     </div>
   );
 };
diff --git a/frontend/src/components/features/TtlFormLabel.tsx b/frontend/src/components/features/TtlFormLabel.tsx
index 52fd0c7f2..83f058c7a 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="text-mineshaft-300 relative right-1 mt-0.5"
+            className="relative right-1 mt-0.5 text-mineshaft-300"
           />
         </Tooltip>
       }
diff --git a/frontend/src/components/features/WishForm.tsx b/frontend/src/components/features/WishForm.tsx
index 702600b5c..fc38d0731 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 hover:text-mineshaft-200 mb-3 w-full pl-5 duration-200">
+        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
           <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
           Request a feature
         </div>
@@ -72,7 +72,7 @@ export const WishForm = () => {
         hideCloseBtn
         align="start"
         alignOffset={20}
-        className="border-mineshaft-600 bg-mineshaft-900 mb-1 w-auto border p-4 drop-shadow-2xl"
+        className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-600 border bg-black/10 text-sm focus:ring-0"
+              className="border border-mineshaft-600 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 83689211f..6df1b535b 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="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="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="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 60e5754fe..17c0777f1 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="text-bunker-300 mb-2">{text}</p>
+        <p className="mb-2 text-bunker-300">{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 9a049ed2b..db779bd94 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="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
+          <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
             Save these codes securely. Each can only be used once.
           </div>
 
-          <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+          <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 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="text-mineshaft-200 flex items-center">
-                  <span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
+                <div key={code} className="flex items-center text-mineshaft-200">
+                  <span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
                   <span className="pl-2">{code}</span>
                 </div>
               ))}
@@ -96,11 +96,11 @@ export const RecoveryCodesDownload = ({
           </div>
 
           {hasDownloaded ? (
-            <p className="text-mineshaft-400 text-center text-xs">
+            <p className="text-center text-xs text-mineshaft-400">
               Recovery codes downloaded. You can now close this modal.
             </p>
           ) : (
-            <p className="text-mineshaft-400 text-center text-xs">
+            <p className="text-center text-xs text-mineshaft-400">
               Download the recovery codes to continue.
             </p>
           )}
diff --git a/frontend/src/components/mfa/TotpRegistration.tsx b/frontend/src/components/mfa/TotpRegistration.tsx
index 1f295ad01..0b79bfd98 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="text-bunker-200 flex max-w-lg flex-col">
+      <div className="flex max-w-lg flex-col text-bunker-200">
         <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 bf6acd083..a912980f1 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="bg-primary mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md text-sm text-black">
+      <div className="mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
         to="/organization/projects"
-        className="text-primary/80 hover:text-primary truncate pl-0.5 text-sm font-medium"
+        className="truncate pl-0.5 text-sm font-medium text-primary/80 hover:text-primary"
       >
         {currentOrg?.name}
       </Link>
       {isProjectRelated && (
         <>
-          <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>
+          <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>
         </>
       )}
       {isOrganizationRelated && (
         <>
-          <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-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-sm text-gray-400" />
+      <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-sm text-gray-400" />
       {pageName === "Secrets" ? (
         <Link
           to="/projects/secret-management/$projectId/overview"
           params={{ projectId: currentProject.id }}
-          className="text-primary/80 hover:text-primary text-sm font-medium"
+          className="text-sm font-medium text-primary/80 hover:text-primary"
         >
           {pageName}
         </Link>
@@ -101,15 +101,15 @@ export default function NavHeader({
       )}
       {currentEnv && secretPath === "/" && (
         <>
-          <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">
+          <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">
             <Tooltip content="Select environment">
               <Select
                 value={currentEnv}
                 onValueChange={(value) => {
                   if (value && onEnvChange) onEnvChange(value);
                 }}
-                className="text-primary/80 hover:text-primary border-none bg-transparent pl-0 text-sm font-medium"
+                className="border-none bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
                 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="ml-3 mr-1.5 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
           <Link
             to="/projects/secret-management/$projectId/secrets/$envSlug"
             params={{ projectId: currentProject.id, envSlug: routerEnvSlug }}
-            className="text-primary/80 hover:text-primary text-sm font-medium"
+            className="text-sm font-medium text-primary/80 hover:text-primary"
           >
             {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="ml-3 mr-1.5 text-xs text-gray-400" />
+              <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 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(
-                    "hover:text-primary text-sm transition-all",
+                    "text-sm transition-all hover:text-primary",
                     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="text-primary ml-2" />
+          <FontAwesomeIcon icon={faLock} className="ml-2 text-primary" />
         </Tooltip>
       )}
     </div>
diff --git a/frontend/src/components/navigation/RegionSelect.tsx b/frontend/src/components/navigation/RegionSelect.tsx
index 164e2546a..68a0d4568 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="text-mineshaft-400 mt-1 text-right text-xs underline">
+          <button type="button" className="mt-1 text-right text-xs text-mineshaft-400 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="ml-6 mt-2 flex flex-col gap-1">
+              <ul className="mt-2 ml-6 flex flex-col gap-1">
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Fastest
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Fastest
                   option if you are based in {value === Region.US ? "the" : ""} {label}
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Data
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Data
                   storage compliance for this region
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Hosted
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Hosted
                   in {regionLocation}
                 </li>
               </ul>
diff --git a/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx b/frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
index d5ca0dd4f..98baf90de 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="hover:bg-bunker-100/10 opacity-0 transition duration-75 group-hover:opacity-100"
+              className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
             >
               <FontAwesomeIcon
                 icon={!isCopying ? faCopy : faCheck}
@@ -76,7 +76,7 @@ export const SecretDashboardPathBreadcrumb = ({
           }}
           search={(query) => ({ ...query, secretPath: newSecretPath })}
           className={twMerge(
-            "hover:text-primary text-sm transition-all",
+            "text-sm transition-all hover:text-primary",
             isCopying && "text-primary"
           )}
         >
diff --git a/frontend/src/components/notifications/Notifications.tsx b/frontend/src/components/notifications/Notifications.tsx
index 8c180306f..22f47fa17 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="text-mineshaft-400 ml-2 text-xs">{action.label}</span>
+                    <span className="ml-2 text-xs text-mineshaft-400">{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 0e780cb5f..75236406f 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="border-mineshaft-600 mb-2 flex items-center gap-2 border-b pb-1">
+    <div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
       <div className="font-medium">Last Login</div>
     </div>
     <div className="mb-2 flex items-center gap-2 text-sm">
-      <div className="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
+      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 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="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
+      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 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 56881cd9b..963e99cd5 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 &&
-          "min-w-lg fixed bottom-4 left-20 z-50 h-[40%] w-[38%] lg:w-[34%]"
+          "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
       )}
     >
       <div
         className={twMerge(
-          "border-mineshaft-600 bg-mineshaft-900 mb-4 h-full w-full rounded-lg border transition-transform duration-500",
+          "mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
           viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
         )}
       >
         {viewMode === ViewMode.Docked && (
-          <div className="border-mineshaft-400 mb-4 flex items-start justify-between border-b pb-4">
+          <div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
             <div>
-              <h3 className="text-mineshaft-100 text-lg font-medium">Access Tree</h3>
-              <p className="text-mineshaft-400 text-sm leading-3">
+              <h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
+              <p className="text-sm leading-3 text-mineshaft-400">
                 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="bg-mineshaft-700 h-10 rounded-r-none"
+                className="h-10 rounded-r-none bg-mineshaft-700"
                 leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
                 onClick={handleToggleView}
               >
@@ -139,7 +139,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                 variant="outline_bg"
                 colorSchema="secondary"
                 type="submit"
-                className="bg-mineshaft-600 h-10 rounded-l-none"
+                className="h-10 rounded-l-none bg-mineshaft-600"
                 leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
                 onClick={handleToggleModalView}
               >
@@ -156,7 +156,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
         >
           <div className="h-full w-full">
             <ReactFlow
-              className="border-mineshaft rounded-md border"
+              className="rounded-md border border-mineshaft"
               nodes={nodes}
               edges={edges}
               edgeTypes={EdgeTypes}
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                       <SelectItem
                         key={env.slug}
                         value={env.slug}
-                        className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                        className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                       >
                         <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 405ad01ca..e17bd21e5 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="text-mineshaft-100 flex items-center gap-2">
+      <div className="flex items-center gap-2 text-mineshaft-100">
         <FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
         <p>
           Error displaying access tree. Please contact{" "}
           <a
-            className="text-mineshaft-200 decoration-primary-500 hover:text-mineshaft-100 inline cursor-pointer underline underline-offset-4 duration-200"
+            className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
             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 bg-mineshaft-700 text-mineshaft-100 w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded-sm p-2 text-xs">
+        <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">
           {display}
         </pre>
         <IconButton
           variant="plain"
           colorSchema="secondary"
-          className="absolute right-4 top-2"
+          className="absolute top-2 right-4"
           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 c4c9bc502..661fa7914 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="text-bunker-300 hover:text-primary pl-1 text-sm hover:opacity-80"
+              className="pl-1 text-sm text-bunker-300 hover:text-primary 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 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
+      className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
     >
-      <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 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>
           <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="text-mineshaft-400 mb-2 mt-1 text-xs">
+            <p className="mt-1 mb-2 text-xs text-mineshaft-400">
               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="border-mineshaft-500 w-full border capitalize"
+                className="w-full border border-mineshaft-500 capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -119,7 +119,7 @@ export const PermissionSimulation = ({
               <Select
                 value={environment}
                 onValueChange={setEnvironment}
-                className="border-mineshaft-500 w-full border capitalize"
+                className="w-full border border-mineshaft-500 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 5003dfa3a..78da6b138 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="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
       <div
-        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`}
+        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`}
       >
-        <div className="text-mineshaft-100 flex items-center space-x-2 text-xs">
-          <FontAwesomeIcon className="text-yellow mb-0.5 font-medium" icon={faFolder} />
+        <div className="flex items-center space-x-2 text-xs text-mineshaft-100">
+          <FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
           <span>{parentId ? `/${name}` : "/"}</span>
         </div>
-        <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">
+        <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">
           {Object.entries(actions).map(([action, access]) => {
             const { className, icon } = AccessMap[access];
 
@@ -70,7 +70,7 @@ export const FolderNode = ({
       </div>
       <Handle
         type="source"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! 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 27ee173b8..7946ee8c9 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="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
+            className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
             onClick={toggleSearch}
             role="button"
             tabIndex={0}
@@ -83,7 +83,7 @@ export const AccessTreeSecretPathInput = ({
         ) : (
           <Tooltip position="bottom" content="Search Paths">
             <div
-              className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
+              className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 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 f9f81e1d5..cd1ff2295 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="text-mineshaft-100 font-medium capitalize">{camelCaseToSpaces(key)}</span>{" "}
+      <span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
       <span className="text-mineshaft-200">
         {formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
       </span>{" "}
-      <span className="bg-mineshaft-600 rounded-sm p-0.5 font-mono">
+      <span className="rounded-sm bg-mineshaft-600 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="text-green flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-green capitalize">
             <FontAwesomeIcon icon={faCheckCircle} size="xs" />
             <span>Full {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy grants unconditional{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {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="text-yellow flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-yellow capitalize">
             <FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
             <span>Conditional {formatActionName(action)} Permissions</span>
           </div>
-          <p className="text-mineshaft-200 mb-1">
+          <p className="mb-1 text-mineshaft-200">
             Policy conditionally allows{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {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="text-red flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-red capitalize">
             <FontAwesomeIcon icon={faCircleXmark} size="xs" />
             <span>No {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy always forbids{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {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="border-mineshaft-600 bg-mineshaft-800 text-bunker-100 rounded-md border px-4 py-2 text-sm font-light"
+      className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
       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 1cef4ca59..0eee65a93 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="text-bunker-300 h-4 w-4" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
     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="text-bunker-300 h-4 w-4" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
   }
 };
 
@@ -40,18 +40,18 @@ export const RoleNode = ({
     <>
       <Handle
         type="target"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
-      <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">
+      <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">
           {getSubjectIcon(subject)}
           <span className="text-sm">{formatLabel(subject)} Access</span>
         </div>
       </div>
       <Handle
         type="source"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! 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 447500f11..6c707c211 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="border-mineshaft-600 bg-mineshaft-800 flex h-full w-full items-center justify-center rounded-md border p-2">
+    <div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
       <Handle
         type="target"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
 
diff --git a/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx b/frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx
index 6d273ff0c..33b06dbe4 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="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to import certificates from this {destinationName} destination into
         Infisical?
       </p>
-      <p className="text-bunker-300 mb-6 text-xs">
+      <p className="mb-6 text-xs text-bunker-300">
         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 176e9a96e..d5b3119d0 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 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 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 a22e3e683..0e18959dc 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="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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 e151357ee..f17855289 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="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         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 7861a1c60..3e898ba42 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 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 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 e504e39c8..667332c75 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">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="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 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="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"
+              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"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -109,7 +109,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -118,7 +118,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -129,7 +129,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <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 a51305237..983e4687c 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="hover:bg-mineshaft-700 cursor-pointer"
+              className="cursor-pointer hover:bg-mineshaft-700"
               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 481d5f323..83d85a35f 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 5bf7ab779..582518bd7 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="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="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="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
             Certificate Sync Behavior
           </div>
-          <p className="text-bunker-200 mt-1 text-sm">
+          <p className="mt-1 text-sm text-bunker-200">
             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 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {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] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }
@@ -207,7 +207,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                         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 51e7c752f..445f9169d 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <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 76cf2bbc5..4a7af22bf 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 64819ef18..ce581bb88 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="text-bunker-300 mb-4 text-sm">Configure how certificates should be synced.</p>
+      <p className="mb-4 text-sm text-bunker-300">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 data-[state=checked]:bg-green/80 shadow-inner"
+              className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
               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-bunker-300 text-xs">
+                    <div className="text-xs text-bunker-300">
                       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 c3159ce57..be6b91948 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Source</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Destination</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Sync Options</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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 b057b88d5..ea856cfb4 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 d4299120c..548fbd1e3 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="justify-betweens flex">
-        <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Project Overview</h2>
+        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">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 resize-none! bg-mineshaft-800 max-w-md"
+                          className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
                           isDisabled={!isAllowed}
                         />
                       </FormControl>
diff --git a/frontend/src/components/projects/NewProjectModal.tsx b/frontend/src/components/projects/NewProjectModal.tsx
index df9d5d69e..d71e7b957 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(
-                      "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",
+                      "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",
                       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 resize-none! bg-mineshaft-900 w-full"
+                className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
               />
             </FormControl>
           )}
@@ -311,7 +311,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                       onValueChange={(e) => {
                         onChange(e);
                       }}
-                      className="bg-mineshaft-600 mb-12 w-full"
+                      className="mb-12 w-full bg-mineshaft-600"
                       position="popper"
                       dropdownContainerClassName="max-w-none -top-1"
                       side="top"
@@ -333,7 +333,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <div className="absolute bottom-0 right-0 mb-6 mr-6 flex items-start justify-end">
+        <div className="absolute right-0 bottom-0 mr-6 mb-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 67f9c665c..857a13c4c 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="text-mineshaft-400 truncate text-xs leading-4">
+            <p className="truncate text-xs leading-4 text-mineshaft-400">
               {props.data.description}
             </p>
           ) : (
-            <p className="text-mineshaft-400/50 text-xs leading-4">No Description</p>
+            <p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
           )}
         </div>
         {isSelected && (
-          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="ml-2 text-primary" 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 b2e2de3f7..ad02e1706 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="text-mineshaft-300 flex items-center">
+            <div className="flex items-center text-mineshaft-300">
               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="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]" />
+                <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]" />
                   <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 d0f305ed2..20b08eb49 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 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         thumbClassName="bg-mineshaft-800"
         isChecked={revokeGeneratedCredentials}
         onCheckedChange={setRevokeGeneratedCredentials}
@@ -80,13 +80,13 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Revoke Credentials
       </Switch>
-      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
         {revokeGeneratedCredentials ? "" : " and remain active"}.
       </p>
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         thumbClassName="bg-mineshaft-800"
         isChecked={deleteSecrets}
         onCheckedChange={setDeleteSecrets}
@@ -94,7 +94,7 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Delete Secrets
       </Switch>
-      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         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 cb46eac12..e2c931d49 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="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         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 d23966055..d44d08046 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="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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 48c4448db..5679940fd 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -31,7 +31,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            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"
+            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"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -56,7 +56,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -65,7 +65,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -76,7 +76,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
           </>
         }
       >
-        <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">
+        <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">
           <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 e44a6ac8b..c3b38f7a7 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 whitespace-normal py-1">
+          <div className="flex flex-col gap-2 py-1 whitespace-normal">
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {errorMessage}
               </div>
             </div>
             {nextRotationAt && (
-              <span className="text-mineshaft-300 text-xs">
+              <span className="text-xs text-mineshaft-300">
                 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(
-          "bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
+          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
           className
         )}
       >
diff --git a/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx b/frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx
index db95a7cfc..e8553f6d9 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="text-mineshaft-400 mt-4 text-sm">Loading generated credentials...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">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-red text-sm">No generated credentials found for this rotation.</p>
+        <p className="text-sm text-red">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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+              className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
             >
               inactive period
             </a>
@@ -142,7 +142,7 @@ const Content = ({ secretRotation }: ContentProps) => {
         </NoticeBannerV2>
       )}
       {nextRotationAt && (
-        <div className="text-mineshaft-200 flex items-center gap-x-1.5 text-sm">
+        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
           <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 4e7984ffd..783510336 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="text-mineshaft-100 flex w-full items-center gap-1">
+        <div className="flex w-full items-center gap-1 text-mineshaft-100">
           {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 cd73e83b6..74aa5fbe0 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-100 text-sm">
-            <FontAwesomeIcon icon={faCheck} className="text-green mr-1.5" />
+        <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" />
             Current Credentials
           </span>
         </div>
-        <p className="text-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           The active credential set currently mapped to the rotation secrets.
         </p>
-        <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
+        <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
           {activeCredentials}
         </div>
       </div>
       {inactiveCredentials && (
         <div className="flex flex-col gap-2">
-          <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" />
+          <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" />
               Retired Credentials
             </span>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             The retired credential set that will be revoked during the next rotation cycle.
           </p>
-          <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
+          <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 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 0ba687e5b..aaabe0f72 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 scheme-dark text-white"
+                className="bg-mineshaft-700 text-white scheme-dark"
               />
             </FormControl>
           );
@@ -113,7 +113,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
               errorText={error?.message}
             >
               <Switch
-                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                 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="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
+        <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
           <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="decoration-yellow hover:text-mineshaft-200 underline underline-offset-2"
+            className="underline decoration-yellow underline-offset-2 hover:text-mineshaft-200"
           >
             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 f3023c5c4..c2064071f 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="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <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 f09b1688f..988b266b9 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 0b27793c9..9887da026 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 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {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] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "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 d959b32e0..21aac90b4 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="ml-4 mt-2 flex list-disc flex-col gap-2">
+                <ul className="mt-2 ml-4 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
             >
@@ -127,10 +127,10 @@ export const LdapPasswordRotationParametersFields = () => {
         )}
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
         </div>
-        <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">
+        <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">
           <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 db7b96eb5..b65467e5d 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="bg-mineshaft-700 text-bunker-300 rounded-sm px-1 py-0.5 font-mono font-medium">
+                    <code className="rounded-sm bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
                       ~* +@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="text-primary-500 hover:text-primary-600 font-medium underline"
+                      className="font-medium text-primary-500 underline hover:text-primary-600"
                       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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
         </div>
-        <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">
+        <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">
           <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 beb1b7e20..f24bec716 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 f70658b64..8d6f3797d 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="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           Infisical requires two database users to be created for rotation.
         </p>
-        <p className="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           These users are intended to be solely managed by Infisical. Altering their login after
           rotation may cause unexpected failure.
         </p>
-        <p className="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           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="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 max-h-40 overflow-y-auto whitespace-pre-wrap rounded-sm border p-2">
+          <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">
             {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 fc64ea828..e484a64b1 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Configuration</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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 5c0811f56..fdff4af5c 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="border-mineshaft-600 w-full border-b">
-        <span className="text-mineshaft-300 text-sm">{label}</span>
+      <div className="w-full border-b border-mineshaft-600">
+        <span className="text-sm text-mineshaft-300">{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 972551fcc..e05fd31f5 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 4df8da53a..a012cb392 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="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">
+                  <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">
                     <FontAwesomeIcon icon={faKey} />
                     <span>{name}</span>
                   </Badge>
                 </div>
               </td>
-              <td className="whitespace-nowrap pl-5 pr-5">
+              <td className="pr-5 pl-5 whitespace-nowrap">
                 <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 c2635294c..e4390024b 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="text-mineshaft-300 flex items-center">
+            <div className="flex items-center text-mineshaft-300">
               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="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]" />
+                <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]" />
                   <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 ef3bdaad0..9cf918dfb 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="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         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 28d9e4cda..da964d6b6 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="bg-bunker-500 h-12 rounded-md p-2"
+        className="h-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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 4b9d3a3e0..c507a6ef3 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -34,7 +34,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            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"
+            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"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -59,7 +59,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -68,7 +68,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
           </>
         }
       >
-        <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">
+        <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">
           <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 8cc6b812b..a02e050f0 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 whitespace-normal py-1">
+          <div className="flex flex-col gap-2 py-1 whitespace-normal">
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {errorMessage}
               </div>
               {scannedAt && (
-                <div className="text-mineshaft-400 mt-1 text-xs">
+                <div className="mt-1 text-xs text-mineshaft-400">
                   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 32a1a15a5..092e7d623 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="border-mineshaft-500 w-full border capitalize"
+          className="w-full border border-mineshaft-500 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 bf9655486..be369bd07 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="border-mineshaft-500 w-full border capitalize"
+          className="w-full border border-mineshaft-500 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 3b4d05973..d36f0553d 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="text-bunker-200 font-medium">Project</span>: Scan an
+                      <span className="font-medium text-bunker-200">Project</span>: Scan an
                       individual GitLab project.
                     </p>
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="text-bunker-200 font-medium">Group</span>: Scan one or more
+                      <span className="font-medium text-bunker-200">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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 dba27c357..c4334c29a 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="text-bunker-300 mb-4 text-sm">Connect and configure your Data Source.</p>
+      <p className="mb-4 text-sm text-bunker-300">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 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                 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 cdc12c51e..2e9e4a2a5 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="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <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 cd67cb239..868114c07 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 31e0adcfc..4d5ccdc79 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 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {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] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "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 c87d94fa9..69d630e8a 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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 506c5134c..c2613f85d 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="border-mineshaft-600 w-full border-b">
-        <span className="text-mineshaft-300 text-sm">Configuration</span>
+      <div className="w-full border-b border-mineshaft-600">
+        <span className="text-sm text-mineshaft-300">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 5c1729f64..2b3903a9b 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 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         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 3ad96ebf7..c1b21a771 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="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -115,7 +115,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               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 b7b6768bb..54cfcd588 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 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 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 8f018ecda..7257b3d04 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="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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 c0c7b9213..718392b92 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="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         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 d8a82ce65..abbd78838 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 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <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="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 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 3541b8529..0c0fdd67b 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">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="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 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="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"
+              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"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -107,7 +107,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -116,7 +116,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -127,7 +127,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <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 19db346f9..45e0297bd 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="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="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="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
             Secret Sync Behavior
           </div>
-          <p className="text-bunker-200 mt-1 text-sm">
+          <p className="mt-1 text-sm text-bunker-200">
             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 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {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] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }
@@ -221,7 +221,7 @@ export const CreateSecretSyncForm = ({
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                         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 5580be42b..d80dbc640 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="text-mineshaft-400 mt-2 text-xs">
+            <p className="mt-2 text-xs text-mineshaft-400">
               Duplicate found in project ID:{" "}
-              <code className="bg-mineshaft-600 text-mineshaft-200 rounded-sm px-1 py-0.5">
+              <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
                 {duplicateProjectId}
               </code>
             </p>
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx
index 2cda6310c..62542a570 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <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 fda69c08c..dc35c1f0e 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="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   /demo/path/
                 </code>{" "}
                 and a key schema of{" "}
-                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   INFISICAL_{"{{secretKey}}"}
                 </code>
                 , then the result will be{" "}
-                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   /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 5db19faa3..fe1a4c287 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="text-bunker-200 font-medium">One-To-One</span>: Each
+                      <span className="font-medium text-bunker-200">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="text-bunker-200 font-medium">Many-To-One</span>: All
+                      <span className="font-medium text-bunker-200">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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 8d8e17e20..eb196c9a4 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 7c34bcbfa..e7d988f46 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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -133,7 +133,7 @@ export const GcpSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 9a5f5ddc5..cabda1e66 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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="border-mineshaft-500 w-full border capitalize"
+                  className="w-full border border-mineshaft-500 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 702f57c7d..fe73ea5d5 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 data-[state=checked]:bg-green/80 shadow-inner"
+      className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
       id={id}
       thumbClassName="bg-mineshaft-800"
       onCheckedChange={onChange}
@@ -108,7 +108,7 @@ export const GitLabSyncFields = () => {
                 setValue("destinationConfig.groupId", "");
                 setValue("destinationConfig.groupName", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 4e1d4c1eb..229f54b01 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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -150,7 +150,7 @@ export const HumanitecSyncFields = () => {
                 onChange(val);
                 setValue("destinationConfig.env", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 9260a2b65..b88e0d6e6 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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -78,7 +78,7 @@ export const RenderSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 3ae3643bb..4f2718089 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-bunker-300 text-sm">
+      <span className="text-sm text-bunker-300">
         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 725759215..70394cc76 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="text-bunker-200 font-medium">
+                      <span className="font-medium text-bunker-200">
                         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="text-bunker-200 font-medium">
+                      <span className="font-medium text-bunker-200">
                         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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -164,7 +164,7 @@ export const TerraformCloudSyncFields = () => {
                 setValue("destinationConfig.variableSetName", "");
                 setValue("destinationConfig.workspaceName", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 4dc364171..8578fa63c 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="decoration-primary hover:text-mineshaft-200 cursor-pointer underline underline-offset-2">
+                  <span className="cursor-pointer underline decoration-primary underline-offset-2 hover:text-mineshaft-200">
                     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 2ca1bbffa..e00100284 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="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -74,7 +74,7 @@ export const ZabbixSyncFields = () => {
                 setValue("destinationConfig.hostId", "");
                 setValue("destinationConfig.hostName", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 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 89dd4e2ac..6b1894626 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="ml-1 mr-auto cursor-pointer">
+        <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
           {props.data.slug}
         </Badge>
         {isSelected && (
-          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="ml-2 text-primary" 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 414c3e35e..0631a160e 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 63a4a1953..f6ff23552 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="mb-4 mt-2 flex flex-col pl-2">
+    <div className="mt-2 mb-4 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-mineshaft-400 text-xs">Key</span>}
+              {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs" isOptional />
+                <FormLabel label="Value" className="text-xs text-mineshaft-400" 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="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -173,7 +173,7 @@ export const AwsParameterStoreSyncOptionsFields = () => {
         )}
       />
       <Switch
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
         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 data-[state=checked]:bg-green/80 shadow-inner"
+              className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
               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 25ba9da18..66212c097 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="mb-4 mt-2 flex flex-col pl-2">
+    <div className="mt-2 mb-4 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-mineshaft-400 text-xs">Key</span>}
+              {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs" isOptional />
+                <FormLabel label="Value" className="text-xs text-mineshaft-400" 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="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
+                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -178,7 +178,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
       />
 
       <Switch
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
         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 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                 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 b1ea76e4e..6d4173bd0 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 data-[state=checked]:bg-green/80 shadow-inner"
+            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
             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 b834c4103..4fe457179 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="text-bunker-300 mb-4 text-sm">Configure how secrets should be synced.</p>
+      <p className="mb-4 text-sm text-bunker-300">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="text-bunker-200 font-medium">{name}</span>:{" "}
+                                <span className="font-medium text-bunker-200">{name}</span>:{" "}
                                 {description}
                               </p>
                             </li>
@@ -118,7 +118,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                   isDisabled={!syncOption?.canImportSecrets}
                   value={value}
                   onValueChange={(val) => onChange(val)}
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   position="popper"
                   placeholder="Select an option..."
                   dropdownContainerClassName="max-w-none"
@@ -137,7 +137,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
             )}
           />
           {!syncOption?.canImportSecrets && (
-            <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
+            <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
               <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 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                 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 bb7418a4d..073cb4175 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="whitespace-nowrap p-2">Key</Th>
+                  <Th className="p-2 whitespace-nowrap">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 42fd38bdb..90d7d5023 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="whitespace-nowrap p-2">Key</Th>
+                  <Th className="p-2 whitespace-nowrap">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 b0e2ad967..d6c34fb87 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Source</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="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 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>
         {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="mr-2 mt-1 text-yellow-600" />
+              <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Sync Options</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">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 59f3234c1..127ac503c 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="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         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 7166ecf87..7e1876ada 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-bunker-300 text-xs">Repositories:</span>
+        <span className="text-xs text-bunker-300">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 7ceaa4e49..0b6daf889 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 text-mineshaft-400 mr-2 transition-transform duration-300 ease-linear"
+              className="d mr-2 text-mineshaft-400 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(
-                "text-mineshaft-400 ml-1 px-1 text-xs",
+                "ml-1 px-1 text-xs text-mineshaft-400",
                 !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="thin-scrollbar border-mineshaft-600 bg-bunker-700 text-mineshaft-200 relative max-h-96 overflow-auto rounded-md border py-6 text-sm">
+      <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">
         {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="text-mineshaft-400 mt-2 text-sm">
+      <div className="mt-2 text-sm text-mineshaft-400">
         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 a4760afcb..1c2891f42 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="text-mineshaft-400 mb-0.5 ml-1 block text-sm font-normal">
+            <div className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400">
               Tag Color
             </div>
             <div className="flex space-x-2">
-              <div className="border-mineshaft-500 bg-mineshaft-900 flex items-center justify-center rounded-sm border p-2">
+              <div className="flex items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 p-2">
                 <div
                   className="h-6 w-6 rounded-full"
                   style={{ background: `${selectedTagColor}` }}
                 />
               </div>
-              <div className="border-mineshaft-500 bg-mineshaft-900 flex grow items-center rounded-sm px-1 pr-2">
+              <div className="flex grow items-center rounded-sm border-mineshaft-500 bg-mineshaft-900 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 border-mineshaft-500 h-7 w-7 rounded-full border border-dashed" />
+                        <div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" />
                       )}
                     </div>
                     <div className="grow">
@@ -227,10 +227,10 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
                     </div>
                   </div>
                 )}
-                <div className="border-mineshaft-500 mx-4 h-8 border" />
+                <div className="mx-4 h-8 border border-mineshaft-500" />
                 <div className="flex h-7 w-7 items-center justify-center">
                   <div
-                    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 ${
+                    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 ${
                       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 81539268f..fa5ab9b57 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="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 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>
-        <div className="text-bunker-100 text-4xl font-medium">{title}</div>
+        <div className="text-4xl font-medium text-bunker-100">{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 2ecb2cd30..d36c6705b 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(
-        "data-[state=open]:border-primary mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l",
+        "mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "outline-hidden hover:text-primary data-[state=open]:text-primary group flex h-11 flex-1 items-center justify-between px-4 py-2",
+        "group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-hidden hover:text-primary data-[state=open]:text-primary",
         className
       )}
       {...props}
@@ -70,7 +70,7 @@ export const Accordion = ({
   children,
   ...props
 }: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => (
-  <AccordionPrimitive.Root {...props} className={twMerge("text-bunker-300 w-80", props.className)}>
+  <AccordionPrimitive.Root {...props} className={twMerge("w-80 text-bunker-300", props.className)}>
     {children}
   </AccordionPrimitive.Root>
 );
diff --git a/frontend/src/components/v2/Alert/Alert.tsx b/frontend/src/components/v2/Alert/Alert.tsx
index 676c37958..f4910e495 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-primary text-lg"
+            className="text-lg text-primary"
             icon={variantIconMap[variant ?? "default"]}
           />
         )}
       </div>
       <div className="flex flex-col gap-y-1">
         {hideTitle ? null : (
-          <h5 className="font-medium leading-6 tracking-tight" {...props}>
+          <h5 className="leading-6 font-medium tracking-tight" {...props}>
             {defaultTitle}
           </h5>
         )}
diff --git a/frontend/src/components/v2/Blur/Blur.tsx b/frontend/src/components/v2/Blur/Blur.tsx
index d2b77e414..be0db5f19 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 pl-4 pr-2", className)}
+        className={twMerge("flex w-80 grow items-center py-1 pr-2 pl-4", className)}
         tabIndex={0}
         role="button"
       >
diff --git a/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx b/frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
index cd5bc7928..6a0046bbf 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(
-        "text-bunker-100 flex flex-wrap items-center break-words text-sm",
+        "flex flex-wrap items-center text-sm break-words text-bunker-100",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={twMerge("hover:text-primary transition-colors", className)}
+      className={twMerge("transition-colors hover:text-primary", className)}
       {...props}
     />
   );
@@ -70,7 +70,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={twMerge("text-bunker-200 last:text-bunker-300 font-normal", className)}
+      className={twMerge("font-normal text-bunker-200 last:text-bunker-300", 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="text-mineshaft-400/70 px-3 text-lg">/</p>}
+    {children ?? <p className="px-3 text-lg text-mineshaft-400/70">/</p>}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -139,7 +139,7 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
                         <FontAwesomeIcon
                           icon={faCaretDown}
                           size="sm"
-                          className="text-bunker-300 ml-2"
+                          className="ml-2 text-bunker-300"
                         />
                       </BreadcrumbSegment>
                     </BreadcrumbItem>
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 01eb26e3e..d628287b8 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -198,7 +198,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 : "infisical_loading"
             }
             isAutoPlay
-            className="shadow-xs absolute w-8 rounded-xl opacity-80"
+            className="absolute w-8 rounded-xl opacity-80 shadow-xs"
           />
         )}
         {leftIcon && (
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 2f827199e..b3ee48c5a 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(
-      "border-mineshaft-600 mb-5 break-words border-b px-6 py-4 font-sans text-lg font-normal",
+      "mb-5 border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal break-words",
       className
     )}
   >
@@ -35,7 +35,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className, style }: CardBodyProps) => (
-  <div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
+  <div className={twMerge("px-6 pt-0 pb-6", className)} style={style}>
     {children}
   </div>
 );
@@ -59,7 +59,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          "bg-mineshaft-800 font-inter flex w-full flex-col text-gray-200 shadow-md",
+          "flex w-full flex-col bg-mineshaft-800 font-inter 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 d1001c7bc..fda9a0672 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("font-inter text-bunker-300 flex items-center", containerClassName)}>
+    <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
       <CheckboxPrimitive.Root
         className={twMerge(
-          "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",
+          "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",
           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 || "text-mineshaft-200 mt-[0.1rem]"}`,
+            `${checkIndicatorBg || "mt-[0.1rem] text-mineshaft-200"}`,
             indicatorClassName
           )}
         >
@@ -74,7 +74,7 @@ export const Checkbox = ({
         htmlFor={id}
       >
         {children}
-        {isRequired && <span className="text-red pl-1">*</span>}
+        {isRequired && <span className="pl-1 text-red">*</span>}
       </label>
     </div>
   );
diff --git a/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx b/frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
index c6bbec305..4ec04cb2b 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="break-words pb-2 text-sm">
+              <div className="pb-2 text-sm break-words">
                 {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 c43ded880..16a1c025a 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(
-        "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",
+        "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",
         className
       )}
     >
@@ -52,7 +52,7 @@ export const ContentLoader = ({ text, frequency = 2000, className, lottieClassNa
           </motion.div>
         </AnimatePresence>
       )}
-      {text && !isTextArray && <div className="text-primary text-xs">{text}</div>}
+      {text && !isTextArray && <div className="text-xs text-primary">{text}</div>}
     </div>
   );
 };
diff --git a/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx b/frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
index c33ef414b..ab7db25c7 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",
-            "bg-mineshaft-900 font-inter text-mineshaft-200 w-full rounded-md border p-0.5 hover:cursor-pointer"
+            "w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 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 85864d891..0fdb0faae 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(
-          "border-mineshaft-600 bg-mineshaft-800 font-inter w-fit border p-2",
+          "w-fit border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter",
           popUpContentProps.className
         )}
       >
@@ -133,7 +133,7 @@ export const DatePicker = ({
               type="time"
               value={displayUtc ? localTimeToUTC(timeValue) : timeValue}
               onChange={handleTimeChange}
-              className="bg-mineshaft-700 scheme-dark text-white"
+              className="bg-mineshaft-700 text-white scheme-dark"
             />
           </div>
         )}
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 245939fa4..7ba593f58 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="break-words pb-2 text-sm">
+              <div className="pb-2 text-sm break-words">
                 {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 b2d8d8ea0..a5b755eeb 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="border-mineshaft-300 h-1 w-full grow border-t" />
+      <div aria-hidden="true" className="h-1 w-full grow border-t border-mineshaft-300" />
     </div>
   );
 };
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
index a8587ff14..8bc73bf89 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(
-              "dark:scheme-dark grow overflow-y-auto overflow-x-hidden px-4 pt-4",
+              "grow overflow-x-hidden overflow-y-auto px-4 pt-4 dark:scheme-dark",
               cardBodyClassName
             )}
           >
@@ -75,7 +75,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="text-bunker-400 hover:text-bunker-50 absolute right-6 top-4 rounded-sm"
+              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
             >
               <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 38f05849f..9c8f7bbe6 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 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",
+            "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",
             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 border-mineshaft-600 bg-mineshaft-900 text-bunker-300 z-30 min-w-[220px] rounded-md border 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 z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 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("text-bunker-400 px-4 pb-1 pt-2 text-xs", className)}
+    className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
   />
 );
 
@@ -92,7 +92,7 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "rounded-xs font-inter text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700 block cursor-pointer px-4 py-2 text-xs",
+      "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
       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(
-      "rounded-xs font-inter text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700 block cursor-pointer px-4 py-2 text-xs",
+      "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
       className
     )}
   >
diff --git a/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx b/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
index f5327b6a2..a81321cd5 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="text-bunker-300 mb-4">
+      <p className="mb-4 text-bunker-300">
         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 71d7fa9fc..f6b926953 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(
-      "bg-mineshaft-800 text-bunker-300 flex w-full flex-col items-center px-2 pt-4",
+      "flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-4 text-bunker-300",
       className
     )}
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
     <div className="flex flex-col items-center py-4">
-      <div className={twMerge("text-bunker-300 text-sm", titleClassName)}>{title}</div>
+      <div className={twMerge("text-sm text-bunker-300", 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 e9f6768ed..714779f22 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("font-inter w-full text-sm", isDisabled && "pointer-events-auto! opacity-50"),
+          twMerge("w-full font-inter text-sm", isDisabled && "pointer-events-auto! opacity-50"),
         control: ({ isFocused, isDisabled }) =>
           twMerge(
             isFocused ? "border-primary-400/50" : "border-mineshaft-600",
-            `bg-mineshaft-900 font-inter text-mineshaft-200 w-full rounded-md border p-0.5 ${
+            `w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${
               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 450290cf5..1426addd7 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(
-      "text-mineshaft-400 mb-0.5 flex items-center text-sm font-normal",
+      "mb-0.5 flex items-center text-sm font-normal text-mineshaft-400",
       className
     )}
     htmlFor={id}
   >
     {label}
-    {isRequired && <span className="text-red ml-1">*</span>}
-    {isOptional && <span className="ml-1 text-xs italic text-gray-500">- Optional</span>}
+    {isRequired && <span className="ml-1 text-red">*</span>}
+    {isOptional && <span className="ml-1 text-xs text-gray-500 italic">- Optional</span>}
     {icon && !tooltipText && (
-      <span className="text-mineshaft-300 hover:text-mineshaft-200 ml-2 cursor-default">
+      <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}
@@ -58,7 +58,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      "font-inter text-mineshaft-300 mt-2 flex items-center text-xs text-opacity-90",
+      "text-opacity-90 mt-2 flex items-center font-inter text-xs text-mineshaft-300",
       isError && "text-red-600"
     )}
   >
diff --git a/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx b/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
index 07f6bca72..cba5e6fd7 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-mineshaft-400 text-xs font-medium", labelClassName)}>{label}</p>
+        <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
       </div>
       {children ? (
-        <p className={twMerge("text-mineshaft-100 text-sm", truncate && "truncate")}>{children}</p>
+        <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
       ) : (
-        <p className="text-mineshaft-400/50 text-sm italic">None</p>
+        <p className="text-sm text-mineshaft-400/50 italic">None</p>
       )}
     </div>
   );
diff --git a/frontend/src/components/v2/HoverCard/HoverCard.tsx b/frontend/src/components/v2/HoverCard/HoverCard.tsx
index b45a642f2..c6a520539 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="border-mineshaft-600 bg-bunker-700 text-bunker-300 rounded-md border p-2 drop-shadow-xl">
+        <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 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 2c9fc0de3..816287349 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(
-        "bg-mineshaft-600 fill-mineshaft-600 font-inter relative w-64 rounded-md p-4 pt-6 text-gray-200 shadow-md",
+        "relative w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter 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 4bf08a8f2..9c4dc0b83 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="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"
+          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"
           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="border-mineshaft-600 flex w-full items-center justify-between text-left"
+                  className="flex w-full items-center justify-between border-mineshaft-600 text-left"
                   key={`secret-reference-secret-${i + 1}`}
                 >
-                  <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="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="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="text-bunker-400 mb-[0.1rem] text-xs leading-3">
+                        <div className="mb-[0.1rem] text-xs leading-3 text-bunker-400">
                           {subText}
                         </div>
                       </div>
@@ -395,19 +395,19 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                     handleSuggestionSelect(i);
                   }}
                   onMouseEnter={() => setHighlightedIndex(i)}
-                  className="border-mineshaft-600 flex w-full items-center justify-between border-none bg-transparent p-0 text-left"
+                  className="flex w-full items-center justify-between border-none border-mineshaft-600 bg-transparent p-0 text-left"
                   key={`secret-reference-secret-${i + 1}`}
                 >
                   <div
                     className={`${
                       highlightedIndex === i ? "bg-mineshaft-500" : ""
-                    } 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`}
+                    } 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`}
                   >
                     <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="text-bunker-400 mb-[0.1rem] text-xs leading-3">
+                        <div className="mb-[0.1rem] text-xs leading-3 text-bunker-400">
                           {subText}
                         </div>
                       </div>
diff --git a/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx b/frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
index 563c33bef..7b6073053 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="break-words pb-2 text-sm">
+              <div className="pb-2 text-sm break-words">
                 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 09c1d8cdf..3a222d0e8 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(
-        "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",
+        "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",
         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 whitespace-nowrap text-left">{children}</span>}
+      {children && <span className="grow text-left whitespace-nowrap">{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 uppercase text-gray-400", className)}>
+    <li className={twMerge("px-2 pt-3 text-xs font-medium text-gray-400 uppercase", className)}>
       {title}
     </li>
     {children}
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index b2ee283cc..e7efda4b8 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 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",
+            "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",
             className
           )}
           style={{ maxHeight: "90%" }}
@@ -51,7 +51,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             </DialogPrimitive.Title>
           )}
           <CardBody
-            className={twMerge("overflow-y-auto overflow-x-hidden", bodyClassName)}
+            className={twMerge("overflow-x-hidden overflow-y-auto", bodyClassName)}
             style={{ maxHeight: "90%" }}
           >
             {children}
@@ -61,7 +61,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="text-bunker-400 hover:text-bunker-50 absolute right-6 top-4 rounded-sm"
+              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
             >
               <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 864cbcd58..d84c0103d 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(
-      "border-primary-600/70 bg-primary/[.07] flex w-full flex-row items-center rounded-md border p-4 text-base text-white",
+      "flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] 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 91deb5ff8..bde5853e5 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(
-        "border-l-primary bg-mineshaft-300/5 flex flex-col rounded-r border-l-2 px-4 py-2.5",
+        "flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5",
         className
       )}
     >
       <div className={twMerge("mb-1 flex items-center text-sm", titleClassName)}>
-        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
         {title}
       </div>
       {children}
diff --git a/frontend/src/components/v2/PageHeader/PageHeader.tsx b/frontend/src/components/v2/PageHeader/PageHeader.tsx
index 2dfafe669..f445a3fc0 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 capitalize text-white">{title}</h1>
+        <h1 className="mr-4 text-3xl font-medium text-white capitalize">{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 7b79e1ca5..db33f6260 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(
-        "border-mineshaft-600 bg-mineshaft-800 flex w-full items-center justify-end border-t px-4 py-3 text-white",
+        "flex w-full items-center justify-end border-t border-mineshaft-600 bg-mineshaft-800 px-4 py-3 text-white",
         className
       )}
     >
@@ -94,7 +94,7 @@ export const Pagination = ({
           onClick={() => onChangePage(1)}
           isDisabled={!canGoFirst}
         >
-          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} />
+          <FontAwesomeIcon className="absolute top-1 left-2.5 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 left-2.5 top-1 text-xs" icon={faChevronRight} />
+          <FontAwesomeIcon className="absolute top-1 left-2.5 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 0f354ef6d..62fb93c6f 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="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black p-4">
       <div
         ref={modalRef}
-        className="border-mineshaft-600 bg-mineshaft-800 w-full max-w-lg rounded-lg border shadow-xl"
+        className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
       >
         <div className="p-6">
-          <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">
+          <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">
             <div className="flex items-center justify-between">
-              <div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
+              <div className="w-4/5 pr-2 font-mono text-lg break-all select-all">{password}</div>
               <div className="flex flex-col gap-1">
                 <Button
                   size="xs"
                   colorSchema="secondary"
                   variant="outline_bg"
                   onClick={() => setRefresh((prev) => !prev)}
-                  className="text-bunker-300 hover:text-bunker-100 w-full"
+                  className="w-full text-bunker-300 hover:text-bunker-100"
                 >
                   <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="text-bunker-300 hover:text-bunker-100 w-full"
+                  className="w-full text-bunker-300 hover:text-bunker-100"
                 >
                   <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-bunker-300 text-sm">
+              <label htmlFor="value-length" className="text-sm text-bunker-300">
                 Length: {passwordOptions.length}
               </label>
             </div>
diff --git a/frontend/src/components/v2/Popover/Popover.tsx b/frontend/src/components/v2/Popover/Popover.tsx
index 65f76190e..3c7f0ded5 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="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)]"
+        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 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)] 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]"
         sideOffset={5}
         hideWhenDetached
         side="left"
       >
         <div className="dark flex flex-col pt-2">
-          <p className="text-bunker-200 mb-5 text-[15px] font-medium leading-[0px]">Comment</p>
+          <p className="mb-5 text-[15px] leading-[0px] font-medium text-bunker-200">Comment</p>
           <textarea
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            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"
+            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"
             spellCheck="false"
             placeholder="–"
           />
         </div>
         <Popover.Close
-          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]"
+          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]"
           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 6a27e9230..acc069ac2 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(
         [
-          "z-100 bg-mineshaft-600 fill-mineshaft-600 font-inter relative w-64 rounded-md p-4 pt-6 text-gray-200 shadow-md",
+          "relative z-100 w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter 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="text-bunker-400 hover:text-bunker-50 absolute right-1 top-0 rounded-sm"
+            className="absolute top-0 right-1 rounded-sm text-bunker-400 hover:text-bunker-50"
           >
             <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 b8089d008..5331f42d9 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="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"
+        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"
         value="App"
         id="r1"
       >
-        <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.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.Item>
-      <label className="text-bunker-200 pl-2 text-sm leading-none" htmlFor="r1">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
         App
       </label>
     </div>
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        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"
+        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"
         value="Pipeline"
         id="r2"
       >
-        <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.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.Item>
-      <label className="text-bunker-200 pl-2 text-sm leading-none" htmlFor="r2">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
         Pipeline
       </label>
     </div>
diff --git a/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx b/frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx
index 9dd5c0fe4..b9c9fbe65 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(
-          "z-100 border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 relative top-2 overflow-hidden rounded-md border shadow-md"
+          "relative top-2 z-100 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
         )}
         style={{
           width: "var(--radix-popover-trigger-width)",
           maxHeight: "var(--radix-select-content-available-height)"
         }}
       >
-        <div className="thin-scrollbar max-h-[25vh] w-full flex-col items-center justify-center overflow-y-scroll rounded-md text-white">
+        <div className="max-h-[25vh] thin-scrollbar 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="border-mineshaft-600 flex items-center justify-between text-left"
+              className="flex items-center justify-between border-mineshaft-600 text-left"
               key={`secret-reference-secret-${i + 1}`}
             >
               <div
                 className={`${
                   highlightedIndex === i ? "bg-gray-600" : ""
-                } 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`}
+                } 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`}
               >
                 <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 de1c985c9..3954b8b20 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(
-              "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",
+              "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",
               className,
               isDisabled && "cursor-not-allowed opacity-50"
             )}
@@ -82,7 +82,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             <SelectPrimitive.Content
               side={side}
               className={twMerge(
-                "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",
+                "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",
                 position === "popper" && "max-h-72",
                 dropdownContainerClassName
               )}
@@ -132,14 +132,14 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         {...props}
         disabled={isDisabled}
         className={twMerge(
-          "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",
+          "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",
           isSelected && "bg-primary",
-          isDisabled && "hover:bg-transparent! cursor-not-allowed text-gray-600 opacity-80",
+          isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:bg-transparent!",
           className
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="text-primary absolute left-3.5">
+        <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
           <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(
-          "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",
+          "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",
           isSelected && "bg-primary",
           isDisabled &&
-            "hover:text-mineshaft-600 cursor-not-allowed text-gray-600 hover:bg-transparent",
+            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
           className
         )}
         ref={forwardedRef}
       >
         <div
           className={twMerge(
-            "text-primary absolute left-3.5",
+            "absolute left-3.5 text-primary",
             selectValue === "" ? "visible" : "hidden"
           )}
         >
diff --git a/frontend/src/components/v2/Select/components/index.tsx b/frontend/src/components/v2/Select/components/index.tsx
index 57bb42df2..7e91c792d 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="text-primary ml-2" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="ml-2 text-primary" 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 746391638..477456bb8 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("bg-mineshaft-800 h-6 w-full animate-pulse rounded-md", className)} />
+  <div className={twMerge("h-6 w-full animate-pulse rounded-md bg-mineshaft-800", className)} />
 );
diff --git a/frontend/src/components/v2/Slider/Slider.tsx b/frontend/src/components/v2/Slider/Slider.tsx
index e3cbb8577..bc898ad61 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-bunker-300 text-xs">{currentValue}</div>
+      <div className="text-xs text-bunker-300">{currentValue}</div>
     ) : null;
 
     return (
@@ -226,7 +226,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
           />
 
           {showValue && valuePosition === "right" && (
-            <div className="text-bunker-300 ml-2 text-xs">{currentValue}</div>
+            <div className="ml-2 text-xs text-bunker-300">{currentValue}</div>
           )}
         </div>
       </div>
diff --git a/frontend/src/components/v2/Spinner/Spinner.tsx b/frontend/src/components/v2/Spinner/Spinner.tsx
index b285a6e70..d8a344e3e 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(
-          "fill-primary m-1 animate-spin text-gray-200 dark:text-gray-600",
+          "m-1 animate-spin fill-primary 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 2129667eb..81601ca1c 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(
-        "border-bunker-300/30 flex w-full items-center space-x-3 rounded-md border p-2",
+        "flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 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(
-                  "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",
+                  "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",
                   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("bg-bunker-300/30 grow", isCompleted && "bg-primary")}
+                className={twMerge("grow bg-bunker-300/30", isCompleted && "bg-primary")}
               />
             )}
           </div>
diff --git a/frontend/src/components/v2/Switch/Switch.tsx b/frontend/src/components/v2/Switch/Switch.tsx
index 33ae3ec57..dd36da49f 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("font-inter text-bunker-300 flex items-center", containerClassName)}>
+  <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
     <label className="text-sm" htmlFor={id}>
       {children}
-      {isRequired && <span className="text-red pl-1">*</span>}
+      {isRequired && <span className="pl-1 text-red">*</span>}
     </label>
     <SwitchPrimitive.Root
       {...props}
@@ -34,7 +34,7 @@ export const Switch = ({
       checked={isChecked}
       disabled={isDisabled}
       className={twMerge(
-        "bg-bunker-300 data-[state=checked]:bg-primary ml-3 h-5 w-9 rounded-full transition-all",
+        "ml-3 h-5 w-9 rounded-full bg-bunker-300 transition-all data-[state=checked]:bg-primary",
         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 7c5a7fbe3..5450e0689 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(
-        "border-mineshaft-700 bg-mineshaft-800 font-inter relative w-full overflow-x-auto border border-solid",
+        "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
         isRounded && "rounded-lg",
         className
       )}
@@ -33,7 +33,7 @@ export type TableProps = {
 
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
-    className={twMerge("bg-mineshaft-800 w-full p-2 text-left text-sm text-gray-300", className)}
+    className={twMerge("w-full bg-mineshaft-800 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-bunker-300 text-xs uppercase", className)}
+    className={twMerge("bg-mineshaft-800 text-xs text-bunker-300 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-bunker-300 text-xs uppercase", className)}>
+  <tfoot className={twMerge("bg-mineshaft-800 text-xs text-bunker-300 uppercase", className)}>
     {children}
   </tfoot>
 );
@@ -83,7 +83,7 @@ export const Tr = ({
 }: TrProps): JSX.Element => (
   <tr
     className={twMerge(
-      "border-mineshaft-600 cursor-default border-b border-solid last:border-b-0",
+      "cursor-default border-b border-solid border-mineshaft-600 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-mineshaft-600 bg-mineshaft-800 border-b-2 px-5 pb-3.5 pt-4 font-medium",
+      "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pt-4 pb-3.5 font-medium",
       className
     )}
     style={style}
diff --git a/frontend/src/components/v2/Tabs/Tabs.tsx b/frontend/src/components/v2/Tabs/Tabs.tsx
index 2da502321..7e8466850 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("border-mineshaft-800 flex shrink-0 border-b-2", className)}
+    className={twMerge("flex shrink-0 border-b-2 border-mineshaft-800", className)}
     {...props}
   >
     {children}
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
 export const Tab = ({ className, children, ...props }: TabProps) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "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",
+      "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",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
 
 export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
   <TabsPrimitive.Content
-    className={twMerge("outline-hidden grow rounded-bl-md rounded-br-md py-5", className)}
+    className={twMerge("grow rounded-br-md rounded-bl-md py-5 outline-hidden", className)}
     {...props}
   >
     {children}
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
index eab302c5c..afbe3c5c3 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 border-mineshaft-600 bg-mineshaft-800 text-bunker-200 z-50 max-w-60 select-none border font-light shadow-md",
+            "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",
             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 59e1aa757..ad84ed6d6 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 pl-5 pt-2 text-sm">
+                          <ul className="flex list-disc flex-col gap-1 pt-2 pl-5 text-sm">
                             {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
                               const operators = (
                                 el.conditions as Record<
diff --git a/frontend/src/hooks/useSyntaxHighlight.tsx b/frontend/src/hooks/useSyntaxHighlight.tsx
index c829fdb8c..d1af77f77 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="text-bunker-400/80 font-mono">EMPTY</span>;
+    if (val?.length === 0) return <span className="font-mono text-bunker-400/80">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/layouts/AdminLayout/AdminLayout.tsx b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
index acdedea68..859ce9627 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} bg-bunker-800 w-full flex-col overflow-x-hidden transition-all md:flex`}
+        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 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="bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden px-4 pb-4 pt-8">
+          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-4 pt-8 pb-4 dark:scheme-dark">
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
+      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 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 e8d99216c..185ea1dbf 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="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">
+    <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">
         <div className="flex-1">
           <Menu>
             <MenuGroup title="Configuration">
@@ -107,7 +107,7 @@ export const AdminSidebar = () => {
         <Menu>
           <Link to="/organization/projects">
             <MenuItem
-              className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+              className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
               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 6953d4036..71cdc6e8d 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+          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 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">
+          <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">
               <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 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 fafcc1a60..f2866259c 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} bg-bunker-800 w-full flex-col overflow-x-hidden transition-all md:flex`}
+        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
       >
         <Navbar />
         {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
@@ -49,7 +49,7 @@ export const OrganizationLayout = () => {
           <OrgSidebar isHidden={isInsideProject} />
           <main
             className={twMerge(
-              "bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden px-4 pb-4 pt-8",
+              "flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-4 pt-8 pb-4 dark:scheme-dark",
               isInsideProject && "p-0"
             )}
           >
@@ -61,7 +61,7 @@ export const OrganizationLayout = () => {
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}
       />
-      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
+      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 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 5e3c889dd..0f37dfbcc 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(
-          "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",
+          "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",
           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"
-          } bg-primary absolute left-0 h-full w-1 transition-all duration-150`}
+          } absolute left-0 h-full w-1 bg-primary 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 break-words text-center" style={{ fontSize: "10px" }}>
+        <div className="grow justify-center text-center break-words" 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 fd2f0a7ed..a42c9e973 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="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">
+      <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">
         <Mfa
           email={user.email as string}
           method={requiredMfaMethod}
@@ -200,25 +200,25 @@ export const Navbar = () => {
   const isServerAdminPanel = location.pathname.startsWith("/admin");
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-800 z-10 flex min-h-12 items-center border-b px-4">
+    <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
       <div>
         <Link to="/organization/projects">
           <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
         </Link>
       </div>
-      <p className="text-mineshaft-400/70 pl-1 pr-3 text-lg">/</p>
+      <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
       {isServerAdminPanel ? (
         <>
           <Link
             to="/admin"
-            className="hover:text-primary group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100"
+            className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
           >
             <div>
-              <FontAwesomeIcon icon={faServer} className="text-bunker-300 text-xs" />
+              <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
             </div>
             <div className="whitespace-nowrap">Server Console</div>
           </Link>
-          <p className="text-mineshaft-400/70 pl-3 pr-3 text-lg">/</p>
+          <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</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="hover:text-primary group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100">
+                <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
                   <div>
-                    <FontAwesomeIcon icon={faBuilding} className="text-bunker-300 text-xs" />
+                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
                   </div>
                   <div className="whitespace-nowrap">{currentOrg?.name}</div>
-                  <div className="border-mineshaft-500 text-bunker-300 no-underline! mr-1 rounded-sm border px-1 text-xs">
+                  <div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
                     {getPlan(subscription)}
                   </div>
                   {subscription.cardDeclined && (
@@ -245,7 +245,7 @@ export const Navbar = () => {
                       <div className="flex items-center">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
-                          className="text-primary-400 animate-pulse cursor-help text-xs"
+                          className="animate-pulse cursor-help text-xs text-primary-400"
                         />
                       </div>
                     </Tooltip>
@@ -260,17 +260,17 @@ export const Navbar = () => {
                     ariaLabel="switch-org"
                     className="px-2 py-1"
                   >
-                    <FontAwesomeIcon icon={faCaretDown} className="text-bunker-300 text-xs" />
+                    <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
                   </IconButton>
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="start"
                 side="bottom"
-                className="shadow-mineshaft-600 mt-6 cursor-default p-1 drop-shadow-md"
+                className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
                 style={{ minWidth: "220px" }}
               >
-                <div className="text-mineshaft-400 px-2 py-1 text-xs capitalize">organizations</div>
+                <div className="px-2 py-1 text-xs text-mineshaft-400 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="text-primary mr-3" />
+                            <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
                           )
                         }
                       >
@@ -318,14 +318,14 @@ export const Navbar = () => {
                     </DropdownMenuItem>
                   );
                 })}
-                <div className="border-mineshaft-600 mt-1 h-1 border-t" />
+                <div className="mt-1 h-1 border-t border-mineshaft-600" />
                 <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
                   Log Out
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-          <p className="text-mineshaft-400/70 pl-1 pr-3 text-lg">/</p>
+          <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
           {breadcrumbs ? (
             <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
           ) : null}
@@ -334,7 +334,7 @@ export const Navbar = () => {
       <div className="grow" />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>
-          <div className="border-mineshaft-500 hover:bg-mineshaft-600 rounded-l-md border border-r-0 px-2.5 py-1">
+          <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
             <FontAwesomeIcon icon={faCircleQuestion} className="text-mineshaft-200" />
           </div>
         </DropdownMenuTrigger>
@@ -360,9 +360,9 @@ export const Navbar = () => {
                   <button
                     type="button"
                     onClick={() => setShowAdminsModal(true)}
-                    className="text-mineshaft-300 flex w-full items-center rounded-md font-normal duration-200"
+                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
                   >
-                    <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                    <div className="relative flex w-full cursor-pointer items-center justify-start rounded-md select-none">
                       {icon}
                       <div className="text-sm">{text}</div>
                     </div>
@@ -372,9 +372,9 @@ export const Navbar = () => {
                     target="_blank"
                     rel="noopener noreferrer"
                     href={String(url)}
-                    className="text-mineshaft-300 flex w-full items-center rounded-md font-normal duration-200"
+                    className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
                   >
-                    <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                    <div className="relative flex w-full cursor-pointer items-center justify-start rounded-md select-none">
                       {icon}
                       <div className="text-sm">{text}</div>
                     </div>
@@ -384,7 +384,7 @@ export const Navbar = () => {
             );
           })}
           {envConfig.PLATFORM_VERSION && (
-            <div className="hover:text-mineshaft-200 mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200">
+            <div className="mt-2 mb-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-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="border-mineshaft-500 hover:bg-mineshaft-600 rounded-r-md border px-2.5 py-1">
+          <div className="rounded-r-md border border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
             <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="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="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="p-1 pr-3">
-                <FontAwesomeIcon icon={faUser} className="text-mineshaft-400 text-xl" />
+                <FontAwesomeIcon icon={faUser} className="text-xl text-mineshaft-400" />
               </div>
               <div className="flex grow flex-col text-white">
-                <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
+                <div className="max-w-36 truncate text-sm font-medium text-ellipsis capitalize">
                   {user?.firstName} {user?.lastName}
                 </div>
-                <div className="text-mineshaft-300 text-xs">{user.email}</div>
+                <div className="text-xs text-mineshaft-300">{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="text-mineshaft-300 hover:text-mineshaft-100 mt-3 w-full text-sm font-normal leading-[1.2rem]"
+            className="mt-3 w-full text-sm leading-[1.2rem] font-normal text-mineshaft-300 hover:text-mineshaft-100"
           >
             <DropdownMenuItem>
               Documentation
@@ -433,7 +433,7 @@ export const Navbar = () => {
             href="https://infisical.com/slack"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-mineshaft-300 hover:text-mineshaft-100 mt-3 w-full text-sm font-normal leading-[1.2rem]"
+            className="mt-3 w-full text-sm leading-[1.2rem] font-normal text-mineshaft-300 hover:text-mineshaft-100"
           >
             <DropdownMenuItem>
               Join Slack Community
@@ -443,7 +443,7 @@ export const Navbar = () => {
               />
             </DropdownMenuItem>
           </a>
-          <div className="border-mineshaft-600 mt-1 h-1 border-t" />
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
           <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="border-mineshaft-600 mt-1 h-1 border-t" />
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
           <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-primary-400 text-lg" />
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-lg text-primary-400" />
               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 fdd539e4a..82f5d0fdd 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(
-        "border-mineshaft-600 group relative flex cursor-pointer items-start border-b p-3 transition-colors",
+        "group relative flex cursor-pointer items-start border-b border-mineshaft-600 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="text-mineshaft-100 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-5">
+            <span className="overflow-hidden text-sm leading-5 font-medium text-ellipsis whitespace-nowrap text-mineshaft-100">
               <Markdown components={{ p: "span" }}>{notification.title}</Markdown>
             </span>
           </Tooltip>
-          <span className="text-mineshaft-400 ml-auto mt-px whitespace-nowrap text-xs">
+          <span className="mt-px ml-auto text-xs whitespace-nowrap text-mineshaft-400">
             {formatDistance(notification.createdAt, new Date())} ago
           </span>
         </div>
         {notification.body && (
-          <span className="text-mineshaft-300 max-w-[350px] text-xs">
+          <span className="max-w-[350px] text-xs text-mineshaft-300">
             <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 2eed16c29..d72d9d59e 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="border-mineshaft-500 hover:bg-mineshaft-600 relative border border-r-0 px-2.5 py-1">
+        <div className="relative border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
           <FontAwesomeIcon icon={faBell} className="text-mineshaft-200" />
           {unreadCount > 0 && (
-            <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">
+            <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">
               {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="border-mineshaft-500 flex items-center justify-between border-b px-3 py-2">
+          <div className="flex items-center justify-between border-b border-mineshaft-500 px-3 py-2">
             <span className="font-medium text-white">Notifications</span>
             <button
               type="button"
-              className="text-mineshaft-300 hover:text-primary-400 text-xs font-medium disabled:pointer-events-none disabled:opacity-50"
+              className="text-xs font-medium text-mineshaft-300 hover:text-primary-400 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="text-mineshaft-300 mt-4 text-sm">No new notifications</span>
-                <span className="text-mineshaft-400 text-xs">
+                <span className="mt-4 text-sm text-mineshaft-300">No new notifications</span>
+                <span className="text-xs text-mineshaft-400">
                   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 9656d36b3..518b7d101 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="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" />
+    <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" />
       {text}{" "}
       {link && (
         <>
@@ -27,11 +27,11 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
             target="_blank"
             className="group flex items-center"
           >
-            <span className="group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100 cursor-pointer pl-1 underline underline-offset-2 duration-100">
+            <span className="cursor-pointer pl-1 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
               here
             </span>
             <FontAwesomeIcon
-              className="group-hover:text-mineshaft-100 ml-1 mt-[0.12rem]"
+              className="mt-[0.12rem] ml-1 group-hover:text-mineshaft-100"
               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 ed27a9002..0f4bed355 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-800 to-mineshaft-900 dark z-10 w-60 border-r"
+            className="dark z-10 w-60 border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-800 to-mineshaft-900"
           >
-            <nav className="items-between dark:scheme-dark flex h-full flex-col overflow-y-auto">
+            <nav className="items-between flex h-full flex-col overflow-y-auto dark:scheme-dark">
               <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                        className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                         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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       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 4c8dd955c..82231c0e4 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="bg-bunker-800 sticky top-0">
+            <THead className="sticky top-0 bg-bunker-800">
               <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="text-mineshaft-400 flex h-32 items-center justify-center text-sm">
+            <div className="flex h-32 items-center justify-center text-sm text-mineshaft-400">
               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 f2fa7e9ce..99fe87adf 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="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">
+    <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">
         {currentOrg?.name.charAt(0)}
       </div>
       <div className="flex grow flex-col text-white">
-        <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
+        <div className="max-w-36 truncate text-sm font-medium text-ellipsis capitalize">
           {currentOrg?.name}
         </div>
-        <div className="text-mineshaft-400 text-xs">{getPlan(subscription)}</div>
+        <div className="text-xs text-mineshaft-400">{getPlan(subscription)}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/layouts/PamLayout/PamLayout.tsx b/frontend/src/layouts/PamLayout/PamLayout.tsx
index 73ec26903..6039050eb 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+            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 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">
+            <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">
                 <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 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 fe200e2f7..46551b9c5 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="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">
+          <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">
               <div className="grow">
                 <Link to="/organization/projects">
-                  <div className="text-mineshaft-300 hover:text-mineshaft-100 my-6 flex cursor-default items-center justify-center pr-2 text-sm">
+                  <div className="my-6 flex cursor-default items-center justify-center pr-2 text-sm text-mineshaft-300 hover:text-mineshaft-100">
                     <FontAwesomeIcon icon={faArrowLeft} className="pr-3" />
                     Back to organization
                   </div>
                 </Link>
               </div>
-              <div className="text-mineshaft-400 relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm">
+              <div className="relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400">
                 {(window.location.origin.includes("https://app.infisical.com") ||
                   window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
               </div>
               )
             </nav>
           </aside>
-          <main className="bg-bunker-800 dark:scheme-dark flex-1 overflow-y-auto overflow-x-hidden">
+          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 dark:scheme-dark">
             <Outlet />
           </main>
         </div>
       </div>
-      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
+      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 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 7de4d3353..cb186f4fa 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+            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 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">
+            <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">
                 <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
             {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
+      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 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 36a213854..71af774ca 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="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 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>
         <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 e1b657be9..1c2c08d23 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="hover:text-primary flex cursor-pointer items-center gap-2 text-sm text-white duration-100">
+          <div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
             <div>
-              <FontAwesomeIcon icon={faTable} className="text-bunker-300 text-xs" />
+              <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
             </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-bunker-300 text-xs" />
+              <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
             </IconButton>
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="start"
           side="bottom"
-          className="shadow-mineshaft-600 mt-6 cursor-default p-1 drop-shadow-md"
+          className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
           style={{ minWidth: "220px" }}
         >
-          <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">
+          <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">
             <Input
               value={searchProject}
               onChange={(evt) => setSearchProject(evt.target.value || "")}
@@ -146,7 +146,7 @@ export const ProjectSelect = () => {
               placeholder="Search projects"
             />
           </div>
-          <div className="thin-scrollbar max-h-80 overflow-auto">
+          <div className="max-h-80 thin-scrollbar 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="text-primary mr-3" />
+                        <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
                       )
                     }
                   >
                     <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 overflow-hidden truncate whitespace-nowrap">
+                          <div className="max-w-40 truncate overflow-hidden whitespace-nowrap">
                             {workspace.name}
                           </div>
                         </Tooltip>
@@ -182,7 +182,7 @@ export const ProjectSelect = () => {
                       <div>
                         <FontAwesomeIcon
                           icon={workspace.isFavorite ? faSolidStar : faStar}
-                          className="hover:text-mineshaft-400 text-sm text-yellow-600"
+                          className="text-sm text-yellow-600 hover:text-mineshaft-400"
                           onClick={async (e) => {
                             e.stopPropagation();
                             await (
@@ -198,7 +198,7 @@ export const ProjectSelect = () => {
                 );
               })}
           </div>
-          <div className="border-mineshaft-600 mt-1 h-1 border-t" />
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
           <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 86c7cf865..a99dff2a7 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+            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 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">
+            <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">
                 <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+          <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
             {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
             <Outlet />
           </div>
         </div>
       </div>
-      <div className="z-200 bg-bunker-800 flex h-screen w-screen flex-col items-center justify-center md:hidden">
+      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 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 aec920dcd..fb86cfe48 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+          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 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">
+          <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">
               <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="ml-auto mr-2 h-min">
+                            <Badge variant="primary" className="mr-2 ml-auto h-min">
                               {unresolvedFindings}
                             </Badge>
                           )}
@@ -178,7 +178,7 @@ export const SecretScanningLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
-                    className="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 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 d98d8e8d5..d6f318f3a 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="border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 dark w-full border-r md:w-60"
+          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 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">
+          <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">
               <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="text-mineshaft-400 hover:text-mineshaft-300 relative flex items-center gap-2 overflow-hidden text-sm"
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     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="bg-bunker-800 flex-1 overflow-y-auto overflow-x-hidden p-4 pt-8">
+        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 p-4 pt-8">
           {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
           <Outlet />
         </div>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index a0b78f9f5..e99210352 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="bg-bunker-800 flex h-screen w-screen items-center justify-center">
+    <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
       <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 3a0869a7c..8128a53e0 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Access Control" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 a401026aa..5b34aa029 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 -bottom-[0.01rem] -right-1"
+                                      className="absolute -right-1 -bottom-[0.01rem]"
                                       size="2xs"
                                       icon={faXmark}
                                     />
@@ -365,11 +365,11 @@ export const ServerAdminsTable = () => {
           selectedUsers.length > 0 && "h-16"
         )}
       >
-        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
+        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
           <div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
           <button
             type="button"
-            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
             onClick={() => setSelectedUsers([])}
           >
             Unselect All
@@ -390,7 +390,7 @@ export const ServerAdminsTable = () => {
           </Button>
         </div>
       </div>
-      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <ServerAdminsPanelTable
           handlePopUpOpen={handlePopUpOpen}
           users={users}
@@ -442,10 +442,10 @@ export const ServerAdminsTable = () => {
           onDeleteApproved={() => handleRemoveUsers()}
           buttonText="Remove"
         >
-          <div className="text-mineshaft-400 mt-4 text-sm">
+          <div className="mt-4 text-sm text-mineshaft-400">
             The following users will be deleted:
           </div>
-          <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">
+          <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">
             <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="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="mt-[0.05rem] ml-1 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 cd4db09a2..f803d3f5c 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 1ad119cfa..2abb96e60 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
       onSubmit={handleSubmit(onAuthFormSubmit)}
     >
       <div className="flex flex-col justify-start">
-        <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">
+        <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">
           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 46305cfa7..db8089813 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 5ba140920..cac64d135 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="border-mineshaft-600 bg-mineshaft-900 mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border p-4">
+      <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="flex flex-col">
           <div className="mb-2 flex items-center gap-3">
-            <span className="text-mineshaft-100 text-xl font-medium">Secrets Cache</span>
+            <span className="text-xl font-medium text-mineshaft-100">Secrets Cache</span>
             {isInvalidating && (
               <Badge
                 variant="danger"
@@ -71,7 +71,7 @@ export const CachingPageForm = () => {
               </Badge>
             )}
           </div>
-          <span className="text-mineshaft-400 max-w-xl text-sm">
+          <span className="max-w-xl text-sm text-mineshaft-400">
             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 49c168708..96af9a712 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 e7ea7b315..69f4139a2 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+        className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
         onSubmit={handleSubmit(onSubmit)}
       >
         <div className="flex flex-col justify-start">
           <div className="flex w-full justify-between">
-            <div className="text-mineshaft-100 mb-2 text-xl font-medium">
+            <div className="mb-2 text-xl font-medium text-mineshaft-100">
               KMS Encryption Strategy
             </div>
           </div>
-          <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
+          <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
             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="bg-mineshaft-700 w-full"
+                    className="w-full bg-mineshaft-700"
                     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 e8862e304..000dd1f0d 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 e03e86605..59df496af 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="border-mineshaft-600 bg-mineshaft-800 overflow-clip border border-b-0 first:rounded-t-md last:rounded-b-md last:border-b"
+      className="overflow-clip border border-b-0 border-mineshaft-600 bg-mineshaft-800 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 select-none text-base">{group.name}</div>
+        <div className="grow text-base select-none">{group.name}</div>
       </div>
 
       {(open || search) && (
@@ -66,13 +66,13 @@ export const GroupContainer = ({
           {group.fields.map((field) => (
             <div
               key={field.key}
-              className="border-mineshaft-500 bg-mineshaft-700/50 flex items-center justify-between gap-4 border-t p-4"
+              className="flex items-center justify-between gap-4 border-t border-mineshaft-500 bg-mineshaft-700/50 p-4"
             >
               <div className="flex max-w-lg flex-col">
                 <span className="text-sm">
                   <HighlightText text={field.key} highlight={search} />
                 </span>
-                <span className="text-mineshaft-400 text-sm">
+                <span className="text-sm text-mineshaft-400">
                   <HighlightText text={field.description} highlight={search} />
                 </span>
               </div>
@@ -208,19 +208,19 @@ export const EnvironmentPageForm = () => {
 
   return (
     <form
-      className="border-mineshaft-600 bg-mineshaft-900 flex flex-col gap-4 rounded-lg border p-4"
+      className="flex flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-100 text-xl font-medium">Overrides</p>
+            <p className="text-xl font-medium text-mineshaft-100">Overrides</p>
             <a
               href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -230,7 +230,7 @@ export const EnvironmentPageForm = () => {
               </div>
             </a>
           </div>
-          <p className="text-bunker-300 text-sm">
+          <p className="text-sm text-bunker-300">
             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 eebde73e8..e5a76e93c 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 bc61df051..be92dd679 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="border-mineshaft-600 bg-mineshaft-900 space-y-6 rounded-lg border p-4"
+      className="space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div className="flex flex-col justify-start">
-        <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">
+        <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">
           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="bg-mineshaft-700 w-full"
+                className="w-full bg-mineshaft-700"
                 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="text-mineshaft-100 mb-4 text-xl font-medium">
+          <div className="mb-4 text-xl font-medium text-mineshaft-100">
             Restrict signup by email domain(s)
           </div>
           <Controller
@@ -159,8 +159,8 @@ export const GeneralPageForm = () => {
       )}
 
       <div className="flex flex-col justify-start">
-        <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">
+        <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">
           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="bg-mineshaft-700 w-full"
+                className="w-full bg-mineshaft-700"
                 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="text-mineshaft-100 mb-2 text-xl font-medium">Trust emails</div>
-        <div className="text-mineshaft-400 mb-4 max-w-sm text-sm">
+        <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">
           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="text-mineshaft-100 mb-2 text-xl font-medium">Notices</div>
-        <div className="text-mineshaft-400 mb-4 max-w-lg text-sm">
+        <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">
           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="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
+                className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
               />
             </FormControl>
           )}
@@ -293,7 +293,7 @@ export const GeneralPageForm = () => {
                 placeholder='<div style="background-color: red">TOP SECRET</div>'
                 {...field}
                 rows={3}
-                className="thin-scrollbar resize-none! bg-mineshaft-800 h-48 max-w-lg"
+                className="h-48 thin-scrollbar max-w-lg resize-none! bg-mineshaft-800"
               />
             </FormControl>
           )}
diff --git a/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
index 54eb04e98..e5edd375c 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Admin" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 1b07b1c16..f29238c30 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="border-mineshaft-600 bg-mineshaft-900 mb-6 min-h-64 rounded-lg border p-4">
+    <div className="mb-6 min-h-64 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4">
-        <div className="text-mineshaft-100 text-xl font-medium">Integrations</div>
-        <div className="text-mineshaft-300 text-sm">
+        <div className="text-xl font-medium text-mineshaft-100">Integrations</div>
+        <div className="text-sm text-mineshaft-300">
           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 0f0d88323..30cabf75d 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="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">
+          <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">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
-              <BsMicrosoftTeams className="group-hover:text-primary-400 text-lg" />
+              <BsMicrosoftTeams className="text-lg group-hover:text-primary-400" />
               <div className="text-[15px] font-medium">Microsoft Teams</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">
-            <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">
+            <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">
                 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="text-mineshaft-300 mb-4 max-w-lg text-sm">
+              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
                 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 b2c1aef22..9175692c5 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="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">
+          <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">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
-              <BsSlack className="group-hover:text-primary-400 text-lg" />
+              <BsSlack className="text-lg group-hover:text-primary-400" />
               <div className="text-[15px] font-medium">Slack</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">
-            <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">
+            <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">
                 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="text-mineshaft-300 mb-4 max-w-lg text-sm">
+              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
                 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 5d7174d45..e9096d39a 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "Resource Overview" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 5c3fd6ca6..c493fe24d 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 -bottom-[0.01rem] -right-1"
+                                      className="absolute -right-1 -bottom-[0.01rem]"
                                       size="2xs"
                                       icon={faXmark}
                                     />
@@ -200,11 +200,11 @@ export const MachineIdentitiesTable = () => {
   };
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <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>
+          <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>
         </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 a72e48423..9405505c8 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(
-          "border-mineshaft-500 bg-mineshaft-700 mt-4 flex flex-1 flex-col border",
+          "mt-4 flex flex-1 flex-col border border-mineshaft-500 bg-mineshaft-700",
           Boolean(filteredMembers.length) && "rounded-b-none"
         )}
       >
-        <Table className="bg-mineshaft-700 overflow-y-auto">
+        <Table className="overflow-y-auto bg-mineshaft-700">
           <THead className="sticky top-0 z-50">
             <Tr>
-              <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">
+              <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">
                   Name
                   <IconButton
                     variant="plain"
@@ -226,8 +226,8 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <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">
+              <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">
                   Email
                   <IconButton
                     variant="plain"
@@ -245,13 +245,13 @@ const ViewMembersModalContent = ({
                   </IconButton>
                 </div>
               </Th>
-              <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">
+              <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">
                   Role
                 </div>
               </Th>
-              <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 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>
             </Tr>
           </THead>
@@ -277,7 +277,7 @@ const ViewMembersModalContent = ({
                         status !== OrgMembershipStatus.Accepted && (
                           <Button
                             isDisabled={resendOrgInvite.isPending}
-                            className="border-mineshaft-600 bg-mineshaft-800/50 ml-2 h-7 font-normal"
+                            className="ml-2 h-7 border-mineshaft-600 bg-mineshaft-800/50 font-normal"
                             colorSchema="primary"
                             variant="outline_bg"
                             size="xs"
@@ -296,7 +296,7 @@ const ViewMembersModalContent = ({
                     </div>
                   </Td>
                   <Td className="max-w-0">
-                    <Badge className="bg-mineshaft-400/50 text-bunker-200 flex w-fit max-w-full items-center gap-x-1 whitespace-nowrap">
+                    <Badge className="flex w-fit max-w-full items-center gap-x-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
                       <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="bg-mineshaft-700 my-auto"
+            className="my-auto bg-mineshaft-700"
             title={
               members.length
                 ? "No organization members match search..."
@@ -363,7 +363,7 @@ const ViewMembersModalContent = ({
       </TableContainer>
       {Boolean(filteredMembers.length) && (
         <Pagination
-          className="bg-mineshaft-700 rounded-b-md border border-t-0"
+          className="rounded-b-md border border-t-0 bg-mineshaft-700"
           count={filteredMembers.length}
           page={page}
           perPage={perPage}
@@ -545,7 +545,7 @@ const OrganizationsPanelTable = ({
                           <Tooltip className="text-center" content="View Members">
                             <FontAwesomeIcon
                               icon={faEye}
-                              className="text-mineshaft-300 mr-1.5"
+                              className="mr-1.5 text-mineshaft-300"
                               size="sm"
                             />
                           </Tooltip>
@@ -711,11 +711,11 @@ export const OrganizationsTable = () => {
   };
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-mineshaft-100 text-xl font-medium">Organizations</p>
-          <p className="text-bunker-300 text-sm">
+          <p className="text-xl font-medium text-mineshaft-100">Organizations</p>
+          <p className="text-sm text-bunker-300">
             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 9cdcdaa23..74e9d5e7e 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -275,7 +275,7 @@ const UserPanelTable = ({
                                     <div className="relative">
                                       <FontAwesomeIcon icon={faShieldHalved} />
                                       <FontAwesomeIcon
-                                        className="absolute -bottom-[0.01rem] -right-1"
+                                        className="absolute -right-1 -bottom-[0.01rem]"
                                         size="2xs"
                                         icon={faXmark}
                                       />
@@ -447,11 +447,11 @@ export const UserIdentitiesTable = () => {
           selectedUsers.length > 0 && "h-16"
         )}
       >
-        <div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
+        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
           <div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
           <button
             type="button"
-            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
             onClick={() => setSelectedUsers([])}
           >
             Unselect All
@@ -472,11 +472,11 @@ export const UserIdentitiesTable = () => {
           </Button>
         </div>
       </div>
-      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <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>
+            <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>
           </div>
         </div>
         <UserPanelTable
@@ -539,10 +539,10 @@ export const UserIdentitiesTable = () => {
           onDeleteApproved={() => handleRemoveUsers()}
           buttonText="Delete"
         >
-          <div className="text-mineshaft-400 mt-4 text-sm">
+          <div className="mt-4 text-sm text-mineshaft-400">
             The following users will be deleted:
           </div>
-          <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">
+          <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">
             <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="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="mt-[0.05rem] ml-1 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 31554f286..04bd2f55c 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="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">
+    <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">
       <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="text-bunker-300 pb-4">Create your first Super Admin Account</div>
+              <div className="pb-4 text-bunker-300">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 f932366f1..9df3f03fb 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="bg-bunker-800 flex flex-col justify-between md:h-screen">
+    <div className="flex flex-col justify-between bg-bunker-800 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 to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
+              <p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
                 Unable to reach CLI
               </p>
-              <p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
+              <p className="text-light mb-1 text-center text-lg text-mineshaft-400">
                 Your login was successful but, Infisical couldn&apos;t automatically push your login
                 token to the CLI.
               </p>
-              <p className="text-light text-mineshaft-400 mb-1 text-center text-lg">
+              <p className="text-light mb-1 text-center text-lg text-mineshaft-400">
                 Please copy the token below and manually provide it to your CLI.
               </p>
             </div>
-            <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">
+            <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">
               <SecretInput value={cliToken as string} />
               <div className="mx-1 flex">
                 <IconButton
@@ -83,10 +83,10 @@ export const CliRedirectPage = () => {
           </>
         ) : (
           <>
-            <p className="bg-linear-to-b to-bunker-200 from-white bg-clip-text text-center text-3xl font-medium text-transparent">
+            <p className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
               Head back to your terminal
             </p>
-            <p className="text-light text-mineshaft-400 mb-1 text-lg">
+            <p className="text-light mb-1 text-lg text-mineshaft-400">
               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 810fc770a..0f7935058 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="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">
+    <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">
       <Helmet>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
       <Link to="/">
-        <div className="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+        <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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="text-bunker-400 mt-6 flex flex-row text-sm">
+        <div className="mt-6 flex flex-row text-sm text-bunker-400">
           <Link to="/login">
-            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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 e0111deeb..6800f5241 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="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
+    <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">
       <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="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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="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">
+        <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">
           What&apos;s your LDAP Login?
         </p>
         <form onSubmit={handleSubmission}>
           {!config.defaultAuthOrgSlug && !passedOrgSlug && (
-            <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="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="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="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="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="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="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="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="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="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">
+          <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">
             <Button
               type="submit"
               colorSchema="primary"
@@ -150,7 +150,7 @@ export const LoginLdapPage = () => {
               navigate({ to: "/login" });
             }}
             type="button"
-            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"
+            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"
           >
             {t("login.other-option")}
           </button>
diff --git a/frontend/src/pages/auth/LoginPage/LoginPage.tsx b/frontend/src/pages/auth/LoginPage/LoginPage.tsx
index b1c4c9f26..807176496 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="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">
+    <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">
       <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="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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 1109467ec..b36dcd283 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="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+        <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 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="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 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="bg-mineshaft-600 h-10 w-full"
+              className="h-10 w-full bg-mineshaft-600"
             >
               <FontAwesomeIcon icon={faGoogle} />
             </IconButton>
@@ -313,7 +313,7 @@ export const InitialStep = ({
                 window.open(`/api/v1/sso/redirect/github${queryString ? `?${queryString}` : ""}`);
                 window.close();
               }}
-              className="bg-mineshaft-600 h-10 w-full"
+              className="h-10 w-full bg-mineshaft-600"
             >
               <FontAwesomeIcon icon={faGithub} />
             </IconButton>
@@ -342,7 +342,7 @@ export const InitialStep = ({
                 window.open(`/api/v1/sso/redirect/gitlab${queryString ? `?${queryString}` : ""}`);
                 window.close();
               }}
-              className="bg-mineshaft-600 h-10 w-full"
+              className="h-10 w-full bg-mineshaft-600"
             >
               <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="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 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>
       )}
       {shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
@@ -415,9 +415,9 @@ export const InitialStep = ({
         shouldDisplayLoginMethod(LoginMethod.GOOGLE) ||
         shouldDisplayLoginMethod(LoginMethod.GITHUB) ||
         shouldDisplayLoginMethod(LoginMethod.GITLAB)) ? (
-        <div className="text-bunker-400 mt-6 flex flex-row text-sm">
+        <div className="mt-6 flex flex-row text-sm text-bunker-400">
           <Link to="/signup">
-            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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="text-bunker-400 mt-2 flex flex-row text-sm">
+        <div className="mt-2 flex flex-row text-sm text-bunker-400">
           <Link to="/verify-email">
-            <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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 93ddf0b7b..3e13d6d08 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="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">
+      <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">
         <Mfa
           email={email}
           successCallback={mfaSuccessCallback}
@@ -326,7 +326,7 @@ export const PasswordStep = ({
 
   if (hasExchangedPrivateKey) {
     return (
-      <div className="bg-bunker-800 fixed left-0 top-0 h-screen w-screen">
+      <div className="fixed top-0 left-0 h-screen w-screen bg-bunker-800">
         <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="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">
+        <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">
           What&apos;s your Infisical password?
         </p>
       </div>
-      <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="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="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="min-w-88 mx-auto mt-4 flex w-full items-center justify-center lg:w-1/6">
+        <div className="mx-auto mt-4 flex w-full min-w-88 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="min-w-88 mx-auto mt-4 flex w-full items-center justify-center rounded-md text-center lg:w-1/6">
+      <div className="mx-auto mt-4 flex w-full min-w-88 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="text-bunker-400 mx-auto mt-4 flex w-max flex-col items-center text-xs">
+      <div className="mx-auto mt-4 flex w-max flex-col items-center text-xs text-bunker-400">
         <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="hover:text-bunker-200 hover:decoration-primary-700 mt-2 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+          <span className="mt-2 cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
             {t("login.forgot-password")}
           </span>
         </Link>
@@ -393,7 +393,7 @@ export const PasswordStep = ({
             navigate({ to: "/login" });
           }}
           type="button"
-          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"
+          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"
         >
           {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 fbb2b31c7..82852edc9 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="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">
+      <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">
         What&apos;s your organization slug?
       </p>
       <form onSubmit={handleSubmission}>
-        <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="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="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="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">
+        <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">
           <Button
             type="submit"
             colorSchema="primary"
@@ -72,7 +72,7 @@ export const SSOStep = ({ setStep, type }: Props) => {
             setStep(0);
           }}
           type="button"
-          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"
+          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"
         >
           {t("login.other-option")}
         </button>
diff --git a/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx b/frontend/src/pages/auth/LoginSsoPage/LoginSsoPage.tsx
index 82f6a295e..b66ebe9e4 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="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col justify-center px-6 pb-28">
+    <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">
       <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="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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 64267a190..49252f16a 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="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">
+    <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">
       <Link to="/">
-        <div className="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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 c87e308bb..4818c5f2f 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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 718946062..39d5c66fe 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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="border-mineshaft-600 bg-mineshaft-800 mt-4 rounded-sm border p-4 drop-shadow-sm">
+        <div className="mt-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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="text-red mr-2.5 text-lg" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md text-green mr-2" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <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 678b09827..9adc04e1d 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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 8a2523705..a1dad3cc5 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="bg-bunker-800 flex h-screen w-full flex-col items-center justify-center">
+    <div className="flex h-screen w-full flex-col items-center justify-center bg-bunker-800">
       <form onSubmit={handleSetPassword}>
-        <Card className="border-mineshaft-600 flex w-full max-w-lg flex-col rounded-md border px-8 py-4">
+        <Card className="flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 px-8 py-4">
           <CardTitle
-            className="p-0 pb-4 pt-2 text-left text-xl"
+            className="p-0 pt-2 pb-4 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="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-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="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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 text-red mr-2.5" />
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <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 a0950c93d..d99a73e4f 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="bg-bunker-700 flex flex-col justify-between md:h-screen">
+    <div className="flex flex-col justify-between bg-bunker-700 md:h-screen">
       <Helmet>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <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>
+      <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>
         <p className="my-4 text-lg">Ask your admin for a new one.</p>
-        <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
+        <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
           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 8d90cdbf6..5fa158f93 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="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">
+    <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">
       <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="border-mineshaft-500 mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 p-10 shadow-lg">
+      <div className="mx-auto mt-20 w-fit max-w-2xl rounded-lg border-2 border-mineshaft-500 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
+            <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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="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">
+            <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">
                 We&apos;ve detected multiple accounts using variations of the same email address.
               </p>
             </div>
           </div>
-          <div className="border-mineshaft-400 text-mineshaft-200 mb-4 w-full border-b pb-1 text-sm">
+          <div className="mb-4 w-full border-b border-mineshaft-400 pb-1 text-sm text-mineshaft-200">
             Your other accounts
           </div>
-          <div className="thin-scrollbar flex h-full max-h-60 w-full flex-col items-stretch gap-2 overflow-auto rounded-md">
+          <div className="flex h-full max-h-60 thin-scrollbar 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="bg-mineshaft-700 flex items-center gap-8 rounded-md px-4 py-3 text-gray-200"
+                  className="flex items-center gap-8 rounded-md bg-mineshaft-700 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 cc4e81497..b22f0f0fa 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="bg-bunker-800 h-screen w-screen">
+      <div className="h-screen w-screen bg-bunker-800">
         <ContentLoader />
       </div>
     );
diff --git a/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx b/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
index 3accbe316..4a7ef739e 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="bg-bunker-800 h-screen w-screen">
+      <div className="h-screen w-screen bg-bunker-800">
         <ContentLoader />
       </div>
     );
   }
 
   return (
-    <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">
+    <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">
       <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="border-mineshaft-500 mx-auto mt-20 w-fit rounded-lg border-2 p-10 shadow-lg">
+        <div className="mx-auto mt-20 w-fit rounded-lg border-2 border-mineshaft-500 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 to-bunker-200 from-white bg-clip-text text-center text-2xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b from-white to-bunker-200 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="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"
+                    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"
                   >
                     <p className="truncate transition-colors">{org.name}</p>
 
                     <FontAwesomeIcon
                       icon={faArrowRight}
-                      className="group-hover:text-primary-500 text-gray-400 transition-all group-hover:translate-x-2"
+                      className="text-gray-400 transition-all group-hover:translate-x-2 group-hover:text-primary-500"
                     />
                   </div>
                 ))
diff --git a/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx b/frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx
index 18b4a99ed..a002a1716 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="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">
+    <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">
         Confirm your email
       </p>
-      <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">
+      <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">
         <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="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">
+    <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">
         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 text-red ml-0.5 mr-2.5" />
+                      <FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
                     </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="bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 flex h-screen flex-col items-center justify-center">
+    <div className="flex h-screen flex-col items-center justify-center bg-linear-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
       <Helmet>
         <title>Sign Up</title>
         <link rel="icon" href="/infisical.ico" />
@@ -274,7 +274,7 @@ export const SignupInvitePage = () => {
       ) : (
         <>
           <Link to="/">
-            <div className="mb-4 mt-20 flex justify-center">
+            <div className="mt-20 mb-4 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 13845056b..df5f64d40 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="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">
+    <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">
       <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="mb-4 mt-20 flex justify-center">
+      <div className="mt-20 mb-4 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 33693569e..eeca64e5a 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="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">
+    <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">
       <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="mb-4 mt-20 flex justify-center">
+      <div className="mt-20 mb-4 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 e7f728129..efa498749 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 text-bunker-200 flex justify-center">
+      <p className="text-md flex justify-center text-bunker-200">
         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="mb-2 mt-6"
+          className="mt-6 mb-2"
         />
       </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="mb-2 mt-2"
+          className="mt-2 mb-2"
         />
       </div>
       {codeError && <Error text="Oops. Your code is wrong. Please try again." />}
-      <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="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="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 text-bunker-400 mt-2 flex flex-row">
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
             <button disabled={isLoading} onClick={resendCode} type="button">
-              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
                 {isResendingVerificationEmail ? "Resending..." : "Resend"}
               </span>
             </button>
           </div>
         </div>
-        <p className="text-bunker-400 pb-2 text-sm">Make sure to check your spam inbox.</p>
+        <p className="pb-2 text-sm text-bunker-400">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 d45f7d8b9..1555bd255 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 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">
+      <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">
         {t("signup.step3-message")}
       </p>
-      <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="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="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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Your Name
           </p>
           <Input
@@ -184,14 +184,14 @@ export const UserInfoSSOStep = ({
             className="h-12"
           />
           {nameError && (
-            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+            <p className="mt-1 ml-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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+            <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
               Organization Name
             </p>
             <Input
@@ -204,7 +204,7 @@ export const UserInfoSSOStep = ({
               isDisabled={forceDefaultOrg}
             />
             {organizationNameError && (
-              <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+              <p className="mt-1 ml-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="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+            <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
               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 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="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="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 7914737c1..5e7bd9e94 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="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">
+    <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">
       <Helmet>
         <title>Reset Password</title>
         <link rel="icon" href="/infisical.ico" />
@@ -55,7 +55,7 @@ export const VerifyEmailPage = () => {
         />
       </Helmet>
       <Link to="/">
-        <div className="mb-4 mt-20 flex justify-center">
+        <div className="mt-20 mb-4 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+          <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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="text-bunker-400 mt-6 flex flex-row text-sm">
+          <div className="mt-6 flex flex-row text-sm text-bunker-400">
             <Link to="/login">
-              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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="bg-linear-to-b to-bunker-200 mb-2 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+          <h1 className="mb-2 bg-linear-to-b from-white to-bunker-200 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="text-bunker-400 mt-6 flex flex-row text-sm">
+          <div className="mt-6 flex flex-row text-sm text-bunker-400">
             <Link to="/login">
-              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 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 653701231..97d50b9bf 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="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 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 f06d56d96..329974f65 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Alerts</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 428ee2b3b..eecceaa7d 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Certificate Collections</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 93bc610cc..44e3b912e 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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 2bf1d136c..00c92aa11 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 3c266a00c..8309a9e17 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="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>
+    <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>
         {/* <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 9dab4de11..d5753b0f2 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="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">
+    <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">
           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 a8d6063d3..dd212eb40 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">CA Type</p>
-          <p className="text-mineshaft-300 text-sm">{caTypeToNameMap[ca.configuration.type]}</p>
+          <p className="text-sm font-medium text-mineshaft-300">CA Type</p>
+          <p className="text-sm text-mineshaft-300">{caTypeToNameMap[ca.configuration.type]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">CA ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">CA ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{ca.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Parent CA ID</p>
+              <p className="text-sm font-medium text-mineshaft-300">Parent CA ID</p>
               <div className="group flex align-top">
-                <p className="text-mineshaft-300 text-sm">
+                <p className="text-sm text-mineshaft-300">
                   {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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{ca.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{ca.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
-          <p className="text-mineshaft-300 text-sm">{caStatusToNameMap[ca.status]}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Key Algorithm</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
+          <p className="text-sm text-mineshaft-300">
             {certKeyAlgorithmToNameMap[ca.configuration.keyAlgorithm]}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Max Path Length</p>
-          <p className="text-mineshaft-300 text-sm">{ca.configuration.maxPathLength ?? "-"}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Max Path Length</p>
+          <p className="text-sm text-mineshaft-300">{ca.configuration.maxPathLength ?? "-"}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Not Before</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Not Before</p>
+          <p className="text-sm text-mineshaft-300">
             {ca.configuration.notBefore
               ? format(new Date(ca.configuration.notBefore), "yyyy-MM-dd")
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Not After</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Not After</p>
+          <p className="text-sm text-mineshaft-300">
             {ca.configuration.notAfter
               ? format(new Date(ca.configuration.notAfter), "yyyy-MM-dd")
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <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>
+          <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>
         </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 8e96f8484..a2bff12ed 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="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 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 d737e6c45..f730322c9 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 whitespace-pre-wrap break-all">{csr}</p>
+            <p className="mr-4 break-all whitespace-pre-wrap">{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 fd8e6f7d3..e853dc801 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Internal Certificate Authorities</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 7c3798eda..81fce98c6 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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 472310aaf..14ce122ec 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">External Certificate Authorities</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 117550e0f..a948473e8 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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 ae6f98e55..f4258a4d5 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="bg-bunker-800 container mx-auto flex h-full flex-col justify-between text-white">
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 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 8c40af74f..3284825d3 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 whitespace-pre-wrap break-all">{certificate}</p>
+        <p className="mr-4 break-all whitespace-pre-wrap">{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 whitespace-pre-wrap break-all">{certificateChain}</p>
+            <p className="mr-4 break-all whitespace-pre-wrap">{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 whitespace-pre-wrap break-all">{privateKey}</p>
+            <p className="mr-4 break-all whitespace-pre-wrap">{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 a8509fe17..918aa7303 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                          <div className="mt-2 mb-7 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                          <div className="mt-2 mb-7 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 e843c41d1..849cbe832 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="bg-mineshaft-900 min-h-60 border-none text-gray-400"
+                    className="min-h-60 border-none bg-mineshaft-900 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 8f547e573..9d5d9355f 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                        <div className="mt-2 mb-7 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                        <div className="mt-2 mb-7 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 656a43bad..c4d25a6ad 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="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>
+    <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>
         <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 7601a7473..e29864544 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Certificates</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 e52982ef0..10851d0e1 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="container relative mx-auto max-w-7xl pb-12 text-white">
+      <div className="relative container 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 de87995a9..eb16166fc 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(
-        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
+        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
         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="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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="text-mineshaft-400 ml-1"
+                  className="ml-1 text-mineshaft-400"
                 />
               </Tooltip>
             )}
           </div>
-          <p className="text-bunker-300 truncate text-xs leading-4">{destinationDetails.name}</p>
+          <p className="truncate text-xs leading-4 text-bunker-300">{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 whitespace-normal py-1">
+                  <div className="flex flex-col gap-2 py-1 whitespace-normal">
                     {lastSyncedAt && (
                       <div>
                         <div
@@ -200,22 +200,22 @@ export const PkiSyncRow = ({
                         >
                           <FontAwesomeIcon
                             icon={faCalendarCheck}
-                            className="ml-1 pr-1.5 pt-0.5 text-sm"
+                            className="ml-1 pt-0.5 pr-1.5 text-sm"
                           />
                           <div className="text-xs">Last Synced</div>
                         </div>
-                        <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
+                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
                           {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
                         </div>
                       </div>
                     )}
                     {failureMessage && (
                       <div>
-                        <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="mb-2 flex self-start text-red">
+                          <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                           <div className="text-xs">Failure Reason</div>
                         </div>
-                        <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                           {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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                   <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 1d498acd5..e2526351e 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="min-w-32! max-w-0">
+    <Td className="max-w-0 min-w-32!">
       <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-bunker-300 text-xs leading-3", secondaryClassName)}>
+              <p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
                 {secondaryText}
               </p>
             )}
@@ -46,20 +46,20 @@ export const PkiSyncTableCell = ({
               <FontAwesomeIcon
                 size="xs"
                 icon={faInfoCircle}
-                className="text-bunker-300 ml-1 inline-block"
+                className="ml-1 inline-block text-bunker-300"
               />
             )}
           </p>
           {secondaryText && (
             <p
-              className={twMerge("text-bunker-300 truncate text-xs leading-4", secondaryClassName)}
+              className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
             >
               {secondaryText}
               {infoBadge === "secondary" && (
                 <FontAwesomeIcon
                   size="xs"
                   icon={faInfoCircle}
-                  className="text-bunker-300 ml-1 inline-block"
+                  className="ml-1 inline-block text-bunker-300"
                 />
               )}
             </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 19d813d91..ca4aa7473 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 bba677d98..564eeb789 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-start gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Certificate Syncs</p>
+              <p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
               <a
                 href="https://infisical.com/docs/integrations/pki-syncs/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -80,7 +80,7 @@ export const PkiSyncsTab = () => {
                 </div>
               </a>
             </div>
-            <p className="text-bunker-300 text-sm">
+            <p className="text-sm text-bunker-300">
               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 06e355377..5ca305743 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 224686683..0f82209c9 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">PKI Collection ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">PKI Collection ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{pkiCollection.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{pkiCollection.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
         </div>
         <div>
-          <p className="text-mineshaft-300 text-sm font-medium">Description</p>
-          <p className="text-mineshaft-300 text-sm">{pkiCollection.description}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Description</p>
+          <p className="text-sm text-mineshaft-300">{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 96e872b84..ea787611c 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="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>
+    <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>
         <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 9515e7cc9..682ed4253 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 856e6d067..11c39bd76 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="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 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>
       <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 fce3e6ef5..f9c94740a 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">PKI Subscriber ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">PKI Subscriber ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{pkiSubscriber.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{pkiSubscriber.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">
             {pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Common Name</p>
-          <p className="text-mineshaft-300 text-sm">{pkiSubscriber.commonName}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Common Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
         </div>
         {pkiSubscriber.lastOperationAt && (
           <div className="mb-4">
-            <p className="text-mineshaft-300 text-sm font-medium">Last Operation (Local Time)</p>
-            <p className="text-mineshaft-300 text-sm">
+            <p className="text-sm font-medium text-mineshaft-300">Last Operation (Local Time)</p>
+            <p className="text-sm text-mineshaft-300">
               {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="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {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 e537e5426..c95e9490e 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="bg-bunker-800 h-full">
+      <div className="h-full bg-bunker-800">
         <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 932f3201b..4bc427e48 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                              <div className="mt-2 mb-7 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                              <div className="mt-2 mb-7 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 80561ab00..984ef45ae 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Subscribers</p>
+        <p className="text-xl font-medium text-mineshaft-100">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="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">
+            <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">
               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 3d8b5edb0..d28c2d3a2 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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 c5d6d3a51..26d2b43f9 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="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter 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="ml-1 mt-3 w-16"
+              className="mt-3 ml-1 w-16"
             />
             <div>
               <p className="text-3xl font-medium text-white">{pkiSync.name}</p>
-              <p className="text-bunker-300 leading-3">{destinationDetails.name} PKI Sync</p>
+              <p className="leading-3 text-bunker-300">{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 23d4fda1f..462678280 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="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
+      <div className="mt-4 ml-auto 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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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="bg-mineshaft-500 h-9 rounded-r-none"
+                className="h-9 rounded-r-none bg-mineshaft-500"
                 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="border-mineshaft border-l-mineshaft-700 bg-mineshaft-500 h-9 w-10 rounded-l-none border-l-2"
+                className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
               >
                 <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 18146b3c2..0f9f4a90c 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="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>
+    <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>
         {subscription.auditLogs && (
-          <p className="text-bunker-300 text-xs">
+          <p className="text-xs text-bunker-300">
             Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
           </p>
         )}
@@ -47,7 +47,7 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
           }}
         />
       ) : (
-        <div className="bg-mineshaft-800 text-mineshaft-200 flex h-full items-center justify-center rounded-lg text-sm">
+        <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
           <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 0e8dc30cd..af16fbffd 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-bunker-300 text-sm">{label}</label>
+    <label className="text-sm text-bunker-300">{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -45,9 +45,9 @@ export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props)
   });
 
   return (
-    <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>
+    <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>
         <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 39ff1e9a8..7c1cc8b14 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-bunker-300 text-sm">{label}</label>
+    <label className="text-sm text-bunker-300">{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 806918cb0..7514bab50 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-bunker-300 text-sm ${labelClassName || ""}`}>{label}</label>
+    <label className={`text-sm text-bunker-300 ${labelClassName || ""}`}>{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -55,9 +55,9 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
   });
 
   return (
-    <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>
+    <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>
         <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="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {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 7bcd82bf4..3af7bf189 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="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>
+      <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>
           <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 e2323b338..5885795e2 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-bunker-300 text-sm">{label}</label>
+    <label className="text-sm text-bunker-300">{label}</label>
     <div className="mt-1">{children}</div>
   </div>
 );
@@ -30,9 +30,9 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
 
   return (
     <div>
-      <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 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>
             {!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 146170b71..fe8f98aea 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="bg-bunker-800 h-full">
+      <div className="h-full bg-bunker-800">
         <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="border-mineshaft-600 bg-mineshaft-900 container mx-auto mb-6 max-w-7xl rounded-lg border p-4">
+          <div className="container mx-auto mb-6 max-w-7xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <div className="mb-4 flex justify-between">
-              <p className="text-mineshaft-100 text-xl font-medium">Templates</p>
+              <p className="text-xl font-medium text-mineshaft-100">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 b8cdbfe1c..093a2fcc1 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                    <div className="mt-2 mb-7 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="mb-7 mt-2 grid grid-cols-2 gap-2">
+                    <div className="mt-2 mb-7 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 47687d2cd..22c1a6961 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 8cfa9770c..9c337bba3 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "KMS" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 1d087759e..b3f3fb380 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 min-w-full max-w-full"
+          className="max-h-80 min-h-40 max-w-full min-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="mb-7 mt-2 grid grid-cols-2 gap-2">
+              <div className="mt-2 mb-7 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 3a997e3f6..9ba85beef 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">KMIP Clients</p>
+          <p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">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="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">
+              <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">
                 Documentation{" "}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
@@ -222,7 +222,7 @@ export const KmipClientTable = () => {
                   const { name, id, description, permissions } = kmipClient;
 
                   return (
-                    <Tr className="hover:bg-mineshaft-700 group h-10" key={`st-v3-${id}`}>
+                    <Tr className="group h-10 hover:bg-mineshaft-700" 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="data-[state=open]:text-primary-400 ml-4 p-0"
+                              className="ml-4 p-0 data-[state=open]:text-primary-400"
                               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 87420e817..d7b4b9fec 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>{t("common.head-title", { title: "KMS" })}</title>
       </Helmet>
-      <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 97f5dd8f5..4c9cf685b 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 min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
             isDisabled
             value={plaintext}
           />
@@ -102,7 +102,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
         >
           <TextArea
             {...register("ciphertext")}
-            className="max-h-80 min-h-40 min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
           />
         </FormControl>
       )}
diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx
index 036c84548..4fb09cf4e 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 min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-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 min-w-full max-w-full"
+              className="max-h-80 min-h-40 max-w-full min-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 f1169342c..c3cccd678 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 min-w-full max-w-full"
+          className="max-h-80 min-h-40 max-w-full min-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 24a20a2ee..fec66a31f 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 min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-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 min-w-full max-w-full" />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-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 b866e7f85..bf721edfb 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-mineshaft-100 whitespace-nowrap text-xl font-medium">Keys</p>
+          <p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">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="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">
+              <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">
                 Documentation{" "}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
@@ -298,7 +298,7 @@ export const CmekTable = () => {
 
                   return (
                     <Tr
-                      className="hover:bg-mineshaft-700 group h-10"
+                      className="group h-10 hover:bg-mineshaft-700"
                       key={`st-v3-${id}`}
                       onMouseLeave={() => {
                         setCopyCipherText("");
@@ -351,7 +351,7 @@ export const CmekTable = () => {
                               <IconButton
                                 variant="plain"
                                 colorSchema="primary"
-                                className="data-[state=open]:text-primary-400 ml-4 p-0"
+                                className="ml-4 p-0 data-[state=open]:text-primary-400"
                                 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 d26a5efc1..4163beb5a 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="border-mineshaft-700 bg-mineshaft-900 whitespace-pre-wrap break-words rounded-md border p-2 text-sm">
+            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 text-sm break-words whitespace-pre-wrap">
               {signature}
             </div>
           </div>
           <div>
             <span className="text-sm opacity-60">Data:</span>{" "}
-            <div className="border-mineshaft-700 bg-mineshaft-900 rounded-md border p-2 text-sm">
+            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 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 min-w-full max-w-full" />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
           </FormControl>
 
           <FormControl
@@ -168,7 +168,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
           >
             <TextArea
               {...register("signature")}
-              className="max-h-80 min-h-40 min-w-full max-w-full"
+              className="max-h-80 min-h-40 max-w-full min-w-full"
             />
           </FormControl>
 
diff --git a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
index ff67c85b3..cdc0582dc 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 dca1a752b..7d60d9d95 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-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">
+        <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">
             <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 b0c24553b..74908e948 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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="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="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="mb-1 flex items-center text-sm">
-              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
               Your organization is using legacy privilege management
             </div>
-            <p className="text-bunker-300 mb-2 mt-1 text-sm">
+            <p className="mt-1 mb-2 text-sm text-bunker-300">
               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 5e2fc42f4..753ebd93c 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Groups</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 6545e4cb1..61119fce1 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       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="bg-mineshaft-700 h-8 w-48"
+                                className="h-8 w-48 bg-mineshaft-700"
                                 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 c1aba9512..517fc7823 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                   key={`template-${template.id}`}
                 >
                   <Td>{template.name}</Td>
@@ -192,7 +192,7 @@ export const IdentityAuthTemplatesTable = ({ handlePopUpOpen }: Props) => {
                     </div>
                   </Td>
                   <Td>
-                    <span className="text-mineshaft-400 text-sm">
+                    <span className="text-sm text-mineshaft-400">
                       {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 94ae41c8a..d2926e024 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="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               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 23be4c36a..224af9d5e 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="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-2 shadow-inner"
+                  className="mr-2 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                   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-mineshaft-400 text-xs">Key</span>}
+                  {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs" isOptional />
+                    <FormLabel label="Value" className="text-xs text-mineshaft-400" 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 cb34debad..9280ab5d9 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Identities</p>
+              <p className="text-xl font-medium text-mineshaft-100">Identities</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <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="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
+        <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Identity Auth Templates</p>
+              <p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/auth-templates"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <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 9cc563136..b632318e6 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -208,8 +208,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                   Apply Roles to Filter Identities
                 </DropdownMenuLabel>
                 {roles?.map(({ id, slug, name }) => (
@@ -302,7 +302,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                 }) => {
                   return (
                     <Tr
-                      className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       key={`identity-${id}`}
                       onClick={() =>
                         navigate({
@@ -317,7 +317,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                         {name}
                         {lastLoginAuthMethod && lastLoginTime && (
                           <Tooltip
-                            className="min-w-52 max-w-96 px-3"
+                            className="max-w-96 min-w-52 px-3"
                             content={
                               <LastLoginSection
                                 lastLoginAuthMethod={identityAuthToNameMap[lastLoginAuthMethod]}
@@ -327,7 +327,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           >
                             <FontAwesomeIcon
                               icon={faInfoCircle}
-                              className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
+                              className="ml-2 text-mineshaft-400 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="bg-mineshaft-700 h-8 w-48"
+                                className="h-8 w-48 bg-mineshaft-700"
                                 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 c4acdd076..d43d84c86 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="text-bunker-400 mb-4 text-xs">
+            <div className="mb-4 text-xs text-bunker-400">
               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 d4a2147e6..909391474 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       key={`usage-${usage.identityId}`}
                       onClick={() =>
                         navigate({
@@ -70,7 +70,7 @@ export const MachineAuthTemplateUsagesModal = ({
                     >
                       <Td>{usage.identityName}</Td>
                       <Td>
-                        <span className="text-mineshaft-400 text-sm">{usage.identityId}</span>
+                        <span className="text-sm text-mineshaft-400">{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 164e3975a..d5834d839 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="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-3 shadow-inner"
+                  className="mr-3 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                   containerClassName="flex-row-reverse w-fit"
                   id="lockout-enabled"
                   thumbClassName="bg-mineshaft-800"
@@ -110,25 +110,25 @@ export const LockoutTab = ({
                   >
                     <SelectItem
                       value="s"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Seconds</div>
                     </SelectItem>
                     <SelectItem
                       value="m"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Minutes</div>
                     </SelectItem>
                     <SelectItem
                       value="h"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Hours</div>
                     </SelectItem>
                     <SelectItem
                       value="d"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Days</div>
                     </SelectItem>
@@ -177,19 +177,19 @@ export const LockoutTab = ({
                   >
                     <SelectItem
                       value="s"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Seconds</div>
                     </SelectItem>
                     <SelectItem
                       value="m"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <div className="ml-3 font-medium">Minutes</div>
                     </SelectItem>
                     <SelectItem
                       value="h"
-                      className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                      className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                     >
                       <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 b7b39c1d8..e49beadae 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="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"
+                    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"
                     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 7a7999373..2cd54e587 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-mineshaft-400 text-sm">
+      <p className="text-sm text-mineshaft-400">
         Invite for <span className="font-medium">{invite.email}</span>
       </p>
-      <div className="bg-white/4 flex flex-col gap-1 rounded-md p-2 text-base text-gray-400">
+      <div className="flex flex-col gap-1 rounded-md bg-white/4 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 84b66aa10..010a12b38 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="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
+        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
           <div className="mr-2 text-sm">{selectedMemberIds.length} Selected</div>
           <button
             type="button"
-            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
             onClick={() => setSelectedMemberIds([])}
           >
             Unselect All
@@ -201,9 +201,9 @@ export const OrgMembersSection = () => {
           </OrgPermissionCan>
         </div>
       </div>
-      <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-mineshaft-100 text-xl font-medium">Users</p>
+          <p className="text-xl font-medium text-mineshaft-100">Users</p>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
             {(isAllowed) => (
               <Button
@@ -267,10 +267,10 @@ export const OrgMembersSection = () => {
           }
           buttonText="Remove"
         >
-          <div className="text-mineshaft-400 mt-4 text-sm">
+          <div className="mt-4 text-sm text-mineshaft-400">
             The following members will be removed:
           </div>
-          <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">
+          <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">
             <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="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                              className="mt-[0.05rem] ml-1 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 faef80f43..98f14b1e2 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -348,8 +348,8 @@ export const OrgMembersTable = ({
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                   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="hover:bg-mineshaft-700 h-10 w-full cursor-pointer transition-colors duration-100"
+                      className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       onClick={() =>
                         navigate({
                           to: "/organization/members/$membershipId" as const,
@@ -533,7 +533,7 @@ export const OrgMembersTable = ({
                           )}
                           {lastLoginAuthMethod && lastLoginTime && (
                             <Tooltip
-                              className="min-w-52 max-w-96 px-3"
+                              className="max-w-96 min-w-52 px-3"
                               content={
                                 <LastLoginSection
                                   lastLoginAuthMethod={lastLoginAuthMethod}
@@ -543,7 +543,7 @@ export const OrgMembersTable = ({
                             >
                               <FontAwesomeIcon
                                 icon={faInfoCircle}
-                                className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
+                                className="ml-2 text-mineshaft-400 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="bg-mineshaft-700 h-8 w-48"
+                              className="h-8 w-48 bg-mineshaft-700"
                               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="border-mineshaft-600 bg-mineshaft-700 h-8 font-normal"
+                                    className="h-8 border-mineshaft-600 bg-mineshaft-700 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 8d28316eb..03de66a38 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Organization Roles</p>
+        <p className="text-xl font-medium text-mineshaft-100">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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                   onClick={() =>
                     navigate({
                       to: "/organization/roles/$roleId",
@@ -312,7 +312,7 @@ export const OrgRoleTable = () => {
                     {slug}
                   </Td>
                   <Td>
-                    <Badge className="bg-mineshaft-400/50 text-bunker-200 w-min whitespace-nowrap">
+                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
                       {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 31a5643b3..97aaff73d 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="text-mineshaft-300 mb-4 text-sm">
+            <p className="mb-4 text-sm text-mineshaft-300">
               We&apos;ve developed an improved privilege management system that enhances how access
               controls work in your organization.
             </p>
 
-            <div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
+            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
               <div className="mb-3">
                 <div className="mb-3">
-                  <p className="text-mineshaft-300 mb-3 text-sm">
+                  <p className="mb-3 text-sm text-mineshaft-300">
                     <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-mineshaft-300 text-sm">
+                  <p className="text-sm text-mineshaft-300">
                     <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="hover:text-bunker-200 hover:decoration-primary-700 underline"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
                     >
                       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="hover:text-bunker-200 hover:decoration-primary-700 underline"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
                     >
                       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="hover:text-bunker-200 hover:decoration-primary-700 underline"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
                     >
                       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="hover:text-bunker-200 hover:decoration-primary-700 underline"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
                     >
                       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="hover:text-bunker-200 hover:decoration-primary-700 underline"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
                     >
                       Identity
                     </a>{" "}
@@ -149,7 +149,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                 variant="solid"
                 colorSchema="primary"
                 size="md"
-                className="bg-primary hover:bg-primary-600 w-[120px]"
+                className="w-[120px] bg-primary hover:bg-primary-600"
               >
                 Continue
               </Button>
@@ -157,19 +157,19 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
           </div>
         ) : (
           <div className="mb-4">
-            <p className="text-mineshaft-300 mb-4 text-sm">
+            <p className="mb-4 text-sm text-mineshaft-300">
               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="text-mineshaft-300 mb-4 text-sm">
+            <p className="mb-4 text-sm text-mineshaft-300">
               This upgrade affects operations like updating roles, managing group memberships, and
               modifying privileges across your organization and projects.
             </p>
 
-            <div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
-              <p className="text-mineshaft-300 mb-4 text-sm">
+            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+              <p className="mb-4 text-sm text-mineshaft-300">
                 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="text-mineshaft-300 hover:text-mineshaft-200 w-[120px] text-sm"
+                  className="w-[120px] text-sm text-mineshaft-300 hover:text-mineshaft-200"
                 >
                   Cancel
                 </button>
@@ -285,7 +285,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                       variant="solid"
                       colorSchema="primary"
                       size="md"
-                      className="bg-primary hover:bg-primary-600 w-[120px]"
+                      className="w-[120px] bg-primary hover:bg-primary-600"
                       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 7ab442a95..acb559847 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="bg-bunker-800 flex w-full justify-center text-white">
+        <div className="flex w-full justify-center bg-bunker-800 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="mb-0.5 mr-2 text-sm" />
+                <FontAwesomeIcon icon={faInfoCircle} className="mr-2 mb-0.5 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 74df05a66..d326ff92a 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 f6c8f10cd..05edd8c0d 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 6af87f2a3..4009cc4a3 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 df3a7597d..fc2bb214b 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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"} border-mineshaft-600 w-full border-b-2`}
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
           >
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -146,9 +146,9 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -157,11 +157,11 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
           </Tab.List>
           {selectedTabIndex === 1 && (
-            <div className="text-mineshaft-300 mb-2 text-xs">
+            <div className="mb-2 text-xs text-mineshaft-300">
               SSL configuration for HTTPS connections
             </div>
           )}
-          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
+          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
             <Tab.Panel>
               <Controller
                 name="credentials.adcsUrl"
@@ -222,7 +222,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     isOptional
                   >
                     <TextArea
-                      className="resize-none! h-[3.6rem]"
+                      className="h-[3.6rem] resize-none!"
                       {...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 data-[state=checked]:bg-green/80 shadow-inner"
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                       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 589918e2a..3772478f0 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 7e363e4ee..dcfdbaa08 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 8e81ec892..7d2a4ce7d 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 b21dd8070..8c0f00acf 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 0a0a69245..0f4ef11ef 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 e33b96a80..b60fab800 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 ed69306de..2a2365ffa 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 b029ceaf0..b158fba78 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 fe61c8c18..a47cc39a5 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 b406dd4a3..e217c3535 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 dae880570..874d361f7 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 861a58bf3..c45b93c26 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 833ee7865..5faa7d5b0 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -220,7 +220,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
                           setValue("gatewayId", null);
                         }
                       }}
-                      className="border-mineshaft-500 w-full border"
+                      className="w-full border border-mineshaft-500"
                       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="border-mineshaft-500 w-full border"
+                                className="w-full border border-mineshaft-500"
                                 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 e70bf210b..5cb559410 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 1c11dc31f..e9af41aaa 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -277,7 +277,7 @@ export const GitLabConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
                         setValue("credentials.code", "custom");
                       }
                     }}
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     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 41dc5dcb0..dce53fdda 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         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 0ea47fecb..92549bdb7 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 fa61e8272..17b5f5ffa 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 38327023c..21e376c2e 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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   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="border-mineshaft-500 w-full border capitalize"
+                  className="w-full border border-mineshaft-500 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"} border-mineshaft-600 w-full border-b-2`}
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
           >
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -192,9 +192,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -203,9 +203,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
           </Tab.List>
           {selectedTabIndex === 1 && (
-            <div className="text-mineshaft-300 mb-2 text-xs">Requires ldaps:// URL</div>
+            <div className="mb-2 text-xs text-mineshaft-300">Requires ldaps:// URL</div>
           )}
-          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
+          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
             <Tab.Panel>
               <Controller
                 name="credentials.url"
@@ -266,7 +266,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     isOptional
                   >
                     <TextArea
-                      className="resize-none! h-[3.6rem]"
+                      className="h-[3.6rem] resize-none!"
                       {...field}
                       isDisabled={!sslEnabled}
                     />
@@ -283,7 +283,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     errorText={error?.message}
                   >
                     <Switch
-                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                       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 19c66cd5e..082cdad3b 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="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                           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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 113f8d755..a3108226a 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="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                           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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 08e78e0dc..7386aeab3 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 7ee742e0c..8f375e836 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 aa5b7f6a5..b6ef15d08 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 193d77fac..d16763132 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="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                           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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 64a8c207a..ae00d7b57 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="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                           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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 0bc2ddeba..31e93f66e 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 fec7f591f..f4b7b8586 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -138,9 +138,9 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </Tab>
             <Tab
               className={({ selected }) =>
-                `outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
                   selected
-                    ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                     : "text-bunker-300"
                 }`
               }
@@ -148,7 +148,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
               SSL ({sslEnabled ? "Enabled" : "Disabled"})
             </Tab>
           </Tab.List>
-          <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
+          <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 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 data-[state=checked]:bg-green/80 shadow-inner"
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                       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="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
+                    <TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
                   </FormControl>
                 )}
               />
@@ -258,7 +258,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     errorText={error?.message}
                   >
                     <Switch
-                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                       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 20b553bd2..9e03a3748 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 f65b25349..12be09cdc 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 43b50e412..a4ed1f260 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 646d53b10..52606b4d7 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 ec653b590..e2c545f19 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 7d6ea6f3e..e60ebd3f0 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 5f159306b..72bbd03f7 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 c767d7027..914d065b0 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="text-mineshaft-300 my-1 text-sm">
+          <p className="my-1 text-sm text-mineshaft-300">
             Once created, Infisical will update the password of this connection.
           </p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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 ba898447e..b75e4b19c 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-bunker-300 text-sm">
+    <p className="text-sm text-bunker-300">
       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 059d2d700..c1a5d4a7e 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 border-mineshaft-600 mb-6 w-full border-b-2">
+        <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
           <Tab
             className={({ selected }) =>
-              `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"
+              `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
+                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
               }`
             }
           >
@@ -35,15 +35,15 @@ export const SqlConnectionFields = ({
           </Tab>
           <Tab
             className={({ selected }) =>
-              `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"
+              `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
+                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
               }`
             }
           >
             SSL ({sslEnabled ? "Enabled" : "Disabled"})
           </Tab>
         </Tab.List>
-        <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
+        <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 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 data-[state=checked]:bg-green/80 shadow-inner"
+                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                     id="ssl-enabled"
                     thumbClassName="bg-mineshaft-800"
                     isChecked={value}
@@ -156,7 +156,7 @@ export const SqlConnectionFields = ({
                   isOptional
                 >
                   <TextArea
-                    className="resize-none! h-14"
+                    className="h-14 resize-none!"
                     {...field}
                     isDisabled={isPlatformManagedCredentials || !sslEnabled}
                   />
@@ -173,7 +173,7 @@ export const SqlConnectionFields = ({
                   errorText={error?.message}
                 >
                   <Switch
-                    className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                     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 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                 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 19150bac6..5774e7707 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="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
       <div className="relative">
         <img
           alt={`${appDetails.name} logo`}
           src={`/images/integrations/${appDetails.image}`}
-          className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+          className="h-12 w-12 rounded-md bg-bunker-500 p-2"
         />
         {appDetails.icon && (
           <FontAwesomeIcon
             icon={appDetails.icon}
-            className="text-primary-700 absolute bottom-1 right-1"
+            className="absolute right-1 bottom-1 text-primary-700"
           />
         )}
       </div>
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
         </p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
+          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
           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 3e663517e..c1d3a528a 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">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="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 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="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"
+              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"
             >
               <div className="relative">
                 <img
@@ -91,7 +91,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                 />
                 {icon && (
                   <FontAwesomeIcon
-                    className="text-primary-700 absolute -bottom-1.5 -right-1.5"
+                    className="absolute -right-1.5 -bottom-1.5 text-primary-700"
                     size="xl"
                     icon={icon}
                   />
@@ -125,7 +125,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -134,7 +134,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -145,7 +145,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <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 e74175844..514900ee0 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("hover:bg-mineshaft-700 group h-12 transition-colors duration-100")}
+      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
       key={`app-connection-${id}`}
     >
       <Td>
@@ -93,35 +93,35 @@ export const AppConnectionRow = ({
               <FontAwesomeIcon
                 icon={connectionDetails.icon}
                 size="xs"
-                className="text-primary-700 absolute -bottom-0.5 -right-0.5"
+                className="absolute -right-0.5 -bottom-0.5 text-primary-700"
               />
             )}
           </div>
           <span className="hidden lg:inline">{connectionDetails.name}</span>
         </div>
       </Td>
-      <Td className="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <div className="flex w-full items-center">
           <p className="truncate">{name}</p>
           {description && (
             <Tooltip content={description}>
-              <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
+              <FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
             </Tooltip>
           )}
         </div>
       </Td>
-      <Td className="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <p className="truncate">
           <FontAwesomeIcon
             size="sm"
-            className="text-mineshaft-300/75 mr-1.5"
+            className="mr-1.5 text-mineshaft-300/75"
             icon={methodDetails.icon}
           />
           {methodDetails.name}
         </p>
       </Td>
       {!isProjectView && (
-        <Td className="min-w-32! max-w-0">
+        <Td className="max-w-0 min-w-32!">
           {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="text-mineshaft-300/75 mr-1.5"
+                  className="mr-1.5 text-mineshaft-300/75"
                   icon={faTable}
                 />
                 {project.name}
@@ -144,7 +144,7 @@ export const AppConnectionRow = ({
             <p className="truncate">
               <FontAwesomeIcon
                 size="sm"
-                className="text-mineshaft-300/75 mr-1.5"
+                className="mr-1.5 text-mineshaft-300/75"
                 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 e194cd8de..491a4d7d7 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-1">
-            <p className="text-mineshaft-100 text-xl font-medium">App Connections</p>
+            <p className="text-xl font-medium text-mineshaft-100">App Connections</p>
             <a
               href="https://infisical.com/docs/integrations/app-connections/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <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">
+              <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">
                 <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-bunker-300 text-sm">
+          <p className="text-sm text-bunker-300">
             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="border-mineshaft-600 bg-mineshaft-800 flex gap-x-0.5 rounded-md border p-1">
+          <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 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"
-              } hover:bg-mineshaft-600 min-w-20 rounded border-none`}
+              } min-w-20 rounded border-none hover:bg-mineshaft-600`}
             >
               Organization
             </Button>
@@ -284,7 +284,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               size="xs"
               className={`${
                 view === View.All ? "bg-mineshaft-500" : "bg-transparent"
-              } hover:bg-mineshaft-600 min-w-20 rounded border-none`}
+              } min-w-20 rounded border-none hover:bg-mineshaft-600`}
             >
               All
             </Button>
@@ -304,7 +304,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -313,7 +313,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent
             sideOffset={2}
-            className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+            className="max-h-[70vh] thin-scrollbar 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 9d6107dfc..e5f6b3684 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-bunker-300 text-sm">
+          <p className="text-sm text-bunker-300">
             This App Connection&#39;s credentials are managed by Infisical.
           </p>
-          <p className="text-bunker-300 mt-3 text-sm">
+          <p className="mt-3 text-sm text-bunker-300">
             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 3e8af0e31..11628ce98 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <Helmet>
         <title>Infisical | Audit Logs</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
 
-      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
+      <div className="flex h-full w-full justify-center bg-bunker-800 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 40ef9febe..cc8748953 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="text-mineshaft-400 -mt-[0.05rem] ml-1 text-[11px]"
+              className="-mt-[0.05rem] ml-1 text-[11px] text-mineshaft-400"
             />
           </Tooltip>
         )}
         <Button
           onClick={() => onClear()}
           variant="link"
-          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto font-normal transition-all duration-75"
+          className="ml-auto font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
           size="xs"
         >
           Clear
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx
index a38c72d21..3407043a2 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="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 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>
                 {formatDateTime({
                   timezone,
@@ -234,7 +234,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                           </FormControl>
                         </div>
                         {error && (
-                          <span className="text-xs text-red-600 text-opacity-90">
+                          <span className="text-opacity-90 text-xs text-red-600">
                             {error.message}
                           </span>
                         )}
@@ -276,7 +276,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                 <FontAwesomeIcon
                   icon={faChevronRight}
                   size="xs"
-                  className="text-mineshaft-400 mt-6"
+                  className="mt-6 text-mineshaft-400"
                 />
                 <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="border-mineshaft-500! bg-mineshaft-600! w-[10.6rem] border capitalize"
+        className="w-[10.6rem] border border-mineshaft-500! bg-mineshaft-600! 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 d689e1457..c53c38984 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 bottom-0 right-0" variant="primary">
+            <Badge className="absolute right-0 bottom-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="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 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="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="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">
+                          <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">
                             {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 thin-scrollbar max-h-80 overflow-hidden"
+                          className="z-100 max-h-80 thin-scrollbar 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="text-primary pr-0.5"
+                                          className="pr-0.5 text-primary"
                                         />
                                       ) : (
                                         <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("border-mineshaft-500 bg-mineshaft-700 w-full border")}
+                        className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
                         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="mb-3 mt-2">
+                    <div className="mt-2 mb-3">
                       <p className="text-xs opacity-60">Secrets</p>
-                      <div className="bg-mineshaft-500 h-px w-full rounded-full" />
+                      <div className="h-px w-full rounded-full bg-mineshaft-500" />
                     </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 15e28037b..e950dbb45 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-100 text-xl font-medium">Audit History</p>
+              <p className="text-xl font-medium text-mineshaft-100">Audit History</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/audit-logs"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <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 60bcb244a..1fabac5f5 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="bg-mineshaft-600 rounded-sm p-0.5 pl-1 font-mono">{label}:</div>
+      <div className="rounded-sm bg-mineshaft-600 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="hover:bg-mineshaft-700 h-10 cursor-pointer border-x-0 border-b border-t-0"
+        className="h-10 cursor-pointer border-x-0 border-t-0 border-b hover:bg-mineshaft-700"
         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-b border-t-0`}>
+        <Tr className={`log-${auditLog.id} h-10 border-x-0 border-t-0 border-b`}>
           <Td colSpan={3} className="px-3 py-2">
-            <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">
+            <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">
               {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 acec0efe4..e49314f13 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="bg-bunker-800 h-full">
+    <div className="h-full bg-bunker-800">
       <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="bg-bunker-800 flex h-full w-full justify-center text-white">
+      <div className="flex h-full w-full justify-center bg-bunker-800 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 c0d516a49..0602bc58c 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <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-white">Current usage</h2>
       <TableContainer className="mt-4">
         <Table>
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx
index ce97ca710..a24e3ca31 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-mineshaft-600 border-b-2">
+          <Tab.List className="max-w-(--breakpoint-lg) border-b-2 border-mineshaft-600">
             <Tab as={Fragment}>
               {({ selected }) => (
                 <button
                   type="button"
                   className={`p-4 ${
                     selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                  } w-30 outline-hidden whitespace-nowrap font-medium`}
+                  } w-30 font-medium whitespace-nowrap outline-hidden`}
                 >
                   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 outline-hidden font-medium`}
+                  } w-30 font-medium outline-hidden`}
                 >
                   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 1b65e55f4..d22eab08b 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="border-primary/40 bg-primary/10 mb-6 flex flex-1 items-center rounded-lg border p-4">
+            <div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
               <div className="flex-1">
-                <h2 className="text-mineshaft-100 text-xl font-medium">
+                <h2 className="text-xl font-medium text-mineshaft-100">
                   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="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">
+            <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">
                 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="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">
+                  <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">
                     Book a demo{" "}
                     <FontAwesomeIcon
                       icon={faArrowUpRightFromSquare}
@@ -161,9 +161,9 @@ export const PreviewSection = () => {
         )}
       {!isPending && subscription && data && (
         <div className="mb-6 flex">
-          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
+          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Current plan</p>
-            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
+            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
               {`${formatPlanSlug(subscription.slug)} ${
                 subscription.status === "trialing" ? "(Trial)" : ""
               }`}
@@ -190,17 +190,17 @@ export const PreviewSection = () => {
               </OrgPermissionCan>
             )}
           </div>
-          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
+          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Price</p>
-            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
+            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
               {subscription.status === "trialing"
                 ? "$0.00 / month"
                 : `${formatAmount(data.amount)} / ${data.interval}`}
             </p>
           </div>
-          <div className="border-mineshaft-600 bg-mineshaft-900 flex-1 rounded-lg border p-4">
+          <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Subscription renews on</p>
-            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
+            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
               {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 397a044ad..fce3978c7 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Business name</h2>
+      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">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 f0a01795f..8b471346f 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      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-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 412ca24c2..1008996db 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 3af8a7eb3..bcad4be53 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 b935f1980..2f0333c15 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 883821acb..ab779ceee 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <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-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 4deed0f2f..da7643c50 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="ml-2 mt-2" />;
+  if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
 
   return (
-    <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 ed27d0a27..d3194a9f8 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="ml-2 mt-2" />;
+  if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
 
   return data ? (
-    <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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">Group ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">Group ID</p>
           <div className="group flex items-center gap-2">
-            <p className="text-mineshaft-300 text-sm">{data.group.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{data.group.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.group.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Slug</p>
+          <p className="text-sm font-medium text-mineshaft-300">Slug</p>
           <div className="group flex items-center gap-2">
-            <p className="text-mineshaft-300 text-sm">{data.group.slug}</p>
+            <p className="text-sm text-mineshaft-300">{data.group.slug}</p>
             <CopyButton value={data.group.slug} name="Slug" size="xs" variant="plain" />
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
-          <p className="text-mineshaft-300 text-sm">{data.group.role}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.group.role}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Created At</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Created At</p>
+          <p className="text-sm text-mineshaft-300">
             {new Date(data.group.createdAt).toLocaleString()}
           </p>
         </div>
       </div>
     </div>
   ) : (
-    <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">
+    <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">
         <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 d3b8917ae..2ca6859b0 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="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 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>
         <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 563e0ceb5..446e54885 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 14e325c5a..b1d75ff83 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="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 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>
       {data.identity.authMethods.length > 0 ? (
-        <div className="divide-mineshaft-400/50 flex flex-col divide-y">
+        <div className="flex flex-col divide-y divide-mineshaft-400/50">
           {data.identity.authMethods.map((authMethod) => (
             <button
               key={authMethod}
@@ -36,7 +36,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
                 })
               }
               type="button"
-              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"
+              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"
             >
               <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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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 14f4b671e..c1bd0adf6 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-mineshaft-300 text-sm font-medium">Client ID</p>
+        <p className="text-sm font-medium text-mineshaft-300">Client ID</p>
         <div className="group flex align-top">
-          <p className="text-mineshaft-300 text-sm">{identityUniversalAuth?.clientId ?? ""}</p>
+          <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">{`Client Secrets (${clientSecrets.length})`}</p>
+          <p className="text-sm font-medium text-mineshaft-300">{`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-mineshaft-300 text-sm font-medium">
+                  <p className="text-sm font-medium text-mineshaft-300">
                     {`${clientSecretPrefix}****`}
                   </p>
-                  <p className="text-mineshaft-300 text-sm">
+                  <p className="text-sm text-mineshaft-300">
                     {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 7f8b8a1c2..118fea015 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="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>
+        <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>
           <Button
             size="xs"
             className="underline"
@@ -54,16 +54,16 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
         );
         return (
           <div
-            className="border-mineshaft-500 group flex items-center justify-between border-b px-2 py-2 last:pb-0"
+            className="group flex items-center justify-between border-b border-mineshaft-500 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-mineshaft-300 text-sm font-medium">
+                <p className="text-sm font-medium text-mineshaft-300">
                   {token.name ? token.name : "-"}
                 </p>
-                <p className="text-mineshaft-400 text-xs">
+                <p className="text-xs text-mineshaft-400">
                   {token.isAccessTokenRevoked
                     ? "Revoked"
                     : `Expires on ${format(expiresAt, "yyyy-MM-dd")}`}
@@ -114,7 +114,7 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
         );
       })}
       <Button
-        className="mr-4 mt-4 w-full"
+        className="mt-4 mr-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 102a31adf..b4fbd131e 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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <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">
             <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 3e4f12496..8e0c1228c 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">Identity ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">Identity ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{data.identity.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{data.identity.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Last Login Auth Method</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
+          <p className="text-sm text-mineshaft-300">
             {data.lastLoginAuthMethod ? identityAuthToNameMap[data.lastLoginAuthMethod] : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Last Login Time</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
+          <p className="text-sm text-mineshaft-300">
             {data.lastLoginTime ? format(data.lastLoginTime, "PPpp") : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Delete Protection</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Delete Protection</p>
+          <p className="text-sm text-mineshaft-300">
             {data.identity.hasDeleteProtection ? "On" : "Off"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
-          <p className="text-mineshaft-300 text-sm">{data.role}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.role}</p>
         </div>
         <div>
-          <p className="text-mineshaft-300 text-sm font-medium">Metadata</p>
+          <p className="text-sm font-medium text-mineshaft-300">Metadata</p>
           {data?.metadata?.length ? (
-            <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
+            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
               {data.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
                     size="xs"
-                    className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
+                    className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
                   >
                     <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                     <div>{el.key}</div>
                   </Tag>
                   <Tag
                     size="xs"
-                    className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
+                    className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 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-mineshaft-300 text-sm">-</p>
+            <p className="text-sm text-mineshaft-300">-</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 6a43aa487..1622962ea 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="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
       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 5bb87bd31..6530b9ae5 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="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>
+    <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>
         <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 c188680eb..d2b865a5a 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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <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">
             <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 0ca3eb985..eb81bbcef 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-mineshaft-400 text-sm">{label}</span>
+      <span className="text-sm text-mineshaft-400">{label}</span>
       {children ? (
-        <p className="break-words text-base leading-4">{children}</p>
+        <p className="text-base leading-4 break-words">{children}</p>
       ) : (
-        <p className="text-bunker-400 text-base italic leading-4">Not set</p>
+        <p className="text-base leading-4 text-bunker-400 italic">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 9680b1e25..b5cb2d901 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="border-mineshaft-500 col-span-2 mt-3 flex justify-between border-b pb-2">
+      <div className="col-span-2 mt-3 flex justify-between border-b border-mineshaft-500 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 af3ddc73e..be9c166b3 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="border-mineshaft-500 flex items-end justify-between border-b pb-2">
+      <div className="flex items-end justify-between border-b border-mineshaft-500 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="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
+                <Th className="py-1 font-normal whitespace-nowrap">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="hover:bg-mineshaft-700 text-xs" key={id}>
+                    <Tr className="text-xs hover:bg-mineshaft-700" 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 7fcd459be..b034b5367 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="border-mineshaft-500 flex items-end justify-between border-b pb-2">
+      <div className="flex items-end justify-between border-b border-mineshaft-500 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="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
+                <Th className="py-1 font-normal whitespace-nowrap">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="hover:bg-mineshaft-700 text-xs" key={id}>
+                    <Tr className="text-xs hover:bg-mineshaft-700" 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 ad3334d8e..7ea2c8ba3 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="border-mineshaft-500 flex items-end justify-between border-b pb-2">
+        <div className="flex items-end justify-between border-b border-mineshaft-500 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 997b23f67..477753672 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="bg-mineshaft-600 break-words rounded-sm p-2">{data.jwksCaCert}</p>
+                  <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.jwksCaCert}</p>
                 }
               >
                 <div className="w-min">
-                  <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                  <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                     <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="bg-mineshaft-600 whitespace-normal break-words rounded-sm p-2">
+                    <p className="rounded-sm bg-mineshaft-600 p-2 break-words whitespace-normal">
                       {key}
                     </p>
                   }
                 >
                   <div className="inline-block w-min">
-                    <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                    <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                       <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="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
+              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
                 {JSON.stringify(data.boundClaims, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 227e2fc89..fa39feb22 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="bg-mineshaft-600 break-words rounded-sm p-2">
+              <p className="rounded-sm bg-mineshaft-600 p-2 break-words">
                 {data.tokenReviewerJwt || "Not provided"}
               </p>
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <FontAwesomeIcon icon={faEye} />
                 <span>Reveal</span>
               </Badge>
             </div>
           </Tooltip>
         ) : (
-          <p className="text-bunker-400 text-base italic leading-4">Not set</p>
+          <p className="text-base leading-4 text-bunker-400 italic">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="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCert}</p>}
+            content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 30928e5d3..f9a0b93bc 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="bg-mineshaft-600 break-words rounded-sm p-2">{data.bindPass}</p>}
+          content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.bindPass}</p>}
         >
           <div className="w-min">
-            <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
               <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="bg-mineshaft-600 break-words rounded-sm p-2">
+              <p className="rounded-sm bg-mineshaft-600 p-2 break-words">
                 {data.ldapCaCertificate}
               </p>
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 082798cf3..1c81c365c 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="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCert}</p>}
+            content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
+              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
                 {JSON.stringify(data.boundClaims, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
+              <pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
                 {JSON.stringify(data.claimMetadataMapping, null, 2)}
               </pre>
             }
           >
             <div className="w-min">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 1a8203a1b..6dc45eefa 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="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCertificate}</p>
+            <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCertificate}</p>
           }
         >
           <div className="w-min">
-            <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
               <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 935a16474..4d7b95087 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="border-mineshaft-500 mb-3 border-b pb-2">
+        <div className="mb-3 border-b border-mineshaft-500 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 db3ff17dc..660e4b26d 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="bg-bunker-800 flex w-full justify-center text-white">
+      <div className="flex w-full justify-center bg-bunker-800 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 fd62c81f6..27ebb6820 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-mineshaft-100 text-lg font-medium">Gateways</h3>
+            <h3 className="text-lg font-medium text-mineshaft-100">Gateways</h3>
             <a
               href="https://infisical.com/docs/documentation/platform/gateways/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -120,7 +120,7 @@ export const GatewayTab = withPermission(
             </a>
           </div>
         </div>
-        <p className="text-mineshaft-400 mb-4 text-sm">
+        <p className="mb-4 text-sm text-mineshaft-400">
           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="bg-mineshaft-700 text-mineshaft-400 rounded-sm px-1.5 py-0.5 text-xs">
+                        <span className="rounded-sm bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
                           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 0f70c3f0f..1a0d41b4c 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="text-mineshaft-300 mt-1 text-xs">
+        <p className="mt-1 text-xs text-mineshaft-300">
           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 8da5294f5..89b7bf4c9 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-mineshaft-100 text-lg font-medium">Relays</h3>
+            <h3 className="text-lg font-medium text-mineshaft-100">Relays</h3>
             <a
               href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -86,7 +86,7 @@ export const RelayTab = withPermission(
             </a>
           </div>
         </div>
-        <p className="text-mineshaft-400 mb-4 text-sm">
+        <p className="mb-4 text-sm text-mineshaft-400">
           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="bg-mineshaft-700 text-mineshaft-400 rounded-sm px-1.5 py-0.5 text-xs">
+                            <span className="rounded-sm bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
                               Managed
                             </span>
                           </Tooltip>
diff --git a/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx b/frontend/src/pages/organization/NoOrgPage/NoOrgPage.tsx
index 45899b290..495842bf5 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="bg-bunker-800 min-h-screen">
+      <div className="min-h-screen bg-bunker-800">
         <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 d4e1c6ede..2e4b43cbe 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="bg-bunker-800 mx-auto flex max-w-7xl flex-col justify-start">
+    <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800">
       <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 4048b47ce..d7dcfcb3e 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="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] text-sm duration-200"
+          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
           containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         />
-        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1">
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <Tooltip content="Toggle Sort Direction">
             <IconButton
-              className="hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
+              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
               ariaLabel="Sort asc"
               variant="plain"
               size="xs"
@@ -161,7 +161,7 @@ export const AllProjectView = ({
           <DropdownMenuTrigger asChild>
             <div
               className={twMerge(
-                "border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1",
+                "ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1",
                 projectTypeFilter && "border-primary-400 text-primary-400"
               )}
             >
@@ -169,7 +169,7 @@ export const AllProjectView = ({
                 <IconButton
                   ariaLabel="project-types"
                   className={twMerge(
-                    "hover:bg-mineshaft-600 min-w-[2.4rem] border-none",
+                    "min-w-[2.4rem] border-none hover:bg-mineshaft-600",
                     projectTypeFilter && "text-primary-400"
                   )}
                   variant="plain"
@@ -200,7 +200,7 @@ export const AllProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex gap-x-0.5 rounded-md border p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 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="hover:bg-mineshaft-600 pointer-events-none min-w-[2.4rem] border-none bg-transparent"
+                className="pointer-events-none min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
               >
                 <FontAwesomeIcon icon={faBorderAll} />
               </IconButton>
@@ -218,7 +218,7 @@ export const AllProjectView = ({
             variant="outline_bg"
             ariaLabel="list"
             size="xs"
-            className="bg-mineshaft-500 hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
+            className="min-w-[2.4rem] border-none bg-mineshaft-500 hover:bg-mineshaft-600"
           >
             <FontAwesomeIcon icon={faList} />
           </IconButton>
@@ -253,12 +253,12 @@ export const AllProjectView = ({
             <div
               key={`workspace-cards-loading-${i + 1}`}
               className={twMerge(
-                "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",
+                "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",
                 i === 0 && "rounded-t-md",
                 i === 2 && "rounded-b-md border-b"
               )}
             >
-              <Skeleton className="bg-mineshaft-600 w-full" />
+              <Skeleton className="w-full bg-mineshaft-600" />
             </div>
           ))}
         {!isProjectLoading &&
@@ -288,20 +288,20 @@ export const AllProjectView = ({
               }}
               key={workspace.id}
               className={twMerge(
-                "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"
+                "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"
               )}
             >
               <div className="mr-3 flex min-w-0 flex-1 items-center gap-3">
-                <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1 shadow-inner">
+                <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 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="text-mineshaft-100 truncate text-sm">{workspace.name}</p>
-                  <p className="text-mineshaft-300 truncate text-xs leading-4">
+                  <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
+                  <p className="truncate text-xs leading-4 text-mineshaft-300">
                     {getProjectTitle(workspace.type)}{" "}
                     {workspace.description ? `- ${workspace.description}` : ""}
                   </p>
@@ -351,7 +351,7 @@ export const AllProjectView = ({
       </div>
       {!isProjectLoading && Boolean(searchedProjects?.totalCount) && (
         <Pagination
-          className="border-mineshaft-600 rounded-b-md border"
+          className="rounded-b-md border border-mineshaft-600"
           perPage={perPage}
           perPageList={[12, 24, 48, 96]}
           count={searchedProjects?.totalCount || 0}
@@ -361,10 +361,10 @@ export const AllProjectView = ({
         />
       )}
       {!isProjectLoading && !searchedProjects?.totalCount && (
-        <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
+        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
           <FontAwesomeIcon
             icon={faFolderOpen}
-            className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
+            className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
           />
           <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 b3f273dba..020947f28 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="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%]"
+      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"
     >
       <div className="flex items-center gap-4">
-        <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1.5 shadow-inner">
+        <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 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="text-mineshaft-100 truncate text-lg font-medium">{workspace.name}</p>
-          <p className="text-mineshaft-300 truncate text-sm leading-4">
+          <p className="truncate text-lg font-medium text-mineshaft-100">{workspace.name}</p>
+          <p className="truncate text-sm leading-4 text-mineshaft-300">
             {getProjectTitle(workspace.type)}
           </p>
         </div>
@@ -216,7 +216,7 @@ export const MyProjectView = ({
           {isFavorite ? (
             <FontAwesomeIcon
               icon={faSolidStar}
-              className="hover:text-mineshaft-400 text-sm text-yellow-600"
+              className="text-sm text-yellow-600 hover:text-mineshaft-400"
               onClick={(e) => {
                 e.stopPropagation();
                 removeProjectFromFavorites(workspace.id);
@@ -225,7 +225,7 @@ export const MyProjectView = ({
           ) : (
             <FontAwesomeIcon
               icon={faStar}
-              className="text-mineshaft-400 hover:text-mineshaft-300 text-sm"
+              className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
               onClick={(e) => {
                 e.stopPropagation();
                 addProjectToFavorites(workspace.id);
@@ -234,7 +234,7 @@ export const MyProjectView = ({
           )}
         </div>
       </div>
-      <p className="text-mineshaft-400 mt-4 truncate text-sm">
+      <p className="mt-4 truncate text-sm text-mineshaft-400">
         {workspace.description || "No description"}
       </p>
     </div>
@@ -251,20 +251,20 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      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 ${
+      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 ${
         index === 0 && "rounded-t-md"
       }`}
     >
       <div className="flex min-w-0 flex-1 items-center gap-3">
-        <div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1 shadow-inner">
+        <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 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="text-mineshaft-100 truncate text-sm">{workspace.name}</p>
-          <p className="text-mineshaft-300 truncate text-xs leading-4">
+          <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
+          <p className="truncate text-xs leading-4 text-mineshaft-300">
             {getProjectTitle(workspace.type)}{" "}
             {workspace.description ? `- ${workspace.description}` : ""}
           </p>
@@ -274,7 +274,7 @@ export const MyProjectView = ({
         {isFavorite ? (
           <FontAwesomeIcon
             icon={faSolidStar}
-            className="hover:text-mineshaft-400 ml-6 text-sm text-yellow-600"
+            className="ml-6 text-sm text-yellow-600 hover:text-mineshaft-400"
             onClick={(e) => {
               e.stopPropagation();
               removeProjectFromFavorites(workspace.id);
@@ -283,7 +283,7 @@ export const MyProjectView = ({
         ) : (
           <FontAwesomeIcon
             icon={faStar}
-            className="text-mineshaft-400 hover:text-mineshaft-300 ml-6 text-sm"
+            className="ml-6 text-sm text-mineshaft-400 hover:text-mineshaft-300"
             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="border-mineshaft-600 bg-mineshaft-800 flex h-40 min-w-72 flex-col justify-between rounded-md border p-4"
+                  className="flex h-40 min-w-72 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
                 >
-                  <div className="text-mineshaft-100 mt-0 text-lg">
-                    <Skeleton className="bg-mineshaft-600 w-3/4" />
+                  <div className="mt-0 text-lg text-mineshaft-100">
+                    <Skeleton className="w-3/4 bg-mineshaft-600" />
                   </div>
-                  <div className="text-mineshaft-300 mt-0 pb-6 text-sm">
-                    <Skeleton className="bg-mineshaft-600 w-1/2" />
+                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+                    <Skeleton className="w-1/2 bg-mineshaft-600" />
                   </div>
                   <div className="flex justify-end">
-                    <Skeleton className="bg-mineshaft-600 w-1/2" />
+                    <Skeleton className="w-1/2 bg-mineshaft-600" />
                   </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={`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 ${
+                  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 ${
                     i === 0 && "rounded-t-md"
                   } ${i === 2 && "rounded-b-md border-b"}`}
                 >
-                  <Skeleton className="bg-mineshaft-600 w-full" />
+                  <Skeleton className="w-full bg-mineshaft-600" />
                 </div>
               ))}
             {!isProjectViewLoading &&
@@ -353,20 +353,20 @@ export const MyProjectView = ({
     }
   } else if (workspaces.length && searchFilter) {
     projectsComponents = (
-      <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
+      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
         <FontAwesomeIcon
           icon={faSearch}
-          className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
+          className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
         />
         <div className="text-center font-light">No projects match search...</div>
       </div>
     );
   } else if (filteredWorkspaces.length === 0 && isTableFilteredByType) {
     projectsComponents = (
-      <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
+      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
         <FontAwesomeIcon
           icon={faSearch}
-          className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
+          className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
         />
         <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="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] text-sm duration-200"
+          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
           containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         />
-        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1">
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <Tooltip content="Toggle Sort Direction">
             <IconButton
-              className="hover:bg-mineshaft-600 min-w-[2.4rem] border-none"
+              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
               ariaLabel={`Sort ${
                 orderDirection === OrderByDirection.ASC ? "descending" : "ascending"
               }`}
@@ -407,7 +407,7 @@ export const MyProjectView = ({
           <DropdownMenuTrigger asChild>
             <div
               className={twMerge(
-                "border-mineshaft-600 bg-mineshaft-800 ml-2 flex rounded-md border p-1",
+                "ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1",
                 isTableFilteredByType && "border-primary-400 text-primary-400"
               )}
             >
@@ -415,7 +415,7 @@ export const MyProjectView = ({
                 <IconButton
                   ariaLabel="project-types"
                   className={twMerge(
-                    "hover:bg-mineshaft-600 min-w-[2.4rem] border-none",
+                    "min-w-[2.4rem] border-none hover:bg-mineshaft-600",
                     isTableFilteredByType && "text-primary-400"
                   )}
                   variant="plain"
@@ -446,7 +446,7 @@ export const MyProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="border-mineshaft-600 bg-mineshaft-800 ml-2 flex gap-x-0.5 rounded-md border p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 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"
-            } hover:bg-mineshaft-600 min-w-[2.4rem] border-none`}
+            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
           >
             <FontAwesomeIcon icon={faBorderAll} />
           </IconButton>
@@ -471,7 +471,7 @@ export const MyProjectView = ({
             size="xs"
             className={`${
               projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"
-            } hover:bg-mineshaft-600 min-w-[2.4rem] border-none`}
+            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
           >
             <FontAwesomeIcon icon={faList} />
           </IconButton>
@@ -505,8 +505,8 @@ export const MyProjectView = ({
         <Pagination
           className={
             projectsViewMode === ProjectsViewMode.GRID
-              ? "justify-start! col-span-full border-transparent bg-transparent pl-2"
-              : "border-mineshaft-600 rounded-b-md border"
+              ? "col-span-full justify-start! border-transparent bg-transparent pl-2"
+              : "rounded-b-md border border-mineshaft-600"
           }
           perPage={perPage}
           perPageList={[12, 24, 48, 96]}
@@ -517,10 +517,10 @@ export const MyProjectView = ({
         />
       )}
       {isWorkspaceEmpty && !isTableFilteredByType && (
-        <div className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 mt-4 w-full rounded-md border px-4 py-6 text-base">
+        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
           <FontAwesomeIcon
             icon={faFolderOpen}
-            className="text-mineshaft-400 mb-4 mt-2 w-full text-center text-5xl"
+            className="mt-2 mb-4 w-full text-center text-5xl text-mineshaft-400"
           />
           <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 a918a3d05..9d17891d3 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="border-mineshaft-600 bg-mineshaft-800 flex gap-x-0.5 rounded-md border p-1">
+    <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 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"
-        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
         My Projects
       </Button>
@@ -33,7 +33,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === ProjectListView.AllProjects ? "bg-mineshaft-500" : "bg-transparent"
-        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
         All Projects
       </Button>
diff --git a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
index 8522ff90e..ac67f0d54 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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-mineshaft-400 text-sm font-normal normal-case leading-3">
+                  <p className="text-sm leading-3 font-normal text-mineshaft-400 normal-case">
                     {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 763197b9b..8995c03b3 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="text-mineshaft-400 mt-4 text-sm">Loading Role...</p>
+            <p className="mt-4 text-sm text-mineshaft-400">Loading Role...</p>
           </div>
         ) : role ? (
           <Content role={role!} onClose={() => onOpenChange(false)} />
         ) : (
-          <p className="text-red w-full text-center">
+          <p className="w-full text-center text-red">
             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 c15cc0821..48a0de62e 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -83,7 +83,7 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 bdc5f6696..b8e13af69 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -131,7 +131,7 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 35597d254..fec6da56a 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -94,7 +94,7 @@ export const OrgPermissionAuditLogsRow = ({ isEditable, control, setValue }: Pro
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 ad37a26c6..de81119a1 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -119,7 +119,7 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 3a4d1bb69..468b2f5f2 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -128,7 +128,7 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 735d9673e..04e38a533 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -152,7 +152,7 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 28da40937..0dbe4d30c 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -162,7 +162,7 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 edbac8f03..6eb161983 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -80,7 +80,7 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 f231aa2a9..46908889a 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -158,7 +158,7 @@ export const OrgPermissionMachineIdentityAuthTemplateRow = ({
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 4bee52e84..238a03ff5 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -127,7 +127,7 @@ export const OrgRelayPermissionRow = ({ isEditable, control, setValue }: Props)
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 61285d7dc..084687a08 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -77,7 +77,7 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 b05e11018..aa70a2e08 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -77,7 +77,7 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 c651d7e10..0e3b48a4e 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
         <Td className="w-4">
@@ -173,7 +173,7 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="bg-mineshaft-700 h-8 w-40"
+            className="h-8 w-40 bg-mineshaft-700"
             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 03aa7a768..1ee3b4d91 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <div>
-          <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>
+          <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>
         </div>
         {isCustomRole && (
           <div className="flex items-center">
             {isDirty && (
               <Button
-                className="text-mineshaft-300 mr-4"
+                className="mr-4 text-mineshaft-300"
                 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 e51ad5aad..a026b86f3 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="bg-bunker-800 container mx-auto h-full w-full max-w-7xl text-white">
+        <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 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="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">
+              <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">
                 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 57d0125f4..d2ada2b29 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="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
+        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         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 6ffe16343..fd3b1d5b5 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Secret Requests</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 8ef6dd84d..5aa529e77 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="text-mineshaft-200 mb-8 text-sm">
+        <p className="mb-8 text-sm text-mineshaft-200">
           Shared secret value for <strong>{secretRequestName}</strong>
         </p>
       )}
 
-      <div className="bg-mineshaft-700 mb-8 flex items-center justify-between rounded-md p-2 text-base text-gray-400">
+      <div className="mb-8 flex items-center justify-between rounded-md bg-mineshaft-700 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 c80be2906..d4f2f0a1f 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Shared Secrets</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 bb14227a4..ae1aa3772 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="bg-bunker-800 flex w-full justify-center text-white">
+        <div className="flex w-full justify-center bg-bunker-800 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 50ac95d8a..034c7d8fe 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="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-4">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Secret Share Limits</p>
       </div>
-      <p className="mb-4 mt-2 text-sm text-gray-400">
+      <p className="mt-2 mb-4 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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                          className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                         >
                           <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 380560055..1ea62c187 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="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-6">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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 3343efd1b..263672313 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="bg-bunker-800 flex w-full justify-center text-white">
+      <div className="flex w-full justify-center bg-bunker-800 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 e03838888..f5499e55a 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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 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 bfd5bbab5..f4f7932a4 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex justify-between">
-          <p className="text-mineshaft-100 text-xl font-medium">Audit Log Streams</p>
+          <p className="text-xl font-medium text-mineshaft-100">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 0989791a2..1d5cbc4f0 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="border-mineshaft-500 mb-4 flex w-full items-center gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-center gap-2 border-b border-mineshaft-500 pb-4">
       <div className="relative">
         {providerDetails.image ? (
           <img
             alt={providerDetails.name}
             src={`/images/integrations/${providerDetails.image}`}
-            className="bg-bunker-500 size-12 rounded-md p-2"
+            className="size-12 rounded-md bg-bunker-500 p-2"
           />
         ) : (
           providerDetails.icon && (
-            <div className="bg-bunker-500 size-12 rounded-md p-2">
+            <div className="size-12 rounded-md bg-bunker-500 p-2">
               <FontAwesomeIcon
                 icon={providerDetails.icon}
-                className="text-mineshaft-300 h-full w-full"
+                className="h-full w-full text-mineshaft-300"
               />
             </div>
           )
         )}
       </div>
       <div>
-        <div className="text-mineshaft-300 mb-1 flex items-center">
+        <div className="mb-1 flex items-center text-mineshaft-300">
           {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="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" />
+            <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" />
               <span>Docs</span>
               <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-px ml-1 text-[10px]" />
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
+          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
           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 bd9c4f780..258730731 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("hover:bg-mineshaft-700 group h-12 transition-colors duration-100")}
+      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
       key={`log-stream-${id}`}
     >
       <Td>
@@ -48,7 +48,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
               providerDetails.icon && (
                 <FontAwesomeIcon
                   icon={providerDetails.icon}
-                  className="text-mineshaft-300 size-5"
+                  className="size-5 text-mineshaft-300"
                 />
               )
             )}
@@ -56,7 +56,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
           <span className="hidden lg:inline">{providerDetails.name}</span>
         </div>
       </Td>
-      <Td className="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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 11afacf2a..ee47f8c0f 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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="text-mineshaft-300 size-4"
+                            className="size-4 text-mineshaft-300"
                           />
                         )
                       )}
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 2728d5d27..c8b206cc4 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 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={`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`}
+              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`}
             >
               {image && (
                 <div className="relative">
@@ -90,7 +90,7 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
                 </div>
               )}
               {icon && (
-                <FontAwesomeIcon className="text-mineshaft-300 mt-auto size-10" icon={icon} />
+                <FontAwesomeIcon className="mt-auto size-10 text-mineshaft-300" 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 89154064f..4857e8fe3 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
-          <p className="text-mineshaft-100 text-xl font-medium">Import from external source</p>
+          <p className="text-xl font-medium text-mineshaft-100">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="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">
+              <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">
                 <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 7b51dccc9..c564572a4 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(
-            "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",
+            "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",
             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 273c22148..c7c22e0a7 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="text-mineshaft-300 mb-4 text-sm">
+              <div className="mb-4 text-sm text-mineshaft-300">
                 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="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"
+                    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"
                     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="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
+                    <div className="text-center text-sm whitespace-pre-wrap">{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 b023975d0..d793a1e1e 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="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                           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(
-                      "border-mineshaft-600 flex w-full cursor-pointer flex-col items-center gap-2 rounded-sm border p-4 opacity-75 transition-all",
+                      "flex w-full cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 p-4 opacity-75 transition-all",
                       field.value === el.value
-                        ? "border-primary-700 bg-mineshaft-700 border-opacity-70 opacity-100"
+                        ? "border-opacity-70 border-primary-700 bg-mineshaft-700 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 f41660756..148b9f443 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="text-mineshaft-100 mb-2 text-xl font-medium">KMIP configuration</div>
+        <div className="mb-2 text-xl font-medium text-mineshaft-100">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="text-mineshaft-400 mt-2 max-w-lg text-sm">
+              <div className="mt-2 max-w-lg text-sm text-mineshaft-400">
                 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="text-mineshaft-400 mt-2 max-w-lg text-sm">
+              <div className="mt-2 max-w-lg text-sm text-mineshaft-400">
                 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 48b93cb24..e78ad61b9 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 text-mineshaft-100 mb-4">Danger Zone</p>
+        <p className="text-md mb-4 text-mineshaft-100">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 a1b7ff4c7..6068b13e7 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="text-mineshaft-300 mb-4">Select a KMS Provider</div>
+              <div className="mb-4 text-mineshaft-300">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="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"
+                    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"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -79,7 +79,7 @@ export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
                     }}
                   >
                     <FontAwesomeIcon icon={icon} size="lg" />
-                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                    <div className="text-center text-sm whitespace-pre-wrap">{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 62272f6cf..ef47f3195 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="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
             >
               {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 a39484bc9..d080b57c6 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="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
               <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 c22a0969b..07711d306 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-mineshaft-300 text-xs">
+        <span className="text-xs text-mineshaft-300">
           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 034ca8fd7..c2031381a 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex justify-between">
-          <p className="text-mineshaft-100 text-xl font-medium">Key Management System (KMS)</p>
+          <p className="text-xl font-medium text-mineshaft-100">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 ee1b02900..bdab03d29 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-6">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 e8b7d5c3a..9b6323c2e 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="h-101 flex w-full items-center justify-center">
+      <div className="flex h-101 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 text-mineshaft-100 mb-2">Organization Name</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -105,13 +105,13 @@ export const OrgNameChangeSection = (): JSX.Element => {
         />
       </div>
       <div>
-        <h2 className="text-md text-mineshaft-100 mb-2">Organization ID</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization ID</h2>
         <FormControl className="max-w-md">
           <Input isDisabled value={currentOrg.id} />
         </FormControl>
       </div>
       <div>
-        <h2 className="text-md text-mineshaft-100 mb-2">Organization Slug</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">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 text-mineshaft-100 mb-2">Default Organization Member Role</h2>
+          <h2 className="text-md mb-2 text-mineshaft-100">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 53f60eb12..61ee0c6e9 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="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>
+    <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>
       <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 5e9c52717..8e181e8c4 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-mineshaft-300 text-sm">
+      <p className="text-sm text-mineshaft-300">
         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-mineshaft-400 text-xs"
+                      className="text-xs text-mineshaft-400"
                       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-mineshaft-400 text-xs">
+                    <span className="text-xs text-mineshaft-400">
                       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 bb04d53af..77acb4f7c 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="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-6">
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           {isPending ? <Skeleton /> : null}
           {data ? data?.githubOrgName : "Not configured"}
         </p>
@@ -149,7 +149,7 @@ export const OrgGithubSyncSection = () => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             Allow group provisioning/deprovisioning with GitHub
           </p>
         </div>
@@ -175,7 +175,7 @@ export const OrgGithubSyncSection = () => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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 97faf471d..c8e6fbc3e 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-6">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-300 text-sm">Manage SCIM configuration</p>
+        <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
       </div>
       <ExternalGroupOrgRoleMappings />
       <div className="py-4">
@@ -99,7 +99,7 @@ export const OrgScimSection = () => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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 0953a5bf4..c542a88bb 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 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">
+            <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">
               {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 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">
+                <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">
                   {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 a91c676d6..7e2bd522b 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="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-6">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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="border-mineshaft-500 min-w-[20rem] border"
+              className="min-w-[20rem] border border-mineshaft-500"
               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 be852017f..6e9865532 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="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg border p-4">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Session Length</p>
       </div>
-      <p className="mb-4 mt-2 text-sm text-gray-400">
+      <p className="mt-2 mb-4 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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                          className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                         >
                           <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 28e4819e5..527239898 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-6">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <div>
         <p className="text-xl font-medium text-gray-200">SSO Enforcement</p>
-        <p className="mb-2 mt-1 text-gray-400">
+        <p className="mt-1 mb-2 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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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="hover:text-mineshaft-300 underline underline-offset-2"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
                         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="hover:text-mineshaft-300 underline underline-offset-2"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
                         href={`${window.location.origin}/login/admin`}
                       >
                         {window.location.origin}/login/admin
@@ -286,7 +286,7 @@ export const OrgGeneralAuthSection = ({
                 <FontAwesomeIcon
                   icon={faInfoCircle}
                   size="sm"
-                  className="text-mineshaft-400 mt-0.5 inline-block"
+                  className="mt-0.5 inline-block text-mineshaft-400"
                 />
               </Tooltip>
             </div>
@@ -301,7 +301,7 @@ export const OrgGeneralAuthSection = ({
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             <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 d53af61dc..817797eff 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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             Allow members to authenticate into Infisical with LDAP
           </p>
         </div>
@@ -167,7 +167,7 @@ export const OrgLDAPSection = (): JSX.Element => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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 8f7946d33..7e4b2b3ef 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="border-mineshaft-600 bg-mineshaft-900 mb-4 rounded-lg">
+    <div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
       <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-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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 text-mineshaft-100 flex items-center">
+          <div className="text-md flex items-center text-mineshaft-100">
             <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="hover:text-mineshaft-300 underline underline-offset-2"
+                    className="underline underline-offset-2 hover:text-mineshaft-300"
                     href="https://infisical.com/docs/documentation/platform/sso/overview"
                   >
                     See your OIDC provider docs for details.
                   </a>
-                  <p className="text-yellow mt-4">
+                  <p className="mt-4 text-yellow">
                     <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="text-mineshaft-400 ml-1 mt-0.5 inline-block"
+                className="mt-0.5 ml-1 inline-block text-mineshaft-400"
               />
             </Tooltip>
           </div>
@@ -195,7 +195,7 @@ export const OrgOIDCSection = (): JSX.Element => {
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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 9afae7cdc..ecaa06e05 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-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           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 text-mineshaft-100 flex items-center">
+            <div className="text-md flex items-center text-mineshaft-100">
               <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="hover:text-mineshaft-300 underline underline-offset-2"
+                      className="underline underline-offset-2 hover:text-mineshaft-300"
                       href="https://infisical.com/docs/documentation/platform/sso/overview"
                     >
                       See your SAML provider docs for details.
                     </a>
-                    <p className="text-yellow mt-4">
+                    <p className="mt-4 text-yellow">
                       <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="text-mineshaft-400 ml-1 mt-0.5 inline-block"
+                  className="mt-0.5 ml-1 inline-block text-mineshaft-400"
                 />
               </Tooltip>
             </div>
@@ -221,7 +221,7 @@ export const OrgSSOSection = (): JSX.Element => {
               )}
             </OrgPermissionCan>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             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 1872305a4..5c4076159 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="border-mineshaft-600 bg-mineshaft-900 mb-4 space-y-6 rounded-lg border p-6">
+          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
             <div>
               <p className="text-xl font-medium text-gray-200">Connect an Identity Provider</p>
-              <p className="mb-2 mt-1 text-gray-400">
+              <p className="mt-1 mb-2 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-mineshaft-500 border-b pb-4"
+                    "border-b border-mineshaft-500 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-mineshaft-500 border-b pb-4"
+                  shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
                 )}
               >
                 <p className="text-lg text-gray-200">OIDC</p>
@@ -166,7 +166,7 @@ export const OrgSsoTab = withPermission(
           />
         </>
       ) : (
-        <EmptyState title="" iconSize="2x" className="pb-10! pt-14">
+        <EmptyState title="" iconSize="2x" className="pt-14 pb-10!">
           <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="border-mineshaft-600 bg-mineshaft-900 mb-4 space-y-6 rounded-lg border p-6">
+            <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 6106749c5..df5fca59f 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-mineshaft-400 text-sm">
+                  <h3 className="text-sm text-mineshaft-400">
                     {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-mineshaft-400 text-sm">
+                  <h3 className="text-sm text-mineshaft-400">
                     {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 40e846321..8ad40ae4b 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="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
       <img
         alt={`${providerDetails.label} logo`}
         src={`/images/sso/${providerDetails.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -42,7 +42,7 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {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 ddad6004e..15acf5c97 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="text-mineshaft-300 mb-4">Select a platform</div>
+              <div className="mb-4 text-mineshaft-300">Select a platform</div>
               <div className="flex items-center space-x-4">
                 {PLATFORM_LIST.map(({ icon, platform, title }) => (
                   <div
                     key={platform}
-                    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"
+                    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"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -78,7 +78,7 @@ export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
                     }}
                   >
                     <div>{icon}</div>
-                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                    <div className="text-center text-sm whitespace-pre-wrap">{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 891e46528..09e5d6583 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="text-mineshaft-200 mb-4 text-xs">
+      <div className="mb-4 text-xs text-mineshaft-200">
         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 a178cef9e..bfdd27c02 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex justify-between">
-          <p className="text-mineshaft-100 text-xl font-medium">Workflow Integrations</p>
+          <p className="text-xl font-medium text-mineshaft-100">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="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
+                        <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
                           <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 49b9379a2..7a99af1d6 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="border-bunker-400 mb-4 flex items-start justify-between border-b pb-4">
+      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
         <div className="flex-col">
           <h3 className="text-xl font-medium">{name}</h3>
-          <h2 className="text-mineshaft-400 text-sm">
+          <h2 className="text-sm text-mineshaft-400">
             {`${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 351659111..09a2a69af 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
       <FormProvider {...formMethods}>
-        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-mineshaft-200 text-base font-medium"
+            className="text-base font-medium text-mineshaft-200"
             variant="link"
             onClick={onGoBack}
           >
@@ -103,7 +103,7 @@ export const ProjectTemplateEditRoleForm = ({
             <div className="flex items-center space-x-4">
               {isDirty && (
                 <Button
-                  className="text-mineshaft-300 mr-4"
+                  className="mr-4 text-mineshaft-300"
                   variant="link"
                   isDisabled={isSubmitting}
                   isLoading={isSubmitting}
@@ -117,7 +117,7 @@ export const ProjectTemplateEditRoleForm = ({
                   variant="outline_bg"
                   type="submit"
                   className={twMerge(
-                    "border-primary mr-4 h-10 border",
+                    "mr-4 h-10 border border-primary",
                     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 c7bacfe4e..ec1899369 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <div className="border-mineshaft-400 mb-4 flex items-center justify-between border-b pb-4">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <div>
           <h2 className="text-lg font-medium">Project Environments</h2>
           {!isInfisicalTemplate && (
-            <p className="text-mineshaft-400 text-sm">
+            <p className="text-sm text-mineshaft-400">
               Add, rename, remove and reorder environments for this project template
             </p>
           )}
@@ -130,7 +130,7 @@ export const ProjectTemplateEnvironmentsForm = ({
         )}
       </div>
       {errors.environments && (
-        <span className="text-red my-4 text-sm">{errors.environments.message}</span>
+        <span className="my-4 text-sm text-red">{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 6f32295d1..85580da07 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="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 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>
                   <h2 className="text-lg font-medium">Project Roles</h2>
-                  <p className="text-mineshaft-400 text-sm">
+                  <p className="text-sm text-mineshaft-400">
                     {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="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
+                              className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                               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 d15df14e8..6010d61f1 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(
-                    "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",
+                    "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",
                     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 min-w-full max-w-full"
+          className="max-h-80 min-h-40 max-w-full min-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 22ce84266..c542410bd 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="font-inter text-bunker-300 mb-6">
+              <p className="mb-6 font-inter text-bunker-300">
                 Create and configure templates with predefined roles and environments to streamline
                 project setup
               </p>
-              <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
                 <div className="mb-4 flex items-start">
-                  <p className="text-mineshaft-100 text-xl font-medium">Project Templates</p>
+                  <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
                     href="https://infisical.com/docs/documentation/platform/project-templates"
                   >
-                    <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">
+                    <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">
                       <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 d7f4d233f..60cfac678 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="hover:bg-mineshaft-700 cursor-pointer"
+                  className="cursor-pointer hover:bg-mineshaft-700"
                   key={id}
                 >
                   <Td>
@@ -94,7 +94,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                       <Tooltip content={description}>
                         <FontAwesomeIcon
                           size="sm"
-                          className="text-mineshaft-400 ml-2"
+                          className="ml-2 text-mineshaft-400"
                           icon={faCircleInfo}
                         />
                       </Tooltip>
@@ -115,7 +115,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                       >
                         <FontAwesomeIcon
                           size="sm"
-                          className="text-mineshaft-400 ml-2"
+                          className="ml-2 text-mineshaft-400"
                           icon={faCircleInfo}
                         />
                       </Tooltip>
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
index 3091dfeeb..03a720b98 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 9687d3fb8..680795e2e 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="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>
+    <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>
         {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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">
             {membership.user.firstName || membership.user.lastName
               ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
               : "-"}
           </p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Username</p>
+          <p className="text-sm font-medium text-mineshaft-300">Username</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 break-all text-sm">{membership.user.username}</p>
+            <p className="text-sm break-all text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Email</p>
+          <p className="text-sm font-medium text-mineshaft-300">Email</p>
           <div className="flex items-center">
-            <p className="text-mineshaft-300 mr-2 break-all text-sm">
+            <p className="mr-2 text-sm break-all text-mineshaft-300">
               {membership.user.email ?? "-"}{" "}
               <Tooltip
                 content={
@@ -163,45 +163,45 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Last Login Auth Method</p>
+          <p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 break-all text-sm">
+            <p className="text-sm break-all text-mineshaft-300">
               {membership.lastLoginAuthMethod || "-"}
             </p>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Last Login Time</p>
+          <p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 break-all text-sm">
+            <p className="text-sm break-all text-mineshaft-300">
               {membership.lastLoginTime ? format(membership.lastLoginTime, "PPpp") : "-"}
             </p>
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
-          <p className="text-mineshaft-300 text-sm">{roleName ?? "-"}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{roleName ?? "-"}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
-          <p className="text-mineshaft-300 text-sm">{getStatus(membership)}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{getStatus(membership)}</p>
         </div>
         <div>
-          <p className="text-mineshaft-300 text-sm font-medium">Metadata</p>
+          <p className="text-sm font-medium text-mineshaft-300">Metadata</p>
           {membership?.metadata?.length ? (
-            <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
+            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
               {membership.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
                     size="xs"
-                    className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
+                    className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
                   >
                     <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                     <div>{el.key}</div>
                   </Tag>
                   <Tag
                     size="xs"
-                    className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
+                    className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 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-mineshaft-300 text-sm">-</p>
+            <p className="text-sm text-mineshaft-300">-</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 8fb73a90c..29b199a0b 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-mineshaft-400 text-xs">Key</span>}
+                  {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs" isOptional />
+                    <FormLabel label="Value" className="text-xs text-mineshaft-400" 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 5e5625d1c..d6729f72b 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="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">
+        <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">
             <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 be3777faf..5543ac167 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="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         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 bcdc4d0b8..8e7cf3ce8 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="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 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>
 
         <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 823a4652b..a7a88a72c 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="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
       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 d3e2cd650..843b5a63c 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="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>
+    <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>
         {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 fe2d7461b..179d267c4 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="bg-bunker-800 h-full">
-          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 cee8ec515..92b2f7859 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="border-mineshaft-600 bg-mineshaft-800 flex gap-0.5 rounded-md border p-1">
+    <div className="flex gap-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 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"
-        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
         Hide Folders
       </Button>
@@ -33,7 +33,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
         size="xs"
         className={`${
           value === AccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
-        } hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
         Show Folders
       </Button>
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
index 661bd9a9e..9049001e6 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="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"
+          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"
           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 efb7fe835..0b84deb38 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="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
       <img
         alt={`${details.name} logo`}
         src={`/images/integrations/${details.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">{resourceName}</div>
-        <p className="text-mineshaft-400 text-sm leading-4">{details.name} resource</p>
+        <div className="flex items-center text-mineshaft-300">{resourceName}</div>
+        <p className="text-sm leading-4 text-mineshaft-400">{details.name} resource</p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
+          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
           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 40a1b1740..3d2f3227d 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="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+            <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
               <FontAwesomeIcon icon={faBoxOpen} />
               <span>
                 <HighlightText text={account.resource.name} highlight={search} />
               </span>
             </Badge>
             {isFlatView && accountPath && (
-              <Badge className="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
                 <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 50d3358c3..7cdf93dc8 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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="bg-mineshaft-600 rounded-l-none p-3"
+                      className="rounded-l-none bg-mineshaft-600 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 e1309d88f..376210066 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="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+      className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
       onClick={onClick}
     >
       <Td>
@@ -48,7 +48,7 @@ export const PamFolderRow = ({ folder, onClick, onDelete, onUpdate, search }: Pr
                 <IconButton
                   ariaLabel="Options"
                   colorSchema="secondary"
-                  className="data-[state=open]:flex! hidden w-6 group-hover:flex"
+                  className="hidden w-6 group-hover:flex data-[state=open]: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 be753b8d7..06c04e019 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="text-mineshaft-400 flex items-center gap-x-1">
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
             <FontAwesomeIcon icon={faPlus} size="sm" />
             <span className="mr-auto">Create New Resource</span>
           </div>
         ) : (
           <>
             <p className="truncate">{children}</p>
-            <div className="ml-2 mr-auto">
-              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 items-center gap-1 whitespace-nowrap">
+            <div className="mr-auto ml-2">
+              <Badge className="flex h-5 items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <img
                   alt={`${name} logo`}
                   src={`/images/integrations/${image}`}
@@ -37,7 +37,7 @@ export const PamResourceOption = ({
               </Badge>
             </div>
             {isSelected && (
-              <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+              <FontAwesomeIcon className="ml-2 text-primary" 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 e381d2903..6c6bcfba6 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
diff --git a/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx b/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
index 0be30e40b..e8238d8a9 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="bg-bunker-800 h-full">
-          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 0a518184a..5b6eb7256 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="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               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 ff8217eb9..888b62984 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 border-mineshaft-600 mb-6 w-full border-b-2">
+      <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
         <Tab
           className={({ selected }) =>
-            `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"
+            `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
+              selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
             }`
           }
         >
@@ -29,15 +29,15 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
         </Tab>
         <Tab
           className={({ selected }) =>
-            `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"
+            `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
+              selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
             }`
           }
         >
           SSL ({sslEnabled ? "Enabled" : "Disabled"})
         </Tab>
       </Tab.List>
-      <Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
+      <Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 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 data-[state=checked]:bg-green/80 shadow-inner"
+                  className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                   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="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
+                <TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
               </FormControl>
             )}
           />
@@ -127,7 +127,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
                 errorText={error?.message}
               >
                 <Switch
-                  className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
+                  className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                   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 04be2bcd1..4b4fd34c4 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="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
       <img
         alt={`${details.name} logo`}
         src={`/images/integrations/${details.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">{details.name}</div>
-        <p className="text-mineshaft-400 text-sm leading-4">Resource</p>
+        <div className="flex items-center text-mineshaft-300">{details.name}</div>
+        <p className="text-sm leading-4 text-mineshaft-400">Resource</p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
+          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
           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 1bb7ff1dc..aba64cc6a 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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+          <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
             <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 2364eeb27..2f46a8aca 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 b08eba9a6..fe95a98aa 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="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">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="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 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="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"
+              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"
             >
               <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="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -151,7 +151,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -162,7 +162,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <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 bdeffd0a5..b82c6b6e7 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 f0a9081f2..c527c2716 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="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 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>
-      <div className="text-mineshaft-300 pt-4 text-sm">
+      <div className="pt-4 text-sm text-mineshaft-300">
         <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="bg-yellow/20 text-yellow flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+            <Badge className="flex h-5 w-min items-center gap-1.5 bg-yellow/20 whitespace-nowrap text-yellow">
               <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 ed8af7d7d..5f06a64e2 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="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 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>
       <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={`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 ${
+                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 ${
                   isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
                 }`}
                 onClick={() => toggleExpand(log.timestamp)}
               >
-                <div className="text-bunker-400 flex items-center justify-between">
-                  <div className="flex select-none items-center gap-2">
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex items-center gap-2 select-none">
                     <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 ? "whitespace-pre-wrap break-all" : "truncate"
+                    isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
                   }`}
                 >
                   {log.input}
                 </div>
 
                 {isExpanded && log.output && (
-                  <div className="border-mineshaft-700 text-bunker-300 mt-2 whitespace-pre-wrap break-all border-t pt-2 font-mono">
+                  <div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
                     {log.output}
                   </div>
                 )}
@@ -68,11 +68,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
             );
           })
         ) : (
-          <div className="text-bunker-300 flex w-full grow items-center justify-center">
+          <div className="flex w-full grow items-center justify-center text-bunker-300">
             {session.startedAt && session.endedAt ? (
               <div className="text-center">
                 <div className="mb-2">Session logs are not yet available</div>
-                <div className="text-bunker-400 text-xs">
+                <div className="text-xs text-bunker-400">
                   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 6d70e6d31..03ca60a3b 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="bg-bunker-800 h-full">
-          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 466f6da93..f730e331d 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("hover:bg-bunker-400/20 group h-10 cursor-pointer")}
+        className={twMerge("group h-10 cursor-pointer hover:bg-bunker-400/20")}
         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="text-bunker-300 flex items-center gap-1 text-xs">
+                <div className="flex items-center gap-1 text-xs text-bunker-300">
                   <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-bunker-300 text-xs">
+            <span className="text-xs text-bunker-300">
               <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-bunker-300 text-xs">
+            <span className="text-xs text-bunker-300">
               {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-bunker-300 text-xs">
+              <span className="text-xs text-bunker-300">
                 {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="text-bunker-400 flex items-center gap-1.5">
+                <div className="flex items-center gap-1.5 text-bunker-400">
                   <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="text-bunker-300 font-mono">
+                <div className="font-mono text-bunker-300">
                   <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="text-mineshaft-300 hover:text-primary p-0"
+                  className="p-0 text-mineshaft-300 hover:text-primary"
                 >
                   {showAllLogs
                     ? "Show less"
diff --git a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
index 7cea9a2de..2f4f9f7ef 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 7f8a4722e..81a0a1d07 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 c57e09757..9da8770d2 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 fc147deab..188c2ba7d 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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
             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="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+      <div className="max-h-80 thin-scrollbar 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="bg-mineshaft-800 border border-gray-700 p-4">
+          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 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 fdb3481ab..b2a2b7cf3 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">User Groups</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 d8765b717..3ce5b4062 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="hover:bg-mineshaft-700 group h-10 w-full cursor-pointer transition-colors duration-100"
+                      className="group h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       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 1e35f258c..652b7047d 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Identities</p>
+              <p className="text-xl font-medium text-mineshaft-100">Identities</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/identities/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -252,7 +252,7 @@ export const IdentityTab = withProjectPermission(
                     } = identityMember;
                     return (
                       <Tr
-                        className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+                        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                         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="bg-mineshaft-800 border border-gray-700 p-4">
+                                <HoverCardContent className="border border-gray-700 bg-mineshaft-800 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 3a6a832d7..291a5b58b 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-mineshaft-400 text-sm">Select one of the pre-defined or custom roles.</p>
+      <p className="text-sm text-mineshaft-400">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="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
+                        className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
                       >
                         {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(
-                              "bg-mineshaft-600 hover:bg-mineshaft-500 border-none py-2.5 text-xs capitalize",
+                              "border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
                               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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+                        <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
                           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-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
+                    className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
                     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 374c555de..187e1813a 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="border-primary/50 bg-primary/10 mt-4"
+        className="mt-4 border-primary/50 bg-primary/10"
       >
         <AlertDescription>
           <Link
@@ -28,7 +28,7 @@ export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) =>
               membershipId: projectMember.id
             }}
           >
-            <span className="text-primary cursor-pointer underline underline-offset-2">
+            <span className="cursor-pointer text-primary 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 3a6f5182b..33c0d1077 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="bg-mineshaft-900 hover:bg-mineshaft-800 w-full"
+                  className="w-full bg-mineshaft-900 hover:bg-mineshaft-800"
                   onValueChange={(e) => onChange(e)}
                   position="popper"
                   dropdownContainerClassName="max-w-none"
@@ -331,7 +331,7 @@ export const SpecificPrivilegeSecretForm = ({
                         <Select
                           {...field}
                           isDisabled={isMemberEditDisabled || !selectablePaths.length}
-                          className="hover:bg-mineshaft-800 w-full"
+                          className="w-full hover:bg-mineshaft-800"
                           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={`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" : ""}`}
+                      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" : ""}`}
                       htmlFor="secret-read"
                     >
                       <Checkbox
@@ -378,7 +378,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
+                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faEye}
@@ -386,10 +386,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="View"
-                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-mineshaft-400 text-xs">Read secret values</p>
+                        <p className="text-xs text-mineshaft-400">Read secret values</p>
                       </div>
                     </label>
                   )}
@@ -399,7 +399,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="create"
                   render={({ field }) => (
                     <label
-                      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" : ""}`}
+                      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" : ""}`}
                       htmlFor="secret-change"
                     >
                       <Checkbox
@@ -409,7 +409,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
+                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faPlus}
@@ -417,10 +417,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Create"
-                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-mineshaft-400 text-xs">Create new secrets</p>
+                        <p className="text-xs text-mineshaft-400">Create new secrets</p>
                       </div>
                     </label>
                   )}
@@ -432,7 +432,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="edit"
                   render={({ field }) => (
                     <label
-                      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" : ""}`}
+                      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" : ""}`}
                       htmlFor="secret-modify"
                     >
                       <Checkbox
@@ -442,7 +442,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
+                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faPencil}
@@ -450,10 +450,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Modify"
-                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-mineshaft-400 text-xs">Update existing secrets</p>
+                        <p className="text-xs text-mineshaft-400">Update existing secrets</p>
                       </div>
                     </label>
                   )}
@@ -463,7 +463,7 @@ export const SpecificPrivilegeSecretForm = ({
                   name="delete"
                   render={({ field }) => (
                     <label
-                      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" : ""}`}
+                      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" : ""}`}
                       htmlFor="secret-delete"
                     >
                       <Checkbox
@@ -473,7 +473,7 @@ export const SpecificPrivilegeSecretForm = ({
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="text-mineshaft-300 pointer-events-none ml-1 flex select-none flex-col">
+                      <div className="pointer-events-none ml-1 flex flex-col text-mineshaft-300 select-none">
                         <div className="flex flex-row items-center gap-1">
                           <FontAwesomeIcon
                             icon={faTrashCan}
@@ -481,10 +481,10 @@ export const SpecificPrivilegeSecretForm = ({
                           />
                           <FormLabel
                             label="Delete"
-                            className={`text-mineshaft-300 my-0 ml-0.5 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                           />
                         </div>
-                        <p className="text-mineshaft-400 text-xs">Delete existing secrets</p>
+                        <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
                       </div>
                     </label>
                   )}
@@ -504,7 +504,7 @@ export const SpecificPrivilegeSecretForm = ({
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-4" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                          "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",
+                          "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",
                           isExpired && "text-red-600"
                         )}
                       >
@@ -518,10 +518,10 @@ export const SpecificPrivilegeSecretForm = ({
                   side="right"
                   sideOffset={12}
                   hideCloseBtn
-                  className="border-mineshaft-600 bg-mineshaft-800 border pt-4"
+                  className="border border-mineshaft-600 bg-mineshaft-800 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="text-mineshaft-300 text-sm">Configure timed access</div>
+                    <div className="text-sm text-mineshaft-300">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-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-2.5"
+                      className="border border-mineshaft-500 bg-mineshaft-600 py-2.5 hover:border-red/70 hover:bg-red/20"
                       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-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
+                    className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
                     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 6a433f371..6c02ca5b3 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Users</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 5f6f29ade..e8cb43db9 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -209,8 +209,8 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               >
                 Roles
               </DropdownSubMenuTrigger>
-              <DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
-                <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                   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="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
+                    className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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="bg-mineshaft-800 border border-gray-700 p-4">
+                            <HoverCardContent className="border border-gray-700 bg-mineshaft-800 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 96ac4d9f3..0be78b427 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Project Roles</p>
+        <p className="text-xl font-medium text-mineshaft-100">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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                   onClick={() =>
                     navigate({
                       to: `${getProjectBaseURL(currentProject.type)}/roles/$roleSlug`,
@@ -261,7 +261,7 @@ export const ProjectRoleList = () => {
                   <Td>{name}</Td>
                   <Td>{slug}</Td>
                   <Td>
-                    <Badge className="bg-mineshaft-400/50 text-bunker-200 w-min whitespace-nowrap">
+                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
                       {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 7862e352f..873422f3c 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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+    <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">
       <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 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">
+        <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">
           {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 f3c6936b4..c8f90c27e 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-2 flex items-center justify-between">
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Service Tokens</p>
+              <p className="text-xl font-medium text-mineshaft-100">Service Tokens</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/token"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <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-bunker-300 text-sm">
+            <p className="text-sm text-bunker-300">
               {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 802d9edc1..2cc88aad4 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="border-mineshaft-500 inline-flex items-center space-x-1 rounded-md border p-1 px-2"
+                          className="inline-flex items-center space-x-1 rounded-md border border-mineshaft-500 p-1 px-2"
                         >
-                          <div className="border-mineshaft-500 mr-1 border-r pr-2">
+                          <div className="mr-1 border-r border-mineshaft-500 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 5126a2620..84fb69b83 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="bg-bunker-800 flex w-full justify-center text-white">
+        <div className="flex w-full justify-center bg-bunker-800 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 7d646106a..1e9b1ad54 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <Helmet>
         <title>Project Audit Logs</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
+      <div className="flex h-full w-full justify-center bg-bunker-800 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 453c52975..d6bda7ea1 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 78a800937..cca6cabfd 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">Group ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">Group ID</p>
           <div className="group flex items-center gap-2">
-            <p className="text-mineshaft-300 text-sm">{groupMembership.group.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{groupMembership.group.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{groupMembership.group.name}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Slug</p>
+          <p className="text-sm font-medium text-mineshaft-300">Slug</p>
           <div className="group flex items-center gap-2">
-            <p className="text-mineshaft-300 text-sm">{groupMembership.group.slug}</p>
+            <p className="text-sm text-mineshaft-300">{groupMembership.group.slug}</p>
             <CopyButton value={groupMembership.group.slug} name="Slug" size="xs" variant="plain" />
           </div>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Project Role</p>
+          <p className="text-sm font-medium text-mineshaft-300">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-mineshaft-300 text-sm font-medium">Assigned to Project</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Assigned to Project</p>
+          <p className="text-sm text-mineshaft-300">
             {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 cf6e9682b..4534e4371 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="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 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>
       <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 e57f099bc..993320e56 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="bg-bunker-800 container mx-auto flex max-w-7xl flex-col justify-between text-white">
+    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 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 f88076f69..a5d74271c 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
       <FormProvider {...form}>
-        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-mineshaft-100 text-lg font-medium"
+            className="text-lg font-medium text-mineshaft-100"
             variant="link"
             onClick={onGoBack}
           >
@@ -202,7 +202,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
           <div className="flex items-center space-x-4">
             {isDirty && (
               <Button
-                className="text-mineshaft-300 mr-4"
+                className="mr-4 text-mineshaft-300"
                 variant="link"
                 isDisabled={isSubmitting}
                 isLoading={isSubmitting}
@@ -216,7 +216,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
                 variant="outline_bg"
                 type="submit"
                 className={twMerge(
-                  "border-primary mr-4 h-10 border",
+                  "mr-4 h-10 border border-primary",
                   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="text-mineshaft-300 mb-4 text-sm">
+          <p className="mb-4 text-sm text-mineshaft-300">
             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(
-                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
+                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
                           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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
                       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 083e33172..f98f6ebf8 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="border-mineshaft-600 bg-mineshaft-900 absolute w-full rounded-lg border p-4"
+            className="absolute w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 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">
+            <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+              <h3 className="text-lg font-medium text-mineshaft-100">
                 Project Additional Privileges
               </h3>
 
@@ -174,7 +174,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
                         return (
                           <Tr
                             key={`user-project-privilege-${privilegeDetails?.id}`}
-                            className="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
+                            className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                             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 d21760782..34b5229d6 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="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>
+    <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>
         <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 08ae56561..a74428e98 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="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
+                    className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
                     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(
-                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
+                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
                           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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
                       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-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
+                className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
                 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 861adced2..23b8299da 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="bg-bunker-800 container mx-auto flex max-w-7xl flex-col justify-between text-white">
+    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 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 6203c30ef..7094c9ca8 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="border-mineshaft-600 bg-mineshaft-900 absolute w-full rounded-lg border p-4"
+            className="absolute w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 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">
+            <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+              <h3 className="text-lg font-medium text-mineshaft-100">
                 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="hover:bg-mineshaft-700 group w-full cursor-pointer transition-colors duration-100"
+                            className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                             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 392257a6e..1a217a509 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4"
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
       <FormProvider {...form}>
-        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-mineshaft-100 text-lg font-medium"
+            className="text-lg font-medium text-mineshaft-100"
             variant="link"
             onClick={onGoBack}
           >
@@ -198,7 +198,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
           <div className="flex items-center space-x-4">
             {isDirty && (
               <Button
-                className="text-mineshaft-300 mr-4"
+                className="mr-4 text-mineshaft-300"
                 variant="link"
                 isDisabled={isSubmitting}
                 isLoading={isSubmitting}
@@ -212,7 +212,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
                 variant="outline_bg"
                 type="submit"
                 className={twMerge(
-                  "border-primary mr-4 h-10 border",
+                  "mr-4 h-10 border border-primary",
                   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="text-mineshaft-300 mb-4 text-sm">
+          <p className="mb-4 text-sm text-mineshaft-300">
             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(
-                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
+                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
                           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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
                       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 67899a99b..703511c84 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="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>
+    <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>
         {!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 6711a8a54..f18131b93 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="bg-mineshaft-600 hover:bg-mineshaft-500 w-full duration-200"
+                    className="w-full bg-mineshaft-600 duration-200 hover:bg-mineshaft-500"
                     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(
-                          "bg-mineshaft-600 hover:bg-mineshaft-500 w-full border-none py-2.5 text-xs capitalize",
+                          "w-full border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
                           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="text-mineshaft-300 border-b border-b-gray-700 pb-2 text-sm">
+                    <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
                       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-mineshaft-500 bg-mineshaft-600 hover:border-red/70 hover:bg-red/20 border py-3"
+                className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
                 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 2a08ccc4a..d8c95907d 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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-mineshaft-400 text-sm font-normal normal-case leading-3">
+                  <p className="text-sm leading-3 font-normal text-mineshaft-400 normal-case">
                     {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 86c0d972b..37f6b3868 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="bg-mineshaft-600 rounded-l-none p-3"
+            className="rounded-l-none bg-mineshaft-600 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 c1ee65f5a..80fc46e7f 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="border-t-mineshaft-600 bg-mineshaft-800 mt-6 border-t pt-2">
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 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="text-mineshaft-400 ml-1" icon={faInfoCircle} />
+            <FontAwesomeIcon size="xs" className="ml-1 text-mineshaft-400" icon={faInfoCircle} />
           </Tooltip>
         </div>
         <Button
@@ -99,7 +99,7 @@ export const ConditionsFields = ({
             return (
               <div
                 key={el.id}
-                className="bg-mineshaft-800 flex items-start gap-2 first:rounded-t-md last:rounded-b-md"
+                className="flex items-start gap-2 bg-mineshaft-800 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 959f33e55..d36562089 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="text-mineshaft-400 mt-4 text-sm">Loading Role...</p>
+            <p className="mt-4 text-sm text-mineshaft-400">Loading Role...</p>
           </div>
         ) : role ? (
           <Content role={role!} onClose={() => onOpenChange(false)} />
         ) : (
-          <p className="text-red w-full text-center">
+          <p className="w-full text-center text-red">
             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 d1206ddc4..61ae9891e 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="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 overflow-clip border first:rounded-t-md last:rounded-b-md">
+    <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="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 select-none text-base">{title}</div>
+        <div className="grow text-base select-none">{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="bg-bunker-700 flex flex-col space-y-3 p-3">
+        <div key={`select-${subject}-type`} className="flex flex-col space-y-3 bg-bunker-700 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(
-                  "bg-mineshaft-800 relative rounded-md border-l-[6px] px-5 py-4 transition-colors duration-300",
+                  "relative rounded-md border-l-[6px] bg-mineshaft-800 px-5 py-4 transition-colors duration-300",
                   isInverted ? "border-l-red-600/50" : "border-l-green-600/50",
-                  dragOverItem === rootIndex ? "border-primary/50 border-2" : "",
+                  dragOverItem === rootIndex ? "border-2 border-primary/50" : "",
                   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="text-bunker-400 ml-2"
+                          className="ml-2 text-bunker-400"
                         />
                       </Tooltip>
                       {!isDisabled && (
@@ -247,7 +247,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                             colorSchema="danger"
                             variant="plain"
                             size="xs"
-                            className="ml-auto mr-3 rounded-sm"
+                            className="mr-3 ml-auto 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="text-bunker-300 hover:text-bunker-200 cursor-move"
+                            className="cursor-move text-bunker-300 hover:text-bunker-200"
                           >
                             <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 8b6705f89..63853ad51 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="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">
+      <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">
           <span>Resource</span>
           <div className="flex gap-2">
             <Button
               variant="plain"
-              className="text-mineshaft-400 p-0"
+              className="p-0 text-mineshaft-400"
               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" : ""} hover:bg-mineshaft-700 cursor-pointer`}
+                    className={`${value ? "bg-mineshaft-600/30" : ""} cursor-pointer hover:bg-mineshaft-700`}
                     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 695588ca6..4af730947 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="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"
+            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"
           >
-            <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">
+            <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">
               <div className="mr-auto flex flex-col py-2 text-left">
                 <span>{name}</span>
-                <span className="text-mineshaft-400 text-sm leading-3">{description}</span>
+                <span className="text-sm leading-3 text-mineshaft-400">{description}</span>
               </div>
             </AccordionTrigger>
-            <AccordionContent className="border-mineshaft-600 border-t">
-              <div className="thin-scrollbar max-h-80 overflow-y-auto">
+            <AccordionContent className="border-t border-mineshaft-600">
+              <div className="max-h-80 thin-scrollbar 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 b2bb3f471..fd95d2659 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="border-mineshaft-600 bg-mineshaft-900 flex h-full w-full flex-1 flex-col rounded-lg border py-4"
+        className="flex h-full w-full flex-1 flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 py-4"
       >
         <FormProvider {...form}>
-          <div className="border-mineshaft-400 mx-4 flex items-center justify-between border-b pb-4">
+          <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
             <div>
-              <h3 className="text-mineshaft-100 text-lg font-medium">Policies</h3>
-              <p className="text-mineshaft-400 text-sm leading-3">
+              <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>
             </div>
@@ -173,7 +173,7 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
               <div className="flex items-center gap-2">
                 {isDirty && (
                   <Button
-                    className="text-mineshaft-300 mr-4"
+                    className="mr-4 text-mineshaft-300"
                     variant="link"
                     isDisabled={isSubmitting}
                     isLoading={isSubmitting}
@@ -192,13 +192,13 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                 >
                   Save
                 </Button>
-                <div className="border-mineshaft-500 ml-2 border-l pl-4">
+                <div className="ml-2 border-l border-mineshaft-500 pl-4">
                   <AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
                 </div>
               </div>
             )}
           </div>
-          <div className="flex flex-1 flex-col overflow-hidden pl-4 pr-1">
+          <div className="flex flex-1 flex-col overflow-hidden pr-1 pl-4">
             <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 7316ac49d..eb5c98e6b 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex w-full items-center justify-between">
           <p className="text-xl font-medium">Audit Logs Retention</p>
         </div>
-        <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+        <p className="mt-2 mb-4 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 e3b90b1da..760c4b852 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 d0f614efa..fb66f0a74 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="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="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="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 998db175d..1feeeb32a 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="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">
+    <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">
         <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
         <p>
           Something went wrong. Please contact{" "}
           <a
-            className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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="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">
+            <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">
               <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 355be168a..9b7833f86 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="bg-bunker-800 flex flex-col justify-between md:h-screen">
+    <div className="flex flex-col justify-between bg-bunker-800 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="mb-1 mt-2 text-lg">
+        <p className="mt-2 mb-1 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 bg-mineshaft-500 hover:bg-primary mt-8 cursor-default rounded-md px-4 py-2 font-medium hover:text-black">
+          <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">
             Go to Dashboard
           </div>
         </Link>
diff --git a/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx b/frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx
index d25277533..9a427a053 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="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 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 />
           <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 to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b from-white to-bunker-200 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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                 >
                   Infisical &rarr;
                 </a>
               </p>
             </div>
-            <div className="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
+            <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
               <ShareSecretForm isPublic />
             </div>
             <div className="m-auto my-8 flex w-full">
-              <div className="border-mineshaft-600 w-full border-t" />
+              <div className="w-full border-t border-mineshaft-600" />
             </div>
-            <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">
+            <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">
                 Open source{" "}
-                <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
+                <span className="bg-linear-to-tr from-yellow-500 to-primary-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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                    className="text-bold bg-linear-to-tr from-yellow-500 to-primary-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="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">
+                    <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">
                       <p className="mr-4 whitespace-nowrap">Try Infisical</p>
                       <FontAwesomeIcon icon={faArrowRight} />
                     </div>
@@ -84,8 +84,8 @@ export const ShareSecretPage = () => {
             </div>
           </div>
 
-          <div className="bg-mineshaft-600 w-full p-2">
-            <p className="text-mineshaft-300 text-center text-sm">
+          <div className="w-full bg-mineshaft-600 p-2">
+            <p className="text-center text-sm text-mineshaft-300">
               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 e68b9cac4..54627888b 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="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"
+                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"
                 disabled={value !== undefined}
               />
             </FormControl>
@@ -257,7 +257,7 @@ export const ShareSecretForm = ({
                 isError={Boolean(error)}
               >
                 <Switch
-                  className={`bg-mineshaft-400/50 data-[state=checked]:bg-primary ml-0 mr-2 shadow-inner ${!allowSecretSharingOutsideOrganization ? "opacity-50" : ""}`}
+                  className={`mr-2 ml-0 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-primary ${!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="bg-mineshaft-700 text-bunker-200 mt-6 w-full py-3"
+          className="mt-6 w-full bg-mineshaft-700 py-3 text-bunker-200"
           colorSchema="primary"
           variant="outline_bg"
           size="sm"
@@ -465,7 +465,7 @@ export const ShareSecretForm = ({
         </IconButton>
       </div>
       <Button
-        className="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
+        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         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 0bf99963f..0e88fe59e 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-primary text-xs">(Latest)</span>}
+    {option.isLatest && <span className="text-xs text-primary">(Latest)</span>}
   </div>
 );
 interface UpgradeResult {
@@ -143,7 +143,7 @@ export const UpgradePathPage = () => {
         />
       </Helmet>
       <div className="dark h-full">
-        <div className="bg-mineshaft-900 text-bunker-200 dark:scheme-dark flex h-screen flex-col justify-between overflow-auto">
+        <div className="flex h-screen flex-col justify-between overflow-auto bg-mineshaft-900 text-bunker-200 dark:scheme-dark">
           <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 to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
                 Upgrade your Infisical Version
               </h1>
             </div>
 
             {/* Calculator Card */}
-            <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="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="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="bg-primary hover:bg-primary/80 w-full font-medium text-black"
+                  className="w-full bg-primary font-medium text-black hover:bg-primary/80"
                 >
                   {calculateMutation.isPending ? "Calculating..." : "Calculate Upgrade Path"}
                 </Button>
@@ -297,7 +297,7 @@ export const UpgradePathPage = () => {
                           >
                             {hasIssues ? "Action Required:" : "Ready to Upgrade:"}
                           </h3>
-                          <p className="text-bunker-300 mt-1 text-sm">
+                          <p className="mt-1 text-sm text-bunker-300">
                             {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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-6">
+                <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-6">
                   <div className="mb-6 flex items-center space-x-2">
                     <svg
-                      className="text-bunker-300 h-5 w-5"
+                      className="h-5 w-5 text-bunker-300"
                       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-bunker-200 text-xl font-medium">Upgrade Steps</h2>
+                    <h2 className="text-xl font-medium text-bunker-200">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="border-primary bg-primary z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-black">
+                            <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">
                               <span className="text-xs font-bold">{index + 1}</span>
                             </div>
 
                             {/* Timeline Line */}
                             {!isLast && (
-                              <div className="bg-mineshaft-500 -mb-4 -mt-4 h-full w-px flex-1" />
+                              <div className="-mt-4 -mb-4 h-full w-px flex-1 bg-mineshaft-500" />
                             )}
                           </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="text-bunker-200 font-medium">{step.version}</h3>
+                              <h3 className="font-medium text-bunker-200">{step.version}</h3>
                               {isFirst && (
-                                <span className="border-primary/30 bg-primary/20 text-primary rounded-sm border px-2 py-1 text-xs font-medium">
+                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
                                   Starting Version
                                 </span>
                               )}
                               {isLast && (
-                                <span className="border-primary/30 bg-primary/20 text-primary rounded-sm border px-2 py-1 text-xs font-medium">
+                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
                                   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="text-primary hover:text-primary/80 inline-flex items-center space-x-1 text-xs transition-colors"
+                                  className="inline-flex items-center space-x-1 text-xs text-primary transition-colors hover:text-primary/80"
                                 >
                                   <FontAwesomeIcon icon={faExternalLink} className="h-3 w-3" />
                                   <span>View Changelog</span>
                                 </a>
                               ) : (
-                                <span className="text-bunker-400 inline-flex items-center space-x-1 text-xs">
+                                <span className="inline-flex items-center space-x-1 text-xs text-bunker-400">
                                   <span>No GitHub Release</span>
                                 </span>
                               )}
@@ -464,8 +464,8 @@ export const UpgradePathPage = () => {
                               if (!notes) return null;
 
                               return (
-                                <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 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>
                               );
                             })()}
@@ -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="text-bunker-300 mb-2 text-xs">
+                                <div className="mb-2 text-xs text-bunker-300">
                                   {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="text-bunker-300 mb-2 text-xs">
+                                    <div className="mb-2 text-xs text-bunker-300">
                                       {change.description}
                                     </div>
                                     <div className="text-xs font-medium text-red-400">
@@ -537,8 +537,8 @@ export const UpgradePathPage = () => {
               </div>
             )}
           </div>
-          <div className="bg-mineshaft-800 w-full p-2">
-            <p className="text-bunker-400 text-center text-sm">
+          <div className="w-full bg-mineshaft-800 p-2">
+            <p className="text-center text-sm text-bunker-400">
               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 da388a4c2..011d6d20d 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="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 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 />
         <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 to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
               {step === "set-value" ? "Secret Request" : "Secret request shared"}
             </h1>
-            <p className="text-mineshaft-300 text-sm">
+            <p className="text-sm text-mineshaft-300">
               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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-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="border-mineshaft-600 w-full border-t" />
+            <div className="w-full border-t border-mineshaft-600" />
           </div>
-          <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">
+          <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">
               Open source{" "}
-              <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr from-yellow-500 to-primary-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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-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="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">
+                  <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">
                     <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="bg-mineshaft-600 w-full p-2">
-          <p className="text-mineshaft-300 text-center text-sm">
+        <div className="w-full bg-mineshaft-600 p-2">
+          <p className="text-center text-sm text-mineshaft-300">
             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 fed962d50..c2e9ce475 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 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 114764b67..b4d736aa8 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
+        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 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 7f35da0a1..073e81c44 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
       <div className="text-center">
-        <div className="border-mineshaft-800 bg-mineshaft-600 mx-auto w-min rounded-md border p-3">
+        <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 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="text-mineshaft-300 mt-2 text-sm">
+        <p className="mt-2 text-sm text-mineshaft-300">
           <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 98d344c36..12e57aebe 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
       <div className="text-center">
-        <div className="border-mineshaft-800 bg-mineshaft-600 mx-auto w-min rounded-md border p-3">
+        <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 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="text-mineshaft-300 mt-2 text-sm">
+        <p className="mt-2 text-sm text-mineshaft-300">
           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 5ab90bcfc..25b28b645 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="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 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 />
         <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 to-bunker-200 from-white bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b from-white to-bunker-200 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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-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="border-mineshaft-600 w-full border-t" />
+            <div className="w-full border-t border-mineshaft-600" />
           </div>
-          <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">
+          <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">
               Open source{" "}
-              <span className="bg-linear-to-tr to-primary-500 from-yellow-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr from-yellow-500 to-primary-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 to-primary-500 from-yellow-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-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="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">
+                  <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">
                     <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="bg-mineshaft-600 w-full p-2">
-          <p className="text-mineshaft-300 text-center text-sm">
+        <div className="w-full bg-mineshaft-600 p-2">
+          <p className="text-center text-sm text-mineshaft-300">
             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 648ff279c..8beb2e74b 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
       <form onSubmit={handleSubmit(onFormSubmit)}>
         <Controller
           control={control}
@@ -66,7 +66,7 @@ export const PasswordContainer = ({
         />
       </form>
       <Button
-        className="bg-mineshaft-700 text-bunker-200 w-full py-3"
+        className="w-full bg-mineshaft-700 py-3 text-bunker-200"
         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 358d97081..1b2e785fe 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
       <div className="flex items-center justify-between rounded-md bg-white/5 p-2 text-base text-gray-400">
-        <p className="whitespace-pre-wrap break-all">
+        <p className="break-all whitespace-pre-wrap">
           {isVisible ? decryptedSecret : hiddenSecret}
         </p>
         <div className="flex">
@@ -72,7 +72,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
         </div>
       </div>
       <Button
-        className="bg-mineshaft-700 text-bunker-200 mt-4 w-full py-3"
+        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         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 1859bc27f..173fa1b78 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="border-mineshaft-600 bg-mineshaft-800 rounded-lg border p-8">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 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 e5d1b792e..7c8bd2a02 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="bg-bunker-800 mx-auto flex w-full max-w-7xl justify-center pb-4 pt-2 text-white">
+    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 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 17c6bd939..714695890 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="text-mineshaft-400 ml-1">(Latest)</span>
+              <span className="ml-1 text-mineshaft-400">(Latest)</span>
             )}
           </>
         }
@@ -291,10 +291,10 @@ export const CommitDetailsTab = ({
                   Restore Options
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="bg-bunker-500 max-w-sm" sideOffset={2}>
+              <DropdownMenuContent align="end" className="max-w-sm bg-bunker-500" sideOffset={2}>
                 {!parsedCommitDetails.changes.isLatest && (
                   <DropdownMenuItem
-                    className="border-mineshaft-600 hover:bg-mineshaft-700 group cursor-pointer border-b px-3 py-3 transition-colors"
+                    className="group cursor-pointer border-b border-mineshaft-600 px-3 py-3 transition-colors hover:bg-mineshaft-700"
                     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="whitespace-normal break-words text-xs leading-snug text-gray-400">
+                        <span className="text-xs leading-snug break-words whitespace-normal 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="hover:bg-mineshaft-700 group cursor-pointer px-3 py-3 transition-colors"
+                  className="group cursor-pointer px-3 py-3 transition-colors hover:bg-mineshaft-700"
                   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="whitespace-normal break-words text-xs leading-snug text-gray-400">
+                      <span className="text-xs leading-snug break-words whitespace-normal 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="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 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>
         <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 pb-0 pt-28"
+                className="h-full pt-28 pb-0"
                 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 4c64df2b7..89124e3b9 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="bg-mineshaft-900 h-[70vh] w-72 overflow-y-auto">
+      <div className="h-[70vh] w-72 overflow-y-auto bg-mineshaft-900">
         <div
-          className={`border-mineshaft-600 cursor-pointer border-b ${
+          className={`cursor-pointer border-b border-mineshaft-600 ${
             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="bg-mineshaft-600 ml-2 rounded-full px-2 py-0.5 text-xs text-gray-300">
+              <span className="ml-2 rounded-full bg-mineshaft-600 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-mineshaft-600 bg-mineshaft-800 border-b px-4 py-2">
+            <div className="border-b border-mineshaft-600 bg-mineshaft-800 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={`border-mineshaft-600 cursor-pointer border-b ${
+                className={`cursor-pointer border-b border-mineshaft-600 ${
                   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="bg-mineshaft-600 rounded-full px-2 py-0.5 text-xs text-gray-300">
+                    <span className="rounded-full bg-mineshaft-600 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="border-mineshaft-600 flex h-[70vh] w-full items-center justify-center border">
+        <div className="flex h-[70vh] w-full items-center justify-center border border-mineshaft-600">
           <p className="text-gray-400">No changes in selected folder</p>
         </div>
       );
     }
 
     return (
-      <div className="border-mineshaft-600 h-[70vh] w-full overflow-y-auto border-l">
+      <div className="h-[70vh] w-full overflow-y-auto border-l border-mineshaft-600">
         <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="bg-bunker-800 mx-auto flex w-full max-w-7xl justify-center pb-4 pt-2 text-white">
+    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 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="border-mineshaft-600 flex w-full border">
+              <div className="flex w-full border border-mineshaft-600">
                 {renderSidebar()}
                 {renderMainContent()}
               </div>
 
-              <div className="border-mineshaft-600 bg-mineshaft-800 border-x px-6 py-3">
+              <div className="border-x border-mineshaft-600 bg-mineshaft-800 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="text-mineshaft-400 mr-2" />
+                      <FontAwesomeIcon icon={faInfoCircle} className="mr-2 text-mineshaft-400" />
                     </Tooltip>
                     <Switch
-                      className="bg-mineshaft-400/50 data-[state=checked]:bg-green/50 ml-2 shadow-inner"
+                      className="ml-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
                       thumbClassName="bg-mineshaft-800"
                       isChecked={deepRollback}
                       onCheckedChange={setDeepRollback}
@@ -335,13 +335,13 @@ export const RollbackPreviewTab = (): JSX.Element => {
                 </div>
               </div>
 
-              <div className="border-mineshaft-600 border-t py-4">
+              <div className="border-t border-mineshaft-600 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="border-mineshaft-500 bg-mineshaft-700 w-full py-2 text-sm"
+                    className="w-full border-mineshaft-500 bg-mineshaft-700 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 a28e6e978..db9ab5f9b 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="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
           {isSecret ? "Secret" : "Folder"} Deleted
         </span>
       );
     } else if (item.isAdded) {
       changeBadge = (
-        <span className="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
           {isSecret ? "Secret" : "Folder"} Added
         </span>
       );
     } else if (item.isUpdated) {
       changeBadge = (
-        <span className="bg-mineshaft-600 ml-2 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
           {isSecret ? "Secret" : "Folder"} Updated
         </span>
       );
@@ -598,7 +598,7 @@ export const SecretVersionDiffView = ({
 
     return (
       <div
-        className="hover:bg-mineshaft-700 flex cursor-pointer items-center justify-between p-4"
+        className="flex cursor-pointer items-center justify-between p-4 hover:bg-mineshaft-700"
         onClick={handleToggle}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -637,21 +637,21 @@ export const SecretVersionDiffView = ({
   };
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-800 overflow-hidden border border-b-0 first:rounded-t last:rounded-b last:border-b">
+    <div className="overflow-hidden border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t last:rounded-b last:border-b">
       {showHeader && renderHeader()}
       {!collapsed && (
-        <div className="border-mineshaft-700 bg-mineshaft-900 text-mineshaft-100 border-t p-3">
+        <div className="border-t border-mineshaft-700 bg-mineshaft-900 p-3 text-mineshaft-100">
           <div className="flex gap-3">
             <div
               ref={oldContainerRef}
-              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
+              className="max-h-96 thin-scrollbar flex-1 overflow-auto whitespace-pre"
             >
               {oldVersionContent}
             </div>
-            <div className="bg-mineshaft-600 max-h-96 w-[0.05rem] self-stretch" />
+            <div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
             <div
               ref={newContainerRef}
-              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
+              className="max-h-96 thin-scrollbar 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 d50d30c86..2dba8ad55 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="bg-bunker-800 mx-auto flex h-full w-full max-w-7xl justify-center py-4 text-white">
+    <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 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="text-mineshaft-300 my-1 text-sm">
+          <p className="my-1 text-sm text-mineshaft-300">
             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 144006d7b..3ca2f05e3 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="border-mineshaft-600 bg-mineshaft-800 w-full border border-b-0 first:rounded-t-md last:rounded-b-md last:border-b"
+      className="w-full border border-b-0 border-mineshaft-600 bg-mineshaft-800 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="text-mineshaft-100 block w-full truncate text-left text-sm">
+          <p className="block w-full truncate text-left text-sm text-mineshaft-100">
             {commit.message}
           </p>
-          <p className="text-mineshaft-300 text-left text-xs">
+          <p className="text-left text-xs text-mineshaft-300">
             {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="text-mineshaft-400 mt-0.5 font-mono text-xs">
+          <code className="mt-0.5 font-mono text-xs text-mineshaft-400">
             {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="text-mineshaft-400 ml-4 text-sm">Commits on {date}</h2>
+        <h2 className="ml-4 text-sm text-mineshaft-400">Commits on {date}</h2>
       </div>
       <div className="relative">
-        <div className="bg-mineshaft-500 absolute bottom-0 left-3 top-0 w-[0.1rem]" />
+        <div className="absolute top-0 bottom-0 left-3 w-[0.1rem] bg-mineshaft-500" />
         <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="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="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="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="ml-10 mt-4 w-full"
+                className="mt-4 ml-10 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 d8f2ded84..6453e3118 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+      <div className="flex h-full w-full justify-center bg-bunker-800 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 a8606508a..470f09aef 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 6a5f803d9..98dc087ea 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="bg-bunker-800 mx-auto flex max-w-7xl flex-col justify-between text-white">
+      <div className="mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 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 aa30a695e..fcd080e65 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="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">
+    <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">
         <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="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">
+    <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">
         <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="text-primary-500 hover:text-primary-600 cursor-pointer font-medium transition-all"
+                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
                     target="_blank"
                   >
                     upgrade your subscription
@@ -68,7 +68,7 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
                   rel="noopener noreferrer"
                 >
                   <a
-                    className="text-primary-500 hover:text-primary-600 cursor-pointer font-medium transition-all"
+                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
                     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 505edc2d1..a46e0a3fe 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-mineshaft-300 text-sm font-medium" label="Organization" />
-          <div className="text-mineshaft-300 text-sm">{integration?.owner || "-"}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{integration?.owner || "-"}</div>
         </div>
         <div className="flex flex-col">
-          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Project" />
-          <div className="text-mineshaft-300 text-sm">{integration?.targetService || "-"}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Project" />
+          <div className="text-sm text-mineshaft-300">{integration?.targetService || "-"}</div>
         </div>
         <div className="flex flex-col">
           <FormLabel
-            className="text-mineshaft-300 text-sm font-medium"
+            className="text-sm font-medium text-mineshaft-300"
             label="Target Environment"
           />
-          <div className="text-mineshaft-300 text-sm">{integration?.targetEnvironment || "-"}</div>
+          <div className="text-sm text-mineshaft-300">{integration?.targetEnvironment || "-"}</div>
         </div>
       </div>
     );
@@ -94,8 +94,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
 
     return (
       <div className="flex flex-col">
-        <FormLabel className="text-mineshaft-300 text-sm font-medium" label={formLabel()} />
-        <div className="text-mineshaft-300 text-sm">{contents()}</div>
+        <FormLabel className="text-sm font-medium text-mineshaft-300" label={formLabel()} />
+        <div className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium" label="Workspace" />
-          <div className="text-mineshaft-300 text-sm">
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Workspace" />
+          <div className="text-sm text-mineshaft-300">
             {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-mineshaft-300 text-sm font-medium" label="Space" />
-          <div className="text-mineshaft-300 text-sm">{integration.targetEnvironment}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Space" />
+          <div className="text-sm text-mineshaft-300">{integration.targetEnvironment}</div>
         </div>
       );
     }
@@ -128,10 +128,10 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
       return (
         <div className="flex flex-col">
           <FormLabel
-            className="text-mineshaft-300 text-sm font-medium"
+            className="text-sm font-medium text-mineshaft-300"
             label="Target Environment"
           />
-          <div className="text-mineshaft-300 text-sm">
+          <div className="text-sm text-mineshaft-300">
             {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-mineshaft-300 text-sm font-medium" label="Group" />
-          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Group" />
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
         </div>
       );
     }
@@ -154,8 +154,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "circleci" && integration.owner) {
       return (
         <div>
-          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Organization" />
-          <div className="text-mineshaft-300 text-sm">{integration.owner}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium" label="Category" />
-          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Category" />
+          <div className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium" label="Secret Suffix" />
-          <div className="text-mineshaft-300 text-sm">
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Suffix" />
+          <div className="text-sm text-mineshaft-300">
             {integration?.metadata?.secretSuffix || "-"}
           </div>
         </div>
@@ -184,10 +184,10 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
       return (
         <div>
           <FormLabel
-            className="text-mineshaft-300 text-sm font-medium"
+            className="text-sm font-medium text-mineshaft-300"
             label="Deployment Environment"
           />
-          <div className="text-mineshaft-300 text-sm">{integration.targetService}</div>
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
         </div>
       );
     }
@@ -195,8 +195,8 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
     if (integration.integration === "windmill" && integration.url) {
       return (
         <div>
-          <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Instance URL" />
-          <div className="text-mineshaft-300 text-sm">{integration.url}</div>
+          <FormLabel className="text-sm font-medium text-mineshaft-300" label="Instance URL" />
+          <div className="text-sm text-mineshaft-300">{integration.url}</div>
         </div>
       );
     }
@@ -205,29 +205,29 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
   };
 
   return (
-    <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 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>
 
       <div className="mt-4">
         <FormLabel className="my-2" label="Source" />
 
-        <div className="border-mineshaft-700 bg-mineshaft-800 space-y-2 rounded-lg border p-2">
+        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
           <div className="flex flex-col">
-            <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Environment" />
-            <div className="text-mineshaft-300 text-sm">{integration.environment.name}</div>
+            <FormLabel className="text-sm font-medium text-mineshaft-300" label="Environment" />
+            <div className="text-sm text-mineshaft-300">{integration.environment.name}</div>
           </div>
           <div className="flex flex-col">
-            <FormLabel className="text-mineshaft-300 text-sm font-medium" label="Secret Path" />
-            <div className="text-mineshaft-300 text-sm">{integration.secretPath}</div>
+            <FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Path" />
+            <div className="text-sm text-mineshaft-300">{integration.secretPath}</div>
           </div>
         </div>
 
         <FormLabel className="my-2" label="Destination" />
-        <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">
+        <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">
             {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 456fdd0f4..aa841a88d 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="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 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>
         <div className="mt-4">
           <div className="space-y-3">
             <div>
-              <p className="text-mineshaft-300 text-sm font-medium">Name</p>
-              <p className="text-mineshaft-300 text-sm">
+              <p className="text-sm font-medium text-mineshaft-300">Name</p>
+              <p className="text-sm text-mineshaft-300">
                 {integrationSlugNameMapping[integration.integration]}
               </p>
             </div>
             <div>
-              <p className="text-mineshaft-300 text-sm font-medium">Sync Status</p>
+              <p className="text-sm font-medium text-mineshaft-300">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-mineshaft-300 text-sm font-medium">Latest Successful Sync</p>
-                <div className="text-mineshaft-300 flex items-center gap-2 text-sm">
+                <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">
                   {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
-                  <FontAwesomeIcon icon={faCalendarCheck} className="pr-2 pt-0.5 text-sm" />
+                  <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
                 </div>
               </div>
             )}
@@ -57,8 +57,8 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
             <div>
               {!integration.isSynced && integration.syncMessage && (
                 <>
-                  <p className="text-mineshaft-300 text-sm font-medium">Latest Sync Error</p>
-                  <p className="text-mineshaft-300 text-sm">{integration.syncMessage}</p>
+                  <p className="text-sm font-medium text-mineshaft-300">Latest Sync Error</p>
+                  <p className="text-sm text-mineshaft-300">{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 228d3b33b..8c2983783 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="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">
+    <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">
         <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 f404e30a8..23b02bded 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-mineshaft-400 text-sm">Not Configured</span>;
+    return <span className="text-sm text-mineshaft-400">Not Configured</span>;
 
-  if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
+  if (isPending) return <Spinner size="sm" className="mt-2 ml-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-mineshaft-200 text-sm font-medium" label={getLabel(key)} />
+            <FormLabel className="text-sm font-medium text-mineshaft-200" label={getLabel(key)} />
 
-            <div className="text-mineshaft-300 text-sm">
+            <div className="text-sm text-mineshaft-300">
               {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 1b89edc6f..647af2039 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="container relative mx-auto max-w-7xl pb-12 text-white">
+      <div className="relative container 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 3b46d4b64..9a6db9def 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
-                    ? "hover:bg-mineshaft-700 cursor-pointer duration-200"
+                    ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
                     : "opacity-50"
-                } border-mineshaft-600 bg-mineshaft-800 flex h-36 flex-col items-center justify-center rounded-md border p-3`}
+                } flex h-36 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3`}
                 onClick={() => {
                   if (isSyncAvailable) {
                     navigate({
@@ -180,9 +180,9 @@ export const CloudIntegrationSection = ({
                 </div>
                 {cloudIntegration.isAvailable &&
                   Boolean(integrationAuths?.[cloudIntegration.slug]) && (
-                    <div className="absolute right-0 top-0 z-30 h-full">
+                    <div className="absolute top-0 right-0 z-30 h-full">
                       <div className="relative h-full">
-                        <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">
+                        <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">
                           <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
                           Authorized
                         </div>
@@ -197,7 +197,7 @@ export const CloudIntegrationSection = ({
                                 provider: cloudIntegration.slug
                               });
                             }}
-                            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"
+                            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"
                           >
                             <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="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">
+                      <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">
                         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="border-mineshaft-600 bg-mineshaft-800 h-32 animate-pulse rounded-md border"
+              className="h-32 animate-pulse rounded-md border border-mineshaft-600 bg-mineshaft-800"
             />
           ))}
         </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 51f9130fc..1b8522738 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="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"
+            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"
           >
             {framework?.image && (
               <img
@@ -44,7 +44,7 @@ export const FrameworkIntegrationTab = () => {
           href="https://infisical.com/docs/cli/commands/run"
           rel="noopener noreferrer"
           target="_blank"
-          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"
+          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"
         >
           <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="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"
+          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"
         >
           <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 65b6ab35b..8a9e6250c 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="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"
+              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"
               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 6af2a2106..4974ab824 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="text-mineshaft-200 mt-2 text-xs">
+        <div className="mt-2 text-xs text-mineshaft-200">
           {/* 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 7314ea949..1de01aeab 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(
-        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
+        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
         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="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <Tooltip side="top" className="max-w-2xl break-words" content={secretPath}>
           <p className="truncate">{secretPath}</p>
         </Tooltip>{" "}
       </Td>
       <Td>{environment?.name ?? "-"}</Td>
-      <Td className="min-w-20! max-w-0">
+      <Td className="max-w-0 min-w-20!">
         <div className="flex items-center gap-2">
           <p className="truncate">{getIntegrationDestination(integration)}</p>
           <Tooltip
             position="left"
-            className="min-w-[20rem] max-w-lg"
+            className="max-w-lg min-w-[20rem]"
             content={<IntegrationDetails integration={integration} />}
           >
             <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
@@ -119,22 +119,22 @@ export const IntegrationRow = ({
                     >
                       <FontAwesomeIcon
                         icon={faCalendarCheck}
-                        className="ml-1 pr-1.5 pt-0.5 text-sm"
+                        className="ml-1 pt-0.5 pr-1.5 text-sm"
                       />
                       <div className="text-xs">Last Synced</div>
                     </div>
-                    <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
+                    <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
                       {format(new Date(integration.lastUsed!), "yyyy-MM-dd, hh:mm aaa")}
                     </div>
                   </div>
                 )}
                 {failureMessage && (
                   <div>
-                    <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="mb-2 flex self-start text-red">
+                      <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                       <div className="text-xs">Failure Reason</div>
                     </div>
-                    <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+                    <div className="rounded-sm bg-mineshaft-600 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 be5fc7294..810edd110 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -266,7 +266,7 @@ export const IntegrationsTable = ({
               </Tooltip>
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 40f97281c..97ebfbee5 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
-            <p className="text-mineshaft-100 text-xl font-medium">Native Integrations</p>
+            <p className="text-xl font-medium text-mineshaft-100">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 71e50b690..9cfe9af2b 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-bunker-300 text-xs">Secret Name:</span>
+          <span className="text-xs text-bunker-300">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 f709a1420..60fb8b7aa 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(
-        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
+        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
         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="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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="text-mineshaft-400 ml-1"
+                  className="ml-1 text-mineshaft-400"
                 />
               </Tooltip>
             )}
           </div>
-          <p className="text-bunker-300 truncate text-xs leading-4">{destinationDetails.name}</p>
+          <p className="truncate text-xs leading-4 text-bunker-300">{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 whitespace-normal py-1">
+                  <div className="flex flex-col gap-2 py-1 whitespace-normal">
                     {lastSyncedAt && (
                       <div>
                         <div
@@ -202,22 +202,22 @@ export const SecretSyncRow = ({
                         >
                           <FontAwesomeIcon
                             icon={faCalendarCheck}
-                            className="ml-1 pr-1.5 pt-0.5 text-sm"
+                            className="ml-1 pt-0.5 pr-1.5 text-sm"
                           />
                           <div className="text-xs">Last Synced</div>
                         </div>
-                        <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">
+                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
                           {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
                         </div>
                       </div>
                     )}
                     {failureMessage && (
                       <div>
-                        <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="mb-2 flex self-start text-red">
+                          <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                           <div className="text-xs">Failure Reason</div>
                         </div>
-                        <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+                        <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                           {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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                   <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 4c4bdacd0..ee9cd8a5d 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="min-w-32! max-w-0">
+    <Td className="max-w-0 min-w-32!">
       <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-bunker-300 text-xs leading-3", secondaryClassName)}>
+              <p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
                 {secondaryText}
               </p>
             )}
@@ -46,20 +46,20 @@ export const SecretSyncTableCell = ({
               <FontAwesomeIcon
                 size="xs"
                 icon={faInfoCircle}
-                className="text-bunker-300 ml-1 inline-block"
+                className="ml-1 inline-block text-bunker-300"
               />
             )}
           </p>
           {secondaryText && (
             <p
-              className={twMerge("text-bunker-300 truncate text-xs leading-4", secondaryClassName)}
+              className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
             >
               {secondaryText}
               {infoBadge === "secondary" && (
                 <FontAwesomeIcon
                   size="xs"
                   icon={faInfoCircle}
-                  className="text-bunker-300 ml-1 inline-block"
+                  className="ml-1 inline-block text-bunker-300"
                 />
               )}
             </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 47343aa4e..bdf92ef7f 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 12f29a18a..8f4807c74 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-start gap-1">
-              <p className="text-mineshaft-100 text-lg font-medium">Secret Syncs</p>
+              <p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
               <a
                 href="https://infisical.com/docs/integrations/secret-syncs/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -108,7 +108,7 @@ export const SecretSyncsTab = () => {
                 </div>
               </a>
             </div>
-            <p className="text-bunker-300 text-sm">
+            <p className="text-sm text-bunker-300">
               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 30363886b..860f161e9 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="text-mineshaft-50 dark:scheme-dark container mx-auto flex h-screen w-full items-center justify-center px-8">
+      <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:scheme-dark">
         <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
       </div>
     );
@@ -900,7 +900,7 @@ export const OverviewPage = () => {
 
   if (!isProjectV3)
     return (
-      <div className="text-mineshaft-50 dark:scheme-dark flex h-full w-full flex-col items-center justify-center px-6">
+      <div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
         <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="text-mineshaft-50 dark:scheme-dark relative mx-auto max-w-7xl">
+      <div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
         <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="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                   href="https://infisical.com/docs/cli/overview"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -928,7 +928,7 @@ export const OverviewPage = () => {
                 </a>
                 ,
                 <a
-                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                   href="https://infisical.com/docs/documentation/getting-started/api"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -937,7 +937,7 @@ export const OverviewPage = () => {
                 </a>
                 ,
                 <a
-                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                   href="https://infisical.com/docs/sdks/overview"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -946,7 +946,7 @@ export const OverviewPage = () => {
                 </a>
                 , and
                 <a
-                  className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                   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="thin-scrollbar max-h-[70vh] overflow-y-auto"
+                  className="max-h-[70vh] thin-scrollbar overflow-y-auto"
                   align="end"
                   sideOffset={2}
                 >
@@ -1113,7 +1113,7 @@ export const OverviewPage = () => {
                     <IconButton
                       ariaLabel="add-folder-or-import"
                       variant="outline_bg"
-                      className="bg-mineshaft-600 rounded-l-none p-3"
+                      className="rounded-l-none bg-mineshaft-600 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="thin-scrollbar max-h-[66vh] overflow-y-auto rounded-b-none"
+            className="max-h-[66vh] thin-scrollbar overflow-y-auto rounded-b-none"
           >
             <Table>
               <THead
@@ -1221,7 +1221,7 @@ export const OverviewPage = () => {
                   >
                     <div
                       className={twMerge(
-                        "border-mineshaft-600 flex h-full border-b pb-3 pl-3 pr-5",
+                        "flex h-full border-b border-mineshaft-600 pr-5 pb-3 pl-3",
                         !collapseEnvironments && "border-r pt-3.5"
                       )}
                     >
@@ -1238,7 +1238,7 @@ export const OverviewPage = () => {
                               : ""
                           }
                         >
-                          <div className="ml-2 mr-4">
+                          <div className="mr-4 ml-2">
                             <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="ml-auto mt-auto h-min p-1"
+                          className="mt-auto ml-auto h-min p-1"
                           onClick={handleToggleNarrowHeader}
                         >
                           <FontAwesomeIcon
@@ -1328,10 +1328,10 @@ export const OverviewPage = () => {
                         >
                           <div
                             className={twMerge(
-                              "border-mineshaft-600 border-b",
+                              "border-b border-mineshaft-600",
                               collapseEnvironments
                                 ? "relative"
-                                : "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
+                                : "flex items-center justify-center px-5 pt-3.5 pb-[0.82rem]",
                               collapseEnvironments && isLast && "overflow-clip"
                             )}
                             style={{
@@ -1355,7 +1355,7 @@ export const OverviewPage = () => {
                             <button
                               type="button"
                               className={twMerge(
-                                "hover:text-mineshaft-100 duration-100",
+                                "duration-100 hover:text-mineshaft-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="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">
+                                <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">
                                   <span className="text-bunker-100">{missingKeyCount}</span>
                                 </div>
                               </Tooltip>
@@ -1538,21 +1538,21 @@ export const OverviewPage = () => {
                 )}
               </TBody>
               <TFoot>
-                <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">
+                <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">
                     <div
-                      className="border-mineshaft-600 w-full border-r border-t"
+                      className="w-full border-t border-r border-mineshaft-600"
                       style={{ height: "45px" }}
                     />
                   </Td>
                   {visibleEnvs?.map(({ name, slug }, i) => (
                     <Td
                       key={`explore-${name}-btn-${i + 1}`}
-                      className="border-mineshaft-600 border-0 border-r p-0"
+                      className="border-0 border-r border-mineshaft-600 p-0"
                     >
                       <div
                         className={twMerge(
-                          "border-mineshaft-600 flex w-full items-center justify-center border-t py-2"
+                          "flex w-full items-center justify-center border-t border-mineshaft-600 py-2"
                         )}
                       >
                         {collapseEnvironments ? (
@@ -1598,7 +1598,7 @@ export const OverviewPage = () => {
                   secretRotationCount={totalSecretRotationCount}
                 />
               }
-              className="border-t-mineshaft-600 rounded-b-md border-t border-solid"
+              className="rounded-b-md border-t border-solid border-t-mineshaft-600"
               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 71b0f4fc0..8eb6c5035 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="bg-mineshaft-500 rounded-md px-1 py-0.5">
+                    <code className="rounded-md bg-mineshaft-500 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 ed1d8ec8c..5648be172 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 border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 relative z-20 border-solid py-1 pl-5 pr-2 text-sm"
+        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"
         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-mineshaft-600 text-mineshaft-200 border-solid py-1 pl-5 pr-2 text-sm`}
+            } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
             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 91c66980d..d5d4ace3e 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="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">
+      <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">
           <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-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
+              "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
               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 5464e6ed3..8058fa49a 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="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">
+      <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">
           <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-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
+              "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
               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 0d1f2a2b1..c7fcae6b5 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 hover:bg-mineshaft-700 h-full">
+      <tr className="!last:border-b-0 h-full hover:bg-mineshaft-700">
         <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 8b4a171de..7f7f2d633 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="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">
+        <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">
             <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-mineshaft-600 group-hover:bg-mineshaft-700 border-r py-3",
+                "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
                 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-mineshaft-500 border-b-2"}`}
+                className={`bg-bunker-600 px-0 py-0 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
               >
                 <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 border-r-0! min-w-[30vw]"
+                            className="min-table-row min-w-[30vw] border-r-0!"
                           >
                             <div className="flex w-full flex-wrap items-center">
                               <span>{envName}</span>
@@ -151,7 +151,7 @@ export const SecretOverviewSecretRotationRow = ({
                               )}
                             </div>
                           </th>
-                          <div className="absolute right-1 top-0.5 ml-auto mr-1 mt-1 w-min">
+                          <div className="absolute top-0.5 right-1 mt-1 mr-1 ml-auto 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-mineshaft-600 border-t-2">
+                      <tbody className="border-t-2 border-mineshaft-600">
                         {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 b6bcb14d1..b0f9f7666 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="border-r-mineshaft-600 grow border-r pl-1 pr-2">
+      <div className="grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <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 4342b8c28..2bc2bc29e 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="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">
+          <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">
               <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="group-hover:bg-mineshaft-700 px-0 py-0"
+                className="px-0 py-0 group-hover:bg-mineshaft-700"
               >
-                <div className="border-mineshaft-600 h-full w-full border-r px-5 py-[0.85rem]">
+                <div className="h-full w-full border-r border-mineshaft-600 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 165af35dd..2a2e1a76a 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={`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"
+          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"
           }`}
         >
-          <div className="border-mineshaft-600 h-full w-full border-r px-5 py-2.5">
+          <div className="h-full w-full border-r border-mineshaft-600 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-mineshaft-600 group-hover:bg-mineshaft-700 border-r px-0 py-3",
-                isFormExpanded && "border-mineshaft-500 border-t-2",
+                "border-r border-mineshaft-600 px-0 py-3 group-hover:bg-mineshaft-700",
+                isFormExpanded && "border-t-2 border-mineshaft-500",
                 (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-mineshaft-500 border-b-2"
+              isFormExpanded && "border-b-2 border-mineshaft-500"
             }`}
           >
             <div className="ml-2 p-2" style={getExpandedRowStyle(scrollOffset)}>
@@ -208,14 +208,14 @@ export const SecretOverviewTableRow = ({
               <TableContainer>
                 <table className="secret-table">
                   <thead>
-                    <tr className="border-mineshaft-600 h-10 border-b-2">
+                    <tr className="h-10 border-b-2 border-mineshaft-600">
                       <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 right-0 top-0 ml-auto mr-1 mt-1 w-min">
+                      <div className="absolute top-0 right-0 mt-1 mr-1 ml-auto w-min">
                         <Button
                           variant="outline_bg"
                           className="p-1"
@@ -227,7 +227,7 @@ export const SecretOverviewTableRow = ({
                       </div>
                     </tr>
                   </thead>
-                  <tbody className="border-mineshaft-600 border-t-2">
+                  <tbody className="border-t-2 border-mineshaft-600">
                     {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 d10f354c5..5bb2d7e80 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="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"
+      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"
     >
       <div className="flex h-11 flex-1 shrink-0 items-center">
-        <span className="border-mineshaft-600 flex h-full min-w-44 items-center justify-between gap-2 border-r-2 px-4">
+        <span className="flex h-full min-w-44 items-center justify-between gap-2 border-r-2 border-mineshaft-600 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="bg-mineshaft-500 rounded-md px-1 py-0.5">
+                    <code className="rounded-md bg-mineshaft-500 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="focus:text-bunker-100 w-full px-2 placeholder:text-red-500 focus:ring-transparent"
+              className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
             />
           )}
         />
       </div>
 
       {isReadOnly || isOverriden ? (
-        <span className="bg-mineshaft-500 mr-5 rounded-md px-2">Read Only</span>
+        <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
       ) : (
-        <div className="border-mineshaft-500 group flex w-20 items-center justify-center border-l py-1">
+        <div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
           <AnimatePresence mode="wait">
             {!isDirty ? (
               <motion.div
@@ -239,7 +239,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
                       type="submit"
                       size="md"
                       className={twMerge(
-                        "text-primary p-0 opacity-0 group-hover:opacity-100",
+                        "p-0 text-primary 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 2465468b6..cf665ac0c 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 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">
+                <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">
                   <FontAwesomeIcon
                     icon={faSearch}
                     size="sm"
@@ -46,14 +46,14 @@ export const SecretSearchInput = ({
                   />
                 </Combobox.Button>
               </Tooltip>
-              <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">
+              <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">
                 <Combobox.Input
                   onKeyDown={(e) => {
                     if (activeIndex === 0 && e.key === "Enter") setIsOpen(true);
                   }}
                   autoComplete="off"
                   className={twMerge(
-                    "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",
+                    "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",
                     hasSearch ? "pr-8" : "pr-2.5"
                   )}
                   placeholder={
@@ -69,7 +69,7 @@ export const SecretSearchInput = ({
                     isRounded
                     variant="plain"
                     onClick={() => onChange("")}
-                    className="text-primary absolute right-2"
+                    className="absolute right-2 text-primary"
                     ariaLabel="Clear search"
                   >
                     <FontAwesomeIcon icon={faCircleXmark} />
@@ -82,17 +82,17 @@ export const SecretSearchInput = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <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.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.Option
                   onClick={() => setIsOpen(true)}
                   value={value}
                   className={({ active }) =>
-                    `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 ${
+                    `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 ${
                       active ? "bg-mineshaft-500" : ""
                     }`
                   }
                 >
-                  <FontAwesomeIcon icon={faFolderTree} className="mr-2 mt-1 text-yellow-700" />
+                  <FontAwesomeIcon icon={faFolderTree} className="mt-1 mr-2 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 db67c045d..79911b6ee 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 bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
+      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
       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-mineshaft-400 text-xs">
+          <span className="text-xs text-mineshaft-400">
             <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 8f4a852cc..92d2fac3e 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 bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
+      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
       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 10fcc140b..c2e4c3793 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="bg-mineshaft-800 placeholder-mineshaft-50 focus:bg-mineshaft-700/80 h-[2.3rem] duration-200"
+          className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
           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="thin-scrollbar max-h-80 overflow-y-auto rounded-r-none"
+                  className="max-h-80 thin-scrollbar 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="max-h-76 min-h-76 mt-4 overflow-auto">
+      <div className="mt-4 max-h-76 min-h-76 overflow-auto">
         {/* eslint-disable-next-line no-nested-ternary */}
         {isEnabled ? (
           // eslint-disable-next-line no-nested-ternary
           isPending ? (
-            <Spinner size="lg" className="text-mineshaft-900 mx-auto mt-24" />
+            <Spinner size="lg" className="mx-auto mt-24 text-mineshaft-900" />
           ) : isEmpty ? (
             <EmptyState
               className="mt-24"
@@ -247,7 +247,7 @@ const Content = ({
               icon={faMagnifyingGlass}
             />
           ) : (
-            <TableContainer className="thin-scrollbar h-full overflow-y-auto">
+            <TableContainer className="h-full thin-scrollbar 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 d9e757c9e..a593b0023 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 bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
+      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
       onClick={handleNavigate}
     >
       <Td className="w-full">
         <div className="inline-flex max-w-[20rem] flex-col">
           <span className="truncate">
-            <FontAwesomeIcon className="text-bunker-300 mr-2 self-center" icon={faKey} />
+            <FontAwesomeIcon className="mr-2 self-center text-bunker-300" icon={faKey} />
             {groupSecret.key}
           </span>
-          <span className="text-mineshaft-400 text-xs">
+          <span className="text-xs text-mineshaft-400">
             <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-mineshaft-400 text-xs">
+                        <span className="text-xs text-mineshaft-400">
                           {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 f8ceaa82d..fc4b66978 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 bg-mineshaft-700 hover:bg-mineshaft-600 cursor-pointer"
+      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
       onClick={handleNavigate}
     >
       <Td className="w-full">
         <div className="inline-flex max-w-[20rem] flex-col">
           <span className="truncate">
-            <FontAwesomeIcon className="text-mineshaft-400 mr-2 self-center" icon={faRotate} />
+            <FontAwesomeIcon className="mr-2 self-center text-mineshaft-400" icon={faRotate} />
             {groupSecretRotation.name}
           </span>
-          <span className="text-mineshaft-400 text-xs">
+          <span className="text-xs text-mineshaft-400">
             <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 516bc669d..76b4345c1 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="divide-mineshaft-500 text-mineshaft-400 flex items-center gap-2 divide-x text-sm">
+    <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
       {importCount > 0 && (
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="whitespace-nowrap text-center">
+            <p className="text-center whitespace-nowrap">
               Total import count{" "}
-              <span className="text-mineshaft-400 text-center">(matching filters)</span>
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
             </p>
           }
         >
@@ -46,9 +46,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="whitespace-nowrap text-center">
+            <p className="text-center whitespace-nowrap">
               Total folder count{" "}
-              <span className="text-mineshaft-400 text-center">(matching filters)</span>
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
             </p>
           }
         >
@@ -62,9 +62,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="whitespace-nowrap text-center">
+            <p className="text-center whitespace-nowrap">
               Total dynamic secret count{" "}
-              <span className="text-mineshaft-400 text-center">(matching filters)</span>
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
             </p>
           }
         >
@@ -78,9 +78,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="whitespace-nowrap text-center">
+            <p className="text-center whitespace-nowrap">
               Total secret rotation count{" "}
-              <span className="text-mineshaft-400 text-center">(matching filters)</span>
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
             </p>
           }
         >
@@ -94,9 +94,9 @@ export const SecretTableResourceCount = ({
         <Tooltip
           className="max-w-sm"
           content={
-            <p className="whitespace-nowrap text-center">
+            <p className="text-center whitespace-nowrap">
               Total secret count{" "}
-              <span className="text-mineshaft-400 text-center">(matching filters)</span>
+              <span className="text-center text-mineshaft-400">(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 45b8e25f0..98feebb7e 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="border-primary/50 bg-primary/10 mt-4 flex max-w-2xl flex-col rounded-lg border px-6 py-5">
+    <div className="mt-4 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
       {isUpgrading && (
-        <div className="bg-bunker-500 absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-opacity-80">
+        <div className="bg-opacity-80 absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500">
           <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="text-primary mt-1" />
+        <FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
         <p className="text-xl font-medium">Upgrade secrets engine version</p>
       </div>
-      <p className="text-mineshaft-100 mx-1 mb-4 leading-7">
+      <p className="mx-1 mb-4 leading-7 text-mineshaft-100">
         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="text-mineshaft-100 mx-1 mb-4 leading-7">
+      <p className="mx-1 mb-4 leading-7 text-mineshaft-100">
         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="text-mineshaft-100 mx-1 mb-6 leading-7">
+      <p className="mx-1 mb-6 leading-7 text-mineshaft-100">
         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 4ba29b3cf..888c4c77d 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="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 mt-3.5 flex items-center rounded-md border px-4 py-2">
+        <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="mr-2 text-sm">{selectedCount} Selected</div>
           <button
             type="button"
-            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
             onClick={resetSelectedEntries}
           >
             Unselect All
           </button>
           {isRotatedSecretSelected && (
-            <span className="text-mineshaft-400 text-sm">
+            <span className="text-sm text-mineshaft-400">
               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 308838141..34d056983 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="divide-mineshaft-600 bg-mineshaft-900 mb-4 flex flex-col divide-y rounded-sm px-3 py-2">
+        <div className="mb-4 flex flex-col divide-y divide-mineshaft-600 rounded-sm bg-mineshaft-900 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="text-mineshaft-400 mt-4 text-sm">Moving secrets...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Moving secrets...</p>
       </div>
     );
   }
@@ -327,8 +327,8 @@ const Content = ({
         />
       </FormControl>
       {Boolean(environmentsToBeSkipped.length) && (
-        <div className="bg-mineshaft-900 rounded-sm px-3 py-2">
-          <span className="text-yellow text-sm">
+        <div className="rounded-sm bg-mineshaft-900 px-3 py-2">
+          <span className="text-sm text-yellow">
             <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 data-[state=checked]:bg-yellow/80 shadow-inner"
+          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-yellow/80"
           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 54b6cb0b3..77106a57c 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="bg-bunker-800 container mx-auto h-full w-full max-w-7xl text-white">
+      <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 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 875bcbc2d..fce55b077 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="bg-mineshaft-600 text-mineshaft-200 mx-1 rounded-sm px-1.5 py-0.5 font-mono text-[13px]">
+        <code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
           {request.policy.secretPath}
         </code>{" "}
         in{" "}
-        <code className="bg-mineshaft-600 text-mineshaft-200 mx-1 rounded-sm px-1.5 py-0.5 font-mono text-[13px]">
+        <code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
           {request.environmentName}
         </code>
       </div>
@@ -307,17 +307,17 @@ export const AccessApprovalRequest = ({
         exit={{ opacity: 0, translateX: 30 }}
         className="rounded-md text-gray-300"
       >
-        <div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
             <div>
               <div className="flex items-start gap-1">
-                <p className="text-mineshaft-100 text-xl font-medium">Access Requests</p>
+                <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
                 <a
                   href="https://infisical.com/docs/documentation/platform/access-controls/access-requests"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <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">
+                  <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">
                     <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                     <span>Docs</span>
                     <FontAwesomeIcon
@@ -327,7 +327,7 @@ export const AccessApprovalRequest = ({
                   </div>
                 </a>
               </div>
-              <p className="text-bunker-300 text-sm">
+              <p className="text-sm text-bunker-300">
                 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="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 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
               role="button"
               tabIndex={0}
@@ -405,9 +405,9 @@ export const AccessApprovalRequest = ({
                 <DropdownMenuContent
                   align="end"
                   sideOffset={1}
-                  className="thin-scrollbar max-h-80 overflow-y-auto"
+                  className="max-h-80 thin-scrollbar overflow-y-auto"
                 >
-                  <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+                  <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                     Select an Environment
                   </DropdownMenuLabel>
                   {currentProject?.environments.map(({ slug, name }) => (
@@ -442,9 +442,9 @@ export const AccessApprovalRequest = ({
                   <DropdownMenuContent
                     align="end"
                     sideOffset={1}
-                    className="thin-scrollbar max-h-80 overflow-y-auto"
+                    className="max-h-80 thin-scrollbar overflow-y-auto"
                   >
-                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                       Select Requesting User
                     </DropdownMenuLabel>
                     {members?.map(({ user: membershipUser, id }) => (
@@ -470,7 +470,7 @@ export const AccessApprovalRequest = ({
               )}
             </div>
           </div>
-          <div className="border-mineshaft-600 bg-mineshaft-800 flex flex-col rounded-b-md border-x border-b border-t">
+          <div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
             {filteredRequests?.length === 0 && !isFiltered && (
               <div className="py-12">
                 <EmptyState
@@ -490,7 +490,7 @@ export const AccessApprovalRequest = ({
                 return (
                   <div
                     key={request.id}
-                    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"
+                    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"
                     role="button"
                     tabIndex={0}
                     onClick={() => handleSelectRequest(request)}
@@ -506,7 +506,7 @@ export const AccessApprovalRequest = ({
                           <FontAwesomeIcon
                             icon={faLock}
                             size="xs"
-                            className="text-mineshaft-300 mr-1.5"
+                            className="mr-1.5 text-mineshaft-300"
                           />
                           {generateRequestText(request)}
                         </div>
@@ -526,7 +526,7 @@ export const AccessApprovalRequest = ({
                       </div>
                       <div className="flex items-center gap-3">
                         {request.requestedByUserId === user.id && (
-                          <div className="text-bunker-300 flex items-center gap-1.5 whitespace-nowrap text-xs">
+                          <div className="flex items-center gap-1.5 text-xs whitespace-nowrap text-bunker-300">
                             <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 0de69323e..430ba080e 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="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" />
+      <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" />
         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 178d08f8c..1b7e12a89 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="bg-mineshaft-400/50 text-bunker-300 flex h-4 items-center justify-center">
+      <Badge className="flex h-4 items-center justify-center bg-mineshaft-400/50 text-bunker-300">
         <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="border-l-primary bg-mineshaft-300/5 mb-4 rounded-r border-l-2 px-4 py-2.5 text-sm">
+        <div className="mb-4 rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 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="text-mineshaft-200 mb-2 mt-4">
+          <div className="mt-4 mb-2 text-mineshaft-200">
             <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="border-mineshaft-500 mt-4 flex items-center justify-between border-b-2 py-2">
+          <div className="mt-4 flex items-center justify-between border-b-2 border-mineshaft-500 py-2">
             <span>Approvers</span>
             {approverSequence.isMyReviewInThisSequence &&
               request.status === ApprovalStatus.PENDING && (
@@ -351,7 +351,7 @@ export const ReviewAccessRequestModal = ({
                 </Badge>
               )}
           </div>
-          <div className="thin-scrollbar max-h-[40vh] overflow-y-auto rounded-sm py-2">
+          <div className="max-h-[40vh] thin-scrollbar 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 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"
+                          ? "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"
                           : ""
                       }
                     >
@@ -415,20 +415,20 @@ export const ReviewAccessRequestModal = ({
                       <div className="flex w-12 flex-col items-center gap-2 pr-4">
                         <div
                           className={twMerge(
-                            "border-mineshaft-600 grow",
+                            "grow border-mineshaft-600",
                             index !== 0 && "border-r"
                           )}
                         />
                         {StepComponent}
                         <div
                           className={twMerge(
-                            "border-mineshaft-600 grow",
+                            "grow border-mineshaft-600",
                             index < approverSequence.approvers!.length - 1 && "border-r"
                           )}
                         />
                       </div>
                     )}
-                    <div className="border-mineshaft-600 grid flex-1 grid-cols-5 border-b p-4">
+                    <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 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="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">
+                                          <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">
                                             <FontAwesomeIcon icon={faBan} />
                                             Inactive
                                           </Badge>
@@ -479,8 +479,8 @@ export const ReviewAccessRequestModal = ({
                               className="max-w-lg"
                               content={
                                 <div>
-                                  <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">
+                                  <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">
                                     {approver.reviewers.map((el, idx) => (
                                       <div
                                         key={`reviewer-${idx + 1}`}
@@ -517,7 +517,7 @@ export const ReviewAccessRequestModal = ({
           {shouldBlockRequestActions ? (
             <div
               className={twMerge(
-                "bg-mineshaft-300/5 mt-2 rounded-r border-l-2 border-l-red-500 px-4 py-2.5 text-sm",
+                "mt-2 rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 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-red text-xs">
+                    <span className="text-xs text-red">
                       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="text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200 mt-4 border-transparent bg-transparent"
+                  className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
                   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 13228127a..3d2302535 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
             <div>
               <div className="flex items-start gap-1">
-                <p className="text-mineshaft-100 text-xl font-medium">Policies</p>
+                <p className="text-xl font-medium text-mineshaft-100">Policies</p>
                 <a
                   href="https://infisical.com/docs/documentation/platform/pr-workflows"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <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">
+                  <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">
                     <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-bunker-300 text-sm">
+              <p className="text-sm text-bunker-300">
                 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(
-                    "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",
+                    "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",
                     isTableFiltered && "border-primary/50 text-primary"
                   )}
                 >
@@ -318,7 +318,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
                 </IconButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+                className="max-h-[70vh] thin-scrollbar 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 42ce196ec..30998aff4 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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {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-mineshaft-300 text-xs opacity-90">
+          <p className="font-inter text-xs text-mineshaft-300 opacity-90">
             Select members or groups that are allowed to approve requests from this policy.
           </p>
         </div>
         {isAccessPolicyType ? (
           <>
-            <div className="thin-scrollbar border-mineshaft-600 bg-mineshaft-900 max-h-64 space-y-2 overflow-y-auto rounded-sm border p-2">
+            <div className="max-h-64 thin-scrollbar space-y-2 overflow-y-auto rounded-sm border border-mineshaft-600 bg-mineshaft-900 p-2">
               {sequenceApproversFieldArray.fields.map((el, index) => (
                 <div
                   className={twMerge(
-                    "border-mineshaft-500 bg-mineshaft-700 rounded-sm border p-3 pb-0 shadow-inner",
+                    "rounded-sm border border-mineshaft-500 bg-mineshaft-700 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="text-mineshaft-400 inline text-xs">Min. Approvals</div>
-                      <div className="border-mineshaft-400 mr-2 w-20 border-r pr-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">
                         <Controller
                           control={control}
                           name={`sequenceApprovers.${index}.approvals` as const}
@@ -853,7 +853,7 @@ const Form = ({
             </div>
 
             {bypasserCount <= 0 && (
-              <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">
+              <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">
                 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 c9e760d4c..0bd4c6af1 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={`bg-mineshaft-900/75 w-full overflow-hidden transition-all duration-500 ease-in-out ${
+            className={`w-full overflow-hidden bg-mineshaft-900/75 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-mineshaft-500 border-b-2 pb-2">Approvers</div>
+              <div className="border-b-2 border-mineshaft-500 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("border-mineshaft-600 grow", index !== 0 && "border-r")}
+                        className={twMerge("grow border-mineshaft-600", index !== 0 && "border-r")}
                       />
                       {labels.length > 1 && (
-                        <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">
+                        <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">
                           <span>{index + 1}</span>
                         </Badge>
                       )}
                       <div
                         className={twMerge(
-                          "border-mineshaft-600 grow",
+                          "grow border-mineshaft-600",
                           index < labels.length - 1 && "border-r"
                         )}
                       />
                     </div>
                   )}
-                  <div className="border-mineshaft-600 grid flex-1 grid-cols-5 border-b p-4">
+                  <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 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="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">
+                                        <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">
                                           <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 ed57ac722..2b6a630b5 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="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">
+          <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">
             <FontAwesomeIcon icon={faBan} />
             Inactive
           </Badge>
         )}
         {isSelected && (
-          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="ml-2 text-primary" 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 73c9a8607..db2406335 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-mineshaft-400 text-sm">Checking for open requests...</span>
+          <span className="text-sm text-mineshaft-400">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-mineshaft-200 text-xs">
+                <p className="text-xs text-mineshaft-200">
                   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-mineshaft-200 text-xs">This policy is safe to remove.</p>
+                <p className="text-xs text-mineshaft-200">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 e52d01920..509f5f289 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+          <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <div className="mb-4 flex items-center justify-between">
               <div>
                 <div className="flex items-start gap-1">
-                  <p className="text-mineshaft-100 text-xl font-medium">Change Requests</p>
+                  <p className="text-xl font-medium text-mineshaft-100">Change Requests</p>
                   <a
                     href="https://infisical.com/docs/documentation/platform/pr-workflows"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <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">
+                    <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">
                       <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                       <span>Docs</span>
                       <FontAwesomeIcon
@@ -175,7 +175,7 @@ export const SecretApprovalRequest = () => {
                     </div>
                   </a>
                 </div>
-                <p className="text-bunker-300 text-sm">Review pending and closed change requests</p>
+                <p className="text-sm text-bunker-300">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="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 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
                 role="button"
                 tabIndex={0}
@@ -234,9 +234,9 @@ export const SecretApprovalRequest = () => {
                   <DropdownMenuContent
                     align="end"
                     sideOffset={1}
-                    className="thin-scrollbar max-h-80 overflow-y-auto"
+                    className="max-h-80 thin-scrollbar overflow-y-auto"
                   >
-                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                       Select an Environment
                     </DropdownMenuLabel>
                     {currentProject?.environments.map(({ slug, name }) => (
@@ -271,9 +271,9 @@ export const SecretApprovalRequest = () => {
                     <DropdownMenuContent
                       align="end"
                       sideOffset={1}
-                      className="thin-scrollbar max-h-80 overflow-y-auto"
+                      className="max-h-80 thin-scrollbar overflow-y-auto"
                     >
-                      <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+                      <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                         Select an Author
                       </DropdownMenuLabel>
                       {members?.map(({ user, id }) => (
@@ -295,7 +295,7 @@ export const SecretApprovalRequest = () => {
                 )}
               </div>
             </div>
-            <div className="border-mineshaft-600 bg-mineshaft-800 flex flex-col rounded-b-md border-x border-b border-t">
+            <div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
               {isRequestListEmpty && !isFiltered && (
                 <div className="py-12">
                   <EmptyState
@@ -321,7 +321,7 @@ export const SecretApprovalRequest = () => {
                 return (
                   <div
                     key={reqId}
-                    className="border-mineshaft-600 hover:bg-mineshaft-700 flex border-b px-8 py-3 last:border-b-0"
+                    className="flex border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
                     role="button"
                     tabIndex={0}
                     onClick={() => setSelectedApprovalId(secretApproval.id)}
@@ -334,12 +334,12 @@ export const SecretApprovalRequest = () => {
                         <FontAwesomeIcon
                           icon={faCodeBranch}
                           size="sm"
-                          className="text-mineshaft-300 mr-1.5"
+                          className="mr-1.5 text-mineshaft-300"
                         />
                         {secretApproval.isReplicated
                           ? `${commits.length} secret pending import`
                           : generateCommitText(commits)}
-                        <span className="text-bunker-300 text-xs"> #{secretApproval.slug}</span>
+                        <span className="text-xs text-bunker-300"> #{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="hover:bg-mineshaft-700 flex flex-col px-8 py-4"
+                      className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
                     >
                       <div className="mb-2 flex items-center">
                         <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
-                        <Skeleton className="bg-mineshaft-600 w-1/4" />
+                        <Skeleton className="w-1/4 bg-mineshaft-600" />
                       </div>
-                      <Skeleton className="bg-mineshaft-600 w-1/2" />
+                      <Skeleton className="w-1/2 bg-mineshaft-600" />
                     </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 f62df32b0..c2eb4c61f 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="text-mineshaft-100 flex w-full flex-col items-start justify-between py-4 transition-all">
+      <div className="flex w-full flex-col items-start justify-between py-4 text-mineshaft-100 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 ? "bg-green h-8 w-8" : "h-10 w-10 bg-red-600"}`}
+              className={`flex items-center justify-center rounded-full ${isMergable ? "h-8 w-8 bg-green" : "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="text-mineshaft-300 inline-block text-xs">
+                <span className="inline-block text-xs text-mineshaft-300">
                   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-mineshaft-400 text-sm">Only approvers can merge</div>
+              <div className="text-sm text-mineshaft-400">Only approvers can merge</div>
             )}
           </div>
         </div>
         {isSoftEnforcement && !isMergable && isBypasser && (
-          <div className="border-mineshaft-600 mt-4 w-full border-t px-5">
+          <div className="mt-4 w-full border-t border-mineshaft-600 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="border-green/60 bg-green/10 flex w-full items-center justify-between rounded-md border">
+      <div className="flex w-full items-center justify-between rounded-md border border-green/60 bg-green/10">
         <div className="flex items-start space-x-2 p-4">
-          <FontAwesomeIcon icon={faCheck} className="text-green mt-0.5 text-xl" />
+          <FontAwesomeIcon icon={faCheck} className="mt-0.5 text-xl text-green" />
           <span className="flex flex-col">
             Change request merged
-            <span className="text-mineshaft-300 inline-block text-xs">
+            <span className="inline-block text-xs text-mineshaft-300">
               Merged by {statusChangeByEmail}.
             </span>
           </span>
@@ -212,12 +212,12 @@ export const SecretApprovalRequestAction = ({
     );
 
   return (
-    <div className="border-yellow/60 bg-yellow/10 flex w-full items-center justify-between rounded-md border">
+    <div className="flex w-full items-center justify-between rounded-md border border-yellow/60 bg-yellow/10">
       <div className="flex items-start space-x-2 p-4">
-        <FontAwesomeIcon icon={faUserLock} className="text-yellow mt-0.5 text-xl" />
+        <FontAwesomeIcon icon={faUserLock} className="mt-0.5 text-xl text-yellow" />
         <span className="flex flex-col">
           Secret approval has been closed
-          <span className="text-mineshaft-300 inline-block text-xs">
+          <span className="inline-block text-xs text-mineshaft-300">
             Closed by {statusChangeByEmail}
           </span>
         </span>
@@ -227,7 +227,7 @@ export const SecretApprovalRequestAction = ({
         isLoading={isStatusChanging}
         variant="plain"
         colorSchema="secondary"
-        className="text-yellow/60 hover:text-yellow mr-4"
+        className="mr-4 text-yellow/60 hover:text-yellow"
         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 e8d1ba027..c54ee8502 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border px-4 pb-4 pt-2">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pt-2 pb-4">
       <div className="flex items-center px-1 py-1">
         <div className="grow">{generateItemTitle(op)}</div>
         {!hasMerged && isStale && (
-          <div className="text-mineshaft-300 flex items-center">
+          <div className="flex items-center text-mineshaft-300">
             <FontAwesomeIcon icon={faInfoCircle} className="text-xs" />
             <span className="ml-1 text-xs">Secret has been changed (stale)</span>
           </div>
         )}
         {hasMerged && hasConflict && (
-          <div className="text-bunker-300 flex items-center space-x-1 text-xs">
+          <div className="flex items-center space-x-1 text-xs text-bunker-300">
             <Tooltip content="Merge Conflict">
-              <FontAwesomeIcon icon={faExclamationTriangle} className="text-red text-xs" />
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-xs text-red" />
             </Tooltip>
             <div>{generateConflictText(op)}</div>
           </div>
         )}
       </div>
       <div>
-        <div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
+        <div className="flex flex-col space-y-4 space-x-0 xl:flex-row xl:space-y-0 xl:space-x-4">
           {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="bg-red rounded-full px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                <div className="rounded-full bg-red px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
                   <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
                   Previous
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Key</div>
-                <p className="max-w-lg break-words text-sm">{secretVersion?.secretKey}</p>
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
+                <p className="max-w-lg text-sm break-words">{secretVersion?.secretKey}</p>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Value</div>
+                <div className="text-sm font-medium text-mineshaft-300">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 left-1 top-1/2 z-50 -translate-y-1/2">
+                        <div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
                           <Tooltip
                             position="right"
                             content="You do not have access to view the old secret value."
                           >
                             <FontAwesomeIcon
-                              className="text-mineshaft-300 pl-2"
+                              className="pl-2 text-mineshaft-300"
                               size="sm"
                               icon={faEyeSlash}
                             />
@@ -128,18 +128,18 @@ export const SecretApprovalRequestChangeItem = ({
                         valueAlwaysHidden={secretVersion?.secretValueHidden}
                         value={secretVersion?.secretValue}
                         containerClassName={twMerge(
-                          "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"
+                          "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"
                         )}
                       />
                       {!secretVersion?.secretValueHidden && (
                         <div
-                          className="absolute right-1 top-1"
+                          className="absolute top-1 right-1"
                           onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
                         >
                           <FontAwesomeIcon
                             icon={isOldSecretValueVisible ? faEyeSlash : faEye}
-                            className="border-mineshaft-500 bg-mineshaft-800 text-mineshaft-300 hover:bg-mineshaft-700 cursor-pointer rounded-md border p-1.5"
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
                           />
                         </div>
                       )}
@@ -148,20 +148,20 @@ export const SecretApprovalRequestChangeItem = ({
                 </div>
               </div>
               <div className="mb-2">
-                <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">
+                <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">
                   {secretVersion?.secretComment || (
-                    <span className="text-mineshaft-300 text-sm">-</span>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}{" "}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Tags</div>
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
                 <div className="flex flex-wrap gap-y-2">
                   {(secretVersion?.tags?.length ?? 0) ? (
                     secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
-                        className="border-mineshaft-500 bg-mineshaft-800 flex w-min items-center space-x-1.5 border"
+                        className="flex w-min items-center space-x-1.5 border border-mineshaft-500 bg-mineshaft-800"
                         key={`${secretVersion.id}-${tagId}`}
                       >
                         <div
@@ -172,24 +172,24 @@ export const SecretApprovalRequestChangeItem = ({
                       </Tag>
                     ))
                   ) : (
-                    <span className="text-mineshaft-300 text-sm">-</span>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Metadata</div>
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
                 <div>
                   {secretVersion?.secretMetadata?.length ? (
-                    <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
+                    <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
                       {secretVersion.secretMetadata?.map((el) => (
                         <div key={el.key} className="flex items-center">
                           <Tag
                             size="xs"
-                            className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
+                            className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
                           >
                             <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                             <Tooltip
-                              className="max-w-lg whitespace-normal break-words"
+                              className="max-w-lg break-words whitespace-normal"
                               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="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
+                            className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
                           >
                             <Tooltip
-                              className="max-w-lg whitespace-normal break-words"
+                              className="max-w-lg break-words whitespace-normal"
                               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-mineshaft-300 text-sm">-</p>
+                    <p className="text-sm text-mineshaft-300">-</p>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Multi-line Encoding</div>
+                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
                 <div className="text-sm">
                   {secretVersion?.skipMultilineEncoding?.toString() || (
-                    <span className="text-mineshaft-300 text-sm">-</span>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}{" "}
                 </div>
               </div>
             </div>
           ) : (
-            <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">
+            <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">
               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 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                <div className="rounded-full bg-green-600 px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
                   <FontAwesomeIcon icon={faCircleCheck} className="pr-1 text-white" />
                   New
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Key</div>
-                <div className="max-w-md break-words text-sm">{newVersion?.secretKey} </div>
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
+                <div className="max-w-md text-sm break-words">{newVersion?.secretKey} </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Value</div>
+                <div className="text-sm font-medium text-mineshaft-300">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 left-1 top-1/2 z-50 -translate-y-1/2">
+                        <div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
                           <Tooltip
                             position="right"
                             content="You do not have access to view the new secret value."
                           >
                             <FontAwesomeIcon
-                              className="text-mineshaft-300 pl-2"
+                              className="pl-2 text-mineshaft-300"
                               size="sm"
                               icon={faEyeSlash}
                             />
@@ -274,18 +274,18 @@ export const SecretApprovalRequestChangeItem = ({
                         isVisible={isNewSecretValueVisible}
                         value={newVersion?.secretValue ?? secretVersion?.secretValue}
                         containerClassName={twMerge(
-                          "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"
+                          "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"
                         )}
                       />
                       {!newVersion?.secretValueHidden && (
                         <div
-                          className="absolute right-1 top-1"
+                          className="absolute top-1 right-1"
                           onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
                         >
                           <FontAwesomeIcon
                             icon={isNewSecretValueVisible ? faEyeSlash : faEye}
-                            className="border-mineshaft-500 bg-mineshaft-800 text-mineshaft-300 hover:bg-mineshaft-700 cursor-pointer rounded-md border p-1.5"
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
                           />
                         </div>
                       )}
@@ -294,20 +294,20 @@ export const SecretApprovalRequestChangeItem = ({
                 </div>
               </div>
               <div className="mb-2">
-                <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">
+                <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">
                   {(newVersion?.secretComment ?? secretVersion?.secretComment) || (
-                    <span className="text-mineshaft-300 text-sm">-</span>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}{" "}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Tags</div>
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
                 <div className="flex flex-wrap gap-y-2">
                   {(newVersion?.tags?.length ?? 0) ? (
                     newVersion?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
-                        className="border-mineshaft-500 bg-mineshaft-800 flex w-min items-center space-x-1.5 border"
+                        className="flex w-min items-center space-x-1.5 border border-mineshaft-500 bg-mineshaft-800"
                         key={`${newVersion.id}-${tagId}`}
                       >
                         <div
@@ -318,23 +318,23 @@ export const SecretApprovalRequestChangeItem = ({
                       </Tag>
                     ))
                   ) : (
-                    <span className="text-mineshaft-300 text-sm">-</span>
+                    <span className="text-sm text-mineshaft-300">-</span>
                   )}
                 </div>
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Metadata</div>
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
                 {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.length ? (
-                  <div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
+                  <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
                     {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.map((el) => (
                       <div key={el.key} className="flex items-center">
                         <Tag
                           size="xs"
-                          className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
+                          className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
                         >
                           <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
                           <Tooltip
-                            className="max-w-lg whitespace-normal break-words"
+                            className="max-w-lg break-words whitespace-normal"
                             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="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
+                          className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
                         >
                           <Tooltip
-                            className="max-w-lg whitespace-normal break-words"
+                            className="max-w-lg break-words whitespace-normal"
                             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-mineshaft-300 text-sm">-</p>
+                  <p className="text-sm text-mineshaft-300">-</p>
                 )}
               </div>
               <div className="mb-2">
-                <div className="text-mineshaft-300 text-sm font-medium">Multi-line Encoding</div>
+                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
                 <div className="text-sm">
                   {newVersion?.skipMultilineEncoding?.toString() ??
                     secretVersion?.skipMultilineEncoding?.toString() ?? (
-                      <span className="text-mineshaft-300 text-sm">-</span>
+                      <span className="text-sm text-mineshaft-300">-</span>
                     )}{" "}
                 </div>
               </div>
             </div>
           ) : (
-            <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">
+            <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">
               {" "}
               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 5332c6d2f..85b1e572a 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="bg-bunker-800 sticky -top-8 z-20 flex items-center space-x-4 pb-6 pt-2">
+        <div className="sticky -top-8 z-20 flex items-center space-x-4 bg-bunker-800 pt-2 pb-6">
           <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 border-mineshaft-600 bg-mineshaft-800 placeholder:text-mineshaft-400 mt-2 h-40 border"
+                              className="text-md mt-2 h-40 border border-mineshaft-600 bg-mineshaft-800 placeholder:text-mineshaft-400"
                             />
                           </FormControl>
                         )}
@@ -317,7 +317,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                                 <div className="flex items-center gap-2">
                                   <RadioGroupItem
                                     id="approve"
-                                    className="text-green focus:ring-mineshaft-500 h-4 w-4 rounded-full border border-gray-400 focus:ring-2"
+                                    className="h-4 w-4 rounded-full border border-gray-400 text-green focus:ring-2 focus:ring-mineshaft-500"
                                     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="text-red focus:ring-mineshaft-500 h-4 w-4 rounded-full border border-gray-400 focus:ring-2"
+                                    className="h-4 w-4 rounded-full border border-gray-400 text-red focus:ring-2 focus:ring-mineshaft-500"
                                     value={ApprovalStatus.REJECTED}
                                     aria-labelledby="reject-label"
                                   >
@@ -383,19 +383,19 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               </DropdownMenu>
             )}
         </div>
-        <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 className="mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
           <div>
             {secretApprovalRequestDetails.isReplicated ? (
-              <div className="text-bunker-300 text-sm">
+              <div className="text-sm text-bunker-300">
                 A secret import in
                 <p
-                  className="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
+                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <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">
+                <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">
                     <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="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
+                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {replicatedImport?.importEnv?.slug}
                 </p>
-                <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">
+                <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">
                     <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-bunker-300 text-sm">
+              <div className="text-sm text-bunker-300">
                 <p className="inline">Secret(s) in</p>
                 <p
-                  className="bg-mineshaft-600/80 text-mineshaft-300 mx-1 inline rounded-sm"
+                  className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
                   style={{ padding: "2px 4px" }}
                 >
                   {secretApprovalRequestDetails?.environment}
                 </p>
-                <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">
+                <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">
                     <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="border-mineshaft-600 my-4 flex flex-col items-center rounded-lg border">
+        <div className="my-4 flex flex-col items-center rounded-lg border border-mineshaft-600">
           {secretApprovalRequestDetails?.policy?.approvers
             .filter((requiredApprover) => reviewedUsers?.[requiredApprover.userId])
             .map((requiredApprover) => {
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="bg-mineshaft-800 text-mineshaft-100 flex w-full flex-col rounded-md p-4 text-sm"
+                  className="flex w-full flex-col rounded-md bg-mineshaft-800 p-4 text-sm text-mineshaft-100"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div>
@@ -510,7 +510,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               );
             })}
         </div>
-        <div className="border-mineshaft-600 bg-mineshaft-800 mt-2 flex items-center space-x-6 rounded-lg border">
+        <div className="mt-2 flex items-center space-x-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800">
           <SecretApprovalRequestAction
             canApprove={canApprove}
             isBypasser={isBypasser === undefined ? true : isBypasser}
@@ -524,8 +524,8 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
           />
         </div>
       </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="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="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="border-mineshaft-600 bg-mineshaft-800 flex flex-nowrap items-center justify-between space-x-2 rounded-sm border px-2 py-1"
+                  className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm border border-mineshaft-600 bg-mineshaft-800 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="text-mineshaft-300 ml-1"
+                            className="ml-1 text-mineshaft-300"
                           />
                         )}
                       </div>
@@ -577,13 +577,13 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                         <FontAwesomeIcon
                           icon={faComment}
                           size="xs"
-                          className="text-mineshaft-300 mr-1.5"
+                          className="mr-1.5 text-mineshaft-300"
                         />
                       </Tooltip>
                     )}
                     <div className="flex gap-2">
                       <Tooltip
-                        className="z-500! relative"
+                        className="relative z-500!"
                         content={
                           <span className="text-sm">
                             Status:{" "}
@@ -612,7 +612,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
               const { isOrgMembershipActive } = reviewer;
               return (
                 <div
-                  className="bg-mineshaft-800 flex flex-nowrap items-center justify-between space-x-2 rounded-sm px-2 py-1"
+                  className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm bg-mineshaft-800 px-2 py-1"
                   key={`required-approver-${reviewer.userId}`}
                 >
                   <div
@@ -622,7 +622,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
                     )}
                   >
                     <Tooltip
-                      className="z-500! relative"
+                      className="relative z-500!"
                       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="text-mineshaft-300 ml-1"
+                            className="ml-1 text-mineshaft-300"
                           />
                         )}
                       </div>
@@ -644,16 +644,16 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
 
                   <div>
                     {reviewer.comment && (
-                      <Tooltip className="z-500! relative" content={reviewer.comment}>
+                      <Tooltip className="relative z-500!" content={reviewer.comment}>
                         <FontAwesomeIcon
                           icon={faComment}
                           size="xs"
-                          className="text-mineshaft-300 mr-1"
+                          className="mr-1 text-mineshaft-300"
                         />
                       </Tooltip>
                     )}
                     <Tooltip
-                      className="z-500! relative"
+                      className="relative z-500!"
                       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 0709be795..2760e8626 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="text-mineshaft-50 dark:scheme-dark flex h-full w-full flex-col items-center justify-center px-6">
+      <div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
         <SecretV2MigrationSection />
       </div>
     );
 
   return (
-    <div className="text-mineshaft-50 dark:scheme-dark container mx-auto flex max-w-7xl flex-col">
+    <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
       <PageHeader
         title="Secrets Management"
         description={
           <p className="text-md text-bunker-300">
             Inject your secrets using
             <a
-              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
               href="https://infisical.com/docs/cli/overview"
               target="_blank"
               rel="noopener noreferrer"
@@ -776,7 +776,7 @@ const Page = () => {
             </a>
             ,
             <a
-              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
               href="https://infisical.com/docs/documentation/getting-started/api"
               target="_blank"
               rel="noopener noreferrer"
@@ -785,7 +785,7 @@ const Page = () => {
             </a>
             ,
             <a
-              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
               href="https://infisical.com/docs/sdks/overview"
               target="_blank"
               rel="noopener noreferrer"
@@ -794,7 +794,7 @@ const Page = () => {
             </a>
             , and
             <a
-              className="text-mineshaft-300 decoration-primary-800 hover:text-mineshaft-100 hover:decoration-primary-600 ml-1 underline underline-offset-4 duration-200"
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
               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(
-              "thin-scrollbar bg-mineshaft-800 text-bunker-300 mt-3 overflow-y-auto overflow-x-hidden rounded-md text-left text-sm",
+              "mt-3 thin-scrollbar overflow-x-hidden overflow-y-auto rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
               isNotEmpty && "rounded-b-none"
             )}
           >
@@ -855,7 +855,7 @@ const Page = () => {
               {isNotEmpty && (
                 <div
                   className={twMerge(
-                    "border-mineshaft-600 bg-mineshaft-800 sticky top-0 flex border-b font-medium"
+                    "sticky top-0 flex border-b border-mineshaft-600 bg-mineshaft-800 font-medium"
                   )}
                 >
                   <Tooltip
@@ -888,11 +888,11 @@ const Page = () => {
                       }`}
                       onMouseDown={handleMouseDown}
                     />
-                    <div className="pointer-events-none absolute -right-[0.04rem] top-2 z-30">
+                    <div className="pointer-events-none absolute top-2 -right-[0.04rem] z-30">
                       <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
                     </div>
                     <div
-                      className="border-mineshaft-600 flex shrink-0 items-center border-r py-2 pl-4"
+                      className="flex shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
                       style={{ width: colWidth }}
                       role="button"
                       tabIndex={0}
@@ -916,14 +916,14 @@ const Page = () => {
                 (!canReadSecret ? (
                   <div
                     className={twMerge(
-                      "border-l-primary bg-mineshaft-700 flex border-l-2 px-4 py-2",
-                      isNotEmpty ? "border-b-mineshaft-600 border-b" : ""
+                      "flex border-l-2 border-l-primary bg-mineshaft-700 px-4 py-2",
+                      isNotEmpty ? "border-b border-b-mineshaft-600" : ""
                     )}
                   >
                     <div className="flex items-center text-sm">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
-                        className="text-primary ml-[0.15rem] mr-[1.65rem]"
+                        className="mr-[1.65rem] ml-[0.15rem] text-primary"
                       />
                       <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="border-b-mineshaft-600 border-l-primary bg-mineshaft-700 flex border-b border-l-2 px-4 py-2">
+                  <div className="flex border-b border-l-2 border-b-mineshaft-600 border-l-primary bg-mineshaft-700 px-4 py-2">
                     <div className="flex items-center text-sm">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
-                        className="text-primary ml-[0.15rem] mr-[1.65rem]"
+                        className="mr-[1.65rem] ml-[0.15rem] text-primary"
                       />
                       <span>
                         You do not have permission to {!canEditSecrets ? "edit" : ""}
@@ -1049,7 +1049,7 @@ const Page = () => {
                     secretRotationCount={totalSecretRotationCount}
                   />
                 }
-                className="border-t-mineshaft-600 rounded-b-md border-t border-solid"
+                className="rounded-b-md border-t border-solid border-t-mineshaft-600"
                 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 ccdf56982..d31c83512 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="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
-                    <DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
+                  <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
+                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
                       <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="bg-mineshaft-600 rounded-l-none p-3"
+                className="rounded-l-none bg-mineshaft-600 p-3"
               >
                 <FontAwesomeIcon icon={faAngleDown} />
               </IconButton>
@@ -1065,11 +1065,11 @@ export const ActionBar = ({
           isMultiSelectActive && "h-16"
         )}
       >
-        <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="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
           <div className="mr-2 text-sm">{Object.keys(selectedSecrets).length} Selected</div>
           <button
             type="button"
-            className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
             onClick={resetSelectedSecret}
           >
             Unselect All
@@ -1256,7 +1256,7 @@ export const ActionBar = ({
         onOpenChange={(open) => handlePopUpToggle("requestAccess", open)}
       >
         <ModalContent title="Access Restricted">
-          <p className="text-bunker-300 mb-2">You do not have permission to perform this action.</p>
+          <p className="mb-2 text-bunker-300">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 bcbb1682e..692493980 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -273,7 +273,7 @@ export const AwsElastiCacheInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 2bc9cf322..9f9cc01aa 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -261,7 +261,7 @@ export const AwsIamInputForm = ({
                     <Select
                       value={value}
                       onValueChange={(val) => onChange(val)}
-                      className="border-mineshaft-500 w-full border"
+                      className="w-full border border-mineshaft-500"
                       position="popper"
                       dropdownContainerClassName="max-w-none"
                     >
@@ -289,7 +289,7 @@ export const AwsIamInputForm = ({
                       <Select
                         value={value}
                         onValueChange={(val) => onChange(val)}
-                        className="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         position="popper"
                         dropdownContainerClassName="max-w-none"
                       >
@@ -300,7 +300,7 @@ export const AwsIamInputForm = ({
                           Temporary Credentials
                         </SelectItem>
                       </Select>
-                      <div className="text-mineshaft-300 mt-1 text-xs">
+                      <div className="mt-1 text-xs text-mineshaft-300">
                         {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 1a3973acb..05f85a9e6 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -267,10 +267,10 @@ export const AzureEntraIdInputForm = ({
             </div>
           </div>
           <div>
-            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Select Users
             </div>
-            <div className="text-mineshaft-400 mb-4 flex items-center text-sm font-normal">
+            <div className="mb-4 flex items-center text-sm font-normal text-mineshaft-400">
               &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="text-mineshaft-300 hover:text-mineshaft-200 ml-4 cursor-default">
+                                <span className="ml-4 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
                                   {(() => {
                                     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 3ca7bdc0e..56a914977 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div>
@@ -281,7 +281,7 @@ export const AzureSqlDatabaseInputForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -389,14 +389,14 @@ export const AzureSqlDatabaseInputForm = ({
                 </div>
               </div>
               <div>
-                <div className="mb-2 mt-2">
+                <div className="mt-2 mb-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 data-[state=checked]:bg-green/80 shadow-inner"
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                           id="azure-sql-ds-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={value}
@@ -427,7 +427,7 @@ export const AzureSqlDatabaseInputForm = ({
                     )}
                   />
                 )}
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -452,7 +452,7 @@ export const AzureSqlDatabaseInputForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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="bg-mineshaft-700 mb-2 mt-4 w-full">
+                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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 99fad395b..ef05d8a83 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -301,7 +301,7 @@ export const CassandraInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 5c130d473..3cc41bf2c 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-mineshaft-300 text-sm font-medium">Scopes</label>
+        <label className="text-sm font-medium text-mineshaft-300">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="border-mineshaft-600 bg-mineshaft-700 space-y-3 rounded-sm border p-3"
+          className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
         >
           <div className="flex items-center justify-between">
-            <h5 className="text-mineshaft-200 text-xs font-medium">Scope {scopeIndex + 1}</h5>
+            <h5 className="text-xs font-medium text-mineshaft-200">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-mineshaft-300 text-xs font-medium">Collections</label>
+              <label className="text-xs font-medium text-mineshaft-300">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-mineshaft-400 text-xs italic">
+              <div className="text-xs text-mineshaft-400 italic">
                 No collections specified (access to all collections in scope)
               </div>
             )}
@@ -155,8 +155,8 @@ const BucketScopesConfiguration = ({
       ))}
 
       {scopeFields.length === 0 && (
-        <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">
+        <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">
             No scopes configured (access to all scopes in bucket)
           </p>
           <Button
@@ -462,7 +462,7 @@ export const CouchbaseInputForm = ({
             </div>
           </div>
           <div>
-            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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-mineshaft-200 text-sm font-medium">
+                        <div className="text-sm font-medium text-mineshaft-200">
                           Advanced Bucket Configuration
                         </div>
-                        <div className="text-mineshaft-400 text-sm">
+                        <div className="text-sm text-mineshaft-400">
                           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="border-mineshaft-600 bg-mineshaft-800 space-y-4 rounded-sm border p-4"
+                            className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
                           >
                             <div className="flex items-center justify-between">
-                              <h4 className="text-mineshaft-200 text-sm font-medium">
+                              <h4 className="text-sm font-medium text-mineshaft-200">
                                 Bucket {bucketIndex + 1}
                               </h4>
                               <IconButton
@@ -683,8 +683,8 @@ export const CouchbaseInputForm = ({
                         ))}
 
                       {(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
-                        <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>
+                        <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>
                           <Button
                             type="button"
                             variant="outline_bg"
@@ -741,23 +741,23 @@ export const CouchbaseInputForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                 <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="bg-mineshaft-600 text-mineshaft-300 flex h-4 w-4 cursor-help items-center justify-center rounded-full text-xs">
+                        <div className="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-mineshaft-600 text-xs text-mineshaft-300">
                           ?
                         </div>
                       </Tooltip>
                     </div>
                   </AccordionTrigger>
                   <AccordionContent>
-                    <div className="text-mineshaft-300 mb-4 text-sm">
+                    <div className="mb-4 text-sm text-mineshaft-300">
                       Set constraints on the generated Couchbase user password (8-128 characters)
                       <br />
-                      <span className="text-mineshaft-400 text-xs">
+                      <span className="text-xs text-mineshaft-400">
                         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 6b8e6f6f3..3a9b8729a 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="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]" />
+              <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]" />
                 <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="text-mineshaft-300 mb-4">Select a service to connect to:</div>
+              <div className="mb-4 text-mineshaft-300">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="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"
+                    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"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -253,7 +253,7 @@ export const CreateDynamicSecretForm = ({
                     }}
                   >
                     {icon}
-                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                    <div className="text-center text-sm whitespace-pre-wrap">{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 6d78eee05..31d68e877 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -342,7 +342,7 @@ export const ElasticSearchInputForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="text-primary-400 cursor-pointer">
+                          <span className="cursor-pointer text-primary-400">
                             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 59b10dd73..a208b1973 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 49a32d19b..776511ac4 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 bottom-px right-1"
+                          className="relative right-1 bottom-px"
                         />
                       </Tooltip>
                     }
@@ -137,7 +137,7 @@ export const GithubInputForm = ({
             </div>
           </div>
           <div>
-            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 f291535fe..8e9206695 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -317,7 +317,7 @@ export const KubernetesInputForm = ({
                                   isDisabled={!isAllowed}
                                   value={value}
                                   onValueChange={onChange}
-                                  className="border-mineshaft-500 w-full border"
+                                  className="w-full border border-mineshaft-500"
                                   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="text-mineshaft-400 mr-3 flex items-center text-sm">
+                      <span className="mr-3 flex items-center text-sm text-mineshaft-400">
                         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 data-[state=checked]:bg-green/80 shadow-inner"
+                            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                             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 a5b386d55..824538706 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             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 d43eedf1f..e19c09576 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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-mineshaft-400 text-xs">Database Name</span>}
+                      {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs"
+                          className="text-xs text-mineshaft-400"
                           isOptional
                         />
                       )}
@@ -318,7 +318,7 @@ export const MongoAtlasInputForm = ({
                       {i === 0 && (
                         <FormLabel
                           label="Role"
-                          className="text-mineshaft-400 text-xs"
+                          className="text-xs text-mineshaft-400"
                           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="bg-mineshaft-700 mb-2 w-full">
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                 <AccordionItem value="advance-section">
                   <AccordionTrigger>Advanced</AccordionTrigger>
                   <AccordionContent>
@@ -403,7 +403,7 @@ export const MongoAtlasInputForm = ({
                             {i === 0 && (
                               <FormLabel
                                 label="Label"
-                                className="text-mineshaft-400 text-xs"
+                                className="text-xs text-mineshaft-400"
                                 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-mineshaft-400 text-xs">Type</span>}
+                            {i === 0 && <span className="text-xs text-mineshaft-400">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 3e1577c62..0cdb72e27 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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="mb-3 mt-1 flex flex-col space-y-2">
+              <div className="mt-1 mb-3 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 fcea731fc..137ee0d95 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -349,7 +349,7 @@ export const RabbitMqInputForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="text-primary-400 cursor-pointer">
+                          <span className="cursor-pointer text-primary-400">
                             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 354da8178..940c43c9c 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -268,7 +268,7 @@ export const RedisInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 a97d221c9..b6909af2a 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -265,7 +265,7 @@ sp_droplogin '{{username}}';`
                 />
               </div>
               <div>
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 c9f9abe7a..66b974f66 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -266,7 +266,7 @@ DROP USER {{username}};`,
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 547d29160..abbb115a3 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -249,7 +249,7 @@ export const SnowflakeInputForm = ({
                   )}
                 />
               </div>
-              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                 <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 cf0009681..4119cf94d 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div>
@@ -336,7 +336,7 @@ export const SqlDatabaseInputForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               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="text-mineshaft-400 pb-0.5 pl-1 text-sm">Service</div>
+              <div className="pb-0.5 pl-1 text-sm text-mineshaft-400">Service</div>
               <Controller
                 control={control}
                 name="provider.client"
@@ -376,7 +376,7 @@ export const SqlDatabaseInputForm = ({
                         onChange(val);
                         handleDatabaseChange(val as SqlProviders);
                       }}
-                      className="border-mineshaft-500 w-full border"
+                      className="w-full border border-mineshaft-500"
                     >
                       <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="mb-2 mt-2">
+                  <div className="mt-2 mb-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 data-[state=checked]:bg-green/80 shadow-inner"
+                            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                             id="sql-ds-ssl-enabled"
                             thumbClassName="bg-mineshaft-800"
                             isChecked={value}
@@ -499,7 +499,7 @@ export const SqlDatabaseInputForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -524,7 +524,7 @@ export const SqlDatabaseInputForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         Customize SQL statements for managing database user lifecycle
                       </div>
                       <Controller
@@ -587,11 +587,11 @@ export const SqlDatabaseInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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 ca5605779..7f5693e33 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 54a5e566d..98cd41165 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div>
@@ -250,7 +250,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               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="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
                   <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="bg-mineshaft-700 mb-2 mt-4 w-full">
+                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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 52a56ff64..68d2d8cd0 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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   <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 421e801db..c51461fb0 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 resize-none! bg-mineshaft-900 w-full"
+              className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
               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 b5a1f6fc2..d0a9ed886 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-mineshaft-600 border-t pt-4">
+          <div className="border-t border-mineshaft-600 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 724c440eb..bfbb582a3 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="focus:outline-hidden mr-1 flex h-6 w-6 items-center justify-center rounded-sm"
+              className="mr-1 flex h-6 w-6 items-center justify-center rounded-sm focus:outline-hidden"
               disabled={!hasContents}
               aria-label={open ? "Collapse folder" : "Expand folder"}
             >
@@ -149,7 +149,7 @@ const Folder: React.FC<FolderProps> = ({
           </label>
 
           {allItemIds.length > 0 && (
-            <span className="text-mineshaft-400 ml-2 text-xs">
+            <span className="ml-2 text-xs text-mineshaft-400">
               {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="bg-mineshaft-600 absolute bottom-0 left-5 top-0 w-px" />
+            <div className="absolute top-0 bottom-0 left-5 w-px bg-mineshaft-600" />
             {structure.items.map((item) => (
               <div key={item.id} className="group ml-6 flex items-center rounded-sm px-2 py-1">
-                <div className="ml-6 mr-2">
+                <div className="mr-2 ml-6">
                   <FontAwesomeIcon icon={faKey} className="h-3 w-3" />
                 </div>
                 {!isDisabled && (
@@ -294,11 +294,11 @@ export const SecretTreeView: React.FC<TreeViewProps> = ({
   }, [selectedItems]);
 
   return (
-    <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="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="h-[25vh] overflow-auto p-3">
           {isEmptyData ? (
-            <div className="text-mineshaft-300 flex h-full w-full items-center justify-center text-center">
+            <div className="flex h-full w-full items-center justify-center text-center text-mineshaft-300">
               <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 pb-2 pr-2 pt-2">
-            <h3 className="text-mineshaft-400 flex items-center">
+          <div className="flex justify-end pt-2 pr-2 pb-2">
+            <h3 className="flex items-center text-mineshaft-400">
               {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 8aa947d84..18f83cc20 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="border-yellow/30 bg-mineshaft-800 rounded-lg border shadow-2xl">
+              <div className="rounded-lg border border-yellow/30 bg-mineshaft-800 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="text-mineshaft-100 font-medium">Pending Changes</span>
+                      <span className="font-medium text-mineshaft-100">Pending Changes</span>
                       <Badge variant="primary" className="text-xs">
                         {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
                       </Badge>
                     </div>
 
                     {/* Description */}
-                    <p className="text-mineshaft-400 text-sm leading-5">
+                    <p className="text-sm leading-5 text-mineshaft-400">
                       Review pending changes and commit them to apply the updates.
                     </p>
                   </div>
 
                   {/* Right Buttons */}
-                  <div className="ml-6 mt-0.5 flex items-center gap-3">
+                  <div className="mt-0.5 ml-6 flex items-center gap-3">
                     <Button
                       size="sm"
                       onClick={() => clearAllPendingChanges({ projectId, environment, secretPath })}
                       isDisabled={totalChangesCount === 0}
                       variant="outline_bg"
-                      className="hover:border-red/40 hover:bg-red/10 px-4"
+                      className="px-4 hover:border-red/40 hover:bg-red/10"
                     >
                       Discard
                     </Button>
@@ -392,7 +392,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
                 {/* Folder Changes */}
                 {pendingChanges.folders.length > 0 && (
                   <div>
-                    <h4 className="border-mineshaft-700 text-mineshaft-200 mb-4 flex items-center gap-2 border-b pb-2 text-sm font-medium">
+                    <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={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="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" />
+                    <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" />
                       Secrets ({pendingChanges.secrets.length})
                     </h4>
                     <div>
@@ -435,7 +435,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
 
             {/* Commit Message */}
             <div>
-              <label className="text-mineshaft-200 mb-2 block text-sm font-medium">
+              <label className="mb-2 block text-sm font-medium text-mineshaft-200">
                 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 d66b69d8d..45f1128ed 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="border-mineshaft-500 bg-mineshaft-700 rounded-b-lg border border-solid"
+          className="rounded-b-lg border border-solid border-mineshaft-500 bg-mineshaft-700"
           count={totalCount}
           page={page}
           perPage={perPage}
@@ -303,11 +303,11 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
           onChangePerPage={handlePerPageChange}
         />
       )}
-      <div className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
+      <div className="flex thin-scrollbar flex-1 flex-col overflow-y-auto">
         <TableContainer
           ref={tableRef}
           className={twMerge(
-            "border-mineshaft-500 bg-mineshaft-700 mt-4 flex flex-1 flex-col",
+            "mt-4 flex flex-1 flex-col border-mineshaft-500 bg-mineshaft-700",
             !isTableEmpty && "rounded-b-none"
           )}
         >
@@ -323,7 +323,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
           ) : isTableEmpty ? (
             <EmptyState
               titleClassName="text-base"
-              className="bg-mineshaft-700 m-auto text-lg"
+              className="m-auto bg-mineshaft-700 text-lg"
               title={
                 isTableFiltered
                   ? "No secrets to compare with current filters"
@@ -331,7 +331,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
               }
             />
           ) : (
-            <Table className="bg-mineshaft-700 border-collapse">
+            <Table className="border-collapse bg-mineshaft-700">
               <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 -right-[0.02rem] top-[0.67rem] z-30">
+                      <div className="pointer-events-none absolute top-[0.67rem] -right-[0.02rem] z-30">
                         <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
                       </div>
-                      <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">
+                      <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">
                         Name
                         <IconButton
                           variant="plain"
-                          className="ml-1 mt-[0.1rem]"
+                          className="mt-[0.1rem] ml-1"
                           ariaLabel="sort"
                           onClick={() =>
                             setOrderDirection((prev) =>
@@ -376,12 +376,12 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
 
                     return (
                       <Th
-                        className="whitespace-nowrap border-none p-0 text-center"
+                        className="border-none p-0 text-center whitespace-nowrap"
                         key={`environment-${slug}`}
                       >
                         <div
                           className={twMerge(
-                            "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",
+                            "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",
                             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] font-normal leading-3"
+                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] leading-3 font-normal"
                               >
                                 <FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
                                 {missingKeyCount}
@@ -513,7 +513,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
-              className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+              className="max-h-[70vh] thin-scrollbar 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 9e0e364d5..16de6533b 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="border-mineshaft-500 group">
+    <Tr isHoverable className="group border-mineshaft-500">
       <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 dbc48a6ac..a3d672e13 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="border-mineshaft-500 group">
+    <Tr isHoverable className="group border-mineshaft-500">
       <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 ad7bd01ba..fe2295fa7 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="h-[40px]! bg-mineshaft-800 flex items-center justify-between gap-x-2 px-4">
+                  <div className="flex h-[40px]! items-center justify-between gap-x-2 bg-mineshaft-800 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 bg-mineshaft-900! w-full border-b-0">
-                      <tbody className="!last:border-b-0 border-mineshaft-600 w-full border-t-2">
+                    <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">
                         {secrets.map((secret, index) => {
                           return (
                             <Tooltip
@@ -129,10 +129,10 @@ export const SecretRotationRow = ({
                                   style={{
                                     width: colWidth
                                   }}
-                                  className="h-px! p-0! border-none"
+                                  className="h-px! border-none p-0!"
                                 >
                                   <div
-                                    className="border-mineshaft-500 flex h-full flex-1 items-center border-r px-4 py-1"
+                                    className="flex h-full flex-1 items-center border-r border-mineshaft-500 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 87db191f6..073dfd725 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 pl-3 pr-2">
+      <div className="flex-1 pr-2 pl-3">
         <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 179ae05fc..075726d1b 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="border-mineshaft-500 group"
+          className="group border-mineshaft-500"
         >
           <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 1d047f201..2313e2694 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="border-mineshaft-500 group"
+        className="group border-mineshaft-500"
       >
         <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="border-mineshaft-600 bg-mineshaft-800 h-10 border-b-2">
+                    <tr className="h-10 border-b-2 border-mineshaft-600 bg-mineshaft-800">
                       <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 right-3 top-[4px] ml-auto mr-1 mt-1 w-min">
+                      <div className="absolute top-[4px] right-3 mt-1 mr-1 ml-auto w-min">
                         <Tooltip
                           side="left"
                           content={isSecretVisible ? "Hide Values" : "Reveal Values"}
@@ -160,7 +160,7 @@ export const SecretRow = ({
                       </div>
                     </tr>
                   </thead>
-                  <tbody className="border-mineshaft-600 border-t-2">
+                  <tbody className="border-t-2 border-mineshaft-600">
                     {environments.map(({ name, slug }) => {
                       const secret = getSecretByKey(slug, secretKey);
 
@@ -170,10 +170,10 @@ export const SecretRow = ({
                       return (
                         <tr
                           key={`secret-expanded-${slug}-${secretKey}`}
-                          className="hover:bg-mineshaft-700/70 h-full"
+                          className="h-full hover:bg-mineshaft-700/70"
                         >
                           <td
-                            className="p-0! h-px border-none"
+                            className="h-px border-none p-0!"
                             style={{
                               width: colWidth
                             }}
@@ -183,7 +183,7 @@ export const SecretRow = ({
                               style={{
                                 width: colWidth
                               }}
-                              className="border-mineshaft-500 flex h-full min-h-[40px] w-32 items-center space-x-2 border-r px-4"
+                              className="flex h-full min-h-[40px] w-32 items-center space-x-2 border-r border-mineshaft-500 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 21087cd6a..fa5d2f8bb 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-mineshaft-500 group-hover:bg-mineshaft-600 border-b bg-clip-padding p-0",
+        "border-b border-mineshaft-500 bg-clip-padding p-0 group-hover:bg-mineshaft-600",
         (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(
-          "border-mineshaft-500 flex h-10 items-center justify-center px-0 py-3",
+          "flex h-10 items-center justify-center border-mineshaft-500 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 d92d8e269..079b563d5 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="border-mineshaft-500 bg-mineshaft-700 group-hover:bg-mineshaft-600 sticky left-0 z-10 border-b bg-clip-padding p-0"
+      className="sticky left-0 z-10 border-b border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 group-hover:bg-mineshaft-600"
       style={{
         width: colWidth
       }}
@@ -34,7 +34,7 @@ export const ResourceNameCell = ({
           style={{
             width: colWidth
           }}
-          className="border-mineshaft-600 flex h-10 items-center space-x-5 border-r px-4 py-2.5"
+          className="flex h-10 items-center space-x-5 border-r border-mineshaft-600 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 2227c6f8d..dd0561495 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="bg-mineshaft-500 rounded-md px-1 py-0.5">
+                    <code className="rounded-md bg-mineshaft-500 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 15e2588f3..1a16e6e4e 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 right-2 top-7"
+          className="absolute top-7 right-2"
           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="text-mineshaft-300 mt-2 text-xs">
+        <div className="mt-2 text-xs text-mineshaft-300">
           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="text-mineshaft-700 mx-auto h-40" />;
+    return <Spinner className="mx-auto h-40 text-mineshaft-700" />;
   }
 
   // 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 27ec6241e..1ef140193 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="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
+              className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
               role="button"
               tabIndex={0}
               onKeyDown={(evt) => {
@@ -182,7 +182,7 @@ export const DynamicSecretListView = ({
                   </Tooltip>
                 )}
               </div>
-              <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
+              <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 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 4c12bd16c..f741e8215 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -265,7 +265,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                 <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 91fe4535e..687d0d52b 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="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
+          <div className="mb-4 border-b border-b-mineshaft-600 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="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     position="popper"
                     dropdownContainerClassName="max-w-none"
                   >
@@ -263,7 +263,7 @@ export const EditDynamicSecretAwsIamForm = ({
                     <Select
                       value={value}
                       onValueChange={(val) => onChange(val)}
-                      className="border-mineshaft-500 w-full border"
+                      className="w-full border border-mineshaft-500"
                       position="popper"
                       dropdownContainerClassName="max-w-none"
                     >
@@ -274,7 +274,7 @@ export const EditDynamicSecretAwsIamForm = ({
                         Temporary Credentials
                       </SelectItem>
                     </Select>
-                    <div className="text-mineshaft-300 mt-1 text-xs">
+                    <div className="mt-1 text-xs text-mineshaft-300">
                       {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 c6d772d98..36be1b8e5 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div>
@@ -272,7 +272,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                               isDisabled={!isAllowed}
                               value={value}
                               onValueChange={onChange}
-                              className="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -376,14 +376,14 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                 </div>
               </div>
               <div>
-                <div className="mb-2 mt-2">
+                <div className="mt-2 mb-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 data-[state=checked]:bg-green/80 shadow-inner"
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                           id="azure-sql-edit-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={value}
@@ -414,7 +414,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                     )}
                   />
                 )}
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="advanced">
                     <AccordionTrigger>
                       Creation, Revocation & Renew Statements (optional)
@@ -438,7 +438,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
                           </FormControl>
                         )}
                       />
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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="bg-mineshaft-700 mb-2 mt-4 w-full">
+                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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 408844105..3b95dc8d3 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="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
+          <div className="mb-4 border-b border-b-mineshaft-600 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="bg-mineshaft-700 w-full">
+              <Accordion type="multiple" className="w-full bg-mineshaft-700">
                 <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 536809921..4282ae256 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-mineshaft-300 text-sm font-medium">Scopes</label>
+        <label className="text-sm font-medium text-mineshaft-300">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="border-mineshaft-600 bg-mineshaft-700 space-y-3 rounded-sm border p-3"
+          className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
         >
           <div className="flex items-center justify-between">
-            <h5 className="text-mineshaft-200 text-xs font-medium">Scope {scopeIndex + 1}</h5>
+            <h5 className="text-xs font-medium text-mineshaft-200">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-mineshaft-300 text-xs font-medium">Collections</label>
+              <label className="text-xs font-medium text-mineshaft-300">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-mineshaft-400 text-xs italic">
+              <div className="text-xs text-mineshaft-400 italic">
                 No collections specified (access to all collections in scope)
               </div>
             )}
@@ -154,8 +154,8 @@ const BucketScopesConfiguration = ({
       ))}
 
       {scopeFields.length === 0 && (
-        <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">
+        <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">
             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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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-mineshaft-200 text-sm font-medium">
+                      <div className="text-sm font-medium text-mineshaft-200">
                         Advanced Bucket Configuration
                       </div>
-                      <div className="text-mineshaft-400 text-sm">
+                      <div className="text-sm text-mineshaft-400">
                         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="border-mineshaft-600 bg-mineshaft-800 space-y-4 rounded-sm border p-4"
+                          className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
                         >
                           <div className="flex items-center justify-between">
-                            <h4 className="text-mineshaft-200 text-sm font-medium">
+                            <h4 className="text-sm font-medium text-mineshaft-200">
                               Bucket {bucketIndex + 1}
                             </h4>
                             <IconButton
@@ -690,8 +690,8 @@ export const EditDynamicSecretCouchbaseForm = ({
                       ))}
 
                     {(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
-                      <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>
+                      <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>
                         <Button
                           type="button"
                           variant="outline_bg"
@@ -745,23 +745,23 @@ export const EditDynamicSecretCouchbaseForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                 <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="bg-mineshaft-600 text-mineshaft-300 flex h-4 w-4 cursor-help items-center justify-center rounded-full text-xs">
+                        <div className="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-mineshaft-600 text-xs text-mineshaft-300">
                           ?
                         </div>
                       </Tooltip>
                     </div>
                   </AccordionTrigger>
                   <AccordionContent>
-                    <div className="text-mineshaft-300 mb-4 text-sm">
+                    <div className="mb-4 text-sm text-mineshaft-300">
                       Set constraints on the generated Couchbase user password (8-128 characters)
                       <br />
-                      <span className="text-mineshaft-400 text-xs">
+                      <span className="text-xs text-mineshaft-400">
                         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 c02aa9000..e519423a5 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -332,7 +332,7 @@ export const EditDynamicSecretElasticSearchForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="text-primary-400 cursor-pointer">
+                          <span className="cursor-pointer text-primary-400">
                             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 6ba10d051..fb313f730 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 c30337714..434bc9465 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 bottom-px right-1"
+                          className="relative right-1 bottom-px"
                         />
                       </Tooltip>
                     }
@@ -127,7 +127,7 @@ export const EditDynamicSecretGithubForm = ({
             </div>
           </div>
           <div>
-            <div className="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 933519dbf..0858816bf 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -309,7 +309,7 @@ export const EditDynamicSecretKubernetesForm = ({
                                     isDisabled={!isAllowed}
                                     value={value}
                                     onValueChange={onChange}
-                                    className="border-mineshaft-500 w-full border"
+                                    className="w-full border border-mineshaft-500"
                                     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="text-mineshaft-400 mr-3 flex items-center text-sm">
+                        <span className="mr-3 flex items-center text-sm text-mineshaft-400">
                           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 data-[state=checked]:bg-green/80 shadow-inner"
+                              className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                               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 530e1ac87..c381f395c 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             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-mineshaft-400 text-xs">Database Name</span>}
+                    {i === 0 && <span className="text-xs text-mineshaft-400">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-mineshaft-400 text-xs"
+                        className="text-xs text-mineshaft-400"
                         isOptional
                       />
                     )}
@@ -319,7 +319,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                     {i === 0 && (
                       <FormLabel
                         label="Role"
-                        className="text-mineshaft-400 text-xs"
+                        className="text-xs text-mineshaft-400"
                         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="bg-mineshaft-700 mb-2 w-full">
+            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
               <AccordionItem value="advance-section">
                 <AccordionTrigger>Advanced</AccordionTrigger>
                 <AccordionContent>
@@ -403,7 +403,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
                           {i === 0 && (
                             <FormLabel
                               label="Label"
-                              className="text-mineshaft-400 text-xs"
+                              className="text-xs text-mineshaft-400"
                               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-mineshaft-400 text-xs">Type</span>}
+                          {i === 0 && <span className="text-xs text-mineshaft-400">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 77ff94581..689a56b95 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             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="mb-3 mt-1 flex flex-col space-y-2">
+            <div className="mt-1 mb-3 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 e0f35b990..ab40914f4 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -334,7 +334,7 @@ export const EditDynamicSecretRabbitMqForm = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <span className="text-primary-400 cursor-pointer">
+                          <span className="cursor-pointer text-primary-400">
                             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 2583c2289..d77c605e1 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+          <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
             Configuration
           </div>
           <div className="flex flex-col">
@@ -267,7 +267,7 @@ export const EditDynamicSecretRedisProviderForm = ({
                 </FormControl>
               )}
             />
-            <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+            <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
               <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 daf834e96..86327a767 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -280,7 +280,7 @@ export const EditDynamicSecretSapAseForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 c245f3120..8051f883c 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -267,7 +267,7 @@ export const EditDynamicSecretSapHanaForm = ({
                     </FormControl>
                   )}
                 />
-                <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                   <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 a297b4551..5e23cb2a3 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div className="flex flex-col">
@@ -249,7 +249,7 @@ export const EditDynamicSecretSnowflakeForm = ({
                 />
               </div>
 
-              <Accordion type="single" collapsible className="bg-mineshaft-700 mb-2 w-full">
+              <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
                 <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 119ad0f56..6beeba169 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="border-b-mineshaft-600 mb-4 border-b pb-2">Configuration</div>
+          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
           <div>
             <OrgPermissionCan
               I={OrgGatewayPermissionActions.AttachGateways}
@@ -284,7 +284,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                             isDisabled={!isAllowed}
                             value={value || undefined}
                             onValueChange={onChange}
-                            className="border-mineshaft-500 w-full border"
+                            className="w-full border border-mineshaft-500"
                             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="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                   >
                     <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="mb-2 mt-2">
+                <div className="mt-2 mb-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 data-[state=checked]:bg-green/80 shadow-inner"
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
                           id="sql-ds-ssl-enabled"
                           thumbClassName="bg-mineshaft-800"
                           isChecked={Boolean(value)}
@@ -448,7 +448,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                   </FormControl>
                 )}
               />
-              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                 <AccordionItem value="advanced">
                   <AccordionTrigger>
                     Creation, Revocation & Renew Statements (optional)
@@ -472,7 +472,7 @@ export const EditDynamicSecretSqlProviderForm = ({
                         </FormControl>
                       )}
                     />
-                    <div className="text-mineshaft-300 mb-4 text-sm">
+                    <div className="mb-4 text-sm text-mineshaft-300">
                       Customize SQL statements for managing database user lifecycle
                     </div>
                     <Controller
@@ -542,11 +542,11 @@ export const EditDynamicSecretSqlProviderForm = ({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
-              <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+              <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                 <AccordionItem value="password-config">
                   <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                   <AccordionContent>
-                    <div className="text-mineshaft-300 mb-4 text-sm">
+                    <div className="mb-4 text-sm text-mineshaft-300">
                       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 d4509dc35..7b4a4dac3 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               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 06305b49a..e2f3e5b4d 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="border-mineshaft-500 text-mineshaft-200 mb-4 mt-4 border-b pb-2 pl-1 font-medium">
+            <div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
             <div>
@@ -264,7 +264,7 @@ export const EditDynamicSecretVerticaForm = ({
                               isDisabled={!isAllowed}
                               value={value || undefined}
                               onValueChange={onChange}
-                              className="border-mineshaft-500 w-full border"
+                              className="w-full border border-mineshaft-500"
                               dropdownContainerClassName="max-w-none"
                               isLoading={isGatewaysLoading}
                               placeholder="Default: Internet Gateway"
@@ -365,7 +365,7 @@ export const EditDynamicSecretVerticaForm = ({
                 />
               </div>
               <div>
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 w-full">
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="advance-statements">
                     <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
                     <AccordionContent>
@@ -426,11 +426,11 @@ export const EditDynamicSecretVerticaForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <Accordion type="multiple" className="bg-mineshaft-700 mb-2 mt-4 w-full">
+                <Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
                   <AccordionItem value="password-config">
                     <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
                     <AccordionContent>
-                      <div className="text-mineshaft-300 mb-4 text-sm">
+                      <div className="mb-4 text-sm text-mineshaft-300">
                         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 18a56bf6b..8eb799bf2 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-mineshaft-400 text-xs">Key</span>}
+              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
               <Controller
                 control={control}
                 name={`${name}.${i}.key`}
@@ -45,7 +45,7 @@ export const MetadataForm = ({
               {i === 0 && (
                 <FormLabel
                   label="Value"
-                  className="text-mineshaft-400 text-xs"
+                  className="text-xs text-mineshaft-400"
                   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 09b95055b..9fee4ed92 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="thin-scrollbar max-h-[70vh] overflow-y-auto"
+                className="max-h-[70vh] thin-scrollbar overflow-y-auto"
                 sideOffset={2}
                 align="center"
               >
                 <DropdownMenuLabel>Environments</DropdownMenuLabel>
-                <div className="thin-scrollbar max-h-[40vh] overflow-auto">
+                <div className="max-h-[40vh] thin-scrollbar overflow-auto">
                   {dropdownEnvironments.map((environment) => (
                     <DropdownMenuItem
                       key={environment.id}
@@ -166,7 +166,7 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
                     </DropdownMenuItem>
                   ))}
                 </div>
-                <div className="border-mineshaft-600 h-1 border-t" />
+                <div className="h-1 border-t border-mineshaft-600" />
                 <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="w-[95vw]! flex h-full max-w-none flex-col"
+          className="flex h-full w-[95vw]! 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 03dd951fc..7dc189c42 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 border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 relative z-20 border-solid py-1 pl-5 pr-2 text-sm"
+        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"
         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-mineshaft-600 text-mineshaft-200 border-solid py-1 pl-5 pr-2 text-sm`}
+            } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
             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 3f53b5f9b..bd812b837 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(
-            "border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b",
+            "group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700",
             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 whitespace-pre-wrap py-4"
+                className="flex max-w-lg items-center space-x-4 py-4 whitespace-pre-wrap"
                 content={description}
               >
-                <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
+                <FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
               </Tooltip>
             )}
           </div>
           {isPending ? (
-            <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
+            <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
               <IconButton
                 ariaLabel="edit-folder"
                 variant="plain"
@@ -261,7 +261,7 @@ export const FolderListView = ({
               </IconButton>
             </div>
           ) : (
-            <div className="border-mineshaft-600 flex w-16 items-center justify-between border-l px-3 py-3">
+            <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 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 a07498834..bda170e6e 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="text-mineshaft-300 my-1 text-sm">
+            <p className="my-1 text-sm text-mineshaft-300">
               Snapshots will be replaced by{" "}
               <a
                 target="_blank"
                 href="https://infisical.com/docs/documentation/platform/pit-recovery"
                 rel="noopener noreferrer"
-                className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+                className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
               >
                 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 18e6d3c47..ef56c2e3b 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-mineshaft-600 border-t pt-4">
+          <div className="border-t border-mineshaft-600 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 31e77a06d..c31afc983 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="bg-mineshaft-900 rounded-md p-3 text-xs">
+            <pre className="rounded-md bg-mineshaft-900 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="bg-mineshaft-900 rounded-md p-3 text-xs">
+            <pre className="rounded-md bg-mineshaft-900 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="bg-mineshaft-900 rounded-md p-3 text-xs">
+            <pre className="rounded-md bg-mineshaft-900 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="resize-none! h-[60vh]"
+          className="h-[60vh] resize-none!"
         />
       </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 4116114d0..319c2c9bf 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="border-mineshaft-500 w-full border"
+          className="w-full border border-mineshaft-500"
           position="popper"
           placeholder="Select an option..."
           dropdownContainerClassName="max-w-none"
@@ -104,14 +104,14 @@ const MatrixImportModalTableRow = ({
           })}
         </Select>
       </td>
-      <td className="whitespace-nowrap pl-5 pr-5">
+      <td className="pr-5 pl-5 whitespace-nowrap">
         <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="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">
+          <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">
             {mapKey === "key" && (
               <>
                 <FontAwesomeIcon icon={faKey} />
@@ -400,7 +400,7 @@ export const SecretDropzone = ({
         onDragOver={handleDrag}
         onDrop={handleDrop}
         className={twMerge(
-          "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",
+          "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",
           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="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 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>
             <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 a7b5690c7..d4e7d42d5 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="border-mineshaft-600 inline-flex items-center space-x-2 border-l pl-2">
+      <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 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(
-          "border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b",
+          "group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700",
           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 pl-4 pr-2">
+        <div className="flex grow items-center py-2 pr-2 pl-4">
           <EnvFolderIcon
             env={importEnv.slug || ""}
             secretPath={secretImport?.importPath || ""}
@@ -182,11 +182,11 @@ export const SecretImportItem = ({
           {lastReplicated && (
             <Tooltip
               position="left"
-              className="max-w-md whitespace-normal break-words"
+              className="max-w-md break-words whitespace-normal"
               content={
                 <div className="flex max-h-40 flex-col overflow-auto">
                   <div className="flex self-start">
-                    <FontAwesomeIcon icon={faCalendarCheck} className="pr-2 pt-0.5 text-sm" />
+                    <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 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="pr-2 pt-1 text-sm" />
+                        <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 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="border-mineshaft-600 flex w-16 items-center justify-between border-l py-3.5 pl-4 pr-3">
+        <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 py-3.5 pr-3 pl-4">
           <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-mineshaft-500 border-b-2"}`}
+          className={`bg-bunker-800 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
         >
-          <div className="bg-bunker-700 rounded-md p-1">
+          <div className="rounded-md bg-bunker-700 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 46ee79389..a9693f48d 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="border-mineshaft-700 max-h-64 overflow-y-auto rounded-md border">
+      <div className="max-h-64 overflow-y-auto rounded-md border border-mineshaft-700">
         <Table>
-          <THead className="bg-bunker-800 sticky -top-1">
+          <THead className="sticky -top-1 bg-bunker-800">
             <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="hover:bg-mineshaft-700 cursor-pointer"
+                className="cursor-pointer hover:bg-mineshaft-700"
                 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 350aa2a50..3f7727290 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="border-mineshaft-500 w-full border capitalize"
+                  className="w-full border border-mineshaft-500 capitalize"
                   position="popper"
                   placeholder="Select reminder recurrence"
                   dropdownContainerClassName="max-w-none"
@@ -365,7 +365,7 @@ export const CreateReminderForm = ({
                     {/* Interval description */}
                     <div
                       className={twMerge(
-                        "ml-1 mt-2 text-xs",
+                        "mt-2 ml-1 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-mineshaft-600 border text-sm"
+              className="border border-mineshaft-600 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 5f0cf805a..5e7671f63 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="bg-mineshaft rounded-r-md p-2">
-        <div className="border-mineshaft-400 bg-bunker-800 flex rounded-md p-1 px-2">
+      <div className="rounded-r-md bg-mineshaft p-2">
+        <div className="flex rounded-md border-mineshaft-400 bg-bunker-800 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 14e8831ce..09aa0fb7f 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="thin-scrollbar h-full"
+          className="h-full thin-scrollbar"
           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-bunker-300 text-sm">
+            <span className="text-sm text-bunker-300">
               Changes will automatically be applied for commit
             </span>
             <ProjectPermissionCan
@@ -454,7 +454,7 @@ export const SecretDetailSidebar = ({
                 />
               )}
             </ProjectPermissionCan>
-            <div className="border-mineshaft-600 bg-mineshaft-900 rounded-md border p-4">
+            <div className="rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4">
               <Controller
                 control={control}
                 name="skipMultilineEncoding"
@@ -470,7 +470,7 @@ export const SecretDetailSidebar = ({
                   >
                     {(isAllowed) => (
                       <div className="flex items-center justify-between">
-                        <span className="text-mineshaft-300 w-max text-sm">
+                        <span className="w-max text-sm text-mineshaft-300">
                           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="border-mineshaft-600 bg-mineshaft-900 flex flex-col rounded-md border p-4 px-0 pb-0">
+            <div className="flex flex-col rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
               <div
-                className={`text-mineshaft-100 flex justify-between px-4 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+                className={`flex justify-between px-4 text-mineshaft-100 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
               >
                 <div
-                  className={`text-mineshaft-300 text-sm ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                  className={`text-sm text-mineshaft-300 ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
                 >
                   Tags
                 </div>
@@ -604,13 +604,13 @@ export const SecretDetailSidebar = ({
                 </div>
               </div>
               <div
-                className={`border-mineshaft-600 mb-4 w-full border-t ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
+                className={`mb-4 w-full border-t border-mineshaft-600 ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
               />
               <div
-                className={`text-mineshaft-100 flex justify-between px-4 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+                className={`flex justify-between px-4 text-mineshaft-100 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
               >
                 <div
-                  className={`text-mineshaft-300 text-sm ${metadataFormFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                  className={`text-sm text-mineshaft-300 ${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-mineshaft-400 text-xs">Key</span>}
+                          {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
                           <Controller
                             control={control}
                             name={`secretMetadata.${i}.key`}
@@ -638,7 +638,7 @@ export const SecretDetailSidebar = ({
                           {i === 0 && (
                             <FormLabel
                               label="Value"
-                              className="text-mineshaft-400 text-xs"
+                              className="text-xs text-mineshaft-400"
                               isOptional
                             />
                           )}
@@ -692,7 +692,7 @@ export const SecretDetailSidebar = ({
                   className="mb-0 h-[125px] pb-0"
                 >
                   <TextArea
-                    className="resize-none! border-mineshaft-600 bg-mineshaft-900 mb-0 border text-sm"
+                    className="mb-0 resize-none! border border-mineshaft-600 bg-mineshaft-900 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="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">
+            <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">
                 {secretVersion?.map((version) => (
                   <SecretVersionItem
                     canReadValue={!cannotReadSecretValue}
@@ -721,8 +721,8 @@ export const SecretDetailSidebar = ({
                 ))}
               </div>
             </div>
-            <div className="text-bunker-300 dark flex flex-col text-sm">
-              <div className="text-mineshaft-400 mb-0.5">
+            <div className="dark flex flex-col text-sm text-bunker-300">
+              <div className="mb-0.5 text-mineshaft-400">
                 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="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">
+                <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">
                   {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="bg-bunker-500 rounded-md">
+                          <div className="rounded-md bg-bunker-500">
                             <Tooltip
                               side="left"
                               content={user.allowedActions
@@ -746,7 +746,7 @@ export const SecretDetailSidebar = ({
                                 .join(", ")}
                               className="z-100 capitalize"
                             >
-                              <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">
+                              <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">
                                 {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="bg-bunker-500 rounded-md">
+                          <div className="rounded-md bg-bunker-500">
                             <Tooltip
                               side="left"
                               content={identity.allowedActions
@@ -779,7 +779,7 @@ export const SecretDetailSidebar = ({
                                   projectId: currentProject.id,
                                   identityId: identity.id
                                 }}
-                                className="text-secondary/80 border-mineshaft-600 bg-mineshaft-700 hover:text-mineshaft-100 rounded-md border px-1 py-0.5 text-sm"
+                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
                               >
                                 {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="bg-bunker-500 rounded-md">
+                          <div className="rounded-md bg-bunker-500">
                             <Tooltip
                               side="left"
                               content={group.allowedActions
@@ -810,7 +810,7 @@ export const SecretDetailSidebar = ({
                                 params={{
                                   groupId: group.id
                                 }}
-                                className="text-secondary/80 border-mineshaft-600 bg-mineshaft-700 hover:text-mineshaft-100 rounded-md border px-1 py-0.5 text-sm"
+                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
                               >
                                 {group.name}
                               </Link>
@@ -876,7 +876,7 @@ export const SecretDetailSidebar = ({
                       colorSchema="danger"
                       variant="outline_bg"
                       ariaLabel="Delete Secret"
-                      className="border-mineshaft-600 bg-mineshaft-700 h-min border hover:border-red-500/70 hover:bg-red-600/20"
+                      className="h-min border border-mineshaft-600 bg-mineshaft-700 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 e606340b0..0398baf95 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-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 border-b shadow-none",
+            "border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700",
             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(
-                "text-mineshaft-300 flex h-11 w-11 items-center justify-center px-4 py-3",
+                "flex h-11 w-11 items-center justify-center px-4 py-3 text-mineshaft-300",
                 isDirty && "text-primary",
                 isPending && "ml-[-2px]"
               )}
@@ -449,7 +449,7 @@ export const SecretItem = memo(
                   <FontAwesomeIcon
                     icon={faRotate}
                     size="xs"
-                    className="text-mineshaft-400 absolute -bottom-[0.05rem] -right-[0.2rem]"
+                    className="absolute -right-[0.2rem] -bottom-[0.05rem] text-mineshaft-400"
                   />
                 </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="bg-mineshaft-500 rounded-md px-1 py-0.5">
+                              <code className="rounded-md bg-mineshaft-500 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="focus:text-bunker-100 w-full px-0 placeholder:text-red-500 focus:ring-transparent"
+                    className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
                   />
                 )}
               />
             </div>
             <div
-              className="border-mineshaft-600 flex w-80 grow items-center border-x py-1 pl-4 pr-2"
+              className="flex w-80 grow items-center border-x border-mineshaft-600 py-1 pr-2 pl-4"
               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 && "text-primary w-5"
+                          secret.reminder && "w-5 text-primary"
                         )}
                         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 && "text-primary w-5"
+                              hasTagsApplied && "w-5 text-primary"
                             )}
                             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 && "text-primary w-5"
+                          isOverridden && "w-5 text-primary"
                         )}
                       >
                         <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 && "text-primary w-5"
+                              hasComment && "w-5 text-primary"
                             )}
                             variant="plain"
                             size="md"
@@ -830,12 +830,12 @@ export const SecretItem = memo(
                       </Tooltip>
                     </IconButton>
                     <PopoverContent
-                      className="border-mineshaft-600 bg-mineshaft-800 w-auto border p-2 drop-shadow-2xl"
+                      className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
                       sticky="always"
                     >
                       <FormControl label="Comment" className="mb-0">
                         <TextArea
-                          className="border-mineshaft-600 border text-sm"
+                          className="border border-mineshaft-600 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 && "text-primary w-5"
+                              hasTagsApplied && "w-5 text-primary"
                             )}
                             isDisabled={!isAllowed}
                           >
@@ -1068,7 +1068,7 @@ export const SecretItem = memo(
                       type="submit"
                       size="md"
                       className={twMerge(
-                        "text-primary p-0 opacity-0 group-hover:opacity-100",
+                        "p-0 text-primary 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(
-                            "text-primary h-4 w-4",
+                            "h-4 w-4 text-primary",
                             Boolean(Object.keys(errors || {}).length) && "text-red"
                           )}
                         />
@@ -1100,7 +1100,7 @@ export const SecretItem = memo(
                     >
                       <FontAwesomeSymbol
                         symbolName={FontAwesomeSpriteName.Close}
-                        className="text-primary h-4 w-4"
+                        className="h-4 w-4 text-primary"
                       />
                     </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 c57b709ab..fa75168f5 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(
-              "border-mineshaft-600 hover:bg-mineshaft-700 flex border-b shadow-none",
+              "flex border-b border-mineshaft-600 shadow-none hover:bg-mineshaft-700",
               isRotationView ? "bg-mineshaft-700/60" : "bg-mineshaft-800"
             )}
           >
@@ -39,7 +39,7 @@ export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
                   <FontAwesomeIcon
                     icon={faRotate}
                     size="xs"
-                    className="text-mineshaft-400 absolute -bottom-[0.05rem] -right-[0.2rem]"
+                    className="absolute -right-[0.2rem] -bottom-[0.05rem] text-mineshaft-400"
                   />
                 </div>
               ) : (
@@ -49,14 +49,14 @@ export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
                 />
               )}
             </div>
-            <div className="border-mineshaft-600 ml-[0.05rem] flex h-11 w-80 shrink-0 items-center border-r px-4 py-2">
+            <div className="ml-[0.05rem] flex h-11 w-80 shrink-0 items-center border-r border-mineshaft-600 px-4 py-2">
               <Input
                 autoComplete="off"
                 isReadOnly
                 variant="plain"
                 value="NO ACCESS"
                 isDisabled
-                className="blur-xs focus:text-bunker-100 w-full px-0 placeholder:text-red-500 focus:ring-transparent"
+                className="w-full px-0 blur-xs placeholder:text-red-500 focus:text-bunker-100 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 e1667eceb..a2c25b13a 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="border-mineshaft-600 bg-mineshaft-700 text-mineshaft-300 w-fit rounded-md border px-1 text-sm">
+            <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
               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="border-mineshaft-400/60 absolute bottom-0 left-3 top-0 mt-0.5 border-l" />
+            <div className="absolute top-0 bottom-0 left-3 mt-0.5 border-l border-mineshaft-400/60" />
           </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="rounded-xs bg-primary-500/10 text-primary-300/70 h-min w-fit px-1">
+              <div className="h-min w-fit rounded-xs bg-primary-500/10 px-1 text-primary-300/70">
                 Value:
               </div>
-              <div className="group break-all pl-1 font-mono">
+              <div className="group pl-1 font-mono break-all">
                 <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
                   <button
                     type="button"
-                    className="select-none text-left"
+                    className="text-left select-none"
                     onClick={async (e) => {
                       if (secretValueHidden) return;
 
@@ -194,7 +194,7 @@ export const SecretVersionItem = ({
                     }}
                   >
                     <span
-                      className={twMerge(secretValueHidden && "text-bunker-300 text-xs opacity-40")}
+                      className={twMerge(secretValueHidden && "text-xs text-bunker-300 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 8e082715d..62b708215 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("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">
+      <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">
           <FontAwesomeIcon icon={faRotate} />
         </div>
-        <div className="flex grow items-center py-2 pl-4 pr-2">
+        <div className="flex grow items-center py-2 pr-2 pl-4">
           <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="border-mineshaft-600 flex w-16 items-center justify-between border-l px-2 py-3"
+            className="flex w-16 items-center justify-between border-l border-mineshaft-600 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 70b7aede1..7bc5b8705 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="last:border-b-0! hover:bg-mineshaft-700 h-full">
+      <tr className="h-full last:border-b-0! hover:bg-mineshaft-700">
         <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 50adca575..d272279c8 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="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
+        className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
         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="bg-primary rounded-lg px-1 py-0.5 text-xs font-bold text-black">
+              <div className="rounded-lg bg-primary 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="bg-primary rounded-lg px-1 py-0.5 text-xs font-bold text-black">
+              <div className="rounded-lg bg-primary 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="text-mineshaft-400 ml-2">
+                <span className="ml-2 text-mineshaft-400">
                   Rotated Secrets are not affected by Rollback
                 </span>
               )}
@@ -102,14 +102,14 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
         </div>
       </div>
       {isExpanded && (
-        <div className="bg-bunker-600 flex cursor-pointer p-4">
+        <div className="flex cursor-pointer bg-bunker-600 p-4">
           <TableContainer>
             <Table>
               <THead>
-                <Th className="min-table-row border-mineshaft-600 min-w-44 border-r">Type</Th>
+                <Th className="min-table-row min-w-44 border-r border-mineshaft-600">Type</Th>
                 {isModified ? (
                   <>
-                    <Th className="border-mineshaft-600 border-r">Before rollback</Th>
+                    <Th className="border-r border-mineshaft-600">Before rollback</Th>
                     <Th>After rollback</Th>
                   </>
                 ) : (
@@ -118,16 +118,16 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
               </THead>
               <TBody>
                 <Tr>
-                  <Td className="border-mineshaft-600 border-r">Key</Td>
+                  <Td className="border-r border-mineshaft-600">Key</Td>
                   {isModified && (
-                    <Td className="border-mineshaft-600 border-r">{preSecret?.key}</Td>
+                    <Td className="border-r border-mineshaft-600">{preSecret?.key}</Td>
                   )}
                   <Td>{postSecret.key}</Td>
                 </Tr>
                 <Tr>
-                  <Td className="border-mineshaft-600 border-r">Value</Td>
+                  <Td className="border-r border-mineshaft-600">Value</Td>
                   {isModified && (
-                    <Td className="border-mineshaft-600 border-r">
+                    <Td className="border-r border-mineshaft-600">
                       {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-mineshaft-600 border-r">Override</Td>
+                    <Td className="border-r border-mineshaft-600">Override</Td>
                     {isModified && (
-                      <Td className="border-mineshaft-600 border-r">
+                      <Td className="border-r border-mineshaft-600">
                         <SecretInput value={preSecret?.valueOverride} />
                       </Td>
                     )}
@@ -163,16 +163,16 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   </Tr>
                 )}
                 <Tr>
-                  <Td className="border-mineshaft-600 border-r">Comment</Td>
+                  <Td className="border-r border-mineshaft-600">Comment</Td>
                   {isModified && (
-                    <Td className="border-mineshaft-600 border-r">{preSecret?.comment}</Td>
+                    <Td className="border-r border-mineshaft-600">{preSecret?.comment}</Td>
                   )}
                   <Td>{postSecret?.comment}</Td>
                 </Tr>
                 <Tr>
-                  <Td className="border-mineshaft-600 border-r">Tags</Td>
+                  <Td className="border-r border-mineshaft-600">Tags</Td>
                   {isModified && (
-                    <Td className="border-mineshaft-600 border-r">
+                    <Td className="border-r border-mineshaft-600">
                       {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 e49dbc4e4..eed335fa8 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="text-mineshaft-300 my-1 text-sm">
+        <p className="my-1 text-sm text-mineshaft-300">
           Snapshots will be replaced by{" "}
           <a
             target="_blank"
             href="https://infisical.com/docs/documentation/platform/pit-recovery"
             rel="noopener noreferrer"
-            className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+            className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
           >
             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 focus:bg-mineshaft-700/80 duration-200"
+            className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
             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="bg-mineshaft-800 text-bunker-300 mt-4 rounded-md text-left text-sm">
+      <div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
         <div className="flex flex-col">
-          <div className="border-mineshaft-600 flex border-b font-medium">
+          <div className="flex border-b border-mineshaft-600 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="border-mineshaft-600 hover:bg-mineshaft-700 group flex cursor-pointer border-b"
+                className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
                 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 7f09a1f2c..0b9263803 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="bg-bunker-800 container mx-auto w-full max-w-7xl text-white">
+    <div className="container mx-auto w-full max-w-7xl bg-bunker-800 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="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">
+          <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">
             Documentation
             <FontAwesomeIcon
               icon={faArrowUpRightFromSquare}
@@ -165,13 +165,13 @@ const Page = () => {
         </a>
       </PageHeader>
       <NoticeBannerV2 title="Secret Rotations Update">
-        <p className="text-bunker-200 text-sm">
+        <p className="text-sm text-bunker-200">
           Infisical is revamping its Secret Rotation experience.
         </p>
-        <p className="text-bunker-200 mt-2 text-sm">
+        <p className="mt-2 text-sm text-bunker-200">
           PostgreSQL and Microsoft SQL Server Rotations can now be created from the{" "}
           <Link
-            className="text-mineshaft-100 decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+            className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
             to="/projects/secret-management/$projectId/overview"
             params={{ projectId: currentProject.id }}
           >
@@ -181,7 +181,7 @@ const Page = () => {
         </p>
       </NoticeBannerV2>
       <div className="mb-6">
-        <div className="mb-2 mt-6 text-xl font-medium text-gray-200">Rotated Secrets</div>
+        <div className="mt-6 mb-2 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="border-bunker-400 flex w-min items-center rounded-sm border p-1 px-2">
+                          <div className="flex w-min items-center rounded-sm border border-bunker-400 p-1 px-2">
                             <div>{environment.slug}</div>
-                            <div className="border-bunker-400 ml-1 flex items-center border-l pl-1 text-xs">
+                            <div className="ml-1 flex items-center border-l border-bunker-400 pl-1 text-xs">
                               <FontAwesomeIcon icon={faFolder} className="mr-1" />
                               {secretPath}
                             </div>
@@ -250,7 +250,7 @@ const Page = () => {
                                 <FontAwesomeIcon
                                   icon={faExclamationTriangle}
                                   size="sm"
-                                  className="text-red ml-2"
+                                  className="ml-2 text-red"
                                 />
                               </Tooltip>
                             )}
@@ -318,7 +318,7 @@ const Page = () => {
           </TableContainer>
         </div>
       </div>
-      <div className="mb-2 mt-12 text-xl font-medium text-gray-200">
+      <div className="mt-12 mb-2 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="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"
+              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"
               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 right-1.5 top-1 opacity-0 transition-all group-hover:opacity-100">
+              <div className="absolute top-1 right-1.5 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="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="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="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 decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+                className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
                 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="border-mineshaft-600 overflow-clip rounded-sm border">
+            <div className="overflow-clip rounded-sm border border-mineshaft-600">
               <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 0f485554f..412365028 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="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               defaultValue={environments?.[0]?.slug}
               position="popper"
             >
@@ -96,9 +96,9 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
           </FormControl>
         )}
       />
-      <div className="border-bunker-300/30 mb-2 mt-4 flex flex-col border-t pt-4">
+      <div className="mt-4 mb-2 flex flex-col border-t border-bunker-300/30 pt-4">
         <div>Mapping</div>
-        <div className="text-bunker-300 text-sm">Select keys for rotated value to get saved</div>
+        <div className="text-sm text-bunker-300">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="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
                 position="popper"
               >
                 {!isSecretsLoading &&
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
index fd87bbfb5..548c1c847 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="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter 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="ml-1 mt-3 w-16"
+              className="mt-3 ml-1 w-16"
             />
             <div>
               <p className="text-3xl font-medium text-white">{secretSync.name}</p>
-              <p className="text-bunker-300 leading-3">{destinationDetails.name} Sync</p>
+              <p className="leading-3 text-bunker-300">{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 b2694adc2..76a185fe2 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="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
+      <div className="mt-4 ml-auto 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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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="bg-mineshaft-500 h-9 rounded-r-none"
+                className="h-9 rounded-r-none bg-mineshaft-500"
                 isDisabled={!isAllowed}
               >
                 Trigger Sync
@@ -185,7 +185,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               <IconButton
                 ariaLabel="add-folder-or-import"
                 variant="outline_bg"
-                className="border-mineshaft border-l-mineshaft-700 bg-mineshaft-500 h-9 w-10 rounded-l-none border-l-2"
+                className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
               >
                 <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 be040b893..a08d88139 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="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>
+    <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>
         {subscription.auditLogs && (
-          <p className="text-bunker-300 text-xs">
+          <p className="text-xs text-bunker-300">
             Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
           </p>
         )}
@@ -47,7 +47,7 @@ export const SecretSyncAuditLogsSection = ({ secretSync }: Props) => {
           }}
         />
       ) : (
-        <div className="bg-mineshaft-800 text-mineshaft-200 flex h-full items-center justify-center rounded-lg text-sm">
+        <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
           <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 488645022..0fb7e5619 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="text-bunker-300 ml-1" icon={faInfoCircle} />
+                <FontAwesomeIcon size="xs" className="ml-1 text-bunker-300" 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 8a987ae26..3855a551c 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 select-text break-words" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm break-words select-text" 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 select-text break-words" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm break-words select-text" 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 select-text break-words" content={compartmentOcid}>
+      <Tooltip side="bottom" className="max-w-sm break-words select-text" 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 50324594a..7ab07c8d1 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="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>
+    <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>
         <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 01da3212f..cbe6855e4 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="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>
+    <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>
         <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="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {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 abacc928a..930c06b2f 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="whitespace-nowrap p-2">Key</Th>
+                  <Th className="p-2 whitespace-nowrap">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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 d98745fa2..b22755269 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="whitespace-nowrap p-2">Key</Th>
+                  <Th className="p-2 whitespace-nowrap">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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                 <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 a43037613..1d3f10188 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="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>
+      <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>
           <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 71ce301d0..e4b787281 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="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 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>
             {(!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 8ee08a3c6..ad037b125 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 e94b0b781..49e93bef1 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 81ea30922..26f5c7fc9 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Index Secret References</p>
       </div>
-      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+      <p className="mt-2 mb-4 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 2fc7848b8..9e4627d26 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="text-bunker-300 mb-6">
+        <p className="mb-6 text-bunker-300">
           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="text-bunker-300 mb-6">
+        <p className="mb-6 text-bunker-300">
           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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex justify-between">
-        <h2 className="text-mineshaft-100 mb-2 flex-1 text-xl font-medium">Key Management</h2>
+        <h2 className="mb-2 flex-1 text-xl font-medium text-mineshaft-100">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="bg-mineshaft-600 w-3/4"
+                      className="w-3/4 bg-mineshaft-600"
                     >
                       <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 f4dbde2fd..ff9d217cb 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="border-mineshaft-600 bg-mineshaft-900 mb-6 scroll-m-6 rounded-lg border p-4"
+      className="mb-6 scroll-m-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
       <div className="mb-8 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Environments</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 9c2c858a6..e647ff481 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Version Retention</p>
       </div>
-      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+      <p className="mt-2 mb-4 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 194b626a4..e086834a1 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
         <p className="text-xl font-medium">Secret Detection</p>
       </div>
-      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+      <p className="mt-2 mb-4 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-mineshaft-400 text-xs">Secret Value</span>}
+                  {i === 0 && <span className="text-xs text-mineshaft-400">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 2e5d9a615..bd8928823 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 c7a8f5080..553f17d54 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 2b094f69b..508ef2867 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 26f8ebec1..517f9e624 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex justify-between">
-          <p className="text-mineshaft-100 text-xl font-medium">{t("settings.webhooks.title")}</p>
+          <p className="text-xl font-medium text-mineshaft-100">{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-mineshaft-400 text-xs">{id}</p>
+                          <p className="text-xs text-mineshaft-400">{id}</p>
                         </Td>
                         <Td>{environment.slug}</Td>
                         <Td>{secretPath}</Td>
@@ -202,7 +202,7 @@ export const WebhooksTab = withProjectPermission(
                           {!lastStatus ? (
                             "-"
                           ) : (
-                            <div className="bg-mineshaft-600 inline-flex w-min items-center rounded-sm px-2 py-0.5 text-sm">
+                            <div className="inline-flex w-min items-center rounded-sm bg-mineshaft-600 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="text-red mt-2">
+                                      <div className="mt-2 text-red">
                                         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 8e9af13c6..fb48717cc 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Workflow Integrations</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 768f9a2a5..3ebeba766 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="text-mineshaft-300 mb-4">Select a workflow integration</div>
+              <div className="mb-4 text-mineshaft-300">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(
-                          "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",
+                          "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",
                           isConfigured && "border-primary/50 opacity-60"
                         )}
                         role="button"
@@ -104,12 +104,12 @@ export const AddWorkflowIntegrationModal = ({ isOpen, onToggle }: Props) => {
                         }}
                       >
                         <div>{icon}</div>
-                        <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                        <div className="text-center text-sm whitespace-pre-wrap">{title}</div>
                       </div>
                       {isConfigured && (
-                        <div className="absolute bottom-0 left-0 right-0 z-30 h-full">
+                        <div className="absolute right-0 bottom-0 left-0 z-30 h-full">
                           <div className="relative h-full">
-                            <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">
+                            <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">
                               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 5e5fc454f..ef7617d52 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="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
               <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 abe1e2860..c638b65a7 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="text-mineshaft-400 mb-2 flex-1 text-sm">Configure Events</h2>
+          <h2 className="mb-2 flex-1 text-sm text-mineshaft-400">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="mb-2 mt-3"
+                  className="mt-3 mb-2"
                 >
                   <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 3b13b33ab..df7211f99 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="hover:text-primary-400 data-[state=open]:text-primary-400 flex justify-end">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
               <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 b59dd57ff..bcc2d81b5 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="text-mineshaft-400 mb-2 flex-1 text-sm">Configure Events</h2>
+          <h2 className="mb-2 flex-1 text-sm text-mineshaft-400">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="mb-2 mt-3"
+                  className="mt-3 mb-2"
                 >
                   <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 6ca234d87..eb8b27432 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -194,7 +194,7 @@ export const AWSParameterStoreAuthorizeIntegrationPage = () => {
               type="submit"
               colorSchema="primary"
               variant="outline_bg"
-              className="mb-6 ml-auto mr-6 mt-2 w-min"
+              className="mt-2 mr-6 mb-6 ml-auto 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 62e7d15ac..0b8433d56 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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="border-mineshaft-600 flex w-full flex-row border-b">
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
               <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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {currentProject?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -250,7 +250,7 @@ export const AWSParameterStoreConfigurePage = () => {
                     setSelectedAWSRegion(val);
                     setKmsKeyId("");
                   }}
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {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="ml-1 mt-2">
+              <div className="mt-2 ml-1">
                 <Switch
                   id="delete-aws"
                   onCheckedChange={setShouldDisableDelete}
@@ -287,7 +287,7 @@ export const AWSParameterStoreConfigurePage = () => {
                   Disable deleting secrets in AWS Parameter Store
                 </Switch>
               </div>
-              <div className="ml-1 mt-4">
+              <div className="mt-4 ml-1">
                 <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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {integrationAuthAwsKmsKeys?.length ? (
                     integrationAuthAwsKmsKeys.map((key) => {
@@ -342,19 +342,19 @@ export const AWSParameterStoreConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 016b6c2a6..24c1905cc 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -192,7 +192,7 @@ export const AWSSecretManagerAuthorizePage = () => {
               type="submit"
               colorSchema="primary"
               variant="outline_bg"
-              className="mb-6 ml-auto mr-6 mt-2 w-min"
+              className="mt-2 mr-6 mb-6 ml-auto 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 b6410c5ae..9ff3677c7 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="border-mineshaft-600 max-w-lg rounded-md border">
+        <Card className="max-w-lg rounded-md border border-mineshaft-600">
           <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="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">
+                <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">
                   <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="border-mineshaft-600 flex w-full flex-row border-b">
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
                 <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="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         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="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-full"
                       >
                         {awsRegions.map((awsRegion) => (
@@ -356,7 +356,7 @@ export const AwsSecretManagerConfigurePage = () => {
                           }
                           onChange(e);
                         }}
-                        className="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         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="mb-3 ml-1 mt-2">
+                <div className="mt-2 mb-3 ml-1">
                   <Controller
                     control={control}
                     name="shouldTag"
@@ -445,7 +445,7 @@ export const AwsSecretManagerConfigurePage = () => {
                               setValue("tags", []);
                               onChange(e);
                             }}
-                            className="border-mineshaft-500 w-full border"
+                            className="w-full border border-mineshaft-500"
                             dropdownContainerClassName="max-w-full"
                           >
                             <SelectItem
@@ -525,7 +525,7 @@ export const AwsSecretManagerConfigurePage = () => {
                       <Select
                         defaultValue={field.value}
                         onValueChange={(e) => onChange(e)}
-                        className="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-full"
                       >
                         {integrationAuthAwsKmsKeys?.length ? (
@@ -556,19 +556,19 @@ export const AwsSecretManagerConfigurePage = () => {
             color="mineshaft"
             variant="outline_bg"
             type="submit"
-            className="mb-6 ml-auto mr-6 mt-2"
+            className="mt-2 mr-6 mb-6 ml-auto"
             isLoading={isSubmitting}
           >
             Create Integration
           </Button>
         </Card>
-        <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="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="flex flex-row items-center">
-            <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-            <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+            <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+            <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
           </div>
-          <span className="text-mineshaft-300 mt-4 text-sm">
+          <span className="mt-4 text-sm text-mineshaft-300">
             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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 d013e8043..8e0336797 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -195,7 +195,7 @@ export const AzureAppConfigurationConfigurePage = () => {
                   isError={Boolean(error)}
                 >
                   <Select
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   dropdownContainerClassName="max-w-full"
                 >
                   {initialSyncBehaviors.map((b) => {
@@ -316,7 +316,7 @@ export const AzureAppConfigurationConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mb-6 ml-auto mt-4"
+            className="mt-4 mb-6 ml-auto"
             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 be0275290..1877b4dbb 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -113,7 +113,7 @@ export const AzureDevopsAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 973a38841..3730bfdab 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -137,7 +137,7 @@ export const AzureDevopsConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {workspace?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -160,7 +160,7 @@ export const AzureDevopsConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -183,7 +183,7 @@ export const AzureDevopsConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 a3e7544b0..74fbf7384 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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 d9ced7172..91f0d5440 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {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 022a8e8d7..8d855f284 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="mb-1 mr-2 inline-block" />
+          <SiBitbucket size="1.2rem" className="mr-2 mb-1 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 1c6d0a43b..b3a1c5b59 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -103,7 +103,7 @@ export const ChecklyAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 0d4090f6b..d57ed0834 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="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full flex-col items-center justify-center py-6">
+    <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">
       <Helmet>
         <title>Set Up Checkly Integration</title>
       </Helmet>
-      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 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="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">
+              <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">
                 <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="border-mineshaft-600 flex w-full flex-row border-b">
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
               <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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {workspace?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -209,7 +209,7 @@ export const ChecklyConfigurePage = () => {
                 <Select
                   value={targetAppId}
                   onValueChange={(val) => setTargetAppId(val)}
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   isDisabled={integrationAuthApps.length === 0}
                 >
                   {integrationAuthApps.length > 0 ? (
@@ -232,7 +232,7 @@ export const ChecklyConfigurePage = () => {
                 <Select
                   value={targetGroupId}
                   onValueChange={(val) => setTargetGroupId(val)}
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {integrationAuthGroups.length > 0 ? (
                     integrationAuthGroups.map((integrationAuthGroup) => (
@@ -274,7 +274,7 @@ export const ChecklyConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6"
+          className="mr-6 mb-6 ml-auto"
           isFullWidth={false}
           isLoading={isLoading}
         >
@@ -295,12 +295,12 @@ export const ChecklyConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 78708fcd7..627daf7a0 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -97,7 +97,7 @@ export const CircleCIAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 186ad173d..7df2ae35c 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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -241,7 +241,7 @@ export const CircleCIConfigurePage = () => {
                 onValueChange={(e) => {
                   onChange(e);
                 }}
-                className="border-mineshaft-500 w-full border"
+                className="w-full border border-mineshaft-500"
               >
                 <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 41a25da44..68535d70e 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -119,7 +119,7 @@ export const Cloud66ConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 1fbf6db5a..74e9f3d27 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 b446ce43a..0a0d08863 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="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">
+    <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">
         <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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {workspace?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -161,7 +161,7 @@ export const CloudflarePagesConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -184,7 +184,7 @@ export const CloudflarePagesConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {cloudflareEnvironments.map((cloudflareEnvironment) => (
               <SelectItem
@@ -211,7 +211,7 @@ export const CloudflarePagesConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           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 8c3f53746..67b62293e 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 5e2ba6d2c..58bc8596b 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="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">
+    <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">
         <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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -129,7 +129,7 @@ export const CloudflareWorkersConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -152,7 +152,7 @@ export const CloudflareWorkersConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           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 dff20c62a..80a54b621 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -115,7 +115,7 @@ export const CodefreshConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 01e28784c..c4f503e41 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -118,7 +118,7 @@ export const DatabricksAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 c30464c98..1f5a3c40a 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -141,7 +141,7 @@ export const DatabricksConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -168,7 +168,7 @@ export const DatabricksConfigurePage = () => {
               onValueChange={(val) => {
                 setTargetScope(val);
               }}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               placeholder={
                 integrationAuthScopes.length === 0 ? "No scopes found." : "Select scope..."
               }
@@ -192,24 +192,24 @@ export const DatabricksConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto w-min"
           isLoading={isPending}
           isDisabled={integrationAuthScopes.length === 0 || isPending}
         >
           Create Integration
         </Button>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           When integrating with Databricks, Infisical is intended to be the source of truth for the
           secrets in the configured Databricks scope.
         </span>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 7a564d0bc..2c6f08348 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const DigitalOceanAppPlatformConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 b84ab4a66..cdd0a14db 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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 2134c4012..7ae55c53c 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -142,7 +142,7 @@ export const FlyioConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -165,7 +165,7 @@ export const FlyioConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -188,20 +188,20 @@ export const FlyioConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 cc16a046a..d4d166bde 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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="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 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>
         </div>
         <form onSubmit={handleSubmit(onFormSubmit)} className="px-6 pb-8 text-right">
@@ -148,7 +148,7 @@ export const GcpSecretManagerAuthorizePage = () => {
               >
                 <TextArea
                   {...field}
-                  className="border-mineshaft-600 bg-bunker-900/80 h-48 border"
+                  className="h-48 border border-mineshaft-600 bg-bunker-900/80"
                 />
               </FormControl>
             )}
diff --git a/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx
index 287584c1b..44e8347c3 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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="border-mineshaft-600 flex w-full flex-row border-b">
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
               <Tab value={TabSections.Connection}>Connection</Tab>
               <Tab value={TabSections.Options}>Options</Tab>
             </div>
@@ -344,7 +344,7 @@ export const GcpSecretManagerConfigurePage = () => {
                   </FormControl>
                 )}
               />
-              <div className="mb-[2.36rem] mt-8">
+              <div className="mt-8 mb-[2.36rem]">
                 <Controller
                   control={control}
                   name="shouldLabel"
@@ -395,7 +395,7 @@ export const GcpSecretManagerConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-8 ml-auto mr-6 w-min"
+          className="mr-6 mb-8 ml-auto w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -458,12 +458,12 @@ export const GcpSecretManagerConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 b822b8132..c76092415 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -71,7 +71,7 @@ export const GithubAuthorizePage = () => {
               onValueChange={(val) => {
                 setSelectedAuthMethod(val as AuthMethod);
               }}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
             >
               <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="ml-auto mt-4 w-min"
+              className="mt-4 ml-auto 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 8dd9736e8..5e9871ade 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="border-mineshaft-600 max-w-lg rounded-md border p-0">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 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="bg-mineshaft-200 flex items-center rounded-full">
+              <div className="flex items-center rounded-full bg-mineshaft-200">
                 <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="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">
+                <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">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   Docs
                   <FontAwesomeIcon
@@ -340,7 +340,7 @@ export const GithubConfigurePage = () => {
           </CardTitle>
           <Tabs defaultValue={TabSections.Connection}>
             <TabList>
-              <div className="border-mineshaft-600 flex w-full flex-row border-b">
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
                 <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="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                       >
                         {currentProject?.environments.map((sourceEnvironment) => (
                           <SelectItem
@@ -403,7 +403,7 @@ export const GithubConfigurePage = () => {
                           setValue("repoIds", []);
                           onChange(e);
                         }}
-                        className="border-mineshaft-500 w-full border"
+                        className="w-full border border-mineshaft-500"
                       >
                         <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="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">
+                              <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">
                                 {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="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">
+                              <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">
                                 No repositories found
                               </div>
                             )}
                           </DropdownMenuTrigger>
                           <DropdownMenuContent
                             align="start"
-                            className="z-100 thin-scrollbar max-h-80 overflow-y-scroll"
+                            className="z-100 max-h-80 thin-scrollbar overflow-y-scroll"
                           >
                             {integrationAuthApps.length > 0 ? (
                               integrationAuthApps.map((integrationAuthApp) => {
@@ -473,7 +473,7 @@ export const GithubConfigurePage = () => {
                                       isSelected ? (
                                         <FontAwesomeIcon
                                           icon={faCheckCircle}
-                                          className="text-primary pr-0.5"
+                                          className="pr-0.5 text-primary"
                                         />
                                       ) : (
                                         <div className="pl-[1.01rem]" />
@@ -511,7 +511,7 @@ export const GithubConfigurePage = () => {
                           <Select
                             value={field.value}
                             onValueChange={onChange}
-                            className="border-mineshaft-500 w-full border"
+                            className="w-full border border-mineshaft-500"
                           >
                             {integrationAuthOrgs &&
                               integrationAuthOrgs.map(({ name, orgId }) => (
@@ -537,7 +537,7 @@ export const GithubConfigurePage = () => {
                           <Select
                             value={field.value}
                             onValueChange={onChange}
-                            className="border-mineshaft-500 w-full border"
+                            className="w-full border border-mineshaft-500"
                           >
                             {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="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">
+                                  <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">
                                     {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="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">
+                                  <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">
                                     No repositories found
                                   </div>
                                 )}
                               </DropdownMenuTrigger>
                               <DropdownMenuContent
                                 align="start"
-                                className="z-100 thin-scrollbar max-h-80 overflow-y-scroll"
+                                className="z-100 max-h-80 thin-scrollbar overflow-y-scroll"
                               >
                                 {selectedOrganization ? (
                                   selectedOrganization.map((integrationAuthApp) => {
@@ -610,7 +610,7 @@ export const GithubConfigurePage = () => {
                                           isSelected ? (
                                             <FontAwesomeIcon
                                               icon={faCheckCircle}
-                                              className="text-primary pr-0.5"
+                                              className="pr-0.5 text-primary"
                                             />
                                           ) : (
                                             <div className="pl-[1.01rem]" />
@@ -652,7 +652,7 @@ export const GithubConfigurePage = () => {
                             setValue("repoOwner", selectedRepo?.owner);
                             onChange(e);
                           }}
-                          className="border-mineshaft-500 w-full border"
+                          className="w-full border border-mineshaft-500"
                         >
                           {integrationAuthApps?.length ? (
                             integrationAuthApps.map((app) => {
@@ -693,7 +693,7 @@ export const GithubConfigurePage = () => {
                           onValueChange={onChange}
                           isDisabled={!repoId}
                           className={twMerge(
-                            "border-mineshaft-500 w-full border",
+                            "w-full border border-mineshaft-500",
                             !repoId && "h-10 cursor-not-allowed"
                           )}
                         >
@@ -775,13 +775,13 @@ export const GithubConfigurePage = () => {
           </div>
         </form>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="li my-2 inline text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 3ab945e45..4b1c0e2a4 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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 5b651f337..2f6382215 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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="border-mineshaft-600 flex w-full flex-row border-b">
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
               <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="border-mineshaft-500 w-full border"
+                      className="w-full border border-mineshaft-500"
                       dropdownContainerClassName="max-w-full"
                     >
                       {initialSyncBehaviors.map((b) => {
@@ -457,7 +457,7 @@ export const GitlabConfigurePage = () => {
                   )}
                 />
               </div>
-              <div className="mb-5 ml-1 mt-4">
+              <div className="mt-4 mb-5 ml-1">
                 <Controller
                   control={control}
                   name="shouldProtectSecrets"
@@ -504,7 +504,7 @@ export const GitlabConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-8 ml-auto mr-6 w-min"
+          className="mr-6 mb-8 ml-auto w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -555,12 +555,12 @@ export const GitlabConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 51b2eec4c..e312f0438 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="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
+        <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
         <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 c613827d0..4b922a9bc 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -110,7 +110,7 @@ export const HashicorpVaultAuthorizePage = () => {
             </a>
           </div>
         </CardTitle>
-        <CardBody className="px-6 pb-6 pt-0">
+        <CardBody className="px-6 pt-0 pb-6">
           <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 832ecd3f0..0dfcbb0bf 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -175,7 +175,7 @@ export const HashicorpVaultConfigurePage = () => {
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                   >
                     {currentProject?.environments.map((sourceEnvironment) => (
                       <SelectItem
@@ -249,13 +249,13 @@ export const HashicorpVaultConfigurePage = () => {
           </form>
         </CardBody>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 c17882257..5dd17cc4d 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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 9daa6103c..d216a11ab 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -131,7 +131,7 @@ export const HasuraCloudConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   value={field.value}
                   onValueChange={(val) => {
                     field.onChange(val);
@@ -170,7 +170,7 @@ export const HasuraCloudConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   value={field.value}
                   isDisabled={integrationAuthApps?.length === 0}
                   onValueChange={(val) => {
@@ -191,7 +191,7 @@ export const HasuraCloudConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mb-6 ml-auto mt-2"
+            className="mt-2 mb-6 ml-auto"
             isLoading={isSubmitting}
           >
             Create Integration
@@ -212,12 +212,12 @@ export const HasuraCloudConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 92f8bd540..d653011dd 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="border-mineshaft-600 max-w-lg rounded-md border p-0">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -241,7 +241,7 @@ export const HerokuConfigurePage = () => {
           <Button
             colorSchema="primary"
             variant="outline_bg"
-            className="mb-6 ml-auto mt-2"
+            className="mt-2 mb-6 ml-auto"
             size="sm"
             type="submit"
             isLoading={isLoading}
@@ -277,12 +277,12 @@ export const HerokuConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 76a37fc4a..91e2b9d88 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="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2" />
+        <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
         <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 fd02d34bc..55a5ac360 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const LaravelForgeConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 5cf005747..40ecc3bc5 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -127,7 +127,7 @@ export const NetlifyConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -150,7 +150,7 @@ export const NetlifyConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {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 6618a0e15..9ff1e18c8 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -137,7 +137,7 @@ export const NorthflankConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -161,7 +161,7 @@ export const NorthflankConfigurePage = () => {
             <Select
               value={targetSecretGroupId}
               onValueChange={(val) => setTargetSecretGroupId(val)}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               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 4bae39ced..21851e4cd 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -131,7 +131,7 @@ export const OctopusDeployAuthorizePage = () => {
           type="submit"
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 19e6c8742..5b531ac2d 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="mb-1 mr-2 inline-block" />
+          <SiOctopusdeploy size="1.2rem" className="mr-2 mb-1 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="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 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>
           <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 a2d6a04f2..128fbaf47 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -98,7 +98,7 @@ export const QoveryAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 7caf34087..20c6deba8 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="bg-linear-to-tr from-mineshaft-900 to-bunker-900 flex h-full w-full flex-col items-center justify-center">
+    <div className="flex h-full w-full flex-col items-center justify-center bg-linear-to-tr from-mineshaft-900 to-bunker-900">
       <Helmet>
         <title>Set Up Qovery Integration</title>
       </Helmet>
-      <Card className="border-mineshaft-600 max-w-lg rounded-md border p-0">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 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="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">
+              <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">
                 <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="border-mineshaft-600 flex w-full flex-row border-b">
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
               <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="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {currentProject?.environments.map((sourceEnvironment) => (
                     <SelectItem
@@ -272,7 +272,7 @@ export const QoveryConfigurePage = () => {
                 <Select
                   value={scope}
                   onValueChange={(val) => setScope(val)}
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                 >
                   {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="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     isDisabled={integrationAuthOrgs.length === 0}
                   >
                     {integrationAuthOrgs.length > 0 ? (
@@ -311,7 +311,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetProjectId}
                     onValueChange={(val) => setTargetProjectId(val)}
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     isDisabled={integrationAuthProjects.length === 0}
                   >
                     {integrationAuthProjects.length > 0 ? (
@@ -336,7 +336,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetEnvironmentId}
                     onValueChange={(val) => setTargetEnvironmentId(val)}
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     isDisabled={integrationAuthEnvironments.length === 0}
                   >
                     {integrationAuthEnvironments.length > 0 ? (
@@ -361,7 +361,7 @@ export const QoveryConfigurePage = () => {
                   <Select
                     value={targetAppId}
                     onValueChange={(val) => setTargetAppId(val)}
-                    className="border-mineshaft-500 w-full border"
+                    className="w-full border border-mineshaft-500"
                     isDisabled={integrationAuthApps.length === 0}
                   >
                     {integrationAuthApps.length > 0 ? (
@@ -388,7 +388,7 @@ export const QoveryConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6"
+          className="mr-6 mb-6 ml-auto"
           isFullWidth={false}
           isLoading={isLoading}
         >
@@ -414,12 +414,12 @@ export const QoveryConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 b0d491481..1d24f7ce7 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -160,7 +160,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -183,7 +183,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetEnvironmentId}
             onValueChange={(val) => setTargetEnvironmentId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={targetEnvironments.length === 0}
           >
             {targetEnvironments.length > 0 ? (
@@ -206,7 +206,7 @@ export const RailwayConfigurePage = () => {
           <Select
             value={targetServiceId}
             onValueChange={(val) => setTargetServiceId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 a99130712..f1feca04a 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -98,7 +98,7 @@ export const RenderAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 a552ea506..7066c860e 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -230,7 +230,7 @@ export const RenderConfigurePage = () => {
               );
             }}
           />
-          <div className="mb-[2.36rem] ml-1 mt-8">
+          <div className="mt-8 mb-[2.36rem] ml-1">
             <Controller
               control={control}
               name="shouldAutoRedeploy"
@@ -249,7 +249,7 @@ export const RenderConfigurePage = () => {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-8 ml-auto mr-6 mt-4 w-min"
+          className="mt-4 mr-6 mb-8 ml-auto w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
@@ -258,13 +258,13 @@ export const RenderConfigurePage = () => {
           Create Integration
         </Button>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 b9e01512b..2a76b32fc 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <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 9f78c7cb6..6944bb79f 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -132,7 +132,7 @@ export const RundeckConfigurePage = () => {
                 isError={Boolean(error)}
               >
                 <Select
-                  className="border-mineshaft-500 w-full border"
+                  className="w-full border border-mineshaft-500"
                   value={field.value}
                   onValueChange={(val) => {
                     field.onChange(val);
@@ -184,7 +184,7 @@ export const RundeckConfigurePage = () => {
             type="submit"
             color="mineshaft"
             variant="outline_bg"
-            className="mb-6 ml-auto mt-2"
+            className="mt-2 mb-6 ml-auto"
             isLoading={isSubmitting}
           >
             Create Integration
@@ -205,12 +205,12 @@ export const RundeckConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 d6dc5e979..b2db178c6 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="border-mineshaft-400 w-1/5 border-t" />
+            <div className="w-1/5 border-t border-mineshaft-400" />
             <p className="mx-4 text-xs text-gray-400">OR</p>
-            <div className="border-mineshaft-400 w-1/5 border-t" />
+            <div className="w-1/5 border-t border-mineshaft-400" />
           </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 68b10ee9e..38183a5ad 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -115,7 +115,7 @@ export const SupabaseConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 94100dad8..44146ee4b 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -123,7 +123,7 @@ export const TeamcityAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 7c81a43cb..b4fce5e94 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="border-mineshaft-600 mb-12 max-w-lg rounded-md border">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -147,7 +147,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -170,7 +170,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -193,7 +193,7 @@ export const TeamcityConfigurePage = () => {
           <Select
             value={targetBuildConfigId}
             onValueChange={(val) => setTargetBuildConfigId(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={targetBuildConfigs.length === 0}
           >
             {targetBuildConfigs.length ? (
@@ -216,7 +216,7 @@ export const TeamcityConfigurePage = () => {
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -237,12 +237,12 @@ export const TeamcityConfigurePage = () => {
           alt="infisical loading indicator"
         />
       ) : (
-        <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">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 d1b188407..60245a252 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -125,7 +125,7 @@ export const TerraformCloudAuthorizePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 01f577e06..c33b7cdd6 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="border-mineshaft-600 max-w-lg rounded-md border">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -158,7 +158,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -186,7 +186,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={variableType}
             onValueChange={(val) => setVariableType(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -222,7 +222,7 @@ export const TerraformCloudConfigurePage = () => {
           <Select
             value={initialSyncBehavior}
             onValueChange={(e) => setInitialSyncBehavior(e)}
-            className="border-mineshaft-600 w-full border"
+            className="w-full border border-mineshaft-600"
           >
             {initialSyncBehaviors.map((b) => {
               return (
@@ -237,7 +237,7 @@ export const TerraformCloudConfigurePage = () => {
           onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 ml-auto mr-6 mt-2 w-min"
+          className="mt-2 mr-6 mb-6 ml-auto 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 23aa86372..e71a6ab31 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -116,7 +116,7 @@ export const TravisCIConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 92f1bbd9a..8c00a84ff 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="border-mineshaft-600 max-w-lg rounded-md border p-0">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 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="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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
@@ -204,7 +204,7 @@ export const VercelConfigurePage = () => {
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -247,7 +247,7 @@ export const VercelConfigurePage = () => {
 
               setTargetAppId(val);
             }}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
@@ -270,7 +270,7 @@ export const VercelConfigurePage = () => {
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {selectedVercelEnvironments.map((vercelEnvironment) => (
               <SelectItem
@@ -287,7 +287,7 @@ export const VercelConfigurePage = () => {
             <Select
               value={targetBranch}
               onValueChange={(val) => setTargetBranch(val)}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
             >
               {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="border-mineshaft-500 w-full border text-sm"
+            className="w-full border border-mineshaft-500 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="mb-6 ml-auto mr-6 mt-2"
+          className="mt-2 mr-6 mb-6 ml-auto"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
-      <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="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="flex flex-row items-center">
-          <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl" />{" "}
-          <span className="text-md text-mineshaft-100 ml-3">Pro Tip</span>
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-        <span className="text-mineshaft-300 mt-4 text-sm">
+        <span className="mt-4 text-sm text-mineshaft-300">
           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="border-mineshaft-600 bg-mineshaft-800 text-mineshaft-200 flex h-max max-w-md flex-col rounded-md border p-6 text-center">
+        <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">
           <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a
-              className="text-mineshaft-100 decoration-primary-500 inline cursor-pointer underline underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 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 575867fee..7f781c89e 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="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
           >
             {currentProject?.environments.map((sourceEnvironment) => (
               <SelectItem
@@ -118,7 +118,7 @@ export const WindmillConfigurePage = () => {
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
-            className="border-mineshaft-500 w-full border"
+            className="w-full border border-mineshaft-500"
             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 7f4187cbc..8ab394f2b 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="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter 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="ml-1 mt-3 w-14"
+            className="mt-3 ml-1 w-14"
           />
           <div>
             <p className="text-3xl font-medium text-white">{dataSource.name}</p>
-            <p className="text-bunker-300 leading-3">{details.name} Data Source</p>
+            <p className="leading-3 text-bunker-300">{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 3c3536265..583cf69f4 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="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="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="mr-2 flex flex-1 items-center justify-between">
-            <h3 className="text-mineshaft-100 font-medium">Details</h3>
+            <h3 className="font-medium text-mineshaft-100">Details</h3>
             {isDisconnected && (
               <Tooltip
                 className="text-xs"
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSection = ({ dataSource }: Props) => {
                   <span>Enabled</span>
                 </Badge>
               ) : (
-                <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                   <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 69ea17eec..7e9164257 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(
-        "hover:bg-mineshaft-700 group h-10 transition-colors duration-100",
+        "group h-10 transition-colors duration-100 hover:bg-mineshaft-700",
         lastScanStatus === SecretScanningScanStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`resource-${id}`}
     >
-      <Td className="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min animate-pulse items-center gap-1.5 whitespace-nowrap"
+            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
           >
             <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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                   <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 b87004721..5616c956a 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-mineshaft-100 text-xl font-medium">{resourceDetails.pluralTitle}</p>
-          <p className="text-bunker-300 text-sm">
+          <p className="text-xl font-medium text-mineshaft-100">{resourceDetails.pluralTitle}</p>
+          <p className="text-sm text-bunker-300">
             {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 1926fb8d8..9b94759a4 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 1c6a5d8be..e174aa0ed 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(
-        "hover:bg-mineshaft-700 group h-10 transition-colors duration-100",
+        "group h-10 transition-colors duration-100 hover:bg-mineshaft-700",
         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="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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 3b193abcf..c008e385d 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <p className="text-mineshaft-100 text-xl font-medium">Scan History</p>
-          <p className="text-bunker-300 text-sm">
+          <p className="text-xl font-medium text-mineshaft-100">Scan History</p>
+          <p className="text-sm text-bunker-300">
             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 edbfbed51..dbeef5065 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 227fa8551..d681c34af 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="bg-bunker-800 h-full">
-          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 d4768305c..d14d3a656 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(
-        "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100",
+        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
         lastScanStatus === SecretScanningScanStatus.Failed && "bg-red/5 hover:bg-red/10"
       )}
       key={`data-source-${id}`}
     >
-      <Td className="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <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="min-w-32! max-w-0">
+      <Td className="max-w-0 min-w-32!">
         <div className="flex w-full items-center">
           <p className="truncate">{name}</p>
           {description && (
             <Tooltip content={description}>
-              <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-mineshaft-400 ml-1" />
+              <FontAwesomeIcon icon={faInfoCircle} size="xs" className="ml-1 text-mineshaft-400" />
             </Tooltip>
           )}
         </div>
@@ -141,7 +141,7 @@ export const SecretScanningDataSourceRow = ({
         {lastScanStatus?.match(/queued|scanning/) ? (
           <Badge
             variant="primary"
-            className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min animate-pulse items-center gap-1.5 whitespace-nowrap"
+            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
           >
             <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="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
                   <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 7b7cf58ba..380ac70bd 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-mineshaft-100 text-xl font-medium">Data Sources</p>
+              <p className="text-xl font-medium text-mineshaft-100">Data Sources</p>
               <a
                 href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <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">
+                <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">
                   <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                   <span>Docs</span>
                   <FontAwesomeIcon
@@ -57,7 +57,7 @@ export const SecretScanningDataSourcesSection = () => {
                 </div>
               </a>
             </div>
-            <p className="text-bunker-300 text-sm">
+            <p className="text-sm text-bunker-300">
               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 798791722..8e879acce 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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 61807be8f..1eddf5eee 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="bg-bunker-800 h-full">
-          <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+        <div className="h-full bg-bunker-800">
+          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 73045b841..579c4ee12 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(
-          "hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
+          "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         )}
         key={`resource-${id}`}
       >
@@ -102,7 +102,7 @@ export const SecretScanningFindingRow = ({
             }}
           />
         </Td>
-        <Td className="min-w-16! max-w-0">
+        <Td className="max-w-0 min-w-16!">
           <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="min-w-32! max-w-0">
+        <Td className="max-w-0 min-w-32!">
           <div className="w-full items-center">
             <p className="truncate">{resourceName}</p>
-            <p className="text-mineshaft-400 truncate text-xs">{dataSourceName}</p>
+            <p className="truncate text-xs text-mineshaft-400">{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={`bg-mineshaft-900/75 w-full overflow-hidden transition-all duration-500 ${
+            className={`w-full overflow-hidden bg-mineshaft-900/75 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="text-mineshaft-300 hover:text-mineshaft-100 cursor-pointer underline underline-offset-2"
+                  className="cursor-pointer text-mineshaft-300 underline underline-offset-2 hover:text-mineshaft-100"
                   href={details.link}
                 >
                   {details.link}
                 </a>
               </GenericFieldLabel>
-              <div className="border-mineshaft-500 col-span-full flex items-center border-t" />
+              <div className="col-span-full flex items-center border-t border-mineshaft-500" />
               <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 091d68cfb..d66dc46cb 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="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-1">
-            <p className="text-mineshaft-100 text-xl font-medium">Findings</p>
+            <p className="text-xl font-medium text-mineshaft-100">Findings</p>
             <a
               href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <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">
+              <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">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 <span>Docs</span>
                 <FontAwesomeIcon
@@ -40,7 +40,7 @@ export const SecretScanningFindingsSection = () => {
               </div>
             </a>
           </div>
-          <p className="text-bunker-300 text-sm">
+          <p className="text-sm text-bunker-300">
             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 4829556e1..d9ae0e433 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(
-                "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",
+                "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",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar 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="border-mineshaft-600 bg-mineshaft-800 mt-4 flex items-center justify-between rounded-lg border p-2 pl-4">
+        <div className="mt-4 flex items-center justify-between rounded-lg border border-mineshaft-600 bg-mineshaft-800 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 7ba2dcf66..11894db7e 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="border-mineshaft-500 w-full border capitalize"
+                className="w-full border border-mineshaft-500 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="resize-none! h-40" {...field} />
+              <TextArea className="h-40 resize-none!" {...field} />
             </FormControl>
           );
         }}
diff --git a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
index 237935e06..07161c360 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 699238313..b87b29b7c 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4">
         <div className="flex items-center gap-2">
-          <h2 className="text-mineshaft-100 text-xl font-medium">Project Configuration</h2>
+          <h2 className="text-xl font-medium text-mineshaft-100">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="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]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -78,7 +78,7 @@ export const SecretScanningConfigForm = ({ config }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 leading-5">
+        <p className="leading-5 text-mineshaft-400">
           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 resize-none! resize-y! w-full"
+                      className="min-h-144 thin-scrollbar w-full resize-none! resize-y!"
                       isDisabled={!isAllowed}
                     />
                   </FormControl>
diff --git a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
index ae7520d78..841bb119f 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="bg-bunker-800 flex h-full w-full justify-center text-white">
+    <div className="flex h-full w-full justify-center bg-bunker-800 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 83ecadb21..86bdf3c34 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 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 cd2160583..06567b121 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 73b5382c1..96ba2c493 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">SSH CA ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">SSH CA ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{ca.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Friendly Name</p>
-          <p className="text-mineshaft-300 text-sm">{ca.friendlyName}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Friendly Name</p>
+          <p className="text-sm text-mineshaft-300">{ca.friendlyName}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Status</p>
-          <p className="text-mineshaft-300 text-sm">{caStatusToNameMap[ca.status]}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
         </div>
         <div className="mb-4">
-          <p className="text-mineshaft-300 text-sm font-medium">Key Algorithm</p>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
+          <p className="text-sm text-mineshaft-300">
             {sshCertKeyAlgorithmToNameMap[ca.keyAlgorithm]}
           </p>
         </div>
         <div>
-          <p className="text-mineshaft-300 text-sm font-medium">Public Key</p>
+          <p className="text-sm font-medium text-mineshaft-300">Public Key</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 flex-1 text-sm">{ca.publicKey.substring(0, 20)}...</p>
+            <p className="flex-1 text-sm text-mineshaft-300">{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 83aff5730..9a7eaa58e 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 whitespace-pre-wrap break-all">{signedKey}</p>
+        <p className="mr-4 break-all whitespace-pre-wrap">{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 whitespace-pre-wrap break-all">{privateKey}</p>
+            <p className="mr-4 break-all whitespace-pre-wrap">{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 whitespace-pre-wrap break-all">{publicKey}</p>
+            <p className="mr-4 break-all whitespace-pre-wrap">{publicKey}</p>
           </div>
         </>
       )}
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx b/frontend/src/pages/ssh/SshCaByIDPage/components/SshCertificateTemplatesSection.tsx
index 05dfb8c4c..792c6ad3b 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="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>
+    <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>
         <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 476fd19bc..669e26404 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="bg-bunker-800 h-full">
-        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 46a47f043..b1d24e8f3 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Certificate Authorities</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 01a168cbb..c94f73664 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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 e1f793b34..617f480a3 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="bg-bunker-800 h-full">
-        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 914039432..a9bf71a84 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="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Certificates</p>
+        <p className="text-xl font-medium text-mineshaft-100">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 2cf985522..1605286a8 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="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 103a32407..a2d9c32c0 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="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>
+    <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>
         <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-mineshaft-300 text-sm font-medium">SSH Host Group ID</p>
+          <p className="text-sm font-medium text-mineshaft-300">SSH Host Group ID</p>
           <div className="group flex align-top">
-            <p className="text-mineshaft-300 text-sm">{sshHostGroup.id}</p>
+            <p className="text-sm text-mineshaft-300">{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-mineshaft-300 text-sm font-medium">Name</p>
-          <p className="text-mineshaft-300 text-sm">{sshHostGroup.name}</p>
+          <p className="text-sm font-medium text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{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 7520ce933..6bfad3205 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="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>
+    <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>
         <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 d140f972b..c6efa9670 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="bg-bunker-800 h-full">
-        <div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 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 84cbc1864..6e65dd532 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="border-mineshaft-600 flex flex-col space-y-2 rounded-md border p-4"
+                className="flex flex-col space-y-2 rounded-md border border-mineshaft-600 p-4"
               >
                 <div className="mb-2 flex items-center justify-between">
                   <button
                     type="button"
-                    className="text-mineshaft-200 flex cursor-pointer items-center py-1 text-sm"
+                    className="flex cursor-pointer items-center py-1 text-sm text-mineshaft-200"
                     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 font-medium leading-tight">
+                        <span className="text-sm leading-tight font-medium">
                           {field.value || "New Login Mapping"}
                         </span>
                       )}
@@ -290,7 +290,7 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                 {expandedMappings[i] && (
                   <>
                     <div>
-                      <span className="text-mineshaft-400 text-xs">Login User</span>
+                      <span className="text-xs text-mineshaft-400">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="mb-2 mt-4 flex items-center justify-between">
+                      <div className="mt-4 mb-2 flex items-center justify-between">
                         <FormLabel
                           label="Allowed Principals"
-                          className="text-mineshaft-400 text-xs"
+                          className="text-xs text-mineshaft-400"
                         />
                         <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 830c955e4..0d0bd8e50 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Host Groups</p>
+        <p className="text-xl font-medium text-mineshaft-100">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="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">
+            <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">
               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 2a2c8f579..b568b9fd1 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="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                     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-yellow/80 text-xs"
+                                    className="text-xs text-yellow/80"
                                   />
                                   <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-green/80 text-xs"
+                                    className="text-xs text-green/80"
                                   />
                                   <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 56fe604a9..e9b0d870a 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="border-mineshaft-600 flex flex-col space-y-2 rounded-md border p-4"
+                className="flex flex-col space-y-2 rounded-md border border-mineshaft-600 p-4"
               >
                 <div className="mb-2 flex items-center justify-between">
                   <button
                     type="button"
-                    className="text-mineshaft-200 flex cursor-pointer items-center py-1 text-sm"
+                    className="flex cursor-pointer items-center py-1 text-sm text-mineshaft-200"
                     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 font-medium leading-tight">
+                        <span className="text-sm leading-tight font-medium">
                           {field.value || "New Login Mapping"}
                           {loginMappingsFormFields.fields[i].source ===
                             LoginMappingSource.HOST_GROUP && (
-                            <span className="text-mineshaft-400 ml-2 text-xs">
+                            <span className="ml-2 text-xs text-mineshaft-400">
                               (inherited from host group)
                             </span>
                           )}
@@ -370,7 +370,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                 {expandedMappings[i] && (
                   <>
                     <div>
-                      <span className="text-mineshaft-400 text-xs">Login User</span>
+                      <span className="text-xs text-mineshaft-400">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="mb-2 mt-4 flex items-center justify-between">
+                      <div className="mt-4 mb-2 flex items-center justify-between">
                         <FormLabel
                           label="Allowed Principals"
-                          className="text-mineshaft-400 text-xs"
+                          className="text-xs text-mineshaft-400"
                         />
                         {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 b23416c38..0f57cbeb2 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">Hosts</p>
+        <p className="text-xl font-medium text-mineshaft-100">Hosts</p>
         <div className="flex justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://infisical.com/docs/documentation/platform/ssh"
           >
-            <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">
+            <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">
               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 6520c3df9..182ceebb2 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="text-mineshaft-400 ml-2 text-xs">
+                                    <span className="ml-2 text-xs text-mineshaft-400">
                                       (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-yellow/80 text-xs"
+                                        className="text-xs text-yellow/80"
                                       />
                                       <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-green/80 text-xs"
+                                        className="text-xs text-green/80"
                                       />
                                       <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 5006dc009..c2963494f 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="bg-bunker-800 h-full text-white">
+    <div className="h-full bg-bunker-800 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="bg-bunker-800 flex w-full justify-center px-6 text-white">
+      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
         <div className="w-full max-w-6xl">
-          <div className="mb-6 mt-6">
+          <div className="mt-6 mb-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 252028243..582da840a 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-8 flex justify-between">
-        <p className="text-mineshaft-100 text-xl font-medium">
+        <p className="text-xl font-medium text-mineshaft-100">
           {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 8fb0632c7..213479b47 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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <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">
             <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 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">
+              <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">
                 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 16da0405c..9996f2380 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="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>
+    <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>
       <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 a676d46f6..c9d457e44 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="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>
+      <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>
 
         <form onSubmit={emailForm.handleSubmit(handleEmailSubmit)}>
           <div className="max-w-md">
@@ -203,7 +203,7 @@ export const ChangeEmailSection = () => {
           >
             Send Verification Code
           </Button>
-          <p className="font-inter text-mineshaft-400 mt-2 text-sm">
+          <p className="mt-2 font-inter text-sm text-mineshaft-400">
             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 20370b002..552eab741 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Change password</h2>
+      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">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 text-red ml-0.5 mr-2.5" />
+                    <FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
                   </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="font-inter text-mineshaft-400 mt-2 text-sm">
+      <p className="mt-2 font-inter text-sm text-mineshaft-400">
         Need to setup a password?{" "}
         <button
           onClick={onSetupPassword}
           type="button"
-          className="hover:text-mineshaft-200 underline underline-offset-2"
+          className="underline underline-offset-2 hover:text-mineshaft-200"
         >
           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 deabb7c74..5761a772a 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="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="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>
       <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 8809811ed..ea8422a12 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="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="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">
             <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="text-primary-400 font-medium"
+                  className="font-medium text-primary-400"
                   rel="noreferrer"
                 >
                   here
@@ -51,7 +51,7 @@ export const PersonalTabGroup = () => {
                 <a
                   href="https://infisical.com/docs/documentation/platform/identities/overview"
                   target="_blank"
-                  className="text-primary-400 font-medium"
+                  className="font-medium text-primary-400"
                   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 4a83870be..ef29f3ff6 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+        className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
       >
-        <h2 className="text-mineshaft-100 mb-6 text-xl font-medium">Two-factor Authentication</h2>
+        <h2 className="mb-6 text-xl font-medium text-mineshaft-100">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="text-mineshaft-100 mb-6 text-lg font-medium">
+                <h3 className="mb-6 text-lg font-medium text-mineshaft-100">
                   Setup Mobile Authenticator
                 </h3>
 
                 <div className="mb-8">
-                  <h4 className="text-mineshaft-200 mb-2 text-sm font-medium">
+                  <h4 className="mb-2 text-sm font-medium text-mineshaft-200">
                     Step 1: Scan QR Code
                   </h4>
-                  <p className="text-mineshaft-300 mb-4 text-sm">
+                  <p className="mb-4 text-sm text-mineshaft-300">
                     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="text-mineshaft-400 mb-2 text-xs">
+                            <p className="mb-2 text-xs text-mineshaft-400">
                               Can&apos;t scan? Enter this code manually:{" "}
-                              <code className="bg-mineshaft-700 text-mineshaft-100 rounded-sm px-3 py-1 font-mono text-sm">
+                              <code className="rounded-sm bg-mineshaft-700 px-3 py-1 font-mono text-sm text-mineshaft-100">
                                 {totpRegistration.otpUrl.split("secret=")[1]?.split("&")[0] ||
                                   "Loading..."}
                               </code>
@@ -379,10 +379,10 @@ export const MFASection = () => {
                 </div>
 
                 <div>
-                  <h4 className="text-mineshaft-200 mb-2 text-sm font-medium">
+                  <h4 className="mb-2 text-sm font-medium text-mineshaft-200">
                     Step 2: Enter verification code
                   </h4>
-                  <p className="text-mineshaft-300 mb-4 text-sm">
+                  <p className="mb-4 text-sm text-mineshaft-300">
                     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="border-mineshaft-600 mt-8 border-t pt-6">
-                <h3 className="text-mineshaft-100 mb-4 text-lg font-medium">
+              <div className="mt-8 border-t border-mineshaft-600 pt-6">
+                <h3 className="mb-4 text-lg font-medium text-mineshaft-100">
                   Mobile Authenticator Management
                 </h3>
 
@@ -476,11 +476,11 @@ export const MFASection = () => {
                   </div>
 
                   {shouldShowRecoveryCodes && (
-                    <div className="border-mineshaft-600 bg-mineshaft-800 w-fit rounded-lg border p-4 pr-8">
+                    <div className="w-fit rounded-lg border border-mineshaft-600 bg-mineshaft-800 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="text-mineshaft-200 flex items-center">
-                            <span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
+                          <div key={code} className="flex items-center text-mineshaft-200">
+                            <span className="w-8 text-right text-mineshaft-400">{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 1ba14f83b..08cf20df8 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-8 flex justify-between">
-        <h2 className="text-mineshaft-100 flex-1 text-xl font-medium">Sessions</h2>
+        <h2 className="flex-1 text-xl font-medium text-mineshaft-100">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 5e6310ae2..df0dae9cb 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="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <p className="text-mineshaft-100 mb-4 text-xl font-medium">Name</p>
+      <p className="mb-4 text-xl font-medium text-mineshaft-100">Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""